@matechat/ng 20.2.0 → 20.2.1-alpha
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/fesm2022/matechat-ng.mjs +2646 -146
- package/fesm2022/matechat-ng.mjs.map +1 -1
- package/index.d.ts +684 -43
- package/package.json +1 -1
package/fesm2022/matechat-ng.mjs
CHANGED
|
@@ -1,57 +1,18 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { Injectable, Pipe, EventEmitter, ViewChild, Output, Input, Component, ContentChild, NgModule, ContentChildren, HostListener, ViewChildren, ViewContainerRef, forwardRef, TemplateRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { Subject, debounceTime } from 'rxjs';
|
|
6
6
|
import * as i3 from '@angular/forms';
|
|
7
|
-
import { FormsModule } from '@angular/forms';
|
|
7
|
+
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
8
8
|
import morphdom from 'morphdom';
|
|
9
9
|
import markdownit from 'markdown-it';
|
|
10
10
|
import { getDefaultWhiteList, getDefaultCSSWhiteList, filterXSS } from 'xss';
|
|
11
11
|
import hljs from 'highlight.js';
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BubbleLoadingComponent, decorators: [{
|
|
18
|
-
type: Component,
|
|
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"] }]
|
|
20
|
-
}] });
|
|
21
|
-
|
|
22
|
-
class AvatarBodyIconComponent {
|
|
23
|
-
constructor() {
|
|
24
|
-
this.width = 16;
|
|
25
|
-
this.height = 16;
|
|
26
|
-
}
|
|
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: [""] }); }
|
|
29
|
-
}
|
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AvatarBodyIconComponent, decorators: [{
|
|
31
|
-
type: Component,
|
|
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>" }]
|
|
33
|
-
}], propDecorators: { width: [{
|
|
34
|
-
type: Input
|
|
35
|
-
}], height: [{
|
|
36
|
-
type: Input
|
|
37
|
-
}] } });
|
|
38
|
-
|
|
39
|
-
class AvatarNoBodyIconComponent {
|
|
40
|
-
constructor() {
|
|
41
|
-
this.width = 16;
|
|
42
|
-
this.height = 16;
|
|
43
|
-
}
|
|
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: [""] }); }
|
|
46
|
-
}
|
|
47
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AvatarNoBodyIconComponent, decorators: [{
|
|
48
|
-
type: Component,
|
|
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>" }]
|
|
50
|
-
}], propDecorators: { width: [{
|
|
51
|
-
type: Input
|
|
52
|
-
}], height: [{
|
|
53
|
-
type: Input
|
|
54
|
-
}] } });
|
|
12
|
+
import { trigger, transition, style, animate } from '@angular/animations';
|
|
13
|
+
import { computePosition, offset, autoUpdate } from '@floating-ui/dom';
|
|
14
|
+
import { debounce, isObject } from 'lodash-es';
|
|
15
|
+
import { PromptFoundation } from '@matechat/common/Prompt/foundation';
|
|
55
16
|
|
|
56
17
|
var zhCN = {
|
|
57
18
|
Input: {
|
|
@@ -77,6 +38,9 @@ var zhCN = {
|
|
|
77
38
|
content: "消息内容",
|
|
78
39
|
avatar: "用户头像: {name}"
|
|
79
40
|
},
|
|
41
|
+
Attachment: {
|
|
42
|
+
dragToUpload: "拖拽到此处上传",
|
|
43
|
+
},
|
|
80
44
|
};
|
|
81
45
|
|
|
82
46
|
var enUS = {
|
|
@@ -103,6 +67,9 @@ var enUS = {
|
|
|
103
67
|
content: "Message content",
|
|
104
68
|
avatar: "User avatar: {name}"
|
|
105
69
|
},
|
|
70
|
+
Attachment: {
|
|
71
|
+
dragToUpload: 'Drag to upload',
|
|
72
|
+
},
|
|
106
73
|
};
|
|
107
74
|
|
|
108
75
|
class LocaleService {
|
|
@@ -275,6 +242,429 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
275
242
|
type: Injectable
|
|
276
243
|
}], ctorParameters: () => [{ type: LocaleService }] });
|
|
277
244
|
|
|
245
|
+
function upload(config) {
|
|
246
|
+
const { file, options, onProgress, onSuccess, onError } = config;
|
|
247
|
+
const xhr = new XMLHttpRequest();
|
|
248
|
+
// 进度回调
|
|
249
|
+
xhr.upload.onprogress = (e) => {
|
|
250
|
+
if (e.lengthComputable) {
|
|
251
|
+
const percentage = Math.round((e.loaded * 100) / e.total);
|
|
252
|
+
onProgress(percentage);
|
|
253
|
+
}
|
|
254
|
+
};
|
|
255
|
+
// 错误处理
|
|
256
|
+
xhr.onerror = () => {
|
|
257
|
+
onError({
|
|
258
|
+
message: 'Upload failed due to a network error.',
|
|
259
|
+
status: xhr.status,
|
|
260
|
+
statusText: xhr.statusText,
|
|
261
|
+
});
|
|
262
|
+
};
|
|
263
|
+
// 响应处理
|
|
264
|
+
xhr.onload = () => {
|
|
265
|
+
if (xhr.status >= 200 && xhr.status < 300) {
|
|
266
|
+
const response = options.responseType === 'text' || !xhr.response
|
|
267
|
+
? xhr.responseText
|
|
268
|
+
: xhr.response;
|
|
269
|
+
onSuccess(response);
|
|
270
|
+
}
|
|
271
|
+
else {
|
|
272
|
+
onError({
|
|
273
|
+
message: `Upload failed with status: ${xhr.status}`,
|
|
274
|
+
status: xhr.status,
|
|
275
|
+
statusText: xhr.statusText,
|
|
276
|
+
response: xhr.response,
|
|
277
|
+
});
|
|
278
|
+
}
|
|
279
|
+
};
|
|
280
|
+
// 准备 FormData
|
|
281
|
+
const formData = new FormData();
|
|
282
|
+
const fileFieldName = options.fileFieldName || 'file';
|
|
283
|
+
formData.append(fileFieldName, file, file.name);
|
|
284
|
+
if (options.additionalParameter) {
|
|
285
|
+
for (const key of Object.keys(options.additionalParameter)) {
|
|
286
|
+
formData.append(key, options.additionalParameter[key]);
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
// 打开请求
|
|
290
|
+
xhr.open(options.method || 'POST', options.uri, true);
|
|
291
|
+
// 设置 withCredentials
|
|
292
|
+
if (options.withCredentials) {
|
|
293
|
+
xhr.withCredentials = true;
|
|
294
|
+
}
|
|
295
|
+
// 设置 responseType
|
|
296
|
+
if (options.responseType) {
|
|
297
|
+
xhr.responseType = options.responseType;
|
|
298
|
+
}
|
|
299
|
+
// 设置 Headers
|
|
300
|
+
if (options.headers) {
|
|
301
|
+
for (const key of Object.keys(options.headers)) {
|
|
302
|
+
xhr.setRequestHeader(key, options.headers[key]);
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
// 设置认证 Token
|
|
306
|
+
if (options.authToken) {
|
|
307
|
+
const authTokenHeader = options.authTokenHeader || 'Authorization';
|
|
308
|
+
xhr.setRequestHeader(authTokenHeader, options.authToken);
|
|
309
|
+
}
|
|
310
|
+
// 发送请求
|
|
311
|
+
xhr.send(formData);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
class DropAreaComponent {
|
|
315
|
+
constructor() {
|
|
316
|
+
this.isDisabled = false;
|
|
317
|
+
this.drop = new EventEmitter();
|
|
318
|
+
this.isDragging = false;
|
|
319
|
+
// 使用计数器来跟踪 dragenter 和 dragleave 事件，防止进入子元素导致的状态变化
|
|
320
|
+
this.dragCounter = 0;
|
|
321
|
+
this.handleDragEnter = (e) => {
|
|
322
|
+
e.preventDefault();
|
|
323
|
+
this.dragCounter++;
|
|
324
|
+
if (this.dragCounter === 1) {
|
|
325
|
+
this.isDragging = true;
|
|
326
|
+
}
|
|
327
|
+
if (this.container && this.dropAreaEl.nativeElement) {
|
|
328
|
+
if (this.container === document.body) {
|
|
329
|
+
this.dropAreaEl.nativeElement.style.inset = '0';
|
|
330
|
+
}
|
|
331
|
+
else {
|
|
332
|
+
const { x, y, width, height } = this.container.getBoundingClientRect();
|
|
333
|
+
this.dropAreaEl.nativeElement.style.width = `${width}px`;
|
|
334
|
+
this.dropAreaEl.nativeElement.style.height = `${height}px`;
|
|
335
|
+
this.dropAreaEl.nativeElement.style.top = `${y}px`;
|
|
336
|
+
this.dropAreaEl.nativeElement.style.left = `${x}px`;
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
};
|
|
340
|
+
this.handleDragOver = (e) => {
|
|
341
|
+
e.preventDefault();
|
|
342
|
+
};
|
|
343
|
+
this.handleDragLeave = (e) => {
|
|
344
|
+
e.preventDefault();
|
|
345
|
+
this.dragCounter--;
|
|
346
|
+
if (this.dragCounter === 0) {
|
|
347
|
+
this.isDragging = false;
|
|
348
|
+
}
|
|
349
|
+
};
|
|
350
|
+
this.handleDrop = (e) => {
|
|
351
|
+
e.preventDefault();
|
|
352
|
+
this.isDragging = false;
|
|
353
|
+
this.dragCounter = 0; // 重置计数器
|
|
354
|
+
if (this.isDisabled)
|
|
355
|
+
return;
|
|
356
|
+
const files = Array.from(e.dataTransfer?.files || []);
|
|
357
|
+
if (files.length > 0) {
|
|
358
|
+
this.drop.emit(files);
|
|
359
|
+
}
|
|
360
|
+
};
|
|
361
|
+
this.onBodyDrop = (e) => {
|
|
362
|
+
e.preventDefault();
|
|
363
|
+
this.isDragging = false;
|
|
364
|
+
this.dragCounter = 0;
|
|
365
|
+
};
|
|
366
|
+
}
|
|
367
|
+
get dropAreaClasses() {
|
|
368
|
+
return {
|
|
369
|
+
'mc-attachment-drop-area': true,
|
|
370
|
+
'hide-drop-area': !this.isDragging,
|
|
371
|
+
};
|
|
372
|
+
}
|
|
373
|
+
ngOnChanges(changes) {
|
|
374
|
+
if (changes['getDropContainer'] && this.getDropContainer) {
|
|
375
|
+
const newContainer = this.getDropContainer();
|
|
376
|
+
if (this.container !== newContainer) {
|
|
377
|
+
this.container = newContainer;
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
ngAfterViewInit() {
|
|
382
|
+
document.body.appendChild(this.dropAreaEl.nativeElement);
|
|
383
|
+
if (this.getDropContainer) {
|
|
384
|
+
this.container = this.getDropContainer();
|
|
385
|
+
}
|
|
386
|
+
document.body.addEventListener('dragenter', this.handleDragEnter);
|
|
387
|
+
document.body.addEventListener('dragover', this.handleDragOver);
|
|
388
|
+
document.body.addEventListener('dragleave', this.handleDragLeave);
|
|
389
|
+
document.body.addEventListener('drop', this.onBodyDrop);
|
|
390
|
+
}
|
|
391
|
+
ngOnDestroy() {
|
|
392
|
+
document.body.removeEventListener('dragenter', this.handleDragEnter);
|
|
393
|
+
document.body.removeEventListener('dragover', this.handleDragOver);
|
|
394
|
+
document.body.removeEventListener('dragleave', this.handleDragLeave);
|
|
395
|
+
document.body.removeEventListener('drop', this.onBodyDrop);
|
|
396
|
+
}
|
|
397
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DropAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
398
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DropAreaComponent, isStandalone: true, selector: "mc-drop-area", inputs: { getDropContainer: "getDropContainer", isDisabled: "isDisabled" }, outputs: { drop: "drop" }, viewQueries: [{ propertyName: "dropAreaEl", first: true, predicate: ["dropArea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropArea [ngClass]=\"dropAreaClasses\" (drop)=\"handleDrop($event)\">\n <ng-content />\n</div>\n", styles: [".mc-attachment-drop-area{position:fixed;padding:20px 40px;display:flex;justify-content:center;align-items:center;border:2px dashed var(--devui-brand, #5e7ce0);border-radius:var(--devui-border-radius, 2px);color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px);font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;box-sizing:border-box}.mc-attachment-drop-area.hide-drop-area{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
399
|
+
}
|
|
400
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DropAreaComponent, decorators: [{
|
|
401
|
+
type: Component,
|
|
402
|
+
args: [{ selector: 'mc-drop-area', standalone: true, imports: [CommonModule], template: "<div #dropArea [ngClass]=\"dropAreaClasses\" (drop)=\"handleDrop($event)\">\n <ng-content />\n</div>\n", styles: [".mc-attachment-drop-area{position:fixed;padding:20px 40px;display:flex;justify-content:center;align-items:center;border:2px dashed var(--devui-brand, #5e7ce0);border-radius:var(--devui-border-radius, 2px);color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 12px);font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;box-sizing:border-box}.mc-attachment-drop-area.hide-drop-area{display:none}\n"] }]
|
|
403
|
+
}], propDecorators: { getDropContainer: [{
|
|
404
|
+
type: Input
|
|
405
|
+
}], isDisabled: [{
|
|
406
|
+
type: Input
|
|
407
|
+
}], drop: [{
|
|
408
|
+
type: Output
|
|
409
|
+
}], dropAreaEl: [{
|
|
410
|
+
type: ViewChild,
|
|
411
|
+
args: ['dropArea']
|
|
412
|
+
}] } });
|
|
413
|
+
|
|
414
|
+
class AttachmentComponent {
|
|
415
|
+
constructor() {
|
|
416
|
+
this.uploadOptions = { uri: '' };
|
|
417
|
+
this.disabled = false;
|
|
418
|
+
this.accept = '';
|
|
419
|
+
this.maxCount = Number.POSITIVE_INFINITY;
|
|
420
|
+
this.maxSize = Number.POSITIVE_INFINITY;
|
|
421
|
+
this.multiple = true;
|
|
422
|
+
this.draggable = true;
|
|
423
|
+
this.change = new EventEmitter();
|
|
424
|
+
this.success = new EventEmitter();
|
|
425
|
+
this.error = new EventEmitter();
|
|
426
|
+
this.progress = new EventEmitter();
|
|
427
|
+
this.drop = new EventEmitter();
|
|
428
|
+
this.validChange = new EventEmitter();
|
|
429
|
+
this.dropPlaceholderTemplate = null;
|
|
430
|
+
this.fileList = [];
|
|
431
|
+
this.uid = Date.now();
|
|
432
|
+
this.getFileItem = (file) => {
|
|
433
|
+
const localUrl = URL.createObjectURL(file);
|
|
434
|
+
return {
|
|
435
|
+
uid: this.uid++,
|
|
436
|
+
name: file.name,
|
|
437
|
+
size: file.size,
|
|
438
|
+
type: file.type,
|
|
439
|
+
status: 'uploading',
|
|
440
|
+
percentage: 0,
|
|
441
|
+
url: localUrl,
|
|
442
|
+
thumbUrl: localUrl,
|
|
443
|
+
};
|
|
444
|
+
};
|
|
445
|
+
this.uploadFiles = async (files) => {
|
|
446
|
+
if (files.length === 0)
|
|
447
|
+
return;
|
|
448
|
+
// 检查文件数量限制
|
|
449
|
+
if (this.fileList.length + files.length > this.maxCount) {
|
|
450
|
+
this.validChange.emit([{ type: 'exceedCount' }]);
|
|
451
|
+
return;
|
|
452
|
+
}
|
|
453
|
+
const validFiles = [];
|
|
454
|
+
const validRes = [];
|
|
455
|
+
// 2. 遍历并校验每个文件
|
|
456
|
+
for (const file of files) {
|
|
457
|
+
let isFileValid = true;
|
|
458
|
+
// 2.1 文件类型校验
|
|
459
|
+
if (this.accept && this.accept !== '*') {
|
|
460
|
+
const acceptedTypes = this.accept
|
|
461
|
+
.split(',')
|
|
462
|
+
.map((t) => t.trim().toLowerCase());
|
|
463
|
+
const fileType = file.type.toLowerCase();
|
|
464
|
+
const fileName = file.name.toLowerCase();
|
|
465
|
+
const isTypeValid = acceptedTypes.some((type) => {
|
|
466
|
+
if (type.endsWith('/*'))
|
|
467
|
+
return fileType.startsWith(type.slice(0, -1));
|
|
468
|
+
if (type.startsWith('.'))
|
|
469
|
+
return fileName.endsWith(type);
|
|
470
|
+
return fileType === type;
|
|
471
|
+
});
|
|
472
|
+
if (!isTypeValid) {
|
|
473
|
+
validRes.push({ type: 'unsupportedFileType', file });
|
|
474
|
+
isFileValid = false;
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
// 2.2 文件大小校验
|
|
478
|
+
if (isFileValid && file.size / 1024 / 1024 > this.maxSize) {
|
|
479
|
+
validRes.push({ type: 'exceedSizeLimit', file });
|
|
480
|
+
isFileValid = false;
|
|
481
|
+
}
|
|
482
|
+
// 2.3 上传前钩子校验
|
|
483
|
+
if (isFileValid && this.beforeUpload) {
|
|
484
|
+
try {
|
|
485
|
+
const result = await Promise.resolve(this.beforeUpload(file));
|
|
486
|
+
if (result === false) {
|
|
487
|
+
validRes.push({ type: 'beforeUploadRejected', file });
|
|
488
|
+
isFileValid = false;
|
|
489
|
+
}
|
|
490
|
+
}
|
|
491
|
+
catch (e) {
|
|
492
|
+
validRes.push({ type: 'beforeUploadRejected', file });
|
|
493
|
+
isFileValid = false;
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
if (isFileValid) {
|
|
497
|
+
validFiles.push(file);
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
if (validRes.length > 0) {
|
|
501
|
+
this.validChange.emit(validRes);
|
|
502
|
+
}
|
|
503
|
+
// 只处理通过所有校验的有效文件
|
|
504
|
+
if (validFiles.length === 0)
|
|
505
|
+
return;
|
|
506
|
+
for (const file of validFiles) {
|
|
507
|
+
const fileItem = this.getFileItem(file);
|
|
508
|
+
this.fileList.push(fileItem);
|
|
509
|
+
this.change.emit({ file, fileList: [...this.fileList] });
|
|
510
|
+
this.performUpload(file, fileItem);
|
|
511
|
+
}
|
|
512
|
+
};
|
|
513
|
+
// 执行上传
|
|
514
|
+
this.performUpload = (file, fileItem) => {
|
|
515
|
+
const findFileIndex = () => this.fileList.findIndex((item) => item.uid === fileItem.uid);
|
|
516
|
+
upload({
|
|
517
|
+
file,
|
|
518
|
+
fileItem,
|
|
519
|
+
options: this.uploadOptions,
|
|
520
|
+
onProgress: (percentage) => {
|
|
521
|
+
const index = findFileIndex();
|
|
522
|
+
if (index > -1) {
|
|
523
|
+
this.fileList[index].percentage = percentage;
|
|
524
|
+
this.progress.emit({ file, fileList: [...this.fileList] });
|
|
525
|
+
}
|
|
526
|
+
},
|
|
527
|
+
onSuccess: (response) => {
|
|
528
|
+
const index = findFileIndex();
|
|
529
|
+
if (index > -1) {
|
|
530
|
+
this.fileList[index].status = 'success';
|
|
531
|
+
this.fileList[index].response = response;
|
|
532
|
+
this.success.emit({ file, response, fileList: [...this.fileList] });
|
|
533
|
+
}
|
|
534
|
+
},
|
|
535
|
+
onError: (error) => {
|
|
536
|
+
const index = findFileIndex();
|
|
537
|
+
if (index > -1) {
|
|
538
|
+
this.fileList[index].status = 'uploadError';
|
|
539
|
+
this.fileList[index].error = error;
|
|
540
|
+
this.error.emit({ file, error, fileList: [...this.fileList] });
|
|
541
|
+
}
|
|
542
|
+
},
|
|
543
|
+
});
|
|
544
|
+
};
|
|
545
|
+
this.handleFileChange = (e) => {
|
|
546
|
+
const files = e.target.files;
|
|
547
|
+
if (files) {
|
|
548
|
+
this.uploadFiles(Array.from(files));
|
|
549
|
+
}
|
|
550
|
+
};
|
|
551
|
+
}
|
|
552
|
+
get isDisabled() {
|
|
553
|
+
return this.disabled || this.fileList.length >= this.maxCount;
|
|
554
|
+
}
|
|
555
|
+
onDrop(e) {
|
|
556
|
+
this.uploadFiles(e);
|
|
557
|
+
this.drop.emit(e);
|
|
558
|
+
}
|
|
559
|
+
handleClick() {
|
|
560
|
+
if (this.isDisabled) {
|
|
561
|
+
return;
|
|
562
|
+
}
|
|
563
|
+
this.inputEl.nativeElement.click();
|
|
564
|
+
}
|
|
565
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
566
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AttachmentComponent, isStandalone: true, selector: "mc-attachment", inputs: { uploadOptions: "uploadOptions", disabled: "disabled", accept: "accept", dropPlaceholder: "dropPlaceholder", maxCount: "maxCount", maxSize: "maxSize", multiple: "multiple", draggable: "draggable", beforeUpload: "beforeUpload", getDropContainer: "getDropContainer" }, outputs: { change: "change", success: "success", error: "error", progress: "progress", drop: "drop", validChange: "validChange" }, queries: [{ propertyName: "dropPlaceholderTemplate", first: true, predicate: ["dropPlaceholder"], descendants: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div\n class=\"mc-attachment\"\n (click)=\"handleClick()\"\n [ngClass]=\"{ 'is-disabled': isDisabled }\"\n>\n <ng-content></ng-content>\n <input\n #input\n type=\"file\"\n class=\"mc-attachment-file\"\n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"isDisabled\"\n (change)=\"handleFileChange($event)\"\n />\n <mc-drop-area\n *ngIf=\"draggable\"\n [getDropContainer]=\"getDropContainer\"\n [isDisabled]=\"isDisabled\"\n (drop)=\"onDrop($event)\"\n >\n <ng-container *ngIf=\"dropPlaceholderTemplate; else defaultFooterButton\">\n <ng-container\n *ngIf=\"dropPlaceholderTemplate; then dropPlaceholderTemplate\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultFooterButton>\n {{ dropPlaceholder ?? (\"Attachment.dragToUpload\" | translate) }}\n </ng-template>\n </mc-drop-area>\n</div>\n", styles: [".mc-attachment{display:inline-block;cursor:pointer;position:relative}.mc-attachment .mc-attachment-file{display:none}\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: "component", type: DropAreaComponent, selector: "mc-drop-area", inputs: ["getDropContainer", "isDisabled"], outputs: ["drop"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
567
|
+
}
|
|
568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AttachmentComponent, decorators: [{
|
|
569
|
+
type: Component,
|
|
570
|
+
args: [{ selector: 'mc-attachment', standalone: true, imports: [CommonModule, TranslatePipe, DropAreaComponent], template: "<div\n class=\"mc-attachment\"\n (click)=\"handleClick()\"\n [ngClass]=\"{ 'is-disabled': isDisabled }\"\n>\n <ng-content></ng-content>\n <input\n #input\n type=\"file\"\n class=\"mc-attachment-file\"\n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"isDisabled\"\n (change)=\"handleFileChange($event)\"\n />\n <mc-drop-area\n *ngIf=\"draggable\"\n [getDropContainer]=\"getDropContainer\"\n [isDisabled]=\"isDisabled\"\n (drop)=\"onDrop($event)\"\n >\n <ng-container *ngIf=\"dropPlaceholderTemplate; else defaultFooterButton\">\n <ng-container\n *ngIf=\"dropPlaceholderTemplate; then dropPlaceholderTemplate\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultFooterButton>\n {{ dropPlaceholder ?? (\"Attachment.dragToUpload\" | translate) }}\n </ng-template>\n </mc-drop-area>\n</div>\n", styles: [".mc-attachment{display:inline-block;cursor:pointer;position:relative}.mc-attachment .mc-attachment-file{display:none}\n"] }]
|
|
571
|
+
}], propDecorators: { uploadOptions: [{
|
|
572
|
+
type: Input
|
|
573
|
+
}], disabled: [{
|
|
574
|
+
type: Input
|
|
575
|
+
}], accept: [{
|
|
576
|
+
type: Input
|
|
577
|
+
}], dropPlaceholder: [{
|
|
578
|
+
type: Input
|
|
579
|
+
}], maxCount: [{
|
|
580
|
+
type: Input
|
|
581
|
+
}], maxSize: [{
|
|
582
|
+
type: Input
|
|
583
|
+
}], multiple: [{
|
|
584
|
+
type: Input
|
|
585
|
+
}], draggable: [{
|
|
586
|
+
type: Input
|
|
587
|
+
}], beforeUpload: [{
|
|
588
|
+
type: Input
|
|
589
|
+
}], getDropContainer: [{
|
|
590
|
+
type: Input
|
|
591
|
+
}], change: [{
|
|
592
|
+
type: Output
|
|
593
|
+
}], success: [{
|
|
594
|
+
type: Output
|
|
595
|
+
}], error: [{
|
|
596
|
+
type: Output
|
|
597
|
+
}], progress: [{
|
|
598
|
+
type: Output
|
|
599
|
+
}], drop: [{
|
|
600
|
+
type: Output
|
|
601
|
+
}], validChange: [{
|
|
602
|
+
type: Output
|
|
603
|
+
}], dropPlaceholderTemplate: [{
|
|
604
|
+
type: ContentChild,
|
|
605
|
+
args: ['dropPlaceholder']
|
|
606
|
+
}], inputEl: [{
|
|
607
|
+
type: ViewChild,
|
|
608
|
+
args: ['input']
|
|
609
|
+
}] } });
|
|
610
|
+
|
|
611
|
+
class AttachmentModule {
|
|
612
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AttachmentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
613
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: AttachmentModule, imports: [CommonModule, DropAreaComponent, AttachmentComponent], exports: [AttachmentComponent] }); }
|
|
614
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AttachmentModule, imports: [CommonModule, DropAreaComponent, AttachmentComponent] }); }
|
|
615
|
+
}
|
|
616
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AttachmentModule, decorators: [{
|
|
617
|
+
type: NgModule,
|
|
618
|
+
args: [{
|
|
619
|
+
declarations: [],
|
|
620
|
+
imports: [CommonModule, DropAreaComponent, AttachmentComponent],
|
|
621
|
+
exports: [AttachmentComponent],
|
|
622
|
+
}]
|
|
623
|
+
}] });
|
|
624
|
+
|
|
625
|
+
class BubbleLoadingComponent {
|
|
626
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BubbleLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
627
|
+
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"] }); }
|
|
628
|
+
}
|
|
629
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BubbleLoadingComponent, decorators: [{
|
|
630
|
+
type: Component,
|
|
631
|
+
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"] }]
|
|
632
|
+
}] });
|
|
633
|
+
|
|
634
|
+
class AvatarBodyIconComponent {
|
|
635
|
+
constructor() {
|
|
636
|
+
this.width = 16;
|
|
637
|
+
this.height = 16;
|
|
638
|
+
}
|
|
639
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AvatarBodyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
640
|
+
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: [""] }); }
|
|
641
|
+
}
|
|
642
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AvatarBodyIconComponent, decorators: [{
|
|
643
|
+
type: Component,
|
|
644
|
+
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>" }]
|
|
645
|
+
}], propDecorators: { width: [{
|
|
646
|
+
type: Input
|
|
647
|
+
}], height: [{
|
|
648
|
+
type: Input
|
|
649
|
+
}] } });
|
|
650
|
+
|
|
651
|
+
class AvatarNoBodyIconComponent {
|
|
652
|
+
constructor() {
|
|
653
|
+
this.width = 16;
|
|
654
|
+
this.height = 16;
|
|
655
|
+
}
|
|
656
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AvatarNoBodyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
657
|
+
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: [""] }); }
|
|
658
|
+
}
|
|
659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AvatarNoBodyIconComponent, decorators: [{
|
|
660
|
+
type: Component,
|
|
661
|
+
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>" }]
|
|
662
|
+
}], propDecorators: { width: [{
|
|
663
|
+
type: Input
|
|
664
|
+
}], height: [{
|
|
665
|
+
type: Input
|
|
666
|
+
}] } });
|
|
667
|
+
|
|
278
668
|
class AvatarComponent {
|
|
279
669
|
constructor() {
|
|
280
670
|
this.imgSrc = '';
|
|
@@ -577,11 +967,11 @@ class BubbleComponent extends BaseComponent {
|
|
|
577
967
|
}
|
|
578
968
|
;
|
|
579
969
|
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" }] }); }
|
|
970
|
+
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;word-break:break-all}.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" }] }); }
|
|
581
971
|
}
|
|
582
972
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BubbleComponent, decorators: [{
|
|
583
973
|
type: Component,
|
|
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"] }]
|
|
974
|
+
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;word-break:break-all}.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"] }]
|
|
585
975
|
}], ctorParameters: () => [], propDecorators: { content: [{
|
|
586
976
|
type: Input
|
|
587
977
|
}], loading: [{
|
|
@@ -641,13 +1031,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
641
1031
|
}]
|
|
642
1032
|
}] });
|
|
643
1033
|
|
|
644
|
-
class
|
|
645
|
-
|
|
646
|
-
|
|
1034
|
+
class HeaderComponent {
|
|
1035
|
+
constructor() {
|
|
1036
|
+
this.logoImg = '';
|
|
1037
|
+
this.title = '';
|
|
1038
|
+
this.logoClickable = false;
|
|
1039
|
+
this.logoClicked = new EventEmitter();
|
|
1040
|
+
}
|
|
1041
|
+
onLogoClicked() {
|
|
1042
|
+
if (this.logoClickable) {
|
|
1043
|
+
this.logoClicked.emit();
|
|
1044
|
+
}
|
|
1045
|
+
}
|
|
1046
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1047
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: HeaderComponent, isStandalone: true, selector: "mc-header", inputs: { logoImg: "logoImg", title: "title", logoClickable: "logoClickable" }, outputs: { logoClicked: "logoClicked" }, ngImport: i0, template: "<div class=\"mc-header\">\n <div class=\"mc-header-logo-container\" [class]=\"{ clickable: logoClickable }\" (click)=\"onLogoClicked()\">\n <img *ngIf=\"logoImg\" class=\"mc-header-logo\" [src]=\"logoImg\" [alt]=\"logoImg\" />\n <div class=\"mc-header-title\">{{ title }}</div>\n </div>\n <div class=\"mc-header-operation\">\n <ng-content select=\"[operationArea]\"></ng-content>\n </div>\n</div>\n", styles: [".mc-header{display:flex;justify-content:space-between;align-items:center}.mc-header .mc-header-logo-container{display:flex;align-items:center;gap:4px}.mc-header .mc-header-logo-container.clickable{cursor:pointer}.mc-header .mc-header-logo-container .mc-header-title{letter-spacing:1px;font-weight:500;font-size:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
647
1048
|
}
|
|
648
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type:
|
|
1049
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
649
1050
|
type: Component,
|
|
650
|
-
args: [{ selector: 'mc-
|
|
1051
|
+
args: [{ selector: 'mc-header', standalone: true, imports: [CommonModule], template: "<div class=\"mc-header\">\n <div class=\"mc-header-logo-container\" [class]=\"{ clickable: logoClickable }\" (click)=\"onLogoClicked()\">\n <img *ngIf=\"logoImg\" class=\"mc-header-logo\" [src]=\"logoImg\" [alt]=\"logoImg\" />\n <div class=\"mc-header-title\">{{ title }}</div>\n </div>\n <div class=\"mc-header-operation\">\n <ng-content select=\"[operationArea]\"></ng-content>\n </div>\n</div>\n", styles: [".mc-header{display:flex;justify-content:space-between;align-items:center}.mc-header .mc-header-logo-container{display:flex;align-items:center;gap:4px}.mc-header .mc-header-logo-container.clickable{cursor:pointer}.mc-header .mc-header-logo-container .mc-header-title{letter-spacing:1px;font-weight:500;font-size:20px}\n"] }]
|
|
1052
|
+
}], propDecorators: { logoImg: [{
|
|
1053
|
+
type: Input
|
|
1054
|
+
}], title: [{
|
|
1055
|
+
type: Input
|
|
1056
|
+
}], logoClickable: [{
|
|
1057
|
+
type: Input
|
|
1058
|
+
}], logoClicked: [{
|
|
1059
|
+
type: Output
|
|
1060
|
+
}] } });
|
|
1061
|
+
|
|
1062
|
+
class HeaderModule {
|
|
1063
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1064
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: HeaderModule, imports: [CommonModule, HeaderComponent], exports: [HeaderComponent] }); }
|
|
1065
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: HeaderModule, imports: [CommonModule, HeaderComponent] }); }
|
|
1066
|
+
}
|
|
1067
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: HeaderModule, decorators: [{
|
|
1068
|
+
type: NgModule,
|
|
1069
|
+
args: [{
|
|
1070
|
+
declarations: [],
|
|
1071
|
+
imports: [CommonModule, HeaderComponent],
|
|
1072
|
+
exports: [HeaderComponent],
|
|
1073
|
+
}]
|
|
651
1074
|
}] });
|
|
652
1075
|
|
|
653
1076
|
var DisplayType;
|
|
@@ -670,6 +1093,16 @@ var SubmitShortKey;
|
|
|
670
1093
|
SubmitShortKey["Enter"] = "enter";
|
|
671
1094
|
SubmitShortKey["ShiftEnter"] = "shiftEnter";
|
|
672
1095
|
})(SubmitShortKey || (SubmitShortKey = {}));
|
|
1096
|
+
const TimeToViewRender = 50;
|
|
1097
|
+
|
|
1098
|
+
class SendIconComponent {
|
|
1099
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SendIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1100
|
+
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"] }); }
|
|
1101
|
+
}
|
|
1102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SendIconComponent, decorators: [{
|
|
1103
|
+
type: Component,
|
|
1104
|
+
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"] }]
|
|
1105
|
+
}] });
|
|
673
1106
|
|
|
674
1107
|
class LocaleModule {
|
|
675
1108
|
/**
|
|
@@ -882,29 +1315,411 @@ class InputFoundation extends BaseFoundation {
|
|
|
882
1315
|
}
|
|
883
1316
|
}
|
|
884
1317
|
|
|
885
|
-
|
|
886
|
-
const
|
|
887
|
-
|
|
888
|
-
|
|
1318
|
+
function insertText(text) {
|
|
1319
|
+
const selection = window.getSelection();
|
|
1320
|
+
if (selection && selection.rangeCount > 0) {
|
|
1321
|
+
const range = selection.getRangeAt(0);
|
|
1322
|
+
range.deleteContents();
|
|
1323
|
+
const textNode = document.createTextNode(text);
|
|
1324
|
+
range.insertNode(textNode);
|
|
1325
|
+
range.setStartAfter(textNode);
|
|
1326
|
+
range.setEndAfter(textNode);
|
|
1327
|
+
selection.removeAllRanges();
|
|
1328
|
+
selection.addRange(range);
|
|
1329
|
+
}
|
|
1330
|
+
}
|
|
1331
|
+
const handlePaste = (e) => {
|
|
1332
|
+
e.preventDefault();
|
|
1333
|
+
const text = e.clipboardData?.getData("text/plain") || '';
|
|
1334
|
+
const sanitizedText = text.replace(/[\r\n]+/g, ' ');
|
|
1335
|
+
if (sanitizedText) {
|
|
1336
|
+
insertText(sanitizedText);
|
|
1337
|
+
}
|
|
889
1338
|
};
|
|
890
|
-
//
|
|
891
|
-
const
|
|
892
|
-
|
|
1339
|
+
// 使光标移动到文案末尾
|
|
1340
|
+
const moveCursorToTextEnd = (inputWarp) => {
|
|
1341
|
+
if (inputWarp) {
|
|
1342
|
+
const range = document.createRange();
|
|
1343
|
+
const selection = window.getSelection();
|
|
1344
|
+
range.selectNodeContents(inputWarp);
|
|
1345
|
+
range.collapse(false);
|
|
1346
|
+
selection?.removeAllRanges();
|
|
1347
|
+
selection?.addRange(range);
|
|
1348
|
+
}
|
|
1349
|
+
};
|
|
1350
|
+
|
|
1351
|
+
class InputTagComponent extends BaseComponent {
|
|
893
1352
|
constructor(localeService) {
|
|
894
1353
|
super();
|
|
895
1354
|
this.localeService = localeService;
|
|
896
|
-
this.value = '';
|
|
897
|
-
this.placeholder = '';
|
|
898
1355
|
this.disabled = false;
|
|
899
|
-
this.
|
|
900
|
-
this.
|
|
901
|
-
this.
|
|
902
|
-
this.
|
|
903
|
-
this.
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
1356
|
+
this.content = '';
|
|
1357
|
+
this.placeholder = '';
|
|
1358
|
+
this.change = new EventEmitter();
|
|
1359
|
+
this.isEditable = false;
|
|
1360
|
+
this.localValue = this.content;
|
|
1361
|
+
}
|
|
1362
|
+
ngOnChanges(changes) {
|
|
1363
|
+
if (changes['content']) {
|
|
1364
|
+
this.localValue = changes['content'].currentValue;
|
|
1365
|
+
}
|
|
1366
|
+
}
|
|
1367
|
+
handleFocus() {
|
|
1368
|
+
this.isEditable = !this.disabled;
|
|
1369
|
+
}
|
|
1370
|
+
handleBlur() {
|
|
1371
|
+
this.isEditable = false;
|
|
1372
|
+
}
|
|
1373
|
+
handleInput(e) {
|
|
1374
|
+
const prompt = this.editableSpanRef?.nativeElement.textContent || '';
|
|
1375
|
+
this.localValue = prompt;
|
|
1376
|
+
this.change.emit(prompt);
|
|
1377
|
+
}
|
|
1378
|
+
handleInputPaste(e) {
|
|
1379
|
+
handlePaste(e);
|
|
1380
|
+
this.handleInput(e);
|
|
1381
|
+
}
|
|
1382
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InputTagComponent, deps: [{ token: LocaleService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1383
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: InputTagComponent, isStandalone: true, selector: "mc-input-tag", inputs: { disabled: "disabled", content: "content", placeholder: "placeholder" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "editableSpanRef", first: true, predicate: ["editableSpanRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<span class=\"editable-span\" contenteditable=\"false\">\n <span \n #editableSpanRef\n [attr.contenteditable]=\"isEditable\"\n [attr.placeholder]=\"placeholder\"\n tabindex=\"0\"\n class=\"input-custom-item\"\n [ngClass]=\"{'input-custom-placeholder': !localValue?.length, 'inline-text': localValue?.length}\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n (paste)=\"handleInputPaste($event)\"\n >{{content}}</span>\n</span>", styles: [".input-custom-item{display:inline-block;border:none;padding:0 8px;outline:none;width:auto;max-width:100%;border-radius:8px;background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);font-weight:400;line-height:22px;letter-spacing:0px;text-align:left;margin:0 2px}.input-custom-placeholder:after{color:var(--devui-placeholder, #babbc0);content:attr(placeholder);cursor:text}.inline-text{display:inline;padding:2px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1384
|
+
}
|
|
1385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InputTagComponent, decorators: [{
|
|
1386
|
+
type: Component,
|
|
1387
|
+
args: [{ selector: 'mc-input-tag', standalone: true, imports: [CommonModule], template: "<span class=\"editable-span\" contenteditable=\"false\">\n <span \n #editableSpanRef\n [attr.contenteditable]=\"isEditable\"\n [attr.placeholder]=\"placeholder\"\n tabindex=\"0\"\n class=\"input-custom-item\"\n [ngClass]=\"{'input-custom-placeholder': !localValue?.length, 'inline-text': localValue?.length}\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n (paste)=\"handleInputPaste($event)\"\n >{{content}}</span>\n</span>", styles: [".input-custom-item{display:inline-block;border:none;padding:0 8px;outline:none;width:auto;max-width:100%;border-radius:8px;background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);font-weight:400;line-height:22px;letter-spacing:0px;text-align:left;margin:0 2px}.input-custom-placeholder:after{color:var(--devui-placeholder, #babbc0);content:attr(placeholder);cursor:text}.inline-text{display:inline;padding:2px 8px}\n"] }]
|
|
1388
|
+
}], ctorParameters: () => [{ type: LocaleService }], propDecorators: { disabled: [{
|
|
1389
|
+
type: Input
|
|
1390
|
+
}], content: [{
|
|
1391
|
+
type: Input
|
|
1392
|
+
}], placeholder: [{
|
|
1393
|
+
type: Input
|
|
1394
|
+
}], change: [{
|
|
1395
|
+
type: Output
|
|
1396
|
+
}], editableSpanRef: [{
|
|
1397
|
+
type: ViewChild,
|
|
1398
|
+
args: ['editableSpanRef']
|
|
1399
|
+
}] } });
|
|
1400
|
+
|
|
1401
|
+
// import { PopoverModule } from 'ng-devui/popover';
|
|
1402
|
+
class EditableBlockComponent extends BaseComponent {
|
|
1403
|
+
constructor(localeService) {
|
|
1404
|
+
super();
|
|
1405
|
+
this.localeService = localeService;
|
|
1406
|
+
this.themeTag = {
|
|
1407
|
+
themeTagText: '',
|
|
1408
|
+
clearInput: false,
|
|
1409
|
+
popoverContent: '',
|
|
1410
|
+
type: 'themeTag',
|
|
1411
|
+
};
|
|
1412
|
+
this.disabled = false;
|
|
1413
|
+
this.displayType = DisplayType.Simple;
|
|
1414
|
+
this.placeholder = '';
|
|
1415
|
+
this.templateParts = [];
|
|
1416
|
+
this.maxLength = 2000;
|
|
1417
|
+
this.submitShortKey = SubmitShortKey.Enter;
|
|
1418
|
+
this.autofocus = false;
|
|
1419
|
+
this.send = new EventEmitter();
|
|
1420
|
+
this.input = new EventEmitter();
|
|
1421
|
+
this.blur = new EventEmitter();
|
|
1422
|
+
this.focus = new EventEmitter();
|
|
1423
|
+
this.onBlockKeyArrowUp = new EventEmitter();
|
|
1424
|
+
this.themeTagTemplate = null;
|
|
1425
|
+
this.localTemplateParts = [...this.templateParts];
|
|
1426
|
+
this.isComposing = false;
|
|
1427
|
+
}
|
|
1428
|
+
ngOnChanges(changes) {
|
|
1429
|
+
if (changes['templateParts']) {
|
|
1430
|
+
this.localTemplateParts = [...changes['templateParts'].currentValue];
|
|
1431
|
+
}
|
|
1432
|
+
}
|
|
1433
|
+
ngOnInit() {
|
|
1434
|
+
if (this.autofocus && this.editableDivRef?.nativeElement && !this.disabled) {
|
|
1435
|
+
this.onFocusInput();
|
|
1436
|
+
}
|
|
1437
|
+
}
|
|
1438
|
+
clearInput() {
|
|
1439
|
+
const inputWarp = this.editableDivRef?.nativeElement;
|
|
1440
|
+
if (inputWarp) {
|
|
1441
|
+
inputWarp.innerHTML = '';
|
|
1442
|
+
this.handleDivInput();
|
|
1443
|
+
}
|
|
1444
|
+
}
|
|
1445
|
+
getInput() {
|
|
1446
|
+
return this.getCurrentInputValue();
|
|
1447
|
+
}
|
|
1448
|
+
handleSend() {
|
|
1449
|
+
const prompt = this.editableDivRef?.nativeElement?.textContent;
|
|
1450
|
+
if (this.maxLength && prompt.length > this.maxLength) {
|
|
1451
|
+
return;
|
|
1452
|
+
}
|
|
1453
|
+
this.send.emit(prompt);
|
|
1454
|
+
this.clearInput();
|
|
1455
|
+
}
|
|
1456
|
+
focusInput() {
|
|
1457
|
+
this.editableDivRef?.nativeElement.focus();
|
|
1458
|
+
moveCursorToTextEnd(this.editableDivRef?.nativeElement);
|
|
1459
|
+
}
|
|
1460
|
+
onFocus($event) {
|
|
1461
|
+
this.focus.emit($event);
|
|
1462
|
+
}
|
|
1463
|
+
onBlur($event) {
|
|
1464
|
+
this.blur.emit($event);
|
|
1465
|
+
}
|
|
1466
|
+
handleCompositionEnd($event) {
|
|
1467
|
+
this.isComposing = false;
|
|
1468
|
+
this.handleDivInput();
|
|
1469
|
+
}
|
|
1470
|
+
handleCompositionStart($event) {
|
|
1471
|
+
this.isComposing = true;
|
|
1472
|
+
}
|
|
1473
|
+
handleDivPaste(e) {
|
|
1474
|
+
e.preventDefault();
|
|
1475
|
+
const text = (e.originalEvent || e).clipboardData?.getData('text/plain');
|
|
1476
|
+
insertText(text);
|
|
1477
|
+
this.handleDivInput();
|
|
1478
|
+
}
|
|
1479
|
+
handleDivKeydown(e) {
|
|
1480
|
+
const shiftKey = this.submitShortKey === SubmitShortKey.Enter ? !e.shiftKey : this.submitShortKey === SubmitShortKey.ShiftEnter ? e.shiftKey : false;
|
|
1481
|
+
if (e.key === 'Enter' && shiftKey) {
|
|
1482
|
+
e.preventDefault();
|
|
1483
|
+
this.handleSend();
|
|
1484
|
+
}
|
|
1485
|
+
if (['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].includes(e.key)) {
|
|
1486
|
+
const selection = window.getSelection();
|
|
1487
|
+
if (!selection?.rangeCount || !selection.isCollapsed) {
|
|
1488
|
+
return;
|
|
1489
|
+
}
|
|
1490
|
+
const range = selection.getRangeAt(0);
|
|
1491
|
+
const { startContainer: node, startOffset } = range;
|
|
1492
|
+
const direction = e.key === 'ArrowLeft' || e.key === 'Backspace' ? 'previous' : 'next';
|
|
1493
|
+
const targetNode = this.findSiblingNode(node, startOffset, direction);
|
|
1494
|
+
if (targetNode && targetNode.nodeType === Node.ELEMENT_NODE) {
|
|
1495
|
+
const editSpanDom = targetNode.querySelector('.input-custom-item');
|
|
1496
|
+
if (!editSpanDom) {
|
|
1497
|
+
return;
|
|
1498
|
+
}
|
|
1499
|
+
e.preventDefault();
|
|
1500
|
+
editSpanDom.contentEditable = 'true';
|
|
1501
|
+
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
|
|
1502
|
+
const newRange = document.createRange();
|
|
1503
|
+
newRange.setStart(editSpanDom, direction === 'previous' ? editSpanDom.childNodes.length : 0);
|
|
1504
|
+
newRange.collapse(false);
|
|
1505
|
+
selection.removeAllRanges();
|
|
1506
|
+
selection.addRange(newRange);
|
|
1507
|
+
}
|
|
1508
|
+
else if (e.key === 'Backspace' || e.key === 'Delete') {
|
|
1509
|
+
if (editSpanDom.textContent.trim()) {
|
|
1510
|
+
const newRange = document.createRange();
|
|
1511
|
+
newRange.setStart(editSpanDom, direction === 'previous' ? editSpanDom.childNodes.length : 0);
|
|
1512
|
+
newRange.collapse(false);
|
|
1513
|
+
selection.removeAllRanges();
|
|
1514
|
+
selection.addRange(newRange);
|
|
1515
|
+
}
|
|
1516
|
+
else {
|
|
1517
|
+
targetNode.remove();
|
|
1518
|
+
}
|
|
1519
|
+
}
|
|
1520
|
+
}
|
|
1521
|
+
}
|
|
1522
|
+
if (e.key === 'ArrowUp') {
|
|
1523
|
+
this.isCursorAtStart() ? this.onBlockKeyArrowUp.emit(e) : null;
|
|
1524
|
+
}
|
|
1525
|
+
}
|
|
1526
|
+
isCursorAtStart() {
|
|
1527
|
+
const selection = window.getSelection();
|
|
1528
|
+
if (!selection?.rangeCount) {
|
|
1529
|
+
return true;
|
|
1530
|
+
}
|
|
1531
|
+
const range = selection.getRangeAt(0);
|
|
1532
|
+
if (range.startOffset !== 0) {
|
|
1533
|
+
return false;
|
|
1534
|
+
}
|
|
1535
|
+
let node = range.startContainer;
|
|
1536
|
+
while (node && !node.classList?.contains('editable-container')) {
|
|
1537
|
+
if (node.previousSibling) {
|
|
1538
|
+
return false;
|
|
1539
|
+
}
|
|
1540
|
+
node = node.parentNode;
|
|
1541
|
+
}
|
|
1542
|
+
return true;
|
|
1543
|
+
}
|
|
1544
|
+
findSiblingNode(node, startOffset, direction) {
|
|
1545
|
+
if (!node) {
|
|
1546
|
+
return null;
|
|
1547
|
+
}
|
|
1548
|
+
let current = node;
|
|
1549
|
+
const isEditableContainer = node.classList?.contains('editable-container');
|
|
1550
|
+
if (isEditableContainer) {
|
|
1551
|
+
const childNodes = node.childNodes;
|
|
1552
|
+
const index = Math.min(startOffset, childNodes.length - 1);
|
|
1553
|
+
current = childNodes[index];
|
|
1554
|
+
}
|
|
1555
|
+
if (!isEditableContainer && direction === 'previous' && startOffset !== 0) {
|
|
1556
|
+
return null;
|
|
1557
|
+
}
|
|
1558
|
+
if (!isEditableContainer && direction === 'next' && startOffset !== node.textContent.length) {
|
|
1559
|
+
return null;
|
|
1560
|
+
}
|
|
1561
|
+
let target = null;
|
|
1562
|
+
let sibling = current;
|
|
1563
|
+
while (sibling) {
|
|
1564
|
+
sibling = direction === 'next' ? sibling.nextSibling : sibling.previousSibling;
|
|
1565
|
+
if (!sibling) {
|
|
1566
|
+
continue;
|
|
1567
|
+
}
|
|
1568
|
+
// 排除注释节点和值为空的文本节点
|
|
1569
|
+
if (sibling.nodeType !== Node.COMMENT_NODE && (sibling.nodeType !== Node.TEXT_NODE || (sibling.nodeType === Node.TEXT_NODE && sibling.nodeValue.trim() !== ''))) {
|
|
1570
|
+
target = sibling;
|
|
1571
|
+
break;
|
|
1572
|
+
}
|
|
1573
|
+
}
|
|
1574
|
+
return target;
|
|
1575
|
+
}
|
|
1576
|
+
handleDivInput() {
|
|
1577
|
+
if (!this.isComposing) {
|
|
1578
|
+
this.processInput();
|
|
1579
|
+
}
|
|
1580
|
+
}
|
|
1581
|
+
getCurrentInputValue() {
|
|
1582
|
+
let prompt = this.editableDivRef?.nativeElement?.textContent;
|
|
1583
|
+
// 前置标签TipTag的文本需要去除掉
|
|
1584
|
+
if (this.themeTag.themeTagText) {
|
|
1585
|
+
const prefixSpan = this.editableDivRef?.nativeElement?.querySelector('.ai-input-prefix-wrapper');
|
|
1586
|
+
if (prefixSpan) {
|
|
1587
|
+
prompt = prompt.replace(prefixSpan.textContent || '', ' ');
|
|
1588
|
+
}
|
|
1589
|
+
}
|
|
1590
|
+
return prompt;
|
|
1591
|
+
}
|
|
1592
|
+
processInput() {
|
|
1593
|
+
setTimeout(() => {
|
|
1594
|
+
const prompt = this.getCurrentInputValue();
|
|
1595
|
+
this.input.emit(prompt);
|
|
1596
|
+
}, TimeToViewRender);
|
|
1597
|
+
}
|
|
1598
|
+
setInputTag(key, placeholder, defaultValue) {
|
|
1599
|
+
if (this.disabled) {
|
|
1600
|
+
return;
|
|
1601
|
+
}
|
|
1602
|
+
this.localTemplateParts.push({
|
|
1603
|
+
key,
|
|
1604
|
+
type: 'input',
|
|
1605
|
+
placeholder,
|
|
1606
|
+
content: defaultValue,
|
|
1607
|
+
});
|
|
1608
|
+
this.onFocusInput();
|
|
1609
|
+
this.handleDivInput();
|
|
1610
|
+
}
|
|
1611
|
+
setMixTags(mixTagConfig) {
|
|
1612
|
+
if (this.disabled) {
|
|
1613
|
+
return;
|
|
1614
|
+
}
|
|
1615
|
+
this.localTemplateParts = [...mixTagConfig];
|
|
1616
|
+
this.onFocusInput();
|
|
1617
|
+
this.handleDivInput();
|
|
1618
|
+
}
|
|
1619
|
+
setText(text) {
|
|
1620
|
+
if (this.disabled) {
|
|
1621
|
+
return;
|
|
1622
|
+
}
|
|
1623
|
+
this.localTemplateParts.push({
|
|
1624
|
+
key: 'text',
|
|
1625
|
+
type: 'text',
|
|
1626
|
+
content: text,
|
|
1627
|
+
});
|
|
1628
|
+
this.onFocusInput();
|
|
1629
|
+
this.handleDivInput();
|
|
1630
|
+
}
|
|
1631
|
+
openTipTag(themeTagText, popoverContent, clearInput) {
|
|
1632
|
+
if (this.disabled) {
|
|
1633
|
+
return;
|
|
1634
|
+
}
|
|
1635
|
+
this.themeTag = {
|
|
1636
|
+
themeTagText,
|
|
1637
|
+
popoverContent,
|
|
1638
|
+
clearInput: clearInput || false,
|
|
1639
|
+
type: 'themeTag'
|
|
1640
|
+
};
|
|
1641
|
+
}
|
|
1642
|
+
closeTipTag() {
|
|
1643
|
+
if (this.themeTag.themeTagText && this.themeTag.clearInput) {
|
|
1644
|
+
this.clearInput();
|
|
1645
|
+
}
|
|
1646
|
+
else {
|
|
1647
|
+
this.themeTag = {
|
|
1648
|
+
themeTagText: '',
|
|
1649
|
+
popoverContent: '',
|
|
1650
|
+
clearInput: false,
|
|
1651
|
+
type: 'themeTag'
|
|
1652
|
+
};
|
|
1653
|
+
this.processInput();
|
|
1654
|
+
}
|
|
1655
|
+
}
|
|
1656
|
+
onFocusInput() {
|
|
1657
|
+
this.focusInput();
|
|
1658
|
+
}
|
|
1659
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EditableBlockComponent, deps: [{ token: LocaleService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: EditableBlockComponent, isStandalone: true, selector: "mc-editable-block", inputs: { disabled: "disabled", displayType: "displayType", placeholder: "placeholder", templateParts: "templateParts", maxLength: "maxLength", submitShortKey: "submitShortKey", autofocus: "autofocus" }, outputs: { send: "send", input: "input", blur: "blur", focus: "focus", onBlockKeyArrowUp: "onBlockKeyArrowUp" }, queries: [{ propertyName: "themeTagTemplate", first: true, predicate: ["themeTag"], descendants: true }], viewQueries: [{ propertyName: "editableDivRef", first: true, predicate: ["editableDivRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: " <div \n #editableDivRef\n class=\"editable-container\"\n [ngClass]=\"{'mc-input-disabled': disabled,'mc-input-simple': displayType === 'simple' }\"\n [attr.contenteditable]=\"!disabled\"\n spellcheck=\"false\"\n [attr.placeholder]=\"placeholder\"\n (input)=\"handleDivInput()\"\n (keydown)=\"handleDivKeydown($event)\"\n (paste)=\"handleDivPaste($event)\"\n (compositionstart)=\"handleCompositionStart($event)\"\n (compositionend)=\"handleCompositionEnd($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n >\n <!-- \u524D\u7F6E\u6807\u7B7E --> \n <span *ngIf=\"themeTag.themeTagText\" contenteditable=\"false\" >\n <span *ngIf=\"themeTag.themeTagText\" [title]=\"themeTag.popoverContent\" class=\"ai-input-prefix-wrapper\" (click)=\"closeTipTag()\" contenteditable=\"false\">\n <ng-container *ngIf=\"themeTagTemplate\">\n <ng-container *ngTemplateOutlet=\"themeTagTemplate; context: {$implicit: themeTag, themeTagText: themeTag.themeTagText}\"></ng-container>\n </ng-container>\n <span *ngIf=\"!themeTagTemplate\" class=\"ai-input-prefix\">{{themeTag.themeTagText}}</span>\n </span>\n <span contenteditable=\"false\" style=\"display: inline-block;width: 4px;\"></span>\n </span>\n\n <ng-container *ngFor=\"let part of localTemplateParts\" [ngSwitch]=\"part.type\">\n <ng-container *ngSwitchCase=\"'text'\">{{part.content}}</ng-container>\n <mc-input-tag *ngSwitchCase=\"'input'\" [content]=\"part.content\" [placeholder]=\"part.placeholder\" [disabled]=\"disabled\" (change)=\"handleDivInput()\"></mc-input-tag>\n </ng-container>\n </div>", styles: [".editable-container{outline:unset;min-height:64px;line-height:24px;padding-top:4px;word-break:break-all;white-space:pre-wrap;font-size:14px;caret-color:var(--devui-text, #252b3a);background:var(--devui-form-control-bg, #ffffff);color:var(--devui-text, #252b3a)}.editable-container.mc-input-simple{min-height:32px}.editable-container.mc-input-disabled{background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.editable-container>*{text-indent:0}.editable-container[placeholder]:empty:before{content:attr(placeholder);color:var(--devui-placeholder, #babbc0);position:absolute;pointer-events:none;left:8px}.editable-container .ai-input-prefix-wrapper{border-radius:8px;background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-primary, #5e7ce0);height:24px;padding:0 8px;font-size:14px;font-weight:600;line-height:24px;z-index:10;position:sticky;display:inline-block;cursor:pointer}.en-editable-container{text-indent:140px}.editable-container:focus{border-color:#409eff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputTagComponent, selector: "mc-input-tag", inputs: ["disabled", "content", "placeholder"], outputs: ["change"] }] }); }
|
|
1661
|
+
}
|
|
1662
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EditableBlockComponent, decorators: [{
|
|
1663
|
+
type: Component,
|
|
1664
|
+
args: [{ selector: 'mc-editable-block', standalone: true, imports: [CommonModule, InputTagComponent], template: " <div \n #editableDivRef\n class=\"editable-container\"\n [ngClass]=\"{'mc-input-disabled': disabled,'mc-input-simple': displayType === 'simple' }\"\n [attr.contenteditable]=\"!disabled\"\n spellcheck=\"false\"\n [attr.placeholder]=\"placeholder\"\n (input)=\"handleDivInput()\"\n (keydown)=\"handleDivKeydown($event)\"\n (paste)=\"handleDivPaste($event)\"\n (compositionstart)=\"handleCompositionStart($event)\"\n (compositionend)=\"handleCompositionEnd($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n >\n <!-- \u524D\u7F6E\u6807\u7B7E --> \n <span *ngIf=\"themeTag.themeTagText\" contenteditable=\"false\" >\n <span *ngIf=\"themeTag.themeTagText\" [title]=\"themeTag.popoverContent\" class=\"ai-input-prefix-wrapper\" (click)=\"closeTipTag()\" contenteditable=\"false\">\n <ng-container *ngIf=\"themeTagTemplate\">\n <ng-container *ngTemplateOutlet=\"themeTagTemplate; context: {$implicit: themeTag, themeTagText: themeTag.themeTagText}\"></ng-container>\n </ng-container>\n <span *ngIf=\"!themeTagTemplate\" class=\"ai-input-prefix\">{{themeTag.themeTagText}}</span>\n </span>\n <span contenteditable=\"false\" style=\"display: inline-block;width: 4px;\"></span>\n </span>\n\n <ng-container *ngFor=\"let part of localTemplateParts\" [ngSwitch]=\"part.type\">\n <ng-container *ngSwitchCase=\"'text'\">{{part.content}}</ng-container>\n <mc-input-tag *ngSwitchCase=\"'input'\" [content]=\"part.content\" [placeholder]=\"part.placeholder\" [disabled]=\"disabled\" (change)=\"handleDivInput()\"></mc-input-tag>\n </ng-container>\n </div>", styles: [".editable-container{outline:unset;min-height:64px;line-height:24px;padding-top:4px;word-break:break-all;white-space:pre-wrap;font-size:14px;caret-color:var(--devui-text, #252b3a);background:var(--devui-form-control-bg, #ffffff);color:var(--devui-text, #252b3a)}.editable-container.mc-input-simple{min-height:32px}.editable-container.mc-input-disabled{background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.editable-container>*{text-indent:0}.editable-container[placeholder]:empty:before{content:attr(placeholder);color:var(--devui-placeholder, #babbc0);position:absolute;pointer-events:none;left:8px}.editable-container .ai-input-prefix-wrapper{border-radius:8px;background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-primary, #5e7ce0);height:24px;padding:0 8px;font-size:14px;font-weight:600;line-height:24px;z-index:10;position:sticky;display:inline-block;cursor:pointer}.en-editable-container{text-indent:140px}.editable-container:focus{border-color:#409eff}\n"] }]
|
|
1665
|
+
}], ctorParameters: () => [{ type: LocaleService }], propDecorators: { disabled: [{
|
|
1666
|
+
type: Input
|
|
1667
|
+
}], displayType: [{
|
|
1668
|
+
type: Input
|
|
1669
|
+
}], placeholder: [{
|
|
1670
|
+
type: Input
|
|
1671
|
+
}], templateParts: [{
|
|
1672
|
+
type: Input
|
|
1673
|
+
}], maxLength: [{
|
|
1674
|
+
type: Input
|
|
1675
|
+
}], submitShortKey: [{
|
|
1676
|
+
type: Input
|
|
1677
|
+
}], autofocus: [{
|
|
1678
|
+
type: Input
|
|
1679
|
+
}], send: [{
|
|
1680
|
+
type: Output
|
|
1681
|
+
}], input: [{
|
|
1682
|
+
type: Output
|
|
1683
|
+
}], blur: [{
|
|
1684
|
+
type: Output
|
|
1685
|
+
}], focus: [{
|
|
1686
|
+
type: Output
|
|
1687
|
+
}], onBlockKeyArrowUp: [{
|
|
1688
|
+
type: Output
|
|
1689
|
+
}], editableDivRef: [{
|
|
1690
|
+
type: ViewChild,
|
|
1691
|
+
args: ['editableDivRef']
|
|
1692
|
+
}], themeTagTemplate: [{
|
|
1693
|
+
type: ContentChild,
|
|
1694
|
+
args: ['themeTag']
|
|
1695
|
+
}] } });
|
|
1696
|
+
|
|
1697
|
+
// 默认的autosize配置
|
|
1698
|
+
const DEFAULT_AUTOSIZE = {
|
|
1699
|
+
minRows: 1,
|
|
1700
|
+
maxRows: 5,
|
|
1701
|
+
};
|
|
1702
|
+
// 创建一个token用于组件间通信
|
|
1703
|
+
const inputContextToken = 'input-context';
|
|
1704
|
+
class InputComponent extends BaseComponent {
|
|
1705
|
+
constructor(localeService) {
|
|
1706
|
+
super();
|
|
1707
|
+
this.localeService = localeService;
|
|
1708
|
+
this.value = '';
|
|
1709
|
+
this.placeholder = '';
|
|
1710
|
+
this.disabled = false;
|
|
1711
|
+
this.displayType = DisplayType.Full;
|
|
1712
|
+
this.variant = InputVariant.Bordered;
|
|
1713
|
+
this.sendBtnVariant = SendBtnVariant.Full;
|
|
1714
|
+
this.loading = false;
|
|
1715
|
+
this.showCount = false;
|
|
1716
|
+
this.maxLength = null;
|
|
1717
|
+
this.submitShortKey = SubmitShortKey.Enter;
|
|
1718
|
+
this.autofocus = false;
|
|
907
1719
|
this.autosize = false;
|
|
1720
|
+
this.formatContentOptions = {
|
|
1721
|
+
formatContent: [],
|
|
1722
|
+
};
|
|
908
1723
|
// textarea样式
|
|
909
1724
|
this.textareaStyle = {};
|
|
910
1725
|
this.change = new EventEmitter();
|
|
@@ -917,8 +1732,10 @@ class InputComponent extends BaseComponent {
|
|
|
917
1732
|
this.suffixTemplate = null;
|
|
918
1733
|
this.buttonTemplate = null;
|
|
919
1734
|
this.extraTemplate = null;
|
|
1735
|
+
this.themeTagTemplate = null;
|
|
920
1736
|
this.inputValue = '';
|
|
921
1737
|
this.lock = false;
|
|
1738
|
+
this.showEditableBlock = false;
|
|
922
1739
|
}
|
|
923
1740
|
ngOnInit() {
|
|
924
1741
|
this.foundation = new InputFoundation(this.adapter);
|
|
@@ -951,6 +1768,20 @@ class InputComponent extends BaseComponent {
|
|
|
951
1768
|
// autosize配置变化时更新textarea样式
|
|
952
1769
|
this.updateTextareaStyle();
|
|
953
1770
|
}
|
|
1771
|
+
if (changes['formatContentOptions']) {
|
|
1772
|
+
const formatContent = changes['formatContentOptions']?.currentValue?.formatContent || [];
|
|
1773
|
+
// 处理主题标签
|
|
1774
|
+
const themeTagItems = formatContent.filter((item) => item.type === 'themeTag');
|
|
1775
|
+
if (themeTagItems.length) {
|
|
1776
|
+
this.openTipTag(themeTagItems[0].themeTagText, themeTagItems[0].popoverContent, themeTagItems[0].clearInput);
|
|
1777
|
+
}
|
|
1778
|
+
else {
|
|
1779
|
+
this.closeTipTag();
|
|
1780
|
+
}
|
|
1781
|
+
// 处理其他格式标签
|
|
1782
|
+
const otherFormatItems = formatContent.filter((item) => item.type !== 'themeTag');
|
|
1783
|
+
this.setMixTags(otherFormatItems);
|
|
1784
|
+
}
|
|
954
1785
|
}
|
|
955
1786
|
get inputClasses() {
|
|
956
1787
|
return this.foundation.getInputClasses();
|
|
@@ -976,14 +1807,62 @@ class InputComponent extends BaseComponent {
|
|
|
976
1807
|
this.foundation.onKeydown(event);
|
|
977
1808
|
}
|
|
978
1809
|
clearInput() {
|
|
1810
|
+
if (this.showEditableBlock) {
|
|
1811
|
+
this.editableBlockRef?.clearInput();
|
|
1812
|
+
}
|
|
979
1813
|
this.foundation.clearInput();
|
|
980
1814
|
}
|
|
981
1815
|
getInput() {
|
|
1816
|
+
if (this.showEditableBlock) {
|
|
1817
|
+
return this.editableBlockRef?.getInput();
|
|
1818
|
+
}
|
|
982
1819
|
return this.inputValue;
|
|
983
1820
|
}
|
|
1821
|
+
setMixTags(mixTagConfig) {
|
|
1822
|
+
if (this.disabled) {
|
|
1823
|
+
return;
|
|
1824
|
+
}
|
|
1825
|
+
this.showEditableBlock = true;
|
|
1826
|
+
setTimeout(() => {
|
|
1827
|
+
this.editableBlockRef?.setMixTags(mixTagConfig);
|
|
1828
|
+
}, TimeToViewRender);
|
|
1829
|
+
}
|
|
1830
|
+
openTipTag(themeTagText, popoverContent, clearInput) {
|
|
1831
|
+
if (this.disabled) {
|
|
1832
|
+
return;
|
|
1833
|
+
}
|
|
1834
|
+
this.showEditableBlock = true;
|
|
1835
|
+
setTimeout(() => {
|
|
1836
|
+
this.editableBlockRef?.openTipTag(themeTagText, popoverContent, clearInput);
|
|
1837
|
+
}, TimeToViewRender);
|
|
1838
|
+
}
|
|
1839
|
+
closeTipTag() {
|
|
1840
|
+
if (!this.disabled && this.showEditableBlock) {
|
|
1841
|
+
this.editableBlockRef?.closeTipTag();
|
|
1842
|
+
}
|
|
1843
|
+
}
|
|
1844
|
+
handleDivInput(value) {
|
|
1845
|
+
if (!value) {
|
|
1846
|
+
setTimeout(() => {
|
|
1847
|
+
this.showEditableBlock = false;
|
|
1848
|
+
}, TimeToViewRender);
|
|
1849
|
+
}
|
|
1850
|
+
this.inputValue = value;
|
|
1851
|
+
this.change.emit(value);
|
|
1852
|
+
}
|
|
1853
|
+
handleDivSubmit(value) {
|
|
1854
|
+
this.submit.emit(value);
|
|
1855
|
+
}
|
|
1856
|
+
onDivBlur(e) {
|
|
1857
|
+
this.blur.emit(e);
|
|
1858
|
+
}
|
|
1859
|
+
onDivFocus(e) {
|
|
1860
|
+
this.focus.emit(e);
|
|
1861
|
+
}
|
|
984
1862
|
// 处理button组件的事件
|
|
985
1863
|
onButtonSubmit(value) {
|
|
986
1864
|
this.submit.emit(value);
|
|
1865
|
+
this.clearInput();
|
|
987
1866
|
}
|
|
988
1867
|
onButtonCancel() {
|
|
989
1868
|
this.cancel.emit();
|
|
@@ -1012,7 +1891,7 @@ class InputComponent extends BaseComponent {
|
|
|
1012
1891
|
const result = this.computeTextareaHeight(this.textareaElement.nativeElement, config.minRows, config.maxRows);
|
|
1013
1892
|
this.textareaStyle = {
|
|
1014
1893
|
...result,
|
|
1015
|
-
resize: 'none'
|
|
1894
|
+
resize: 'none',
|
|
1016
1895
|
};
|
|
1017
1896
|
}
|
|
1018
1897
|
// 获取autosize配置
|
|
@@ -1032,14 +1911,27 @@ class InputComponent extends BaseComponent {
|
|
|
1032
1911
|
// 创建临时textarea元素
|
|
1033
1912
|
const tempTextarea = document.createElement('textarea');
|
|
1034
1913
|
const sizingStyle = [
|
|
1035
|
-
'letter-spacing',
|
|
1036
|
-
'
|
|
1037
|
-
'
|
|
1038
|
-
'padding-
|
|
1039
|
-
'
|
|
1914
|
+
'letter-spacing',
|
|
1915
|
+
'line-height',
|
|
1916
|
+
'padding-top',
|
|
1917
|
+
'padding-bottom',
|
|
1918
|
+
'font-family',
|
|
1919
|
+
'font-weight',
|
|
1920
|
+
'font-size',
|
|
1921
|
+
'font-variant',
|
|
1922
|
+
'text-rendering',
|
|
1923
|
+
'text-transform',
|
|
1924
|
+
'width',
|
|
1925
|
+
'text-indent',
|
|
1926
|
+
'padding-left',
|
|
1927
|
+
'padding-right',
|
|
1928
|
+
'border-width',
|
|
1929
|
+
'box-sizing',
|
|
1930
|
+
'word-break',
|
|
1931
|
+
'white-space',
|
|
1040
1932
|
];
|
|
1041
1933
|
const contextStyle = sizingStyle
|
|
1042
|
-
.map(name => `${name}:${style.getPropertyValue(name)}`)
|
|
1934
|
+
.map((name) => `${name}:${style.getPropertyValue(name)}`)
|
|
1043
1935
|
.join(';');
|
|
1044
1936
|
const hiddenStyle = `
|
|
1045
1937
|
min-height:0 !important;
|
|
@@ -1058,7 +1950,7 @@ class InputComponent extends BaseComponent {
|
|
|
1058
1950
|
document.body.appendChild(tempTextarea);
|
|
1059
1951
|
let height = tempTextarea.scrollHeight;
|
|
1060
1952
|
const result = {
|
|
1061
|
-
height: `${height}px
|
|
1953
|
+
height: `${height}px`,
|
|
1062
1954
|
};
|
|
1063
1955
|
if (minRows !== undefined || maxRows !== undefined) {
|
|
1064
1956
|
tempTextarea.value = ' ';
|
|
@@ -1096,11 +1988,17 @@ class InputComponent extends BaseComponent {
|
|
|
1096
1988
|
this.blur.emit(event);
|
|
1097
1989
|
}
|
|
1098
1990
|
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" }] }); }
|
|
1991
|
+
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", formatContentOptions: "formatContentOptions" }, 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 }, { propertyName: "themeTagTemplate", first: true, predicate: ["themeTag"], descendants: true }], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "editableBlockRef", first: true, predicate: ["editableBlock"], 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 <!-- \u66FF\u6362Textarea -->\n <div *ngIf=\"showEditableBlock\" class=\"editable-block-container\">\n <mc-editable-block *ngIf=\"showEditableBlock\"\n #editableBlock\n [placeholder]=\"placeholder\"\n [maxLength]=\"maxLength\"\n [disabled]=\"disabled\"\n [submitShortKey]=\"submitShortKey\"\n [autofocus]=\"autofocus\"\n (input)=\"handleDivInput($event)\"\n (send)=\"handleDivSubmit($event)\"\n (blur)=\"onDivBlur($event)\"\n (focus)=\"onDivFocus($event)\"\n >\n <ng-container *ngIf=\"themeTagTemplate\">\n <ng-template #themeTag let-themeTagText=\"themeTagText\">\n <ng-container *ngTemplateOutlet=\"themeTagTemplate; context: {$implicit: themeTagText, themeTagText: themeTagText}\"></ng-container>\n </ng-template>\n </ng-container>\n </mc-editable-block>\n </div>\n <textarea\n *ngIf=\"!showEditableBlock\"\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-content .editable-block-container{width:100%}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: EditableBlockComponent, selector: "mc-editable-block", inputs: ["disabled", "displayType", "placeholder", "templateParts", "maxLength", "submitShortKey", "autofocus"], outputs: ["send", "input", "blur", "focus", "onBlockKeyArrowUp"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
1100
1992
|
}
|
|
1101
1993
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InputComponent, decorators: [{
|
|
1102
1994
|
type: Component,
|
|
1103
|
-
args: [{ selector: 'mc-input', standalone: true, imports: [
|
|
1995
|
+
args: [{ selector: 'mc-input', standalone: true, imports: [
|
|
1996
|
+
CommonModule,
|
|
1997
|
+
FormsModule,
|
|
1998
|
+
ButtonComponent,
|
|
1999
|
+
TranslatePipe,
|
|
2000
|
+
EditableBlockComponent,
|
|
2001
|
+
], 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 <!-- \u66FF\u6362Textarea -->\n <div *ngIf=\"showEditableBlock\" class=\"editable-block-container\">\n <mc-editable-block *ngIf=\"showEditableBlock\"\n #editableBlock\n [placeholder]=\"placeholder\"\n [maxLength]=\"maxLength\"\n [disabled]=\"disabled\"\n [submitShortKey]=\"submitShortKey\"\n [autofocus]=\"autofocus\"\n (input)=\"handleDivInput($event)\"\n (send)=\"handleDivSubmit($event)\"\n (blur)=\"onDivBlur($event)\"\n (focus)=\"onDivFocus($event)\"\n >\n <ng-container *ngIf=\"themeTagTemplate\">\n <ng-template #themeTag let-themeTagText=\"themeTagText\">\n <ng-container *ngTemplateOutlet=\"themeTagTemplate; context: {$implicit: themeTagText, themeTagText: themeTagText}\"></ng-container>\n </ng-template>\n </ng-container>\n </mc-editable-block>\n </div>\n <textarea\n *ngIf=\"!showEditableBlock\"\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-content .editable-block-container{width:100%}.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"] }]
|
|
1104
2002
|
}], ctorParameters: () => [{ type: LocaleService }], propDecorators: { value: [{
|
|
1105
2003
|
type: Input
|
|
1106
2004
|
}], placeholder: [{
|
|
@@ -1125,6 +2023,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
1125
2023
|
type: Input
|
|
1126
2024
|
}], autosize: [{
|
|
1127
2025
|
type: Input
|
|
2026
|
+
}], formatContentOptions: [{
|
|
2027
|
+
type: Input
|
|
1128
2028
|
}], change: [{
|
|
1129
2029
|
type: Output
|
|
1130
2030
|
}], submit: [{
|
|
@@ -1138,6 +2038,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
1138
2038
|
}], textareaElement: [{
|
|
1139
2039
|
type: ViewChild,
|
|
1140
2040
|
args: ['textarea']
|
|
2041
|
+
}], editableBlockRef: [{
|
|
2042
|
+
type: ViewChild,
|
|
2043
|
+
args: ['editableBlock']
|
|
1141
2044
|
}], headTemplate: [{
|
|
1142
2045
|
type: ContentChild,
|
|
1143
2046
|
args: ['head']
|
|
@@ -1153,6 +2056,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
1153
2056
|
}], extraTemplate: [{
|
|
1154
2057
|
type: ContentChild,
|
|
1155
2058
|
args: ['extra']
|
|
2059
|
+
}], themeTagTemplate: [{
|
|
2060
|
+
type: ContentChild,
|
|
2061
|
+
args: ['themeTag']
|
|
1156
2062
|
}] } });
|
|
1157
2063
|
|
|
1158
2064
|
class InputModule {
|
|
@@ -1161,11 +2067,15 @@ class InputModule {
|
|
|
1161
2067
|
FormsModule,
|
|
1162
2068
|
ButtonComponent,
|
|
1163
2069
|
SendIconComponent,
|
|
1164
|
-
InputComponent
|
|
2070
|
+
InputComponent,
|
|
2071
|
+
InputTagComponent,
|
|
2072
|
+
EditableBlockComponent], exports: [InputComponent] }); }
|
|
1165
2073
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InputModule, imports: [CommonModule,
|
|
1166
2074
|
FormsModule,
|
|
1167
2075
|
ButtonComponent,
|
|
1168
|
-
InputComponent
|
|
2076
|
+
InputComponent,
|
|
2077
|
+
InputTagComponent,
|
|
2078
|
+
EditableBlockComponent] }); }
|
|
1169
2079
|
}
|
|
1170
2080
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InputModule, decorators: [{
|
|
1171
2081
|
type: NgModule,
|
|
@@ -1176,73 +2086,337 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
1176
2086
|
FormsModule,
|
|
1177
2087
|
ButtonComponent,
|
|
1178
2088
|
SendIconComponent,
|
|
1179
|
-
InputComponent
|
|
2089
|
+
InputComponent,
|
|
2090
|
+
InputTagComponent,
|
|
2091
|
+
EditableBlockComponent,
|
|
1180
2092
|
],
|
|
1181
2093
|
exports: [InputComponent],
|
|
1182
2094
|
}]
|
|
1183
2095
|
}] });
|
|
1184
2096
|
|
|
1185
|
-
class
|
|
1186
|
-
constructor() {
|
|
1187
|
-
|
|
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'];
|
|
2097
|
+
class IntroductionFoundation extends BaseFoundation {
|
|
2098
|
+
constructor(adapter) {
|
|
2099
|
+
super({ ...adapter });
|
|
1204
2100
|
}
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
2101
|
+
getIntroductionClasses() {
|
|
2102
|
+
const align = this._adapter.getProp('align');
|
|
2103
|
+
const background = this._adapter.getProp('background');
|
|
2104
|
+
return [align, background].filter(Boolean).join(' ');
|
|
2105
|
+
}
|
|
2106
|
+
getLogoStyle() {
|
|
2107
|
+
const logoWidth = this._adapter.getProp('logoWidth');
|
|
2108
|
+
const logoHeight = this._adapter.getProp('logoHeight');
|
|
2109
|
+
const style = {};
|
|
2110
|
+
if (logoWidth) {
|
|
2111
|
+
style['width'] =
|
|
2112
|
+
typeof logoWidth === 'number' ? `${logoWidth}px` : logoWidth;
|
|
1208
2113
|
}
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
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
|
-
});
|
|
2114
|
+
if (logoHeight) {
|
|
2115
|
+
style['height'] =
|
|
2116
|
+
typeof logoHeight === 'number' ? `${logoHeight}px` : logoHeight;
|
|
1227
2117
|
}
|
|
2118
|
+
return style;
|
|
1228
2119
|
}
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
2120
|
+
}
|
|
2121
|
+
|
|
2122
|
+
class IntroductionComponent extends BaseComponent {
|
|
2123
|
+
constructor() {
|
|
2124
|
+
super();
|
|
2125
|
+
this.description = [];
|
|
2126
|
+
this.background = 'transparent';
|
|
2127
|
+
this.align = 'center';
|
|
2128
|
+
this.foundation = new IntroductionFoundation(this.adapter);
|
|
1236
2129
|
}
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
2130
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IntroductionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2131
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IntroductionComponent, isStandalone: true, selector: "mc-introduction", inputs: { logoImg: "logoImg", title: "title", subTitle: "subTitle", description: "description", logoWidth: "logoWidth", logoHeight: "logoHeight", background: "background", align: "align" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mc-introduction\" [ngClass]=\"foundation.getIntroductionClasses()\">\n <div class=\"mc-introduction-logo-container\">\n <img *ngIf=\"logoImg\" [src]=\"logoImg\" [alt]=\"title\" [ngStyle]=\"foundation.getLogoStyle()\" />\n <div class=\"mc-introduction-title\">{{ title }}</div>\n </div>\n <div *ngIf=\"subTitle\" class=\"mc-introduction-sub-title\">{{ subTitle }}</div>\n <div *ngIf=\"description && description.length\" class=\"mc-introduction-description\">\n <div *ngFor=\"let item of description; let i = index\">{{ item }}</div>\n </div>\n <ng-content></ng-content>\n</div>", styles: [".mc-introduction{display:flex;gap:12px;flex-direction:column;color:var(--devui-text, #252b3a)}.mc-introduction .mc-introduction-logo-container{display:flex;align-items:center;gap:8px}.mc-introduction .mc-introduction-logo-container .mc-introduction-title{font-weight:700;font-size:32px;letter-spacing:1px}.mc-introduction .mc-introduction-sub-title{font-weight:500;font-size:18px}.mc-introduction .mc-introduction-description{font-size:var(--devui-font-size, 12px)}.mc-introduction .mc-introduction-description>div{line-height:1.5}.mc-introduction.filled{background-color:var(--devui-global-bg, #f6f6f8);border-radius:8px;padding:8px 12px}.mc-introduction.center{align-items:center}.mc-introduction.center .mc-introduction-description{text-align:center}.mc-introduction.left{align-items:flex-start}.mc-introduction.left .mc-introduction-description{text-align:left}.mc-introduction.right{align-items:flex-end}.mc-introduction.right .mc-introduction-description{text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
2132
|
+
}
|
|
2133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IntroductionComponent, decorators: [{
|
|
2134
|
+
type: Component,
|
|
2135
|
+
args: [{ selector: 'mc-introduction', standalone: true, imports: [CommonModule], template: "<div class=\"mc-introduction\" [ngClass]=\"foundation.getIntroductionClasses()\">\n <div class=\"mc-introduction-logo-container\">\n <img *ngIf=\"logoImg\" [src]=\"logoImg\" [alt]=\"title\" [ngStyle]=\"foundation.getLogoStyle()\" />\n <div class=\"mc-introduction-title\">{{ title }}</div>\n </div>\n <div *ngIf=\"subTitle\" class=\"mc-introduction-sub-title\">{{ subTitle }}</div>\n <div *ngIf=\"description && description.length\" class=\"mc-introduction-description\">\n <div *ngFor=\"let item of description; let i = index\">{{ item }}</div>\n </div>\n <ng-content></ng-content>\n</div>", styles: [".mc-introduction{display:flex;gap:12px;flex-direction:column;color:var(--devui-text, #252b3a)}.mc-introduction .mc-introduction-logo-container{display:flex;align-items:center;gap:8px}.mc-introduction .mc-introduction-logo-container .mc-introduction-title{font-weight:700;font-size:32px;letter-spacing:1px}.mc-introduction .mc-introduction-sub-title{font-weight:500;font-size:18px}.mc-introduction .mc-introduction-description{font-size:var(--devui-font-size, 12px)}.mc-introduction .mc-introduction-description>div{line-height:1.5}.mc-introduction.filled{background-color:var(--devui-global-bg, #f6f6f8);border-radius:8px;padding:8px 12px}.mc-introduction.center{align-items:center}.mc-introduction.center .mc-introduction-description{text-align:center}.mc-introduction.left{align-items:flex-start}.mc-introduction.left .mc-introduction-description{text-align:left}.mc-introduction.right{align-items:flex-end}.mc-introduction.right .mc-introduction-description{text-align:right}\n"] }]
|
|
2136
|
+
}], ctorParameters: () => [], propDecorators: { logoImg: [{
|
|
2137
|
+
type: Input
|
|
2138
|
+
}], title: [{
|
|
2139
|
+
type: Input
|
|
2140
|
+
}], subTitle: [{
|
|
2141
|
+
type: Input
|
|
2142
|
+
}], description: [{
|
|
2143
|
+
type: Input
|
|
2144
|
+
}], logoWidth: [{
|
|
2145
|
+
type: Input
|
|
2146
|
+
}], logoHeight: [{
|
|
2147
|
+
type: Input
|
|
2148
|
+
}], background: [{
|
|
2149
|
+
type: Input
|
|
2150
|
+
}], align: [{
|
|
2151
|
+
type: Input
|
|
2152
|
+
}] } });
|
|
2153
|
+
|
|
2154
|
+
class IntroductionModule {
|
|
2155
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IntroductionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2156
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: IntroductionModule, imports: [CommonModule, IntroductionComponent], exports: [IntroductionComponent] }); }
|
|
2157
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IntroductionModule, imports: [CommonModule, IntroductionComponent] }); }
|
|
2158
|
+
}
|
|
2159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IntroductionModule, decorators: [{
|
|
2160
|
+
type: NgModule,
|
|
2161
|
+
args: [{
|
|
2162
|
+
imports: [CommonModule, IntroductionComponent],
|
|
2163
|
+
exports: [IntroductionComponent],
|
|
2164
|
+
}]
|
|
2165
|
+
}] });
|
|
2166
|
+
|
|
2167
|
+
var ListDirection;
|
|
2168
|
+
(function (ListDirection) {
|
|
2169
|
+
ListDirection["Horizontal"] = "horizontal";
|
|
2170
|
+
ListDirection["Vertical"] = "vertical";
|
|
2171
|
+
})(ListDirection || (ListDirection = {}));
|
|
2172
|
+
var ListVariant;
|
|
2173
|
+
(function (ListVariant) {
|
|
2174
|
+
ListVariant["Transparent"] = "transparent";
|
|
2175
|
+
ListVariant["Filled"] = "filled";
|
|
2176
|
+
ListVariant["Bordered"] = "bordered";
|
|
2177
|
+
ListVariant["None"] = "none";
|
|
2178
|
+
})(ListVariant || (ListVariant = {}));
|
|
2179
|
+
|
|
2180
|
+
const LazyLoadThreshold = 50;
|
|
2181
|
+
const InputTagNames = ['TEXTAREA', 'INPUT'];
|
|
2182
|
+
const ArrowUp$1 = 'ArrowUp';
|
|
2183
|
+
const ArrowDown$1 = 'ArrowDown';
|
|
2184
|
+
const Enter = 'Enter';
|
|
2185
|
+
|
|
2186
|
+
class ListFoundation extends BaseFoundation {
|
|
2187
|
+
constructor(adapter) {
|
|
2188
|
+
super({ ...adapter });
|
|
2189
|
+
}
|
|
2190
|
+
getListClasses() {
|
|
2191
|
+
const { direction, autoWrap } = this.getProps();
|
|
2192
|
+
return {
|
|
2193
|
+
'mc-list': true,
|
|
2194
|
+
'mc-list-horizontal': direction === ListDirection.Horizontal,
|
|
2195
|
+
'mc-list-nowrap': direction === ListDirection.Horizontal && !autoWrap,
|
|
2196
|
+
};
|
|
2197
|
+
}
|
|
2198
|
+
}
|
|
2199
|
+
|
|
2200
|
+
class ListComponent extends BaseComponent {
|
|
2201
|
+
constructor() {
|
|
2202
|
+
super();
|
|
2203
|
+
// 组件属性
|
|
2204
|
+
this.direction = ListDirection.Vertical;
|
|
2205
|
+
this.autoWrap = true;
|
|
2206
|
+
this.variant = ListVariant.Transparent;
|
|
2207
|
+
this.enableLazyLoad = false;
|
|
2208
|
+
this.enableShortKey = false;
|
|
2209
|
+
this.data = [];
|
|
2210
|
+
this.selectable = true;
|
|
2211
|
+
this.preSelectIndex = this.enableShortKey ? 0 : -1;
|
|
2212
|
+
this.loadMore = new EventEmitter();
|
|
2213
|
+
this.select = new EventEmitter();
|
|
2214
|
+
// 内容投影模板引用
|
|
2215
|
+
this.itemTemplate = null;
|
|
2216
|
+
this.ListVariant = ListVariant;
|
|
2217
|
+
}
|
|
2218
|
+
ngOnInit() {
|
|
2219
|
+
this.foundation = new ListFoundation(this.adapter);
|
|
2220
|
+
this.foundation.init();
|
|
2221
|
+
this.initListenDom();
|
|
2222
|
+
this.initListener();
|
|
2223
|
+
}
|
|
2224
|
+
ngOnDestroy() {
|
|
2225
|
+
super.ngOnDestroy();
|
|
2226
|
+
this.removeListener();
|
|
2227
|
+
}
|
|
2228
|
+
get adapter() {
|
|
2229
|
+
return {
|
|
2230
|
+
...super.adapter,
|
|
2231
|
+
getProps: () => ({
|
|
2232
|
+
direction: this.direction,
|
|
2233
|
+
autoWrap: this.autoWrap,
|
|
2234
|
+
variant: this.variant,
|
|
2235
|
+
enableLazyLoad: this.enableLazyLoad,
|
|
2236
|
+
enableShortKey: this.enableShortKey,
|
|
2237
|
+
data: this.data,
|
|
2238
|
+
inputEl: this.inputEl,
|
|
2239
|
+
selectable: this.selectable,
|
|
2240
|
+
}),
|
|
2241
|
+
};
|
|
2242
|
+
}
|
|
2243
|
+
// 计算属性
|
|
2244
|
+
get listClasses() {
|
|
2245
|
+
return this.foundation.getListClasses();
|
|
2246
|
+
}
|
|
2247
|
+
initListenDom() {
|
|
2248
|
+
if (this.inputEl) {
|
|
2249
|
+
const el = this.inputEl;
|
|
2250
|
+
if (InputTagNames.includes(el.tagName)) {
|
|
2251
|
+
this.listenDom = el;
|
|
2252
|
+
}
|
|
2253
|
+
else {
|
|
2254
|
+
this.listenDom =
|
|
2255
|
+
el.querySelector('textarea') || el.querySelector('input') || document;
|
|
2256
|
+
}
|
|
2257
|
+
}
|
|
2258
|
+
else {
|
|
2259
|
+
this.listenDom = document;
|
|
2260
|
+
}
|
|
2261
|
+
}
|
|
2262
|
+
initListener() {
|
|
2263
|
+
if (this.enableShortKey) {
|
|
2264
|
+
this.listenDom.addEventListener('keydown', this.onKeyDown.bind(this));
|
|
2265
|
+
}
|
|
2266
|
+
}
|
|
2267
|
+
removeListener() {
|
|
2268
|
+
this.listenDom.removeEventListener('keydown', this.onKeyDown.bind(this));
|
|
2269
|
+
}
|
|
2270
|
+
onListScroll(e) {
|
|
2271
|
+
if (!this.enableLazyLoad || this.direction !== ListDirection.Vertical) {
|
|
2272
|
+
return;
|
|
2273
|
+
}
|
|
2274
|
+
const targetEl = e.target;
|
|
2275
|
+
const scrollHeight = targetEl.scrollHeight;
|
|
2276
|
+
const clientHeight = targetEl.clientHeight;
|
|
2277
|
+
const scrollTop = targetEl.scrollTop;
|
|
2278
|
+
if (scrollHeight - clientHeight - scrollTop < LazyLoadThreshold) {
|
|
2279
|
+
this.loadMore.emit(e);
|
|
2280
|
+
}
|
|
2281
|
+
}
|
|
2282
|
+
onItemClick(clickedItem) {
|
|
2283
|
+
if (clickedItem.disabled) {
|
|
2284
|
+
return;
|
|
2285
|
+
}
|
|
2286
|
+
if (this.selectable) {
|
|
2287
|
+
for (let i = 0; i < this.data.length; i++) {
|
|
2288
|
+
this.data[i].active = this.data[i].value === clickedItem.value;
|
|
2289
|
+
}
|
|
2290
|
+
}
|
|
2291
|
+
this.select.emit({ ...clickedItem });
|
|
2292
|
+
}
|
|
2293
|
+
onKeyDown(e) {
|
|
2294
|
+
if (e.code === ArrowUp$1) {
|
|
2295
|
+
this.preSelectIndex =
|
|
2296
|
+
this.preSelectIndex === 0
|
|
2297
|
+
? this.data.length - 1
|
|
2298
|
+
: this.preSelectIndex - 1;
|
|
2299
|
+
}
|
|
2300
|
+
if (e.code === ArrowDown$1) {
|
|
2301
|
+
this.preSelectIndex =
|
|
2302
|
+
this.preSelectIndex === this.data.length - 1
|
|
2303
|
+
? 0
|
|
2304
|
+
: this.preSelectIndex + 1;
|
|
2305
|
+
}
|
|
2306
|
+
if (e.code === Enter) {
|
|
2307
|
+
if (this.selectable) {
|
|
2308
|
+
this.onItemClick(this.data[this.preSelectIndex]);
|
|
2309
|
+
}
|
|
2310
|
+
}
|
|
2311
|
+
}
|
|
2312
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2313
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ListComponent, isStandalone: true, selector: "mc-list", inputs: { direction: "direction", autoWrap: "autoWrap", variant: "variant", enableLazyLoad: "enableLazyLoad", enableShortKey: "enableShortKey", data: "data", inputEl: "inputEl", selectable: "selectable", preSelectIndex: "preSelectIndex" }, outputs: { loadMore: "loadMore", select: "select" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"listClasses\" (scroll)=\"onListScroll($event)\">\n <ng-container *ngFor=\"let item of data; let index = index\">\n <ng-container *ngIf=\"variant === ListVariant.None\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"variant !== ListVariant.None\">\n <div\n class=\"mc-list-item\"\n [class]=\"variant\"\n [ngClass]=\"{\n 'mc-list-item-disabled': item.disabled,\n 'mc-list-item-active': item.active,\n 'mc-list-item-pre-selection': index === preSelectIndex\n }\"\n (click)=\"onItemClick(item)\"\n >\n <ng-container *ngIf=\"itemTemplate; else defaultLabel\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\">\n </ng-container>\n </ng-container>\n\n <ng-template #defaultLabel>\n {{ item['label'] }}\n </ng-template>\n </div>\n </ng-container>\n </ng-container>\n</div>\n", styles: [".mc-list{width:100%;max-height:300px;box-sizing:border-box;overflow:auto}.mc-list.mc-list-horizontal .mc-list-item{width:unset}.mc-list:not(.mc-list-horizontal) .mc-list-item:not(:first-child){margin-top:4px}.mc-list .mc-list-item{width:100%;line-height:20px;padding:8px;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);border-radius:var(--devui-border-radius, 2px);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.mc-list .mc-list-item.filled{background-color:var(--devui-gray-form-control-bg, #f5f5f5)}.mc-list .mc-list-item.bordered{border:1px solid var(--devui-dividing-line, #f2f2f3)}.mc-list .mc-list-item:hover,.mc-list .mc-list-item.mc-list-item-pre-selection{color:var(--devui-list-item-hover-text, #252b3a);background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.mc-list .mc-list-item.mc-list-item-active{color:var(--devui-list-item-active-text, #252b3a);background-color:var(--devui-list-item-active-bg, #f2f5fc)}.mc-list .mc-list-item.mc-list-item-disabled{color:var(--devui-disabled-text, #cfd0d3);background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-list-horizontal{display:flex;flex-wrap:wrap;gap:12px}.mc-list-horizontal.mc-list-nowrap{flex-wrap:nowrap}.mc-list-horizontal.mc-list-nowrap .mc-list-item{flex:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
2314
|
+
}
|
|
2315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListComponent, decorators: [{
|
|
2316
|
+
type: Component,
|
|
2317
|
+
args: [{ selector: 'mc-list', standalone: true, imports: [CommonModule], template: "<div [ngClass]=\"listClasses\" (scroll)=\"onListScroll($event)\">\n <ng-container *ngFor=\"let item of data; let index = index\">\n <ng-container *ngIf=\"variant === ListVariant.None\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"variant !== ListVariant.None\">\n <div\n class=\"mc-list-item\"\n [class]=\"variant\"\n [ngClass]=\"{\n 'mc-list-item-disabled': item.disabled,\n 'mc-list-item-active': item.active,\n 'mc-list-item-pre-selection': index === preSelectIndex\n }\"\n (click)=\"onItemClick(item)\"\n >\n <ng-container *ngIf=\"itemTemplate; else defaultLabel\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\">\n </ng-container>\n </ng-container>\n\n <ng-template #defaultLabel>\n {{ item['label'] }}\n </ng-template>\n </div>\n </ng-container>\n </ng-container>\n</div>\n", styles: [".mc-list{width:100%;max-height:300px;box-sizing:border-box;overflow:auto}.mc-list.mc-list-horizontal .mc-list-item{width:unset}.mc-list:not(.mc-list-horizontal) .mc-list-item:not(:first-child){margin-top:4px}.mc-list .mc-list-item{width:100%;line-height:20px;padding:8px;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);border-radius:var(--devui-border-radius, 2px);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.mc-list .mc-list-item.filled{background-color:var(--devui-gray-form-control-bg, #f5f5f5)}.mc-list .mc-list-item.bordered{border:1px solid var(--devui-dividing-line, #f2f2f3)}.mc-list .mc-list-item:hover,.mc-list .mc-list-item.mc-list-item-pre-selection{color:var(--devui-list-item-hover-text, #252b3a);background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.mc-list .mc-list-item.mc-list-item-active{color:var(--devui-list-item-active-text, #252b3a);background-color:var(--devui-list-item-active-bg, #f2f5fc)}.mc-list .mc-list-item.mc-list-item-disabled{color:var(--devui-disabled-text, #cfd0d3);background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-list-horizontal{display:flex;flex-wrap:wrap;gap:12px}.mc-list-horizontal.mc-list-nowrap{flex-wrap:nowrap}.mc-list-horizontal.mc-list-nowrap .mc-list-item{flex:none}\n"] }]
|
|
2318
|
+
}], ctorParameters: () => [], propDecorators: { direction: [{
|
|
2319
|
+
type: Input
|
|
2320
|
+
}], autoWrap: [{
|
|
2321
|
+
type: Input
|
|
2322
|
+
}], variant: [{
|
|
2323
|
+
type: Input
|
|
2324
|
+
}], enableLazyLoad: [{
|
|
2325
|
+
type: Input
|
|
2326
|
+
}], enableShortKey: [{
|
|
2327
|
+
type: Input
|
|
2328
|
+
}], data: [{
|
|
2329
|
+
type: Input
|
|
2330
|
+
}], inputEl: [{
|
|
2331
|
+
type: Input
|
|
2332
|
+
}], selectable: [{
|
|
2333
|
+
type: Input
|
|
2334
|
+
}], preSelectIndex: [{
|
|
2335
|
+
type: Input
|
|
2336
|
+
}], loadMore: [{
|
|
2337
|
+
type: Output
|
|
2338
|
+
}], select: [{
|
|
2339
|
+
type: Output
|
|
2340
|
+
}], itemTemplate: [{
|
|
2341
|
+
type: ContentChild,
|
|
2342
|
+
args: ['item']
|
|
2343
|
+
}] } });
|
|
2344
|
+
|
|
2345
|
+
class ListModule {
|
|
2346
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2347
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: ListModule, imports: [CommonModule, ListComponent], exports: [ListComponent] }); }
|
|
2348
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListModule, imports: [CommonModule, ListComponent] }); }
|
|
2349
|
+
}
|
|
2350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ListModule, decorators: [{
|
|
2351
|
+
type: NgModule,
|
|
2352
|
+
args: [{
|
|
2353
|
+
declarations: [],
|
|
2354
|
+
imports: [CommonModule, ListComponent],
|
|
2355
|
+
exports: [ListComponent],
|
|
2356
|
+
}]
|
|
2357
|
+
}] });
|
|
2358
|
+
|
|
2359
|
+
class MDCardService {
|
|
2360
|
+
constructor() {
|
|
2361
|
+
this.xssWhiteList = getDefaultWhiteList();
|
|
2362
|
+
this.cssWhiteList = getDefaultCSSWhiteList();
|
|
2363
|
+
this.setDefaultXss();
|
|
2364
|
+
}
|
|
2365
|
+
setDefaultXss() {
|
|
2366
|
+
this.xssWhiteList['input'] = ['type', 'checked', 'disabled', 'class'];
|
|
2367
|
+
this.xssWhiteList['label'] = ['for'];
|
|
2368
|
+
this.xssWhiteList['ul'] = ['class'];
|
|
2369
|
+
this.xssWhiteList['div'] = ['class', 'key'];
|
|
2370
|
+
this.xssWhiteList['a'] = ['href', 'class', 'target', 'name'];
|
|
2371
|
+
this.xssWhiteList['ol'] = ['start'];
|
|
2372
|
+
this.xssWhiteList['p'] = ['class'];
|
|
2373
|
+
this.xssWhiteList['span'] = ['style', 'class', 'title', 'id'];
|
|
2374
|
+
this.xssWhiteList['svg'] = ['style', 'class', 'width', 'height', 'viewbox', 'preserveaspectratio', 'id', 'fill', 'stroke'];
|
|
2375
|
+
this.xssWhiteList['path'] = ['style', 'class', 'd', 'id', 'fill', 'stroke'];
|
|
2376
|
+
this.xssWhiteList['th'] = ['style'];
|
|
2377
|
+
this.xssWhiteList['td'] = ['style'];
|
|
2378
|
+
}
|
|
2379
|
+
onIgnoreTagAttr(tag, name, value, isWhiteAttr) {
|
|
2380
|
+
if (!isWhiteAttr && (name === 'id' || (tag === 'span' && name === 'style'))) {
|
|
2381
|
+
return name + '=' + value;
|
|
2382
|
+
}
|
|
2383
|
+
return undefined;
|
|
2384
|
+
}
|
|
2385
|
+
getXssWhiteList() {
|
|
2386
|
+
return this.xssWhiteList;
|
|
2387
|
+
}
|
|
2388
|
+
setXssWhiteList(list) {
|
|
2389
|
+
this.xssWhiteList = list;
|
|
2390
|
+
}
|
|
2391
|
+
setCustomXssRules(rules) {
|
|
2392
|
+
if (rules) {
|
|
2393
|
+
rules.forEach((rule) => {
|
|
2394
|
+
if (rule['value'] === null) {
|
|
2395
|
+
delete this.xssWhiteList[rule['key']];
|
|
2396
|
+
}
|
|
2397
|
+
else {
|
|
2398
|
+
this.xssWhiteList[rule['key']] = rule['value'];
|
|
2399
|
+
}
|
|
2400
|
+
});
|
|
2401
|
+
}
|
|
2402
|
+
}
|
|
2403
|
+
setMdPlugins(plugins, mdt) {
|
|
2404
|
+
if (plugins && plugins.length) {
|
|
2405
|
+
plugins.forEach(item => {
|
|
2406
|
+
const { plugin, opts } = item;
|
|
2407
|
+
mdt.use(plugin, opts);
|
|
2408
|
+
});
|
|
2409
|
+
}
|
|
2410
|
+
}
|
|
2411
|
+
filterHtml(html) {
|
|
2412
|
+
return filterXSS(html, {
|
|
2413
|
+
whiteList: this.xssWhiteList,
|
|
2414
|
+
onIgnoreTagAttr: this.onIgnoreTagAttr,
|
|
2415
|
+
css: {
|
|
2416
|
+
whiteList: Object.assign({}, this.cssWhiteList, {
|
|
2417
|
+
top: true,
|
|
2418
|
+
left: true,
|
|
2419
|
+
bottom: true,
|
|
1246
2420
|
right: true,
|
|
1247
2421
|
}),
|
|
1248
2422
|
},
|
|
@@ -1338,8 +2512,8 @@ class MermaidService {
|
|
|
1338
2512
|
const state = this.viewStateMap.get(container);
|
|
1339
2513
|
if (!state)
|
|
1340
2514
|
return;
|
|
1341
|
-
svg.style.maxWidth = '
|
|
1342
|
-
svg.style.maxHeight = '
|
|
2515
|
+
svg.style.maxWidth = '90%';
|
|
2516
|
+
svg.style.maxHeight = '90%';
|
|
1343
2517
|
svg.style.position = 'absolute';
|
|
1344
2518
|
svg.style.left = '50%';
|
|
1345
2519
|
svg.style.top = '50%';
|
|
@@ -1733,11 +2907,11 @@ class CodeBlockComponent extends BaseComponent {
|
|
|
1733
2907
|
this.cdr.detectChanges();
|
|
1734
2908
|
}
|
|
1735
2909
|
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 }); }
|
|
1736
|
-
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 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 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 stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g>\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 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 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 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 transform=\"translate(-592.000000, -204.000000)\"\n >\n <g\n transform=\"translate(560.000000, 180.000000)\"\n >\n <text\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 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 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" }] }); }
|
|
2910
|
+
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 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 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 stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g>\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 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 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 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 transform=\"translate(-592.000000, -204.000000)\"\n >\n <g\n transform=\"translate(560.000000, 180.000000)\"\n >\n <text\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 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 ol{list-style-type:decimal}.mc-markdown-render ::ng-deep table{margin:10px 0;border-collapse:collapse;display:table;width:max-content}.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);max-width:480px}.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;position:relative}.mc-markdown-render.mc-markdown-render-dark{color:#ced1db}.mc-markdown-render.mc-markdown-render-light{color:#252b3a}::ng-deep .mc-table-container{max-width:100%;width:fit-content;overflow-x:auto}::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;line-height:24px}::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" }] }); }
|
|
1737
2911
|
}
|
|
1738
2912
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CodeBlockComponent, decorators: [{
|
|
1739
2913
|
type: Component,
|
|
1740
|
-
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 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 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 stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g>\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 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 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 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 transform=\"translate(-592.000000, -204.000000)\"\n >\n <g\n transform=\"translate(560.000000, 180.000000)\"\n >\n <text\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 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 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"] }]
|
|
2914
|
+
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 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 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 stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g>\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 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 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 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 transform=\"translate(-592.000000, -204.000000)\"\n >\n <g\n transform=\"translate(560.000000, 180.000000)\"\n >\n <text\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 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 ol{list-style-type:decimal}.mc-markdown-render ::ng-deep table{margin:10px 0;border-collapse:collapse;display:table;width:max-content}.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);max-width:480px}.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;position:relative}.mc-markdown-render.mc-markdown-render-dark{color:#ced1db}.mc-markdown-render.mc-markdown-render-light{color:#252b3a}::ng-deep .mc-table-container{max-width:100%;width:fit-content;overflow-x:auto}::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;line-height:24px}::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"] }]
|
|
1741
2915
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { code: [{
|
|
1742
2916
|
type: Input
|
|
1743
2917
|
}], language: [{
|
|
@@ -1790,7 +2964,7 @@ class MarkdownCardFoundation extends BaseFoundation {
|
|
|
1790
2964
|
const thinkClass = thinkOptions?.customClass || 'mc-think-block';
|
|
1791
2965
|
return (content
|
|
1792
2966
|
?.replace('<think>', `<div class="${thinkClass}">`)
|
|
1793
|
-
?.replace('</think>', '</div>') || '');
|
|
2967
|
+
?.replace('</think>', '\n</div>') || '');
|
|
1794
2968
|
};
|
|
1795
2969
|
this.parseTypingContent = (content) => {
|
|
1796
2970
|
const { typingOptions } = this.getProps();
|
|
@@ -2482,11 +3656,11 @@ class MarkdownCardComponent extends BaseComponent {
|
|
|
2482
3656
|
this.clearCodeBlockCache();
|
|
2483
3657
|
}
|
|
2484
3658
|
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 }); }
|
|
2485
|
-
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", incrementalDom: "incrementalDom", mermaidConfig: "mermaidConfig", actionsTemplate: "actionsTemplate", headerTemplate: "headerTemplate", contentTemplate: "contentTemplate" }, outputs: { afterMdtInit: "afterMdtInit", mdRenderChange: "mdRenderChange", 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 ol{list-style-type:decimal}.mc-markdown-render ::ng-deep table{margin
|
|
3659
|
+
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", incrementalDom: "incrementalDom", mermaidConfig: "mermaidConfig", actionsTemplate: "actionsTemplate", headerTemplate: "headerTemplate", contentTemplate: "contentTemplate" }, outputs: { afterMdtInit: "afterMdtInit", mdRenderChange: "mdRenderChange", 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 ol{list-style-type:decimal}.mc-markdown-render ::ng-deep table{margin:10px 0;border-collapse:collapse;display:table;width:max-content}.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);max-width:480px}.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;position:relative}.mc-markdown-render.mc-markdown-render-dark{color:#ced1db}.mc-markdown-render.mc-markdown-render-light{color:#252b3a}::ng-deep .mc-table-container{max-width:100%;width:fit-content;overflow-x:auto}::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;line-height:24px}::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"] }] }); }
|
|
2486
3660
|
}
|
|
2487
3661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MarkdownCardComponent, decorators: [{
|
|
2488
3662
|
type: Component,
|
|
2489
|
-
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 ol{list-style-type:decimal}.mc-markdown-render ::ng-deep table{margin
|
|
3663
|
+
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 ol{list-style-type:decimal}.mc-markdown-render ::ng-deep table{margin:10px 0;border-collapse:collapse;display:table;width:max-content}.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);max-width:480px}.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;position:relative}.mc-markdown-render.mc-markdown-render-dark{color:#ced1db}.mc-markdown-render.mc-markdown-render-light{color:#252b3a}::ng-deep .mc-table-container{max-width:100%;width:fit-content;overflow-x:auto}::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;line-height:24px}::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"] }]
|
|
2490
3664
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { content: [{
|
|
2491
3665
|
type: Input
|
|
2492
3666
|
}], typing: [{
|
|
@@ -2569,6 +3743,1332 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
2569
3743
|
}]
|
|
2570
3744
|
}] });
|
|
2571
3745
|
|
|
3746
|
+
// Mention组件的公共常量定义
|
|
3747
|
+
const MentionSeparator = ' ';
|
|
3748
|
+
const ArrowLeft = 'ArrowLeft';
|
|
3749
|
+
const ArrowRight = 'ArrowRight';
|
|
3750
|
+
const ArrowUp = 'ArrowUp';
|
|
3751
|
+
const ArrowDown = 'ArrowDown';
|
|
3752
|
+
const Escape = 'Escape';
|
|
3753
|
+
|
|
3754
|
+
class MentionFoundation extends BaseFoundation {
|
|
3755
|
+
constructor(adapter) {
|
|
3756
|
+
super({ ...adapter });
|
|
3757
|
+
this.inputEl = null;
|
|
3758
|
+
this.originEl = null;
|
|
3759
|
+
this.overlayEl = null;
|
|
3760
|
+
this.currentTrigger = '';
|
|
3761
|
+
this.currentSearchValue = '';
|
|
3762
|
+
this.currentTriggerIndex = -1;
|
|
3763
|
+
this.currentCursorIndex = -1;
|
|
3764
|
+
this.autoUpdateCleanup = null;
|
|
3765
|
+
// 处理输入事件
|
|
3766
|
+
this.handleInput = () => {
|
|
3767
|
+
if (!this.inputEl)
|
|
3768
|
+
return;
|
|
3769
|
+
const value = this.inputEl.value;
|
|
3770
|
+
const cursorPosition = this.inputEl.selectionStart || 0;
|
|
3771
|
+
// 检查是否匹配触发词
|
|
3772
|
+
const matchResult = this.checkPrefixMatch(value, cursorPosition);
|
|
3773
|
+
if (matchResult) {
|
|
3774
|
+
const { trigger, triggerIndex, searchValue } = matchResult;
|
|
3775
|
+
this.currentTrigger = trigger;
|
|
3776
|
+
this.currentSearchValue = searchValue;
|
|
3777
|
+
this.currentTriggerIndex = triggerIndex;
|
|
3778
|
+
this.currentCursorIndex = cursorPosition;
|
|
3779
|
+
// 触发搜索变化事件
|
|
3780
|
+
this._adapter.searchChange({
|
|
3781
|
+
value: searchValue,
|
|
3782
|
+
trigger,
|
|
3783
|
+
triggerIndex,
|
|
3784
|
+
cursorIndex: cursorPosition
|
|
3785
|
+
});
|
|
3786
|
+
// 当有匹配的触发词时，就显示弹窗
|
|
3787
|
+
// 这样可以确保在用户输入过程中，弹窗始终显示，直到用户选择了一个选项或者点击了其他地方
|
|
3788
|
+
this.updateModelValue(true);
|
|
3789
|
+
// 这里不再直接调用updateOverlayPosition，而是通过watch modelValue的nextTick来调用，确保overlayEl已渲染完成
|
|
3790
|
+
}
|
|
3791
|
+
else {
|
|
3792
|
+
// 没有匹配的触发词，关闭选择面板
|
|
3793
|
+
this.resetMention();
|
|
3794
|
+
}
|
|
3795
|
+
};
|
|
3796
|
+
// 处理键盘事件
|
|
3797
|
+
this.handleKeyDown = (event) => {
|
|
3798
|
+
if (!this.inputEl)
|
|
3799
|
+
return;
|
|
3800
|
+
switch (event.key) {
|
|
3801
|
+
case ArrowUp:
|
|
3802
|
+
if (this.props.modelValue) {
|
|
3803
|
+
event.preventDefault();
|
|
3804
|
+
this.handleArrowKey(-1);
|
|
3805
|
+
}
|
|
3806
|
+
break;
|
|
3807
|
+
case ArrowDown:
|
|
3808
|
+
if (this.props.modelValue) {
|
|
3809
|
+
event.preventDefault();
|
|
3810
|
+
this.handleArrowKey(1);
|
|
3811
|
+
}
|
|
3812
|
+
break;
|
|
3813
|
+
case ArrowLeft:
|
|
3814
|
+
case ArrowRight:
|
|
3815
|
+
// 左右箭头键：延迟检查是否需要触发提及
|
|
3816
|
+
setTimeout(() => {
|
|
3817
|
+
this.handleInput();
|
|
3818
|
+
});
|
|
3819
|
+
break;
|
|
3820
|
+
case Escape:
|
|
3821
|
+
event.preventDefault();
|
|
3822
|
+
this.resetMention();
|
|
3823
|
+
break;
|
|
3824
|
+
case MentionSeparator:
|
|
3825
|
+
// 只有在面板打开时才阻止空格的默认行为
|
|
3826
|
+
if (this.props.modelValue) {
|
|
3827
|
+
this.resetMention();
|
|
3828
|
+
}
|
|
3829
|
+
break;
|
|
3830
|
+
default:
|
|
3831
|
+
// 其他按键不做处理
|
|
3832
|
+
break;
|
|
3833
|
+
}
|
|
3834
|
+
};
|
|
3835
|
+
// 处理点击事件
|
|
3836
|
+
this.handleClick = () => {
|
|
3837
|
+
if (!this.inputEl)
|
|
3838
|
+
return;
|
|
3839
|
+
// 点击事件触发提及检查
|
|
3840
|
+
this.handleInput();
|
|
3841
|
+
};
|
|
3842
|
+
// 处理文档点击事件
|
|
3843
|
+
this.handleDocumentClick = (e) => {
|
|
3844
|
+
if (this.originEl) {
|
|
3845
|
+
if (this.props.modelValue) {
|
|
3846
|
+
// 如果下拉菜单是打开的，检查点击是否发生在originEl外部
|
|
3847
|
+
if (!this.originEl.contains(e.target)) {
|
|
3848
|
+
this.resetMention();
|
|
3849
|
+
}
|
|
3850
|
+
}
|
|
3851
|
+
else {
|
|
3852
|
+
// 如果下拉菜单是关闭的，检查点击是否发生在originEl内部
|
|
3853
|
+
if (this.originEl.contains(e.target)) {
|
|
3854
|
+
this.handleInput();
|
|
3855
|
+
}
|
|
3856
|
+
}
|
|
3857
|
+
}
|
|
3858
|
+
};
|
|
3859
|
+
this.props = {
|
|
3860
|
+
modelValue: false,
|
|
3861
|
+
prefix: [],
|
|
3862
|
+
fitHostWidth: true,
|
|
3863
|
+
optionsCount: 0,
|
|
3864
|
+
...this.getProps()
|
|
3865
|
+
};
|
|
3866
|
+
// 创建防抖版本的handleInput方法
|
|
3867
|
+
this.handleInput = debounce(this.handleInput, 300);
|
|
3868
|
+
}
|
|
3869
|
+
// 更新配置选项
|
|
3870
|
+
updateOptions(options) {
|
|
3871
|
+
this.props = { ...this.props, ...options };
|
|
3872
|
+
this.updateOverlayPosition();
|
|
3873
|
+
}
|
|
3874
|
+
// 设置输入元素
|
|
3875
|
+
setInputEl(el) {
|
|
3876
|
+
this.inputEl = el;
|
|
3877
|
+
}
|
|
3878
|
+
// 设置原点元素
|
|
3879
|
+
setOriginEl(el) {
|
|
3880
|
+
this.originEl = el;
|
|
3881
|
+
this.updateOverlayPosition();
|
|
3882
|
+
}
|
|
3883
|
+
// 设置覆盖层元素
|
|
3884
|
+
setOverlayEl(el) {
|
|
3885
|
+
this.overlayEl = el;
|
|
3886
|
+
this.updateOverlayPosition();
|
|
3887
|
+
}
|
|
3888
|
+
// 初始化事件
|
|
3889
|
+
initEvents() {
|
|
3890
|
+
if (this.inputEl) {
|
|
3891
|
+
this.inputEl.addEventListener('input', this.handleInput);
|
|
3892
|
+
this.inputEl.addEventListener('keydown', this.handleKeyDown);
|
|
3893
|
+
this.inputEl.addEventListener('click', this.handleClick);
|
|
3894
|
+
}
|
|
3895
|
+
// 监听文档点击事件，用于处理点击外部关闭下拉菜单
|
|
3896
|
+
document.addEventListener('click', this.handleDocumentClick);
|
|
3897
|
+
}
|
|
3898
|
+
// 销毁事件
|
|
3899
|
+
destroy() {
|
|
3900
|
+
if (this.inputEl) {
|
|
3901
|
+
this.inputEl.removeEventListener('input', this.handleInput);
|
|
3902
|
+
this.inputEl.removeEventListener('keydown', this.handleKeyDown);
|
|
3903
|
+
this.inputEl.removeEventListener('click', this.handleClick);
|
|
3904
|
+
}
|
|
3905
|
+
// 移除文档点击事件监听
|
|
3906
|
+
document.removeEventListener('click', this.handleDocumentClick);
|
|
3907
|
+
// 清理autoUpdate
|
|
3908
|
+
if (this.autoUpdateCleanup) {
|
|
3909
|
+
this.autoUpdateCleanup();
|
|
3910
|
+
this.autoUpdateCleanup = null;
|
|
3911
|
+
}
|
|
3912
|
+
this.inputEl = null;
|
|
3913
|
+
this.originEl = null;
|
|
3914
|
+
this.overlayEl = null;
|
|
3915
|
+
}
|
|
3916
|
+
// 重置Mention状态
|
|
3917
|
+
resetMention() {
|
|
3918
|
+
this.currentTrigger = '';
|
|
3919
|
+
this.currentSearchValue = '';
|
|
3920
|
+
this.currentTriggerIndex = -1;
|
|
3921
|
+
this.currentCursorIndex = -1;
|
|
3922
|
+
this.updateModelValue(false);
|
|
3923
|
+
}
|
|
3924
|
+
// 更新模型值
|
|
3925
|
+
updateModelValue(val) {
|
|
3926
|
+
if (this.props.modelValue !== val) {
|
|
3927
|
+
this.props.modelValue = val;
|
|
3928
|
+
this._adapter.updateModelValue(val);
|
|
3929
|
+
this._adapter.toggleChange(val);
|
|
3930
|
+
}
|
|
3931
|
+
}
|
|
3932
|
+
// 检查前缀匹配
|
|
3933
|
+
checkPrefixMatch(value, cursorPosition) {
|
|
3934
|
+
if (!this.props.prefix || this.props.prefix.length === 0)
|
|
3935
|
+
return null;
|
|
3936
|
+
const text = value.replace(/[\r\n]/g, MentionSeparator);
|
|
3937
|
+
const beforeCursor = text.substring(0, cursorPosition);
|
|
3938
|
+
// 检查所有前缀
|
|
3939
|
+
for (const prefixItem of this.props.prefix) {
|
|
3940
|
+
let trigger = '';
|
|
3941
|
+
let onlyInputStart = false;
|
|
3942
|
+
if (typeof prefixItem === 'string') {
|
|
3943
|
+
trigger = prefixItem;
|
|
3944
|
+
}
|
|
3945
|
+
else if (isObject(prefixItem)) {
|
|
3946
|
+
trigger = prefixItem.key;
|
|
3947
|
+
onlyInputStart = Boolean(prefixItem.onlyInputStart);
|
|
3948
|
+
}
|
|
3949
|
+
else {
|
|
3950
|
+
continue;
|
|
3951
|
+
}
|
|
3952
|
+
// 查找最后一个触发词的位置
|
|
3953
|
+
const triggerIndex = beforeCursor.lastIndexOf(trigger);
|
|
3954
|
+
// 查找最后一个分隔符的位置
|
|
3955
|
+
const separatorPos = beforeCursor.lastIndexOf(MentionSeparator);
|
|
3956
|
+
// 触发词到光标的字符串
|
|
3957
|
+
const mentionStr = beforeCursor.substring(triggerIndex, cursorPosition);
|
|
3958
|
+
// 提及字符串的最后一个字符
|
|
3959
|
+
const lastMentionChar = mentionStr.charAt(mentionStr.length - 1);
|
|
3960
|
+
// 条件判断：
|
|
3961
|
+
// 1. 触发词位置有效
|
|
3962
|
+
// 2. 如果设置了onlyInputStart，触发词必须在输入开始处
|
|
3963
|
+
// 3. 触发词位置必须在最后一个分隔符之后
|
|
3964
|
+
// 4. 提及字符串的最后一个字符不能是分隔符
|
|
3965
|
+
if (triggerIndex < 0 ||
|
|
3966
|
+
(triggerIndex > 0 && onlyInputStart) ||
|
|
3967
|
+
triggerIndex < separatorPos ||
|
|
3968
|
+
lastMentionChar === MentionSeparator) {
|
|
3969
|
+
continue;
|
|
3970
|
+
}
|
|
3971
|
+
else {
|
|
3972
|
+
const searchValue = mentionStr.slice(trigger.length);
|
|
3973
|
+
return { trigger, triggerIndex, searchValue };
|
|
3974
|
+
}
|
|
3975
|
+
}
|
|
3976
|
+
return null;
|
|
3977
|
+
}
|
|
3978
|
+
// 处理箭头键
|
|
3979
|
+
handleArrowKey(direction) {
|
|
3980
|
+
let newIndex = (this.getCurrentActiveIndex() + direction) % this.props.optionsCount;
|
|
3981
|
+
if (newIndex < 0) {
|
|
3982
|
+
newIndex = this.props.optionsCount - 1;
|
|
3983
|
+
}
|
|
3984
|
+
this._adapter.activeIndexChange(newIndex);
|
|
3985
|
+
}
|
|
3986
|
+
// 获取当前活动索引
|
|
3987
|
+
getCurrentActiveIndex() {
|
|
3988
|
+
// 默认返回0，实际实现可能需要根据adapter获取
|
|
3989
|
+
return 0;
|
|
3990
|
+
}
|
|
3991
|
+
// 处理选择事件
|
|
3992
|
+
handleSelect() {
|
|
3993
|
+
if (!this.inputEl || this.currentTriggerIndex === -1)
|
|
3994
|
+
return;
|
|
3995
|
+
const value = this.inputEl.value;
|
|
3996
|
+
const beforeTrigger = value.substring(0, this.currentTriggerIndex);
|
|
3997
|
+
const afterCursor = value.substring(this.currentCursorIndex);
|
|
3998
|
+
// 这里需要根据实际选择的项进行替换，暂时使用示例实现
|
|
3999
|
+
const selectedValue = `${beforeTrigger}@selected ${afterCursor}`;
|
|
4000
|
+
this.inputEl.value = selectedValue;
|
|
4001
|
+
// 设置光标位置
|
|
4002
|
+
const newCursorPosition = beforeTrigger.length + '@selected '.length;
|
|
4003
|
+
this.inputEl.setSelectionRange(newCursorPosition, newCursorPosition);
|
|
4004
|
+
// 关闭选择面板
|
|
4005
|
+
this.resetMention();
|
|
4006
|
+
// 触发input事件以更新绑定值
|
|
4007
|
+
this.inputEl.dispatchEvent(new Event('input', { bubbles: true }));
|
|
4008
|
+
}
|
|
4009
|
+
// 更新覆盖层位置
|
|
4010
|
+
updateOverlayPosition() {
|
|
4011
|
+
return new Promise((resolve) => {
|
|
4012
|
+
if (!this.originEl || !this.overlayEl) {
|
|
4013
|
+
resolve(undefined);
|
|
4014
|
+
return;
|
|
4015
|
+
}
|
|
4016
|
+
// 设置宽度
|
|
4017
|
+
if (this.props.fitHostWidth) {
|
|
4018
|
+
const originRect = this.originEl.getBoundingClientRect();
|
|
4019
|
+
this.overlayEl.style.width = `${originRect.width}px`;
|
|
4020
|
+
}
|
|
4021
|
+
else {
|
|
4022
|
+
this.overlayEl.style.width = '';
|
|
4023
|
+
}
|
|
4024
|
+
// 清理之前的autoUpdate
|
|
4025
|
+
if (this.autoUpdateCleanup) {
|
|
4026
|
+
this.autoUpdateCleanup();
|
|
4027
|
+
this.autoUpdateCleanup = null;
|
|
4028
|
+
}
|
|
4029
|
+
// 设置位置：使用@floating-ui/dom计算位置，与Vue版本保持一致
|
|
4030
|
+
computePosition(this.originEl, this.overlayEl, {
|
|
4031
|
+
strategy: 'fixed',
|
|
4032
|
+
placement: 'top-start',
|
|
4033
|
+
middleware: [offset(4)],
|
|
4034
|
+
}).then(({ x, y }) => {
|
|
4035
|
+
this.overlayEl.style.top = `${y}px`;
|
|
4036
|
+
this.overlayEl.style.left = `${x}px`;
|
|
4037
|
+
this.overlayEl.style.position = 'fixed';
|
|
4038
|
+
// 返回位置信息，用于Vue组件同步样式
|
|
4039
|
+
resolve({
|
|
4040
|
+
top: `${y}px`,
|
|
4041
|
+
left: `${x}px`,
|
|
4042
|
+
width: this.props.fitHostWidth ? `${this.originEl.getBoundingClientRect().width}px` : ''
|
|
4043
|
+
});
|
|
4044
|
+
// 设置autoUpdate，自动处理滚动、调整大小和视口变化事件
|
|
4045
|
+
this.autoUpdateCleanup = autoUpdate(this.originEl, this.overlayEl, () => {
|
|
4046
|
+
if (this.originEl && this.overlayEl) {
|
|
4047
|
+
// 当fitHostWidth为true时，更新宽度
|
|
4048
|
+
if (this.props.fitHostWidth) {
|
|
4049
|
+
const originRect = this.originEl.getBoundingClientRect();
|
|
4050
|
+
this.overlayEl.style.width = `${originRect.width}px`;
|
|
4051
|
+
}
|
|
4052
|
+
computePosition(this.originEl, this.overlayEl, {
|
|
4053
|
+
strategy: 'fixed',
|
|
4054
|
+
placement: 'top-start',
|
|
4055
|
+
middleware: [offset(4)],
|
|
4056
|
+
}).then(({ x, y }) => {
|
|
4057
|
+
this.overlayEl.style.top = `${y}px`;
|
|
4058
|
+
this.overlayEl.style.left = `${x}px`;
|
|
4059
|
+
});
|
|
4060
|
+
}
|
|
4061
|
+
}, {
|
|
4062
|
+
// 添加对视口变化的更全面监听，确保浏览器F12打开/关闭时位置能正确更新
|
|
4063
|
+
animationFrame: true,
|
|
4064
|
+
elementResize: true,
|
|
4065
|
+
ancestorScroll: true,
|
|
4066
|
+
ancestorResize: true,
|
|
4067
|
+
layoutShift: true
|
|
4068
|
+
});
|
|
4069
|
+
}).catch(() => {
|
|
4070
|
+
// 处理计算位置失败的情况
|
|
4071
|
+
resolve(undefined);
|
|
4072
|
+
});
|
|
4073
|
+
});
|
|
4074
|
+
}
|
|
4075
|
+
// 获取当前搜索值
|
|
4076
|
+
getCurrentSearchValue() {
|
|
4077
|
+
return this.currentSearchValue;
|
|
4078
|
+
}
|
|
4079
|
+
// 获取当前触发词
|
|
4080
|
+
getCurrentTrigger() {
|
|
4081
|
+
return this.currentTrigger;
|
|
4082
|
+
}
|
|
4083
|
+
}
|
|
4084
|
+
|
|
4085
|
+
class MentionComponent extends BaseComponent {
|
|
4086
|
+
set optionsCount(val) {
|
|
4087
|
+
this._optionsCount = val;
|
|
4088
|
+
// 当optionsCount变化时，更新foundation的配置
|
|
4089
|
+
if (this.foundation) {
|
|
4090
|
+
this.foundation.updateOptions({ optionsCount: val });
|
|
4091
|
+
}
|
|
4092
|
+
}
|
|
4093
|
+
get optionsCount() {
|
|
4094
|
+
return this._optionsCount;
|
|
4095
|
+
}
|
|
4096
|
+
constructor() {
|
|
4097
|
+
super();
|
|
4098
|
+
this.prefix = ['@'];
|
|
4099
|
+
this.fitHostWidth = true;
|
|
4100
|
+
// 选项数量，用于键盘导航
|
|
4101
|
+
this._optionsCount = 0;
|
|
4102
|
+
this.updateModelValue = new EventEmitter();
|
|
4103
|
+
this.searchChange = new EventEmitter();
|
|
4104
|
+
this.toggleChange = new EventEmitter();
|
|
4105
|
+
// 当前选中索引变化事件
|
|
4106
|
+
this.activeIndexChange = new EventEmitter();
|
|
4107
|
+
// 当前选中的索引
|
|
4108
|
+
this.activeIndex = -1;
|
|
4109
|
+
this.overlayStyle = { top: '0px', left: '0px', width: '' };
|
|
4110
|
+
this.inputEl = null;
|
|
4111
|
+
// 私有属性存储实际的modelValue
|
|
4112
|
+
this._modelValue = false;
|
|
4113
|
+
// ControlValueAccessor 接口实现
|
|
4114
|
+
this.onChange = () => { };
|
|
4115
|
+
this.onTouched = () => { };
|
|
4116
|
+
// 处理文档点击事件，点击外部关闭Mention面板
|
|
4117
|
+
this.onDocumentClick = (e) => {
|
|
4118
|
+
if (this.originEl && this.originEl.nativeElement && this.modelValue) {
|
|
4119
|
+
if (!this.originEl.nativeElement.contains(e.target)) {
|
|
4120
|
+
this.foundation.resetMention();
|
|
4121
|
+
}
|
|
4122
|
+
}
|
|
4123
|
+
};
|
|
4124
|
+
}
|
|
4125
|
+
ngOnInit() {
|
|
4126
|
+
this.foundation = new MentionFoundation(this.adapter);
|
|
4127
|
+
}
|
|
4128
|
+
get adapter() {
|
|
4129
|
+
return {
|
|
4130
|
+
...super.adapter,
|
|
4131
|
+
updateModelValue: (val) => {
|
|
4132
|
+
// 调用modelValue的setter方法，确保位置更新逻辑被执行
|
|
4133
|
+
this.modelValue = val;
|
|
4134
|
+
},
|
|
4135
|
+
searchChange: (event) => this.searchChange.emit(event),
|
|
4136
|
+
activeIndexChange: (index) => {
|
|
4137
|
+
this.activeIndex = index;
|
|
4138
|
+
this.activeIndexChange.emit(index);
|
|
4139
|
+
},
|
|
4140
|
+
toggleChange: (val) => this.toggleChange.emit(val)
|
|
4141
|
+
};
|
|
4142
|
+
}
|
|
4143
|
+
ngAfterViewInit() {
|
|
4144
|
+
// 添加安全检查 - 仅检查必要元素，overlayEl有*ngIf条件可能不会立即渲染
|
|
4145
|
+
if (!this.popperTriggerEl || !this.originEl) {
|
|
4146
|
+
console.error('ViewChild elements not found');
|
|
4147
|
+
return;
|
|
4148
|
+
}
|
|
4149
|
+
const hostElement = this.popperTriggerEl.nativeElement;
|
|
4150
|
+
let foundInputEl = null;
|
|
4151
|
+
// 检查hostElement本身是否是输入元素
|
|
4152
|
+
if (hostElement.tagName === 'TEXTAREA' || hostElement.tagName === 'INPUT') {
|
|
4153
|
+
foundInputEl = hostElement;
|
|
4154
|
+
}
|
|
4155
|
+
else {
|
|
4156
|
+
// 先查找mc-input组件
|
|
4157
|
+
const mcInputComponent = hostElement.querySelector('mc-input');
|
|
4158
|
+
if (mcInputComponent) {
|
|
4159
|
+
// 如果找到mc-input组件，查找其内部的textarea元素
|
|
4160
|
+
foundInputEl = mcInputComponent.querySelector('textarea');
|
|
4161
|
+
}
|
|
4162
|
+
else {
|
|
4163
|
+
// 否则在hostElement内部查找原生输入元素
|
|
4164
|
+
foundInputEl = hostElement.querySelector('textarea') || hostElement.querySelector('input');
|
|
4165
|
+
}
|
|
4166
|
+
}
|
|
4167
|
+
if (!foundInputEl) {
|
|
4168
|
+
console.error('Input/Textarea element not found in Mention component');
|
|
4169
|
+
return;
|
|
4170
|
+
}
|
|
4171
|
+
// 初始化foundation的元素
|
|
4172
|
+
this.inputEl = foundInputEl;
|
|
4173
|
+
this.foundation.setInputEl(this.inputEl);
|
|
4174
|
+
this.foundation.setOriginEl(this.originEl.nativeElement);
|
|
4175
|
+
// 仅在overlayEl存在时设置，否则Foundation会在需要时处理
|
|
4176
|
+
if (this.overlayEl) {
|
|
4177
|
+
this.foundation.setOverlayEl(this.overlayEl.nativeElement);
|
|
4178
|
+
}
|
|
4179
|
+
// 初始化事件
|
|
4180
|
+
this.foundation.initEvents();
|
|
4181
|
+
}
|
|
4182
|
+
ngOnDestroy() {
|
|
4183
|
+
this.cleanupDocumentClick();
|
|
4184
|
+
// 清理Foundation资源
|
|
4185
|
+
this.foundation.destroy();
|
|
4186
|
+
super.ngOnDestroy();
|
|
4187
|
+
}
|
|
4188
|
+
// 监听modelValue变化，更新overlay位置
|
|
4189
|
+
set modelValue(val) {
|
|
4190
|
+
if (this._modelValue !== val) {
|
|
4191
|
+
this._modelValue = val;
|
|
4192
|
+
// 当显示Mention面板时，确保overlay元素已传递给foundation并更新位置
|
|
4193
|
+
if (val && this.foundation) {
|
|
4194
|
+
// 使用setTimeout确保overlayEl已经渲染完成
|
|
4195
|
+
setTimeout(() => {
|
|
4196
|
+
// 检查overlayEl是否可用，如果可用则传递给foundation
|
|
4197
|
+
if (this.overlayEl) {
|
|
4198
|
+
this.foundation.setOverlayEl(this.overlayEl.nativeElement);
|
|
4199
|
+
// 获取位置信息并更新组件样式
|
|
4200
|
+
const positionInfo = this.foundation.updateOverlayPosition();
|
|
4201
|
+
if (positionInfo instanceof Promise) {
|
|
4202
|
+
positionInfo.then(pos => {
|
|
4203
|
+
if (pos) {
|
|
4204
|
+
this.overlayStyle = pos;
|
|
4205
|
+
}
|
|
4206
|
+
});
|
|
4207
|
+
}
|
|
4208
|
+
else if (positionInfo) {
|
|
4209
|
+
this.overlayStyle = positionInfo;
|
|
4210
|
+
}
|
|
4211
|
+
}
|
|
4212
|
+
}, 0);
|
|
4213
|
+
}
|
|
4214
|
+
// 调用onChange回调，支持ngModel双向绑定
|
|
4215
|
+
this.onChange(val);
|
|
4216
|
+
// 仍然触发updateModelValue事件，保持向后兼容
|
|
4217
|
+
this.updateModelValue.emit(val);
|
|
4218
|
+
}
|
|
4219
|
+
}
|
|
4220
|
+
get modelValue() {
|
|
4221
|
+
return this._modelValue;
|
|
4222
|
+
}
|
|
4223
|
+
writeValue(value) {
|
|
4224
|
+
this.modelValue = value;
|
|
4225
|
+
}
|
|
4226
|
+
registerOnChange(fn) {
|
|
4227
|
+
this.onChange = fn;
|
|
4228
|
+
}
|
|
4229
|
+
registerOnTouched(fn) {
|
|
4230
|
+
this.onTouched = fn;
|
|
4231
|
+
}
|
|
4232
|
+
setDisabledState(isDisabled) {
|
|
4233
|
+
// 如果需要禁用功能，可以在这里实现
|
|
4234
|
+
}
|
|
4235
|
+
// 初始化文档点击事件（已在ngAfterViewInit中处理，无需重复）
|
|
4236
|
+
ngAfterContentInit() {
|
|
4237
|
+
}
|
|
4238
|
+
// 清理文档点击事件
|
|
4239
|
+
cleanupDocumentClick() {
|
|
4240
|
+
document.removeEventListener('click', this.onDocumentClick);
|
|
4241
|
+
}
|
|
4242
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MentionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4243
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: MentionComponent, isStandalone: true, selector: "mc-mention", inputs: { prefix: "prefix", fitHostWidth: "fitHostWidth", menuClass: "menuClass", optionsCount: "optionsCount", modelValue: "modelValue" }, outputs: { updateModelValue: "updateModelValue", searchChange: "searchChange", toggleChange: "toggleChange", activeIndexChange: "activeIndexChange" }, providers: [
|
|
4244
|
+
{
|
|
4245
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4246
|
+
useExisting: forwardRef(() => MentionComponent),
|
|
4247
|
+
multi: true
|
|
4248
|
+
}
|
|
4249
|
+
], viewQueries: [{ propertyName: "popperTriggerEl", first: true, predicate: ["popperTrigger"], descendants: true }, { propertyName: "originEl", first: true, predicate: ["origin"], descendants: true }, { propertyName: "overlayEl", first: true, predicate: ["overlayEl"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Mention\u7EC4\u4EF6\u7684\u6A21\u677F -->\n\n<!-- \u89E6\u53D1\u5668\u5143\u7D20 -->\n<div #popperTrigger #origin class=\"mc-mention-trigger\">\n <ng-content></ng-content>\n</div>\n\n<!-- \u63D0\u53CA\u83DC\u5355\u7684\u5F39\u51FA\u5C42 -->\n<div \n #overlayEl \n *ngIf=\"modelValue\" \n [@fade]\n class=\"mc-mention mc-mention-fade\" \n [ngClass]=\"menuClass\" \n [ngStyle]=\"overlayStyle\"\n>\n <ng-content select=\"[slot=menu]\"></ng-content>\n</div>", styles: [".mc-mention{position:fixed;max-height:300px;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));transform-origin:0% 100%;z-index:1000}\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 }], animations: [
|
|
4250
|
+
trigger('fade', [
|
|
4251
|
+
transition(':enter', [
|
|
4252
|
+
style({ opacity: 0.8, transform: 'scaleY(0.8) translateY(4px)' }),
|
|
4253
|
+
animate('0.2s cubic-bezier(0.16, 0.75, 0.5, 1)', style({ opacity: 1, transform: 'scaleY(0.9999) translateY(0)' }))
|
|
4254
|
+
]),
|
|
4255
|
+
transition(':leave', [
|
|
4256
|
+
style({ opacity: 1, transform: 'scaleY(0.9999) translateY(0)' }),
|
|
4257
|
+
animate('0.2s cubic-bezier(0.5, 0, 0.84, 0.25)', style({ opacity: 0.8, transform: 'scaleY(0.8) translateY(4px)' }))
|
|
4258
|
+
])
|
|
4259
|
+
])
|
|
4260
|
+
] }); }
|
|
4261
|
+
}
|
|
4262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MentionComponent, decorators: [{
|
|
4263
|
+
type: Component,
|
|
4264
|
+
args: [{ selector: 'mc-mention', standalone: true, imports: [CommonModule, FormsModule], animations: [
|
|
4265
|
+
trigger('fade', [
|
|
4266
|
+
transition(':enter', [
|
|
4267
|
+
style({ opacity: 0.8, transform: 'scaleY(0.8) translateY(4px)' }),
|
|
4268
|
+
animate('0.2s cubic-bezier(0.16, 0.75, 0.5, 1)', style({ opacity: 1, transform: 'scaleY(0.9999) translateY(0)' }))
|
|
4269
|
+
]),
|
|
4270
|
+
transition(':leave', [
|
|
4271
|
+
style({ opacity: 1, transform: 'scaleY(0.9999) translateY(0)' }),
|
|
4272
|
+
animate('0.2s cubic-bezier(0.5, 0, 0.84, 0.25)', style({ opacity: 0.8, transform: 'scaleY(0.8) translateY(4px)' }))
|
|
4273
|
+
])
|
|
4274
|
+
])
|
|
4275
|
+
], providers: [
|
|
4276
|
+
{
|
|
4277
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4278
|
+
useExisting: forwardRef(() => MentionComponent),
|
|
4279
|
+
multi: true
|
|
4280
|
+
}
|
|
4281
|
+
], template: "<!-- Mention\u7EC4\u4EF6\u7684\u6A21\u677F -->\n\n<!-- \u89E6\u53D1\u5668\u5143\u7D20 -->\n<div #popperTrigger #origin class=\"mc-mention-trigger\">\n <ng-content></ng-content>\n</div>\n\n<!-- \u63D0\u53CA\u83DC\u5355\u7684\u5F39\u51FA\u5C42 -->\n<div \n #overlayEl \n *ngIf=\"modelValue\" \n [@fade]\n class=\"mc-mention mc-mention-fade\" \n [ngClass]=\"menuClass\" \n [ngStyle]=\"overlayStyle\"\n>\n <ng-content select=\"[slot=menu]\"></ng-content>\n</div>", styles: [".mc-mention{position:fixed;max-height:300px;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));transform-origin:0% 100%;z-index:1000}\n"] }]
|
|
4282
|
+
}], ctorParameters: () => [], propDecorators: { prefix: [{
|
|
4283
|
+
type: Input
|
|
4284
|
+
}], fitHostWidth: [{
|
|
4285
|
+
type: Input
|
|
4286
|
+
}], menuClass: [{
|
|
4287
|
+
type: Input
|
|
4288
|
+
}], optionsCount: [{
|
|
4289
|
+
type: Input
|
|
4290
|
+
}], updateModelValue: [{
|
|
4291
|
+
type: Output
|
|
4292
|
+
}], searchChange: [{
|
|
4293
|
+
type: Output
|
|
4294
|
+
}], toggleChange: [{
|
|
4295
|
+
type: Output
|
|
4296
|
+
}], activeIndexChange: [{
|
|
4297
|
+
type: Output
|
|
4298
|
+
}], popperTriggerEl: [{
|
|
4299
|
+
type: ViewChild,
|
|
4300
|
+
args: ['popperTrigger']
|
|
4301
|
+
}], originEl: [{
|
|
4302
|
+
type: ViewChild,
|
|
4303
|
+
args: ['origin']
|
|
4304
|
+
}], overlayEl: [{
|
|
4305
|
+
type: ViewChild,
|
|
4306
|
+
args: ['overlayEl']
|
|
4307
|
+
}], modelValue: [{
|
|
4308
|
+
type: Input
|
|
4309
|
+
}] } });
|
|
4310
|
+
|
|
4311
|
+
class MentionModule {
|
|
4312
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MentionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4313
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: MentionModule, imports: [CommonModule,
|
|
4314
|
+
MentionComponent], exports: [MentionComponent] }); }
|
|
4315
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MentionModule, imports: [CommonModule,
|
|
4316
|
+
MentionComponent] }); }
|
|
4317
|
+
}
|
|
4318
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MentionModule, decorators: [{
|
|
4319
|
+
type: NgModule,
|
|
4320
|
+
args: [{
|
|
4321
|
+
declarations: [],
|
|
4322
|
+
imports: [
|
|
4323
|
+
CommonModule,
|
|
4324
|
+
MentionComponent
|
|
4325
|
+
],
|
|
4326
|
+
exports: [MentionComponent],
|
|
4327
|
+
}]
|
|
4328
|
+
}] });
|
|
4329
|
+
|
|
4330
|
+
// Mention组件的导出文件
|
|
4331
|
+
|
|
4332
|
+
function copyToClipboard(text) {
|
|
4333
|
+
if (typeof text !== 'string') {
|
|
4334
|
+
return Promise.reject();
|
|
4335
|
+
}
|
|
4336
|
+
// 现代浏览器优先使用 Clipboard API
|
|
4337
|
+
if (navigator.clipboard && window.isSecureContext) {
|
|
4338
|
+
return navigator.clipboard
|
|
4339
|
+
.writeText(text)
|
|
4340
|
+
.then(() => { })
|
|
4341
|
+
.catch((err) => {
|
|
4342
|
+
return fallbackCopyTextToClipboard(text); // 降级处理
|
|
4343
|
+
});
|
|
4344
|
+
}
|
|
4345
|
+
// 低版本浏览器直接使用降级方案
|
|
4346
|
+
return fallbackCopyTextToClipboard(text);
|
|
4347
|
+
}
|
|
4348
|
+
function fallbackCopyTextToClipboard(text) {
|
|
4349
|
+
return new Promise((resolve, reject) => {
|
|
4350
|
+
// 创建隐藏的 textarea 元素
|
|
4351
|
+
const textarea = document.createElement('textarea');
|
|
4352
|
+
textarea.value = text;
|
|
4353
|
+
// 样式：隐藏且不影响布局
|
|
4354
|
+
textarea.style.position = 'fixed';
|
|
4355
|
+
textarea.style.top = '-9999px';
|
|
4356
|
+
textarea.style.left = '-9999px';
|
|
4357
|
+
textarea.style.opacity = '0';
|
|
4358
|
+
textarea.style.zIndex = '-1000';
|
|
4359
|
+
// 解决 iOS 下无法选中的问题
|
|
4360
|
+
textarea.setAttribute('readonly', '');
|
|
4361
|
+
document.body.appendChild(textarea);
|
|
4362
|
+
try {
|
|
4363
|
+
// 选中内容（兼容 iOS）
|
|
4364
|
+
textarea.select();
|
|
4365
|
+
textarea.setSelectionRange(0, textarea.value.length); // 移动端必须
|
|
4366
|
+
// 执行复制
|
|
4367
|
+
const success = document.execCommand('copy');
|
|
4368
|
+
if (success) {
|
|
4369
|
+
resolve(null);
|
|
4370
|
+
}
|
|
4371
|
+
else {
|
|
4372
|
+
reject();
|
|
4373
|
+
}
|
|
4374
|
+
}
|
|
4375
|
+
catch (err) {
|
|
4376
|
+
reject();
|
|
4377
|
+
}
|
|
4378
|
+
finally {
|
|
4379
|
+
// 移除临时元素
|
|
4380
|
+
document.body.removeChild(textarea);
|
|
4381
|
+
}
|
|
4382
|
+
});
|
|
4383
|
+
}
|
|
4384
|
+
|
|
4385
|
+
const TOOLBAR_GAP_DEFAULT_VALUE = 0;
|
|
4386
|
+
const TOOLBAR_ICON_SIZE_DEFAULT_VALUE = 16;
|
|
4387
|
+
|
|
4388
|
+
class CopyIconComponent {
|
|
4389
|
+
constructor() {
|
|
4390
|
+
this.width = TOOLBAR_ICON_SIZE_DEFAULT_VALUE;
|
|
4391
|
+
this.height = TOOLBAR_ICON_SIZE_DEFAULT_VALUE;
|
|
4392
|
+
this.isActive = false;
|
|
4393
|
+
this.text = '';
|
|
4394
|
+
this.title = '';
|
|
4395
|
+
this.copied = false;
|
|
4396
|
+
}
|
|
4397
|
+
async handleClick() {
|
|
4398
|
+
setTimeout(() => {
|
|
4399
|
+
this.copied = false;
|
|
4400
|
+
}, 1500);
|
|
4401
|
+
try {
|
|
4402
|
+
await copyToClipboard(this.text);
|
|
4403
|
+
this.copied = true;
|
|
4404
|
+
}
|
|
4405
|
+
catch (error) { }
|
|
4406
|
+
}
|
|
4407
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CopyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4408
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: CopyIconComponent, isStandalone: true, selector: "mc-copy-icon", inputs: { width: "width", height: "height", isActive: "isActive", text: "text", title: "title" }, ngImport: i0, template: "<div class=\"mc-action-item\" [title]=\"title\">\n <svg\n *ngIf=\"copied\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\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 <desc>Created with Sketch.</desc>\n <defs>\n <polygon id=\"path-1\" 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\"></polygon>\n </defs>\n <g id=\"status/whiteBG/correct\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <mask id=\"mask-2\" fill=\"white\">\n <use xlink:href=\"#path-1\"></use>\n </mask>\n <use id=\"Mask\" fill=\"currentColor\" xlink:href=\"#path-1\"></use>\n </g>\n </svg>\n <svg\n *ngIf=\"!copied\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\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 (click)=\"handleClick()\"\n >\n <g id=\"\u9875\u9762-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"API-starter-\u56FE\u6807\u5165\u5E93\" transform=\"translate(-592.000000, -204.000000)\">\n <g id=\"\u65B9\u683C\u5907\u4EFD-16\" transform=\"translate(560.000000, 180.000000)\">\n <text id=\"\u56FE\u6807\" font-family=\"PingFangSC-Regular, PingFang SC\" font-size=\"12\" font-weight=\"normal\" line-spacing=\"16\" fill=\"#71757F\">\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=\"currentColor\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </g>\n </svg>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
4409
|
+
}
|
|
4410
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CopyIconComponent, decorators: [{
|
|
4411
|
+
type: Component,
|
|
4412
|
+
args: [{ selector: 'mc-copy-icon', standalone: true, imports: [CommonModule], template: "<div class=\"mc-action-item\" [title]=\"title\">\n <svg\n *ngIf=\"copied\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\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 <desc>Created with Sketch.</desc>\n <defs>\n <polygon id=\"path-1\" 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\"></polygon>\n </defs>\n <g id=\"status/whiteBG/correct\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <mask id=\"mask-2\" fill=\"white\">\n <use xlink:href=\"#path-1\"></use>\n </mask>\n <use id=\"Mask\" fill=\"currentColor\" xlink:href=\"#path-1\"></use>\n </g>\n </svg>\n <svg\n *ngIf=\"!copied\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\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 (click)=\"handleClick()\"\n >\n <g id=\"\u9875\u9762-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"API-starter-\u56FE\u6807\u5165\u5E93\" transform=\"translate(-592.000000, -204.000000)\">\n <g id=\"\u65B9\u683C\u5907\u4EFD-16\" transform=\"translate(560.000000, 180.000000)\">\n <text id=\"\u56FE\u6807\" font-family=\"PingFangSC-Regular, PingFang SC\" font-size=\"12\" font-weight=\"normal\" line-spacing=\"16\" fill=\"#71757F\">\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=\"currentColor\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </g>\n </svg>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"] }]
|
|
4413
|
+
}], propDecorators: { width: [{
|
|
4414
|
+
type: Input
|
|
4415
|
+
}], height: [{
|
|
4416
|
+
type: Input
|
|
4417
|
+
}], isActive: [{
|
|
4418
|
+
type: Input
|
|
4419
|
+
}], text: [{
|
|
4420
|
+
type: Input
|
|
4421
|
+
}], title: [{
|
|
4422
|
+
type: Input
|
|
4423
|
+
}] } });
|
|
4424
|
+
|
|
4425
|
+
class DeleteIconComponent {
|
|
4426
|
+
constructor() {
|
|
4427
|
+
this.width = TOOLBAR_ICON_SIZE_DEFAULT_VALUE;
|
|
4428
|
+
this.height = TOOLBAR_ICON_SIZE_DEFAULT_VALUE;
|
|
4429
|
+
this.isActive = false;
|
|
4430
|
+
this.title = '';
|
|
4431
|
+
this.text = '';
|
|
4432
|
+
}
|
|
4433
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DeleteIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4434
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DeleteIconComponent, isStandalone: true, selector: "mc-delete-icon", inputs: { width: "width", height: "height", isActive: "isActive", title: "title", text: "text" }, ngImport: i0, template: "<div class=\"mc-action-item\" [title]=\"title\">\n <svg\n [attr.width]=\"width\"\n [attr.height]=\"height\"\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=\"codehub-delete-op\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <path\n d=\"M12.5,5 C12.7761424,5 13,5.22385763 13,5.5 L13,13 C13,14.0543618 12.1841222,14.9181651 11.1492623,14.9945143 L11,15 L5,15 C3.9456382,15 3.08183488,14.1841222 3.00548574,13.1492623 L3,13 L3,5.5 C3,5.22385763 3.22385763,5 3.5,5 C3.77614237,5 4,5.22385763 4,5.5 L4,13 C4,13.5128358 4.38604019,13.9355072 4.88337887,13.9932723 L5,14 L11,14 C11.5128358,14 11.9355072,13.6139598 11.9932723,13.1166211 L12,13 L12,5.5 C12,5.22385763 12.2238576,5 12.5,5 Z M6.53333333,6 C6.79515721,6 7.0129156,6.17687516 7.05807395,6.41012437 L7.06666667,6.5 L7.06666667,11.5 C7.06666667,11.7761424 6.8278852,12 6.53333333,12 C6.27150945,12 6.05375107,11.8231248 6.00859271,11.5898756 L6,11.5 L6,6.5 C6,6.22385763 6.23878147,6 6.53333333,6 Z M9.53333333,6 C9.79515721,6 10.0129156,6.17687516 10.058074,6.41012437 L10.0666667,6.5 L10.0666667,11.5 C10.0666667,11.7761424 9.8278852,12 9.53333333,12 C9.27150945,12 9.05375107,11.8231248 9.00859271,11.5898756 L9,11.5 L9,6.5 C9,6.22385763 9.23878147,6 9.53333333,6 Z M10,1 C10.5128358,1 10.9355072,1.38604019 10.9932723,1.88337887 L11,2 L11,3 L14.5,3 C14.7761424,3 15,3.22385763 15,3.5 C15,3.77614237 14.7761424,4 14.5,4 L1.5,4 C1.22385763,4 1,3.77614237 1,3.5 C1,3.22385763 1.22385763,3 1.5,3 L5,3 L5,2 C5,1.48716416 5.38604019,1.06449284 5.88337887,1.00672773 L6,1 L10,1 Z M10,2 L6,2 L6,3 L10,3 L10,2 Z\"\n fill=\"currentColor\"\n ></path>\n </g>\n </svg>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
4435
|
+
}
|
|
4436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DeleteIconComponent, decorators: [{
|
|
4437
|
+
type: Component,
|
|
4438
|
+
args: [{ selector: 'mc-delete-icon', standalone: true, imports: [CommonModule], template: "<div class=\"mc-action-item\" [title]=\"title\">\n <svg\n [attr.width]=\"width\"\n [attr.height]=\"height\"\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=\"codehub-delete-op\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <path\n d=\"M12.5,5 C12.7761424,5 13,5.22385763 13,5.5 L13,13 C13,14.0543618 12.1841222,14.9181651 11.1492623,14.9945143 L11,15 L5,15 C3.9456382,15 3.08183488,14.1841222 3.00548574,13.1492623 L3,13 L3,5.5 C3,5.22385763 3.22385763,5 3.5,5 C3.77614237,5 4,5.22385763 4,5.5 L4,13 C4,13.5128358 4.38604019,13.9355072 4.88337887,13.9932723 L5,14 L11,14 C11.5128358,14 11.9355072,13.6139598 11.9932723,13.1166211 L12,13 L12,5.5 C12,5.22385763 12.2238576,5 12.5,5 Z M6.53333333,6 C6.79515721,6 7.0129156,6.17687516 7.05807395,6.41012437 L7.06666667,6.5 L7.06666667,11.5 C7.06666667,11.7761424 6.8278852,12 6.53333333,12 C6.27150945,12 6.05375107,11.8231248 6.00859271,11.5898756 L6,11.5 L6,6.5 C6,6.22385763 6.23878147,6 6.53333333,6 Z M9.53333333,6 C9.79515721,6 10.0129156,6.17687516 10.058074,6.41012437 L10.0666667,6.5 L10.0666667,11.5 C10.0666667,11.7761424 9.8278852,12 9.53333333,12 C9.27150945,12 9.05375107,11.8231248 9.00859271,11.5898756 L9,11.5 L9,6.5 C9,6.22385763 9.23878147,6 9.53333333,6 Z M10,1 C10.5128358,1 10.9355072,1.38604019 10.9932723,1.88337887 L11,2 L11,3 L14.5,3 C14.7761424,3 15,3.22385763 15,3.5 C15,3.77614237 14.7761424,4 14.5,4 L1.5,4 C1.22385763,4 1,3.77614237 1,3.5 C1,3.22385763 1.22385763,3 1.5,3 L5,3 L5,2 C5,1.48716416 5.38604019,1.06449284 5.88337887,1.00672773 L6,1 L10,1 Z M10,2 L6,2 L6,3 L10,3 L10,2 Z\"\n fill=\"currentColor\"\n ></path>\n </g>\n </svg>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"] }]
|
|
4439
|
+
}], propDecorators: { width: [{
|
|
4440
|
+
type: Input
|
|
4441
|
+
}], height: [{
|
|
4442
|
+
type: Input
|
|
4443
|
+
}], isActive: [{
|
|
4444
|
+
type: Input
|
|
4445
|
+
}], title: [{
|
|
4446
|
+
type: Input
|
|
4447
|
+
}], text: [{
|
|
4448
|
+
type: Input
|
|
4449
|
+
}] } });
|
|
4450
|
+
|
|
4451
|
+
class DislikeIconComponent {
|
|
4452
|
+
constructor() {
|
|
4453
|
+
this.width = TOOLBAR_ICON_SIZE_DEFAULT_VALUE;
|
|
4454
|
+
this.height = TOOLBAR_ICON_SIZE_DEFAULT_VALUE;
|
|
4455
|
+
this.isActive = false;
|
|
4456
|
+
this.title = '';
|
|
4457
|
+
this.text = '';
|
|
4458
|
+
this.activeChange = new EventEmitter();
|
|
4459
|
+
this.active = this.isActive;
|
|
4460
|
+
}
|
|
4461
|
+
ngOnChanges(changes) {
|
|
4462
|
+
if (changes['isActive']) {
|
|
4463
|
+
this.active = changes['isActive'].currentValue;
|
|
4464
|
+
}
|
|
4465
|
+
}
|
|
4466
|
+
handleClick() {
|
|
4467
|
+
this.active = !this.active;
|
|
4468
|
+
this.activeChange.emit(this.active);
|
|
4469
|
+
}
|
|
4470
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DislikeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4471
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DislikeIconComponent, isStandalone: true, selector: "mc-dislike-icon", inputs: { width: "width", height: "height", isActive: "isActive", title: "title", text: "text" }, outputs: { activeChange: "activeChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"mc-action-item\"\n [title]=\"title\"\n [class.mc-action-item-active]=\"active\"\n (click)=\"handleClick()\"\n>\n <svg\n *ngIf=\"active\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\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 <path\n id=\"\u77E2\u91CF 1\"\n d=\"M2.60156 1C1.76611 1 1.08008 1.63953 1.00659 2.45581L1 2.60156L1 8.06506C1 8.90039 1.63965 9.58643 2.45581 9.66003L2.60156 9.66663L3.16675 9.66644C3.44287 9.66644 3.6665 9.4425 3.6665 9.16644L3.6665 1.5C3.6665 1.22388 3.44263 1 3.1665 1L2.60156 1ZM5.6665 1L11.552 1L11.7861 1.00342C13.2422 1.04712 14.1792 1.50781 14.4907 2.44861C14.8108 3.41553 15.1758 5.00916 15.2917 6.29297L15.3098 6.51453L15.3308 6.92529L15.3345 7.12988C15.3438 8.74133 14.8638 9.74072 13.6501 9.74072L9.55591 9.74194L9.60107 9.88098C10.02 11.2178 10.1855 12.2474 10.0869 12.9923C9.89819 14.4197 8.75317 15.6334 7.67651 15.2727L7.55713 15.2261C7.11279 14.9865 6.85327 14.5331 6.70117 13.6534L6.54492 12.7217L6.4978 12.5065L6.43872 12.2728C6.37622 12.0485 6.30347 11.8517 6.21558 11.6747C5.91675 11.0725 5.51904 10.535 5.021 10.0604C4.8042 9.85382 4.6665 9.57355 4.6665 9.27405L4.6665 2C4.6665 1.44769 5.11426 1 5.6665 1Z\"\n fill-rule=\"evenodd\"\n fill=\"currentColor\"\n />\n </svg>\n <svg\n *ngIf=\"!active\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\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 id=\"Dislike\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M11.55205,1 C13.14165,1 14.16285,1.458308 14.49075,2.448728 C14.81075,3.415528 15.17575,5.009158 15.29175,6.292968 L15.29175,6.292968 L15.30985,6.514648 L15.33085,6.925358 C15.38255,8.656368 14.91455,9.740718 13.65015,9.740718 L13.65015,9.740718 L9.55591,9.741028 L9.60108,9.881038 C10.02005,11.217788 10.18555,12.247488 10.08695,12.992388 C9.89815,14.419688 8.75318,15.633388 7.67652,15.272788 L7.67652,15.272788 L7.55713,15.226188 C7.03589,14.992888 6.86426,14.595988 6.70117,13.653488 L6.70117,13.653488 L6.54492,12.721688 L6.4978,12.506488 C6.4231,12.182088 6.33277,11.910688 6.21558,11.674688 C5.8313,10.900988 5.28443,10.233788 4.57056,9.670048 L4.57056,9.670048 L2.60156,9.670288 C1.71704,9.670288 1,8.953248 1,8.068728 L1,8.068728 L1,2.605228 C1,1.720708 1.71704,1.003601 2.60156,1.003601 L2.60156,1.003601 L4.83325,1 Z M11.55205,1.999998 L5.33301,1.999998 L5.33301,9.002988 L5.41699,9.071468 C6.13672,9.686458 6.70239,10.406788 7.11109,11.230088 C7.23584,11.480988 7.33399,11.750888 7.4148,12.050988 L7.50098,12.409088 L7.56079,12.715988 L7.69336,13.519388 C7.69946,13.553388 7.70557,13.586088 7.71167,13.617588 L7.76441,13.867488 C7.83374,14.157988 7.8982,14.283188 7.96558,14.313488 C8.30152,14.463788 8.97461,13.775988 9.09571,12.861188 C9.17749,12.243388 9.00025,11.240388 8.55029,9.880678 C8.51196,9.764348 8.49854,9.641728 8.51099,9.520328 C8.55908,9.045288 8.98218,8.699098 9.45679,8.742858 L13.65015,8.740718 C14.18895,8.740718 14.43655,7.941288 14.29595,6.382938 C14.18755,5.183288 13.83915,3.662168 13.54155,2.762938 L13.50585,2.674618 C13.30125,2.245118 12.68435,1.999998 11.55205,1.999998 Z M4.33277,2.003598 L2.60156,2.003598 C2.26929,2.003598 2,2.272948 2,2.605228 L2,2.605228 L2,8.068668 L2.00781,8.166258 C2.05445,8.452148 2.30249,8.670288 2.60156,8.670288 L2.60156,8.670288 L4.33277,8.670598 L4.33277,2.003598 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"currentColor\"\n ></path>\n </g>\n </svg>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
4472
|
+
}
|
|
4473
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DislikeIconComponent, decorators: [{
|
|
4474
|
+
type: Component,
|
|
4475
|
+
args: [{ selector: 'mc-dislike-icon', standalone: true, imports: [CommonModule], template: "<div\n class=\"mc-action-item\"\n [title]=\"title\"\n [class.mc-action-item-active]=\"active\"\n (click)=\"handleClick()\"\n>\n <svg\n *ngIf=\"active\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\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 <path\n id=\"\u77E2\u91CF 1\"\n d=\"M2.60156 1C1.76611 1 1.08008 1.63953 1.00659 2.45581L1 2.60156L1 8.06506C1 8.90039 1.63965 9.58643 2.45581 9.66003L2.60156 9.66663L3.16675 9.66644C3.44287 9.66644 3.6665 9.4425 3.6665 9.16644L3.6665 1.5C3.6665 1.22388 3.44263 1 3.1665 1L2.60156 1ZM5.6665 1L11.552 1L11.7861 1.00342C13.2422 1.04712 14.1792 1.50781 14.4907 2.44861C14.8108 3.41553 15.1758 5.00916 15.2917 6.29297L15.3098 6.51453L15.3308 6.92529L15.3345 7.12988C15.3438 8.74133 14.8638 9.74072 13.6501 9.74072L9.55591 9.74194L9.60107 9.88098C10.02 11.2178 10.1855 12.2474 10.0869 12.9923C9.89819 14.4197 8.75317 15.6334 7.67651 15.2727L7.55713 15.2261C7.11279 14.9865 6.85327 14.5331 6.70117 13.6534L6.54492 12.7217L6.4978 12.5065L6.43872 12.2728C6.37622 12.0485 6.30347 11.8517 6.21558 11.6747C5.91675 11.0725 5.51904 10.535 5.021 10.0604C4.8042 9.85382 4.6665 9.57355 4.6665 9.27405L4.6665 2C4.6665 1.44769 5.11426 1 5.6665 1Z\"\n fill-rule=\"evenodd\"\n fill=\"currentColor\"\n />\n </svg>\n <svg\n *ngIf=\"!active\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\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 id=\"Dislike\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M11.55205,1 C13.14165,1 14.16285,1.458308 14.49075,2.448728 C14.81075,3.415528 15.17575,5.009158 15.29175,6.292968 L15.29175,6.292968 L15.30985,6.514648 L15.33085,6.925358 C15.38255,8.656368 14.91455,9.740718 13.65015,9.740718 L13.65015,9.740718 L9.55591,9.741028 L9.60108,9.881038 C10.02005,11.217788 10.18555,12.247488 10.08695,12.992388 C9.89815,14.419688 8.75318,15.633388 7.67652,15.272788 L7.67652,15.272788 L7.55713,15.226188 C7.03589,14.992888 6.86426,14.595988 6.70117,13.653488 L6.70117,13.653488 L6.54492,12.721688 L6.4978,12.506488 C6.4231,12.182088 6.33277,11.910688 6.21558,11.674688 C5.8313,10.900988 5.28443,10.233788 4.57056,9.670048 L4.57056,9.670048 L2.60156,9.670288 C1.71704,9.670288 1,8.953248 1,8.068728 L1,8.068728 L1,2.605228 C1,1.720708 1.71704,1.003601 2.60156,1.003601 L2.60156,1.003601 L4.83325,1 Z M11.55205,1.999998 L5.33301,1.999998 L5.33301,9.002988 L5.41699,9.071468 C6.13672,9.686458 6.70239,10.406788 7.11109,11.230088 C7.23584,11.480988 7.33399,11.750888 7.4148,12.050988 L7.50098,12.409088 L7.56079,12.715988 L7.69336,13.519388 C7.69946,13.553388 7.70557,13.586088 7.71167,13.617588 L7.76441,13.867488 C7.83374,14.157988 7.8982,14.283188 7.96558,14.313488 C8.30152,14.463788 8.97461,13.775988 9.09571,12.861188 C9.17749,12.243388 9.00025,11.240388 8.55029,9.880678 C8.51196,9.764348 8.49854,9.641728 8.51099,9.520328 C8.55908,9.045288 8.98218,8.699098 9.45679,8.742858 L13.65015,8.740718 C14.18895,8.740718 14.43655,7.941288 14.29595,6.382938 C14.18755,5.183288 13.83915,3.662168 13.54155,2.762938 L13.50585,2.674618 C13.30125,2.245118 12.68435,1.999998 11.55205,1.999998 Z M4.33277,2.003598 L2.60156,2.003598 C2.26929,2.003598 2,2.272948 2,2.605228 L2,2.605228 L2,8.068668 L2.00781,8.166258 C2.05445,8.452148 2.30249,8.670288 2.60156,8.670288 L2.60156,8.670288 L4.33277,8.670598 L4.33277,2.003598 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"currentColor\"\n ></path>\n </g>\n </svg>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"] }]
|
|
4476
|
+
}], propDecorators: { width: [{
|
|
4477
|
+
type: Input
|
|
4478
|
+
}], height: [{
|
|
4479
|
+
type: Input
|
|
4480
|
+
}], isActive: [{
|
|
4481
|
+
type: Input
|
|
4482
|
+
}], title: [{
|
|
4483
|
+
type: Input
|
|
4484
|
+
}], text: [{
|
|
4485
|
+
type: Input
|
|
4486
|
+
}], activeChange: [{
|
|
4487
|
+
type: Output
|
|
4488
|
+
}] } });
|
|
4489
|
+
|
|
4490
|
+
class LikeIconComponent {
|
|
4491
|
+
constructor() {
|
|
4492
|
+
this.width = TOOLBAR_ICON_SIZE_DEFAULT_VALUE;
|
|
4493
|
+
this.height = TOOLBAR_ICON_SIZE_DEFAULT_VALUE;
|
|
4494
|
+
this.isActive = false;
|
|
4495
|
+
this.title = '';
|
|
4496
|
+
this.text = '';
|
|
4497
|
+
this.activeChange = new EventEmitter();
|
|
4498
|
+
this.active = this.isActive;
|
|
4499
|
+
}
|
|
4500
|
+
ngOnChanges(changes) {
|
|
4501
|
+
if (changes['isActive']) {
|
|
4502
|
+
this.active = changes['isActive'].currentValue;
|
|
4503
|
+
}
|
|
4504
|
+
}
|
|
4505
|
+
handleClick() {
|
|
4506
|
+
this.active = !this.active;
|
|
4507
|
+
this.activeChange.emit(this.active);
|
|
4508
|
+
}
|
|
4509
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LikeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4510
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: LikeIconComponent, isStandalone: true, selector: "mc-like-icon", inputs: { width: "width", height: "height", isActive: "isActive", title: "title", text: "text" }, outputs: { activeChange: "activeChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"mc-action-item\"\n [title]=\"title\"\n [class.mc-action-item-active]=\"active\"\n (click)=\"handleClick()\"\n>\n <svg\n *ngIf=\"active\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\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 <desc>Created with Sketch.</desc>\n <path\n id=\"\u77E2\u91CF 1\"\n d=\"M2.60156 15.3369C1.76611 15.3369 1.08008 14.6974 1.00659 13.8811L1 13.7354L1 8.27185C1 7.43652 1.63965 6.75049 2.45581 6.67688L2.60156 6.67029L3.16675 6.67047C3.44287 6.67047 3.6665 6.89441 3.6665 7.17047L3.6665 14.8369C3.6665 15.113 3.44263 15.3369 3.1665 15.3369L2.60156 15.3369ZM5.6665 15.3369L11.552 15.3369L11.7861 15.3335C13.2422 15.2898 14.1792 14.8291 14.4907 13.8883C14.8108 12.9214 15.1758 11.3278 15.2917 10.0439L15.3098 9.82239L15.3308 9.41162L15.3345 9.20703C15.3438 7.59558 14.8638 6.59619 13.6501 6.59619L9.55591 6.59497L9.60107 6.45593C10.02 5.11914 10.1855 4.08948 10.0869 3.3446C9.89819 1.91724 8.75317 0.703491 7.67651 1.06421L7.55713 1.11084C7.11279 1.35046 6.85327 1.80383 6.70117 2.68347L6.54492 3.61523L6.4978 3.83044L6.43872 4.06409C6.37622 4.28845 6.30347 4.48523 6.21558 4.66223C5.91675 5.2644 5.51904 5.80194 5.021 6.27649C4.8042 6.48309 4.6665 6.76337 4.6665 7.06287L4.6665 14.3369C4.6665 14.8892 5.11426 15.3369 5.6665 15.3369Z\"\n fill-rule=\"evenodd\"\n fill=\"currentColor\"\n />\n </svg>\n <svg\n *ngIf=\"!active\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g id=\"\u9875\u9762-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M11.55205,1 C13.14165,1 14.16285,1.458308 14.49075,2.448728 C14.81075,3.415528 15.17575,5.009158 15.29175,6.292968 L15.29175,6.292968 L15.30985,6.514648 L15.33085,6.925358 C15.38255,8.656368 14.91455,9.740718 13.65015,9.740718 L13.65015,9.740718 L9.55591,9.741028 L9.60108,9.881038 C10.02005,11.217788 10.18555,12.247488 10.08695,12.992388 C9.89815,14.419688 8.75318,15.633388 7.67652,15.272788 L7.67652,15.272788 L7.55713,15.226188 C7.03589,14.992888 6.86426,14.595988 6.70117,13.653488 L6.70117,13.653488 L6.54492,12.721688 L6.4978,12.506488 C6.4231,12.182088 6.33277,11.910688 6.21558,11.674688 C5.8313,10.900988 5.28443,10.233788 4.57056,9.670048 L4.57056,9.670048 L2.60156,9.670288 C1.71704,9.670288 1,8.953248 1,8.068728 L1,8.068728 L1,2.605228 C1,1.720708 1.71704,1.003601 2.60156,1.003601 L2.60156,1.003601 L4.83325,1 Z M11.55205,1.999998 L5.33301,1.999998 L5.33301,9.002988 L5.41699,9.071468 L5.6796615,9.30702243 C6.27568484,9.86814941 6.7534775,10.5097005 7.11109,11.230088 C7.23584,11.480988 7.33399,11.750888 7.4148,12.050988 L7.4148,12.050988 L7.50098,12.409088 L7.56079,12.715988 L7.69336,13.519388 L7.702515,13.5694255 L7.702515,13.5694255 L7.71167,13.617588 L7.76441,13.867488 L7.79384741,13.9820728 C7.85221673,14.1918227 7.90782571,14.2875166 7.96558,14.313488 C8.30152,14.463788 8.97461,13.775988 9.09571,12.861188 C9.17749,12.243388 9.00025,11.240388 8.55029,9.880678 C8.51196,9.764348 8.49854,9.641728 8.51099,9.520328 C8.55908,9.045288 8.98218,8.699098 9.45679,8.742858 L9.45679,8.742858 L13.65015,8.740718 L13.7287739,8.73472734 C14.2127395,8.6588777 14.42952,7.8633705 14.29595,6.382938 C14.18755,5.183288 13.83915,3.662168 13.54155,2.762938 L13.54155,2.762938 L13.50585,2.674618 L13.4594021,2.5911944 C13.216706,2.21352476 12.6088633,1.999998 11.55205,1.999998 L11.55205,1.999998 Z M4.33277,2.003598 L2.60156,2.003598 C2.26929,2.003598 2,2.272948 2,2.605228 L2,2.605228 L2,8.068668 L2.00781,8.166258 C2.05445,8.452148 2.30249,8.670288 2.60156,8.670288 L2.60156,8.670288 L4.33277,8.670598 L4.33277,2.003598 Z\"\n id=\"dislike\"\n fill=\"currentColor\"\n transform=\"translate(8.167337, 8.168474) scale(-1, 1) rotate(-180.000000) translate(-8.167337, -8.168474) \"\n ></path>\n </g>\n </svg>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
4511
|
+
}
|
|
4512
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LikeIconComponent, decorators: [{
|
|
4513
|
+
type: Component,
|
|
4514
|
+
args: [{ selector: 'mc-like-icon', standalone: true, imports: [CommonModule], template: "<div\n class=\"mc-action-item\"\n [title]=\"title\"\n [class.mc-action-item-active]=\"active\"\n (click)=\"handleClick()\"\n>\n <svg\n *ngIf=\"active\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\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 <desc>Created with Sketch.</desc>\n <path\n id=\"\u77E2\u91CF 1\"\n d=\"M2.60156 15.3369C1.76611 15.3369 1.08008 14.6974 1.00659 13.8811L1 13.7354L1 8.27185C1 7.43652 1.63965 6.75049 2.45581 6.67688L2.60156 6.67029L3.16675 6.67047C3.44287 6.67047 3.6665 6.89441 3.6665 7.17047L3.6665 14.8369C3.6665 15.113 3.44263 15.3369 3.1665 15.3369L2.60156 15.3369ZM5.6665 15.3369L11.552 15.3369L11.7861 15.3335C13.2422 15.2898 14.1792 14.8291 14.4907 13.8883C14.8108 12.9214 15.1758 11.3278 15.2917 10.0439L15.3098 9.82239L15.3308 9.41162L15.3345 9.20703C15.3438 7.59558 14.8638 6.59619 13.6501 6.59619L9.55591 6.59497L9.60107 6.45593C10.02 5.11914 10.1855 4.08948 10.0869 3.3446C9.89819 1.91724 8.75317 0.703491 7.67651 1.06421L7.55713 1.11084C7.11279 1.35046 6.85327 1.80383 6.70117 2.68347L6.54492 3.61523L6.4978 3.83044L6.43872 4.06409C6.37622 4.28845 6.30347 4.48523 6.21558 4.66223C5.91675 5.2644 5.51904 5.80194 5.021 6.27649C4.8042 6.48309 4.6665 6.76337 4.6665 7.06287L4.6665 14.3369C4.6665 14.8892 5.11426 15.3369 5.6665 15.3369Z\"\n fill-rule=\"evenodd\"\n fill=\"currentColor\"\n />\n </svg>\n <svg\n *ngIf=\"!active\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g id=\"\u9875\u9762-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M11.55205,1 C13.14165,1 14.16285,1.458308 14.49075,2.448728 C14.81075,3.415528 15.17575,5.009158 15.29175,6.292968 L15.29175,6.292968 L15.30985,6.514648 L15.33085,6.925358 C15.38255,8.656368 14.91455,9.740718 13.65015,9.740718 L13.65015,9.740718 L9.55591,9.741028 L9.60108,9.881038 C10.02005,11.217788 10.18555,12.247488 10.08695,12.992388 C9.89815,14.419688 8.75318,15.633388 7.67652,15.272788 L7.67652,15.272788 L7.55713,15.226188 C7.03589,14.992888 6.86426,14.595988 6.70117,13.653488 L6.70117,13.653488 L6.54492,12.721688 L6.4978,12.506488 C6.4231,12.182088 6.33277,11.910688 6.21558,11.674688 C5.8313,10.900988 5.28443,10.233788 4.57056,9.670048 L4.57056,9.670048 L2.60156,9.670288 C1.71704,9.670288 1,8.953248 1,8.068728 L1,8.068728 L1,2.605228 C1,1.720708 1.71704,1.003601 2.60156,1.003601 L2.60156,1.003601 L4.83325,1 Z M11.55205,1.999998 L5.33301,1.999998 L5.33301,9.002988 L5.41699,9.071468 L5.6796615,9.30702243 C6.27568484,9.86814941 6.7534775,10.5097005 7.11109,11.230088 C7.23584,11.480988 7.33399,11.750888 7.4148,12.050988 L7.4148,12.050988 L7.50098,12.409088 L7.56079,12.715988 L7.69336,13.519388 L7.702515,13.5694255 L7.702515,13.5694255 L7.71167,13.617588 L7.76441,13.867488 L7.79384741,13.9820728 C7.85221673,14.1918227 7.90782571,14.2875166 7.96558,14.313488 C8.30152,14.463788 8.97461,13.775988 9.09571,12.861188 C9.17749,12.243388 9.00025,11.240388 8.55029,9.880678 C8.51196,9.764348 8.49854,9.641728 8.51099,9.520328 C8.55908,9.045288 8.98218,8.699098 9.45679,8.742858 L9.45679,8.742858 L13.65015,8.740718 L13.7287739,8.73472734 C14.2127395,8.6588777 14.42952,7.8633705 14.29595,6.382938 C14.18755,5.183288 13.83915,3.662168 13.54155,2.762938 L13.54155,2.762938 L13.50585,2.674618 L13.4594021,2.5911944 C13.216706,2.21352476 12.6088633,1.999998 11.55205,1.999998 L11.55205,1.999998 Z M4.33277,2.003598 L2.60156,2.003598 C2.26929,2.003598 2,2.272948 2,2.605228 L2,2.605228 L2,8.068668 L2.00781,8.166258 C2.05445,8.452148 2.30249,8.670288 2.60156,8.670288 L2.60156,8.670288 L4.33277,8.670598 L4.33277,2.003598 Z\"\n id=\"dislike\"\n fill=\"currentColor\"\n transform=\"translate(8.167337, 8.168474) scale(-1, 1) rotate(-180.000000) translate(-8.167337, -8.168474) \"\n ></path>\n </g>\n </svg>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"] }]
|
|
4515
|
+
}], propDecorators: { width: [{
|
|
4516
|
+
type: Input
|
|
4517
|
+
}], height: [{
|
|
4518
|
+
type: Input
|
|
4519
|
+
}], isActive: [{
|
|
4520
|
+
type: Input
|
|
4521
|
+
}], title: [{
|
|
4522
|
+
type: Input
|
|
4523
|
+
}], text: [{
|
|
4524
|
+
type: Input
|
|
4525
|
+
}], activeChange: [{
|
|
4526
|
+
type: Output
|
|
4527
|
+
}] } });
|
|
4528
|
+
|
|
4529
|
+
class RefreshIconComponent {
|
|
4530
|
+
constructor() {
|
|
4531
|
+
this.width = TOOLBAR_ICON_SIZE_DEFAULT_VALUE;
|
|
4532
|
+
this.height = TOOLBAR_ICON_SIZE_DEFAULT_VALUE;
|
|
4533
|
+
this.isActive = false;
|
|
4534
|
+
this.title = '';
|
|
4535
|
+
this.text = '';
|
|
4536
|
+
}
|
|
4537
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RefreshIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4538
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: RefreshIconComponent, isStandalone: true, selector: "mc-refresh-icon", inputs: { width: "width", height: "height", isActive: "isActive", title: "title", text: "text" }, ngImport: i0, template: "<div class=\"mc-action-item\" [title]=\"title\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n >\n <g id=\"Re-generate\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M12.7143179,3.28587475 C13.981136,4.55339434 14.6666667,6.24406622 14.6666667,7.99999694 L14.6661599,8.02257215 C14.6655102,8.03703705 14.6642357,8.05147912 14.6623363,8.06585443 L14.6666667,7.99999694 C14.6666667,8.0371769 14.6626086,8.07340903 14.6549111,8.10827457 C14.6517992,8.1222052 14.6480389,8.13632563 14.6436512,8.15029154 C14.6390061,8.1651613 14.6336213,8.17980434 14.6275902,8.19410809 C14.6231995,8.20453649 14.6185439,8.21463293 14.613534,8.22459678 C14.6049463,8.24162018 14.5952425,8.2583947 14.5846307,8.27451859 C14.5792264,8.282804 14.5735765,8.29085725 14.5676615,8.2987751 C14.5571418,8.31280391 14.5460319,8.32617172 14.5342667,8.33892584 C14.5300122,8.343554 14.5251791,8.34859129 14.5202201,8.35355033 L14.5076464,8.36569453 C14.4940828,8.37834683 14.4798146,8.39025348 14.4649071,8.4013492 L14.5202201,8.35355033 C14.4937641,8.38000631 14.465081,8.40287777 14.4347743,8.42216473 C14.4224394,8.42996083 14.4098046,8.43724836 14.3968374,8.44398448 C14.3832773,8.45105337 14.3694473,8.45743098 14.3554103,8.46314429 C14.3412925,8.46891455 14.3266036,8.47413114 14.3116174,8.47866321 C14.2992824,8.48234275 14.2871467,8.4855024 14.2749295,8.48819956 C14.2606866,8.49139588 14.2459756,8.4939711 14.2310588,8.49588898 C14.2147923,8.49795142 14.1986607,8.49923861 14.1825093,8.49974745 L14.1666667,8.49999694 L14.1666667,8.49999694 L14.1394006,8.49925755 C14.1253117,8.49849283 14.1112491,8.49713493 14.0972533,8.49518384 L14.1666667,8.49999694 C14.1273209,8.49999694 14.0890366,8.49545228 14.05231,8.48685924 C14.0384692,8.48357481 14.0248075,8.47976105 14.0112962,8.4753569 C13.9958192,8.47034085 13.9804276,8.46445184 13.9654221,8.45784679 C13.9544183,8.45302561 13.9434536,8.44772707 13.9326545,8.4420051 C13.9165024,8.43339464 13.9009385,8.4240044 13.8859565,8.41382189 C13.8807017,8.41031248 13.8749119,8.40620635 13.8691922,8.40196243 L13.8550466,8.39103641 C13.8474863,8.38500359 13.8401047,8.3787561 13.8329113,8.37230316 L13.8131133,8.35355033 L12.6151133,7.15555033 C12.4198511,6.96028819 12.4198511,6.6437057 12.6151133,6.44844355 C12.7926243,6.27093251 13.0704001,6.25479514 13.2661411,6.40003145 L13.3222201,6.44844355 L13.498767,6.62598997 C13.2544588,5.64420827 12.7478288,4.73400934 12.0071133,3.99288367 C9.79437542,1.78014581 6.20562458,1.78014581 3.99288672,3.99288367 C1.78014071,6.20562968 1.78014071,9.79375159 3.99288672,12.0071102 C6.20562458,14.2198481 9.79437542,14.2198481 12.0071133,12.0071102 C12.2023754,11.8118481 12.5189579,11.8118481 12.7142201,12.0071102 C12.9094822,12.2023724 12.9094822,12.5189549 12.7142201,12.714217 C10.1109579,15.3174791 5.88904209,15.3174791 3.28573101,12.7141681 C0.682525952,10.1102423 0.682525952,5.88903088 3.28577994,3.28577688 C5.88904209,0.682514739 10.1109579,0.682514739 12.7143179,3.28587475 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"currentColor\"\n />\n </g>\n </svg>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
4539
|
+
}
|
|
4540
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RefreshIconComponent, decorators: [{
|
|
4541
|
+
type: Component,
|
|
4542
|
+
args: [{ selector: 'mc-refresh-icon', standalone: true, imports: [CommonModule], template: "<div class=\"mc-action-item\" [title]=\"title\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n >\n <g id=\"Re-generate\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M12.7143179,3.28587475 C13.981136,4.55339434 14.6666667,6.24406622 14.6666667,7.99999694 L14.6661599,8.02257215 C14.6655102,8.03703705 14.6642357,8.05147912 14.6623363,8.06585443 L14.6666667,7.99999694 C14.6666667,8.0371769 14.6626086,8.07340903 14.6549111,8.10827457 C14.6517992,8.1222052 14.6480389,8.13632563 14.6436512,8.15029154 C14.6390061,8.1651613 14.6336213,8.17980434 14.6275902,8.19410809 C14.6231995,8.20453649 14.6185439,8.21463293 14.613534,8.22459678 C14.6049463,8.24162018 14.5952425,8.2583947 14.5846307,8.27451859 C14.5792264,8.282804 14.5735765,8.29085725 14.5676615,8.2987751 C14.5571418,8.31280391 14.5460319,8.32617172 14.5342667,8.33892584 C14.5300122,8.343554 14.5251791,8.34859129 14.5202201,8.35355033 L14.5076464,8.36569453 C14.4940828,8.37834683 14.4798146,8.39025348 14.4649071,8.4013492 L14.5202201,8.35355033 C14.4937641,8.38000631 14.465081,8.40287777 14.4347743,8.42216473 C14.4224394,8.42996083 14.4098046,8.43724836 14.3968374,8.44398448 C14.3832773,8.45105337 14.3694473,8.45743098 14.3554103,8.46314429 C14.3412925,8.46891455 14.3266036,8.47413114 14.3116174,8.47866321 C14.2992824,8.48234275 14.2871467,8.4855024 14.2749295,8.48819956 C14.2606866,8.49139588 14.2459756,8.4939711 14.2310588,8.49588898 C14.2147923,8.49795142 14.1986607,8.49923861 14.1825093,8.49974745 L14.1666667,8.49999694 L14.1666667,8.49999694 L14.1394006,8.49925755 C14.1253117,8.49849283 14.1112491,8.49713493 14.0972533,8.49518384 L14.1666667,8.49999694 C14.1273209,8.49999694 14.0890366,8.49545228 14.05231,8.48685924 C14.0384692,8.48357481 14.0248075,8.47976105 14.0112962,8.4753569 C13.9958192,8.47034085 13.9804276,8.46445184 13.9654221,8.45784679 C13.9544183,8.45302561 13.9434536,8.44772707 13.9326545,8.4420051 C13.9165024,8.43339464 13.9009385,8.4240044 13.8859565,8.41382189 C13.8807017,8.41031248 13.8749119,8.40620635 13.8691922,8.40196243 L13.8550466,8.39103641 C13.8474863,8.38500359 13.8401047,8.3787561 13.8329113,8.37230316 L13.8131133,8.35355033 L12.6151133,7.15555033 C12.4198511,6.96028819 12.4198511,6.6437057 12.6151133,6.44844355 C12.7926243,6.27093251 13.0704001,6.25479514 13.2661411,6.40003145 L13.3222201,6.44844355 L13.498767,6.62598997 C13.2544588,5.64420827 12.7478288,4.73400934 12.0071133,3.99288367 C9.79437542,1.78014581 6.20562458,1.78014581 3.99288672,3.99288367 C1.78014071,6.20562968 1.78014071,9.79375159 3.99288672,12.0071102 C6.20562458,14.2198481 9.79437542,14.2198481 12.0071133,12.0071102 C12.2023754,11.8118481 12.5189579,11.8118481 12.7142201,12.0071102 C12.9094822,12.2023724 12.9094822,12.5189549 12.7142201,12.714217 C10.1109579,15.3174791 5.88904209,15.3174791 3.28573101,12.7141681 C0.682525952,10.1102423 0.682525952,5.88903088 3.28577994,3.28577688 C5.88904209,0.682514739 10.1109579,0.682514739 12.7143179,3.28587475 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"currentColor\"\n />\n </g>\n </svg>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"] }]
|
|
4543
|
+
}], propDecorators: { width: [{
|
|
4544
|
+
type: Input
|
|
4545
|
+
}], height: [{
|
|
4546
|
+
type: Input
|
|
4547
|
+
}], isActive: [{
|
|
4548
|
+
type: Input
|
|
4549
|
+
}], title: [{
|
|
4550
|
+
type: Input
|
|
4551
|
+
}], text: [{
|
|
4552
|
+
type: Input
|
|
4553
|
+
}] } });
|
|
4554
|
+
|
|
4555
|
+
class ShareIconComponent {
|
|
4556
|
+
constructor() {
|
|
4557
|
+
this.width = TOOLBAR_ICON_SIZE_DEFAULT_VALUE;
|
|
4558
|
+
this.height = TOOLBAR_ICON_SIZE_DEFAULT_VALUE;
|
|
4559
|
+
this.isActive = false;
|
|
4560
|
+
this.title = '';
|
|
4561
|
+
this.text = '';
|
|
4562
|
+
}
|
|
4563
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ShareIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4564
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ShareIconComponent, isStandalone: true, selector: "mc-share-icon", inputs: { width: "width", height: "height", isActive: "isActive", title: "title", text: "text" }, ngImport: i0, template: "<div class=\"mc-action-item\" [title]=\"title\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n >\n <desc>Created with Sketch.</desc>\n <g id=\"\u91CA\u4E49\u56FE\u6807/\u5206\u4EAB\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"\u5206\u4EAB\" fill=\"currentColor\" fill-rule=\"nonzero\">\n <path d=\"M6.3804718,9.82599637 C5.83206631,10.5398588 4.96976903,11 4,11 C2.34314575,11 1,9.65685425 1,8 C1,6.34314575 2.34314575,5 4,5 C4.96976903,5 5.83206631,5.46014123 6.3804718,6.17400363 L10.1006387,4.20450353 C10.0351367,3.98105658 10,3.7446316 10,3.5 C10,2.11928813 11.1192881,1 12.5,1 C13.8807119,1 15,2.11928813 15,3.5 C15,4.88071187 13.8807119,6 12.5,6 C11.7223166,6 11.0275695,5.64490757 10.5690501,5.08801416 L6.84895235,7.0574777 C6.94695785,7.35387727 7,7.67074431 7,8 C7,8.32925569 6.94695785,8.64612273 6.84895235,8.9425223 L10.5690501,10.9119858 C11.0275695,10.3550924 11.7223166,10 12.5,10 C13.8807119,10 15,11.1192881 15,12.5 C15,13.8807119 13.8807119,15 12.5,15 C11.1192881,15 10,13.8807119 10,12.5 C10,12.2553684 10.0351367,12.0189434 10.1006387,11.7954965 L6.3804718,9.82599637 L6.3804718,9.82599637 Z M4,10 C5.1045695,10 6,9.1045695 6,8 C6,6.8954305 5.1045695,6 4,6 C2.8954305,6 2,6.8954305 2,8 C2,9.1045695 2.8954305,10 4,10 Z M12.5,14 C13.3284271,14 14,13.3284271 14,12.5 C14,11.6715729 13.3284271,11 12.5,11 C11.6715729,11 11,11.6715729 11,12.5 C11,13.3284271 11.6715729,14 12.5,14 Z M12.5,5 C13.3284271,5 14,4.32842712 14,3.5 C14,2.67157288 13.3284271,2 12.5,2 C11.6715729,2 11,2.67157288 11,3.5 C11,4.32842712 11.6715729,5 12.5,5 Z\" id=\"\u5F62\u72B6\"/>\n </g>\n </g>\n </svg>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
4565
|
+
}
|
|
4566
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ShareIconComponent, decorators: [{
|
|
4567
|
+
type: Component,
|
|
4568
|
+
args: [{ selector: 'mc-share-icon', standalone: true, imports: [CommonModule], template: "<div class=\"mc-action-item\" [title]=\"title\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n >\n <desc>Created with Sketch.</desc>\n <g id=\"\u91CA\u4E49\u56FE\u6807/\u5206\u4EAB\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"\u5206\u4EAB\" fill=\"currentColor\" fill-rule=\"nonzero\">\n <path d=\"M6.3804718,9.82599637 C5.83206631,10.5398588 4.96976903,11 4,11 C2.34314575,11 1,9.65685425 1,8 C1,6.34314575 2.34314575,5 4,5 C4.96976903,5 5.83206631,5.46014123 6.3804718,6.17400363 L10.1006387,4.20450353 C10.0351367,3.98105658 10,3.7446316 10,3.5 C10,2.11928813 11.1192881,1 12.5,1 C13.8807119,1 15,2.11928813 15,3.5 C15,4.88071187 13.8807119,6 12.5,6 C11.7223166,6 11.0275695,5.64490757 10.5690501,5.08801416 L6.84895235,7.0574777 C6.94695785,7.35387727 7,7.67074431 7,8 C7,8.32925569 6.94695785,8.64612273 6.84895235,8.9425223 L10.5690501,10.9119858 C11.0275695,10.3550924 11.7223166,10 12.5,10 C13.8807119,10 15,11.1192881 15,12.5 C15,13.8807119 13.8807119,15 12.5,15 C11.1192881,15 10,13.8807119 10,12.5 C10,12.2553684 10.0351367,12.0189434 10.1006387,11.7954965 L6.3804718,9.82599637 L6.3804718,9.82599637 Z M4,10 C5.1045695,10 6,9.1045695 6,8 C6,6.8954305 5.1045695,6 4,6 C2.8954305,6 2,6.8954305 2,8 C2,9.1045695 2.8954305,10 4,10 Z M12.5,14 C13.3284271,14 14,13.3284271 14,12.5 C14,11.6715729 13.3284271,11 12.5,11 C11.6715729,11 11,11.6715729 11,12.5 C11,13.3284271 11.6715729,14 12.5,14 Z M12.5,5 C13.3284271,5 14,4.32842712 14,3.5 C14,2.67157288 13.3284271,2 12.5,2 C11.6715729,2 11,2.67157288 11,3.5 C11,4.32842712 11.6715729,5 12.5,5 Z\" id=\"\u5F62\u72B6\"/>\n </g>\n </g>\n </svg>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"] }]
|
|
4569
|
+
}], propDecorators: { width: [{
|
|
4570
|
+
type: Input
|
|
4571
|
+
}], height: [{
|
|
4572
|
+
type: Input
|
|
4573
|
+
}], isActive: [{
|
|
4574
|
+
type: Input
|
|
4575
|
+
}], title: [{
|
|
4576
|
+
type: Input
|
|
4577
|
+
}], text: [{
|
|
4578
|
+
type: Input
|
|
4579
|
+
}] } });
|
|
4580
|
+
|
|
4581
|
+
var ToolbarAction;
|
|
4582
|
+
(function (ToolbarAction) {
|
|
4583
|
+
ToolbarAction["COPY"] = "copy";
|
|
4584
|
+
ToolbarAction["LIKE"] = "like";
|
|
4585
|
+
ToolbarAction["DISLIKE"] = "dislike";
|
|
4586
|
+
ToolbarAction["REFRESH"] = "refresh";
|
|
4587
|
+
ToolbarAction["SHARE"] = "share";
|
|
4588
|
+
ToolbarAction["DELETE"] = "delete";
|
|
4589
|
+
})(ToolbarAction || (ToolbarAction = {}));
|
|
4590
|
+
|
|
4591
|
+
class ToolbarComponent {
|
|
4592
|
+
constructor() {
|
|
4593
|
+
// 输入属性
|
|
4594
|
+
this.items = [];
|
|
4595
|
+
this.gap = TOOLBAR_GAP_DEFAULT_VALUE; // 默认间距
|
|
4596
|
+
this.iconSize = TOOLBAR_ICON_SIZE_DEFAULT_VALUE; // 默认图标大小
|
|
4597
|
+
// 输出事件
|
|
4598
|
+
this.onClick = new EventEmitter();
|
|
4599
|
+
// 用户自定义插槽映射
|
|
4600
|
+
this.CustomSlotComponent = {};
|
|
4601
|
+
// 响应式操作项（深拷贝避免修改原数据）
|
|
4602
|
+
this.actionItems = [];
|
|
4603
|
+
this.ToolbarAction = ToolbarAction;
|
|
4604
|
+
}
|
|
4605
|
+
ngOnInit() {
|
|
4606
|
+
// 深拷贝输入的items
|
|
4607
|
+
this.actionItems = this.items?.map((item) => ({ ...item }));
|
|
4608
|
+
// 初始化点赞/点踩互斥
|
|
4609
|
+
this.init();
|
|
4610
|
+
}
|
|
4611
|
+
ngAfterContentInit() {
|
|
4612
|
+
// 初始化阶段：解析所有模板的变量名，构建映射关系
|
|
4613
|
+
this.allTemplates.forEach((template) => {
|
|
4614
|
+
// 通过模板的 nativeElement 获取其变量名（#xxx 中的 xxx）
|
|
4615
|
+
const templateName = template._declarationTContainer?.localNames?.[0];
|
|
4616
|
+
if (templateName) {
|
|
4617
|
+
this.CustomSlotComponent[templateName] = template;
|
|
4618
|
+
}
|
|
4619
|
+
});
|
|
4620
|
+
console.log('ngAfterContentInit', this.CustomSlotComponent);
|
|
4621
|
+
}
|
|
4622
|
+
trackByKey(index, item) {
|
|
4623
|
+
return item.key;
|
|
4624
|
+
}
|
|
4625
|
+
/** 初始化：确保点赞和点踩不同时激活 */
|
|
4626
|
+
init() {
|
|
4627
|
+
const likeAction = this.actionItems.find((item) => item.icon === ToolbarAction.LIKE);
|
|
4628
|
+
const dislikeAction = this.actionItems.find((item) => item.icon === ToolbarAction.DISLIKE);
|
|
4629
|
+
if (likeAction?.isActive && dislikeAction) {
|
|
4630
|
+
dislikeAction.isActive = false;
|
|
4631
|
+
}
|
|
4632
|
+
}
|
|
4633
|
+
/** 点赞点击处理：取消点踩状态 */
|
|
4634
|
+
handleLikeClick() {
|
|
4635
|
+
const dislikeAction = this.actionItems.find((item) => item.icon === ToolbarAction.DISLIKE);
|
|
4636
|
+
if (dislikeAction) {
|
|
4637
|
+
dislikeAction.isActive = false;
|
|
4638
|
+
}
|
|
4639
|
+
}
|
|
4640
|
+
/** 点踩点击处理：取消点赞状态 */
|
|
4641
|
+
handleDislikeClick() {
|
|
4642
|
+
const likeAction = this.actionItems.find((item) => item.icon === ToolbarAction.LIKE);
|
|
4643
|
+
if (likeAction) {
|
|
4644
|
+
likeAction.isActive = false;
|
|
4645
|
+
}
|
|
4646
|
+
}
|
|
4647
|
+
/** 操作项点击事件 */
|
|
4648
|
+
actionClick(event, actionItem) {
|
|
4649
|
+
// 处理点赞/点踩互斥
|
|
4650
|
+
if (actionItem.icon === ToolbarAction.LIKE) {
|
|
4651
|
+
this.handleLikeClick();
|
|
4652
|
+
}
|
|
4653
|
+
else if (actionItem.icon === ToolbarAction.DISLIKE) {
|
|
4654
|
+
this.handleDislikeClick();
|
|
4655
|
+
}
|
|
4656
|
+
console.log('actionClick', event, actionItem);
|
|
4657
|
+
// 执行item自身的点击回调
|
|
4658
|
+
if (actionItem.onClick) {
|
|
4659
|
+
actionItem.onClick(actionItem, event);
|
|
4660
|
+
}
|
|
4661
|
+
// 触发组件输出事件
|
|
4662
|
+
this.onClick.emit({ item: actionItem, event });
|
|
4663
|
+
}
|
|
4664
|
+
/** 激活状态变更 */
|
|
4665
|
+
activeChange(isActive, actionItem) {
|
|
4666
|
+
actionItem.isActive = isActive;
|
|
4667
|
+
}
|
|
4668
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4669
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ToolbarComponent, isStandalone: true, selector: "mc-toolbar", inputs: { items: "items", gap: "gap", iconSize: "iconSize" }, outputs: { onClick: "onClick" }, queries: [{ propertyName: "allTemplates", predicate: TemplateRef, read: TemplateRef }], ngImport: i0, template: "<div class=\"mc-actions\" [style.gap.px]=\"gap\">\n <!-- \u904D\u5386\u64CD\u4F5C\u9879 -->\n <ng-container *ngFor=\"let item of actionItems; trackBy: trackByKey\">\n <!-- \u6574\u4E2A\u64CD\u4F5C\u9879\u81EA\u5B9A\u4E49 -->\n <ng-container *ngTemplateOutlet=\"CustomSlotComponent[item.key]\"></ng-container>\n\n <ng-container *ngIf=\"!CustomSlotComponent[item.key]\">\n <!-- \u53EA\u81EA\u5B9A\u4E49Icon\u90E8\u5206 -->\n <div\n *ngIf=\"CustomSlotComponent[item.key + 'Icon']\"\n class=\"mc-action-item\"\n [title]=\"item.label\"\n (click)=\"actionClick($event, item)\"\n >\n <ng-container *ngTemplateOutlet=\"CustomSlotComponent[item.key + 'Icon']; context: { actionData: item }\"></ng-container>\n </div>\n\n <!-- \u5B8C\u5168\u4F7F\u7528\u5185\u7F6E\u7EC4\u4EF6\u60C5\u51B5 -->\n <mc-copy-icon\n *ngIf=\"item.icon === ToolbarAction.COPY\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [text]=\"item.text ?? ''\"\n [title]=\"item.label ?? ''\"\n (click)=\"actionClick($event, item)\"\n ></mc-copy-icon>\n <mc-delete-icon\n *ngIf=\"item.icon === ToolbarAction.DELETE\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [title]=\"item.label ?? ''\"\n (click)=\"actionClick($event, item)\"\n ></mc-delete-icon>\n <mc-refresh-icon\n *ngIf=\"item.icon === ToolbarAction.REFRESH\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [title]=\"item.label ?? ''\"\n (click)=\"actionClick($event, item)\"\n ></mc-refresh-icon>\n <mc-share-icon\n *ngIf=\"item.icon === ToolbarAction.SHARE\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [title]=\"item.label ?? ''\"\n (click)=\"actionClick($event, item)\"\n ></mc-share-icon>\n <mc-like-icon\n *ngIf=\"item.icon === ToolbarAction.LIKE\"\n [isActive]=\"item.isActive ?? false\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [title]=\"item.label ?? ''\"\n (activeChange)=\"activeChange($event, item)\"\n (click)=\"actionClick($event, item)\"\n ></mc-like-icon>\n <mc-dislike-icon\n *ngIf=\"item.icon === ToolbarAction.DISLIKE\"\n [isActive]=\"item.isActive ?? false\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [title]=\"item.label ?? ''\"\n (activeChange)=\"activeChange($event, item)\"\n (click)=\"actionClick($event, item)\"\n ></mc-dislike-icon>\n </ng-container>\n </ng-container>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}:host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: CopyIconComponent, selector: "mc-copy-icon", inputs: ["width", "height", "isActive", "text", "title"] }, { kind: "component", type: DeleteIconComponent, selector: "mc-delete-icon", inputs: ["width", "height", "isActive", "title", "text"] }, { kind: "component", type: RefreshIconComponent, selector: "mc-refresh-icon", inputs: ["width", "height", "isActive", "title", "text"] }, { kind: "component", type: ShareIconComponent, selector: "mc-share-icon", inputs: ["width", "height", "isActive", "title", "text"] }, { kind: "component", type: LikeIconComponent, selector: "mc-like-icon", inputs: ["width", "height", "isActive", "title", "text"], outputs: ["activeChange"] }, { kind: "component", type: DislikeIconComponent, selector: "mc-dislike-icon", inputs: ["width", "height", "isActive", "title", "text"], outputs: ["activeChange"] }] }); }
|
|
4670
|
+
}
|
|
4671
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
4672
|
+
type: Component,
|
|
4673
|
+
args: [{ selector: 'mc-toolbar', standalone: true, imports: [
|
|
4674
|
+
CommonModule,
|
|
4675
|
+
CopyIconComponent,
|
|
4676
|
+
DeleteIconComponent,
|
|
4677
|
+
RefreshIconComponent,
|
|
4678
|
+
ShareIconComponent,
|
|
4679
|
+
LikeIconComponent,
|
|
4680
|
+
DislikeIconComponent,
|
|
4681
|
+
], template: "<div class=\"mc-actions\" [style.gap.px]=\"gap\">\n <!-- \u904D\u5386\u64CD\u4F5C\u9879 -->\n <ng-container *ngFor=\"let item of actionItems; trackBy: trackByKey\">\n <!-- \u6574\u4E2A\u64CD\u4F5C\u9879\u81EA\u5B9A\u4E49 -->\n <ng-container *ngTemplateOutlet=\"CustomSlotComponent[item.key]\"></ng-container>\n\n <ng-container *ngIf=\"!CustomSlotComponent[item.key]\">\n <!-- \u53EA\u81EA\u5B9A\u4E49Icon\u90E8\u5206 -->\n <div\n *ngIf=\"CustomSlotComponent[item.key + 'Icon']\"\n class=\"mc-action-item\"\n [title]=\"item.label\"\n (click)=\"actionClick($event, item)\"\n >\n <ng-container *ngTemplateOutlet=\"CustomSlotComponent[item.key + 'Icon']; context: { actionData: item }\"></ng-container>\n </div>\n\n <!-- \u5B8C\u5168\u4F7F\u7528\u5185\u7F6E\u7EC4\u4EF6\u60C5\u51B5 -->\n <mc-copy-icon\n *ngIf=\"item.icon === ToolbarAction.COPY\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [text]=\"item.text ?? ''\"\n [title]=\"item.label ?? ''\"\n (click)=\"actionClick($event, item)\"\n ></mc-copy-icon>\n <mc-delete-icon\n *ngIf=\"item.icon === ToolbarAction.DELETE\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [title]=\"item.label ?? ''\"\n (click)=\"actionClick($event, item)\"\n ></mc-delete-icon>\n <mc-refresh-icon\n *ngIf=\"item.icon === ToolbarAction.REFRESH\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [title]=\"item.label ?? ''\"\n (click)=\"actionClick($event, item)\"\n ></mc-refresh-icon>\n <mc-share-icon\n *ngIf=\"item.icon === ToolbarAction.SHARE\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [title]=\"item.label ?? ''\"\n (click)=\"actionClick($event, item)\"\n ></mc-share-icon>\n <mc-like-icon\n *ngIf=\"item.icon === ToolbarAction.LIKE\"\n [isActive]=\"item.isActive ?? false\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [title]=\"item.label ?? ''\"\n (activeChange)=\"activeChange($event, item)\"\n (click)=\"actionClick($event, item)\"\n ></mc-like-icon>\n <mc-dislike-icon\n *ngIf=\"item.icon === ToolbarAction.DISLIKE\"\n [isActive]=\"item.isActive ?? false\"\n [width]=\"iconSize\"\n [height]=\"iconSize\"\n [title]=\"item.label ?? ''\"\n (activeChange)=\"activeChange($event, item)\"\n (click)=\"actionClick($event, item)\"\n ></mc-dislike-icon>\n </ng-container>\n </ng-container>\n</div>\n", styles: [".mc-actions{display:inline-flex;align-items:center}.mc-action-item{cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;color:var(--devui-text, #252b3a)}.mc-action-item:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}:host{display:block}\n"] }]
|
|
4682
|
+
}], ctorParameters: () => [], propDecorators: { items: [{
|
|
4683
|
+
type: Input
|
|
4684
|
+
}], gap: [{
|
|
4685
|
+
type: Input
|
|
4686
|
+
}], iconSize: [{
|
|
4687
|
+
type: Input
|
|
4688
|
+
}], onClick: [{
|
|
4689
|
+
type: Output
|
|
4690
|
+
}], allTemplates: [{
|
|
4691
|
+
type: ContentChildren,
|
|
4692
|
+
args: [TemplateRef, { read: TemplateRef }]
|
|
4693
|
+
}] } });
|
|
4694
|
+
|
|
4695
|
+
class ToolbarModule {
|
|
4696
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4697
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: ToolbarModule, imports: [CommonModule,
|
|
4698
|
+
ToolbarComponent,
|
|
4699
|
+
CopyIconComponent,
|
|
4700
|
+
DeleteIconComponent,
|
|
4701
|
+
RefreshIconComponent,
|
|
4702
|
+
ShareIconComponent,
|
|
4703
|
+
LikeIconComponent,
|
|
4704
|
+
DislikeIconComponent], exports: [ToolbarComponent,
|
|
4705
|
+
CopyIconComponent,
|
|
4706
|
+
DeleteIconComponent,
|
|
4707
|
+
RefreshIconComponent,
|
|
4708
|
+
ShareIconComponent,
|
|
4709
|
+
LikeIconComponent,
|
|
4710
|
+
DislikeIconComponent] }); }
|
|
4711
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarModule, imports: [CommonModule,
|
|
4712
|
+
ToolbarComponent,
|
|
4713
|
+
CopyIconComponent,
|
|
4714
|
+
DeleteIconComponent,
|
|
4715
|
+
RefreshIconComponent,
|
|
4716
|
+
ShareIconComponent,
|
|
4717
|
+
LikeIconComponent,
|
|
4718
|
+
DislikeIconComponent] }); }
|
|
4719
|
+
}
|
|
4720
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ToolbarModule, decorators: [{
|
|
4721
|
+
type: NgModule,
|
|
4722
|
+
args: [{
|
|
4723
|
+
declarations: [],
|
|
4724
|
+
imports: [
|
|
4725
|
+
CommonModule,
|
|
4726
|
+
ToolbarComponent,
|
|
4727
|
+
CopyIconComponent,
|
|
4728
|
+
DeleteIconComponent,
|
|
4729
|
+
RefreshIconComponent,
|
|
4730
|
+
ShareIconComponent,
|
|
4731
|
+
LikeIconComponent,
|
|
4732
|
+
DislikeIconComponent,
|
|
4733
|
+
],
|
|
4734
|
+
exports: [
|
|
4735
|
+
ToolbarComponent,
|
|
4736
|
+
CopyIconComponent,
|
|
4737
|
+
DeleteIconComponent,
|
|
4738
|
+
RefreshIconComponent,
|
|
4739
|
+
ShareIconComponent,
|
|
4740
|
+
LikeIconComponent,
|
|
4741
|
+
DislikeIconComponent,
|
|
4742
|
+
],
|
|
4743
|
+
}]
|
|
4744
|
+
}] });
|
|
4745
|
+
|
|
4746
|
+
class PromptItemFoundation extends BaseFoundation {
|
|
4747
|
+
constructor(adapter) {
|
|
4748
|
+
super({ ...adapter });
|
|
4749
|
+
}
|
|
4750
|
+
}
|
|
4751
|
+
|
|
4752
|
+
class PromptIconFoundation extends BaseFoundation {
|
|
4753
|
+
constructor(adapter) {
|
|
4754
|
+
super({ ...adapter });
|
|
4755
|
+
}
|
|
4756
|
+
getIconSize() {
|
|
4757
|
+
const { size } = this.getProps();
|
|
4758
|
+
return typeof size === 'number' ? `${size}px` : size;
|
|
4759
|
+
}
|
|
4760
|
+
getFontIconClass() {
|
|
4761
|
+
const { name } = this.getProps();
|
|
4762
|
+
return /^icon-/.test(name) ? name : '';
|
|
4763
|
+
}
|
|
4764
|
+
getIsComponent() {
|
|
4765
|
+
const { component } = this.getProps();
|
|
4766
|
+
return !!component;
|
|
4767
|
+
}
|
|
4768
|
+
getIsUrl() {
|
|
4769
|
+
const { name } = this.getProps();
|
|
4770
|
+
return /^((http|https):)?\/\//.test(name);
|
|
4771
|
+
}
|
|
4772
|
+
getImageAlt() {
|
|
4773
|
+
const { name } = this.getProps();
|
|
4774
|
+
return name.split('/').pop() || '';
|
|
4775
|
+
}
|
|
4776
|
+
}
|
|
4777
|
+
|
|
4778
|
+
class PromptIconComponent extends BaseComponent {
|
|
4779
|
+
constructor() {
|
|
4780
|
+
super(...arguments);
|
|
4781
|
+
this.name = '';
|
|
4782
|
+
this.color = '';
|
|
4783
|
+
this.size = '';
|
|
4784
|
+
}
|
|
4785
|
+
get adapter() {
|
|
4786
|
+
return {
|
|
4787
|
+
...super.adapter,
|
|
4788
|
+
getProps: () => ({
|
|
4789
|
+
name: this.name,
|
|
4790
|
+
color: this.color,
|
|
4791
|
+
size: this.size,
|
|
4792
|
+
component: this.component,
|
|
4793
|
+
}),
|
|
4794
|
+
};
|
|
4795
|
+
}
|
|
4796
|
+
get iconSize() {
|
|
4797
|
+
return this.foundation.getIconSize();
|
|
4798
|
+
}
|
|
4799
|
+
get fontIconClass() {
|
|
4800
|
+
return this.foundation.getFontIconClass();
|
|
4801
|
+
}
|
|
4802
|
+
get isComponent() {
|
|
4803
|
+
return this.foundation.getIsComponent();
|
|
4804
|
+
}
|
|
4805
|
+
get isUrl() {
|
|
4806
|
+
return this.foundation.getIsUrl();
|
|
4807
|
+
}
|
|
4808
|
+
get imageAlt() {
|
|
4809
|
+
return this.foundation.getImageAlt();
|
|
4810
|
+
}
|
|
4811
|
+
ngOnInit() {
|
|
4812
|
+
this.foundation = new PromptIconFoundation(this.adapter);
|
|
4813
|
+
this.foundation.init();
|
|
4814
|
+
}
|
|
4815
|
+
ngAfterViewInit() {
|
|
4816
|
+
this.loadIconComponent();
|
|
4817
|
+
}
|
|
4818
|
+
loadIconComponent() {
|
|
4819
|
+
if (!this.isComponent) {
|
|
4820
|
+
return;
|
|
4821
|
+
}
|
|
4822
|
+
this.iconComponent.createComponent(this.component);
|
|
4823
|
+
}
|
|
4824
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PromptIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4825
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: PromptIconComponent, isStandalone: true, selector: "mc-prompt-icon", inputs: { name: "name", color: "color", size: "size", component: "component" }, viewQueries: [{ propertyName: "iconComponent", first: true, predicate: ["dynamicIconComponent"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-prompt-icon\">\n <ng-container *ngIf=\"isComponent\" #dynamicIconComponent>\n </ng-container>\n \n <img\n *ngIf=\"!isComponent && isUrl\"\n [src]=\"name\"\n [alt]=\"imageAlt\"\n [style]=\"{ width: iconSize || '', verticalAlign: 'middle' }\"\n />\n \n <i\n *ngIf=\"!isComponent && !isUrl\"\n [class]=\"fontIconClass\"\n [style.fontSize]=\"iconSize\"\n [style.color]=\"color\"\n ></i>\n</div>\n", styles: [".mc-prompt-icon{display:inline-block;color:var(--devui-icon-fill, #71757f)}.mc-prompt-icon i{display:block;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.mc-prompt-icon img{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
4826
|
+
}
|
|
4827
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PromptIconComponent, decorators: [{
|
|
4828
|
+
type: Component,
|
|
4829
|
+
args: [{ selector: 'mc-prompt-icon', standalone: true, imports: [CommonModule], template: "<div class=\"mc-prompt-icon\">\n <ng-container *ngIf=\"isComponent\" #dynamicIconComponent>\n </ng-container>\n \n <img\n *ngIf=\"!isComponent && isUrl\"\n [src]=\"name\"\n [alt]=\"imageAlt\"\n [style]=\"{ width: iconSize || '', verticalAlign: 'middle' }\"\n />\n \n <i\n *ngIf=\"!isComponent && !isUrl\"\n [class]=\"fontIconClass\"\n [style.fontSize]=\"iconSize\"\n [style.color]=\"color\"\n ></i>\n</div>\n", styles: [".mc-prompt-icon{display:inline-block;color:var(--devui-icon-fill, #71757f)}.mc-prompt-icon i{display:block;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.mc-prompt-icon img{display:block}\n"] }]
|
|
4830
|
+
}], propDecorators: { name: [{
|
|
4831
|
+
type: Input
|
|
4832
|
+
}], color: [{
|
|
4833
|
+
type: Input
|
|
4834
|
+
}], size: [{
|
|
4835
|
+
type: Input
|
|
4836
|
+
}], component: [{
|
|
4837
|
+
type: Input
|
|
4838
|
+
}], iconComponent: [{
|
|
4839
|
+
type: ViewChild,
|
|
4840
|
+
args: ['dynamicIconComponent', { read: ViewContainerRef }]
|
|
4841
|
+
}] } });
|
|
4842
|
+
|
|
4843
|
+
class PromptItemComponent extends BaseComponent {
|
|
4844
|
+
constructor() {
|
|
4845
|
+
super();
|
|
4846
|
+
// 组件属性
|
|
4847
|
+
this.prompt = {};
|
|
4848
|
+
}
|
|
4849
|
+
ngOnInit() {
|
|
4850
|
+
this.foundation = new PromptItemFoundation(this.adapter);
|
|
4851
|
+
this.foundation.init();
|
|
4852
|
+
}
|
|
4853
|
+
get adapter() {
|
|
4854
|
+
return {
|
|
4855
|
+
...super.adapter,
|
|
4856
|
+
getProps: () => ({
|
|
4857
|
+
prompt: this.prompt,
|
|
4858
|
+
}),
|
|
4859
|
+
};
|
|
4860
|
+
}
|
|
4861
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PromptItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4862
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: PromptItemComponent, isStandalone: true, selector: "mc-prompt-item", inputs: { prompt: "prompt" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"prompt\" class=\"mc-prompt-item\">\n <div class=\"mc-prompt-item-icon\" [ngClass]=\"{ 'no-description': !prompt.desc }\">\n <mc-prompt-icon\n *ngIf=\"prompt.iconConfig\"\n [name]=\"prompt.iconConfig.name\"\n [color]=\"prompt.iconConfig.color\"\n [size]=\"prompt.iconConfig.size\"\n [component]=\"prompt.iconConfig.component\"\n />\n </div>\n <div *ngIf=\"prompt.label || prompt.desc\" class=\"mc-prompt-item-content\">\n <div *ngIf=\"prompt.label\" class=\"mc-prompt-item-label\">{{ prompt.label }}</div>\n <div *ngIf=\"prompt.desc\" class=\"mc-prompt-item-description\">{{ prompt.desc }}</div>\n </div>\n</div>\n", styles: [".mc-prompt-item{display:flex;gap:8px}.mc-prompt-item .mc-prompt-item-icon.no-description{display:flex;align-items:center}.mc-prompt-item .mc-prompt-item-content{display:flex;flex-direction:column;gap:4px}.mc-prompt-item .mc-prompt-item-content .mc-prompt-item-label{font-weight:700}.mc-prompt-item .mc-prompt-item-content .mc-prompt-item-description{color:var(--devui-aide-text, #71757f)}\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: "component", type: PromptIconComponent, selector: "mc-prompt-icon", inputs: ["name", "color", "size", "component"] }] }); }
|
|
4863
|
+
}
|
|
4864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PromptItemComponent, decorators: [{
|
|
4865
|
+
type: Component,
|
|
4866
|
+
args: [{ selector: 'mc-prompt-item', standalone: true, imports: [CommonModule, PromptIconComponent], template: "<div *ngIf=\"prompt\" class=\"mc-prompt-item\">\n <div class=\"mc-prompt-item-icon\" [ngClass]=\"{ 'no-description': !prompt.desc }\">\n <mc-prompt-icon\n *ngIf=\"prompt.iconConfig\"\n [name]=\"prompt.iconConfig.name\"\n [color]=\"prompt.iconConfig.color\"\n [size]=\"prompt.iconConfig.size\"\n [component]=\"prompt.iconConfig.component\"\n />\n </div>\n <div *ngIf=\"prompt.label || prompt.desc\" class=\"mc-prompt-item-content\">\n <div *ngIf=\"prompt.label\" class=\"mc-prompt-item-label\">{{ prompt.label }}</div>\n <div *ngIf=\"prompt.desc\" class=\"mc-prompt-item-description\">{{ prompt.desc }}</div>\n </div>\n</div>\n", styles: [".mc-prompt-item{display:flex;gap:8px}.mc-prompt-item .mc-prompt-item-icon.no-description{display:flex;align-items:center}.mc-prompt-item .mc-prompt-item-content{display:flex;flex-direction:column;gap:4px}.mc-prompt-item .mc-prompt-item-content .mc-prompt-item-label{font-weight:700}.mc-prompt-item .mc-prompt-item-content .mc-prompt-item-description{color:var(--devui-aide-text, #71757f)}\n"] }]
|
|
4867
|
+
}], ctorParameters: () => [], propDecorators: { prompt: [{
|
|
4868
|
+
type: Input
|
|
4869
|
+
}] } });
|
|
4870
|
+
|
|
4871
|
+
class PromptComponent extends BaseComponent {
|
|
4872
|
+
constructor() {
|
|
4873
|
+
super();
|
|
4874
|
+
// 组件属性
|
|
4875
|
+
this.direction = ListDirection.Vertical;
|
|
4876
|
+
this.list = [];
|
|
4877
|
+
this.variant = ListVariant.Filled;
|
|
4878
|
+
this.itemClick = new EventEmitter();
|
|
4879
|
+
}
|
|
4880
|
+
ngOnInit() {
|
|
4881
|
+
this.foundation = new PromptFoundation(this.adapter);
|
|
4882
|
+
this.foundation.init();
|
|
4883
|
+
}
|
|
4884
|
+
get adapter() {
|
|
4885
|
+
return {
|
|
4886
|
+
...super.adapter,
|
|
4887
|
+
getProps: () => ({
|
|
4888
|
+
direction: this.direction,
|
|
4889
|
+
list: this.list,
|
|
4890
|
+
variant: this.variant,
|
|
4891
|
+
}),
|
|
4892
|
+
};
|
|
4893
|
+
}
|
|
4894
|
+
handleItemClick(item) {
|
|
4895
|
+
this.itemClick.emit(item);
|
|
4896
|
+
}
|
|
4897
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PromptComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4898
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: PromptComponent, isStandalone: true, selector: "mc-prompt", inputs: { direction: "direction", list: "list", variant: "variant" }, outputs: { itemClick: "itemClick" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mc-prompt\">\n <mc-list [data]=\"list\" [direction]=\"direction\" [variant]=\"variant\" [selectable]=\"false\">\n <ng-template #item let-item>\n <mc-prompt-item\n [prompt]=\"item\"\n (click)=\"handleItemClick(item)\"\n ></mc-prompt-item>\n </ng-template>\n </mc-list>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: ListComponent, selector: "mc-list", inputs: ["direction", "autoWrap", "variant", "enableLazyLoad", "enableShortKey", "data", "inputEl", "selectable", "preSelectIndex"], outputs: ["loadMore", "select"] }, { kind: "component", type: PromptItemComponent, selector: "mc-prompt-item", inputs: ["prompt"] }] }); }
|
|
4899
|
+
}
|
|
4900
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PromptComponent, decorators: [{
|
|
4901
|
+
type: Component,
|
|
4902
|
+
args: [{ selector: 'mc-prompt', standalone: true, imports: [CommonModule, ListModule, PromptItemComponent], template: "<div class=\"mc-prompt\">\n <mc-list [data]=\"list\" [direction]=\"direction\" [variant]=\"variant\" [selectable]=\"false\">\n <ng-template #item let-item>\n <mc-prompt-item\n [prompt]=\"item\"\n (click)=\"handleItemClick(item)\"\n ></mc-prompt-item>\n </ng-template>\n </mc-list>\n</div>\n" }]
|
|
4903
|
+
}], ctorParameters: () => [], propDecorators: { direction: [{
|
|
4904
|
+
type: Input
|
|
4905
|
+
}], list: [{
|
|
4906
|
+
type: Input
|
|
4907
|
+
}], variant: [{
|
|
4908
|
+
type: Input
|
|
4909
|
+
}], itemClick: [{
|
|
4910
|
+
type: Output
|
|
4911
|
+
}] } });
|
|
4912
|
+
|
|
4913
|
+
class PromptModule {
|
|
4914
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PromptModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4915
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: PromptModule, imports: [CommonModule, PromptComponent], exports: [PromptComponent] }); }
|
|
4916
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PromptModule, imports: [CommonModule, PromptComponent] }); }
|
|
4917
|
+
}
|
|
4918
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PromptModule, decorators: [{
|
|
4919
|
+
type: NgModule,
|
|
4920
|
+
args: [{
|
|
4921
|
+
declarations: [],
|
|
4922
|
+
imports: [CommonModule, PromptComponent],
|
|
4923
|
+
exports: [PromptComponent],
|
|
4924
|
+
}]
|
|
4925
|
+
}] });
|
|
4926
|
+
|
|
4927
|
+
class LayoutAsideComponent {
|
|
4928
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4929
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: LayoutAsideComponent, isStandalone: true, selector: "mc-layout-aside", ngImport: i0, template: "<div class=\"mc-layout-aside\">\n <ng-content></ng-content>\n</div>\n\n", styles: [""] }); }
|
|
4930
|
+
}
|
|
4931
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutAsideComponent, decorators: [{
|
|
4932
|
+
type: Component,
|
|
4933
|
+
args: [{ selector: 'mc-layout-aside', standalone: true, template: "<div class=\"mc-layout-aside\">\n <ng-content></ng-content>\n</div>\n\n" }]
|
|
4934
|
+
}] });
|
|
4935
|
+
|
|
4936
|
+
class LayoutAsideModule {
|
|
4937
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutAsideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4938
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: LayoutAsideModule, imports: [CommonModule,
|
|
4939
|
+
LayoutAsideComponent], exports: [LayoutAsideComponent] }); }
|
|
4940
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutAsideModule, imports: [CommonModule] }); }
|
|
4941
|
+
}
|
|
4942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutAsideModule, decorators: [{
|
|
4943
|
+
type: NgModule,
|
|
4944
|
+
args: [{
|
|
4945
|
+
declarations: [],
|
|
4946
|
+
imports: [
|
|
4947
|
+
CommonModule,
|
|
4948
|
+
LayoutAsideComponent,
|
|
4949
|
+
],
|
|
4950
|
+
exports: [
|
|
4951
|
+
LayoutAsideComponent,
|
|
4952
|
+
]
|
|
4953
|
+
}]
|
|
4954
|
+
}] });
|
|
4955
|
+
|
|
4956
|
+
class LayoutContentComponent {
|
|
4957
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4958
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: LayoutContentComponent, isStandalone: true, selector: "mc-layout-content", ngImport: i0, template: "<div class=\"mc-layout-content\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".mc-layout-content{flex:auto;min-height:0}\n"] }); }
|
|
4959
|
+
}
|
|
4960
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutContentComponent, decorators: [{
|
|
4961
|
+
type: Component,
|
|
4962
|
+
args: [{ selector: 'mc-layout-content', standalone: true, template: "<div class=\"mc-layout-content\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".mc-layout-content{flex:auto;min-height:0}\n"] }]
|
|
4963
|
+
}] });
|
|
4964
|
+
|
|
4965
|
+
class LayoutContentModule {
|
|
4966
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4967
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: LayoutContentModule, imports: [CommonModule,
|
|
4968
|
+
LayoutContentComponent], exports: [LayoutContentComponent] }); }
|
|
4969
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutContentModule, imports: [CommonModule] }); }
|
|
4970
|
+
}
|
|
4971
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutContentModule, decorators: [{
|
|
4972
|
+
type: NgModule,
|
|
4973
|
+
args: [{
|
|
4974
|
+
declarations: [],
|
|
4975
|
+
imports: [
|
|
4976
|
+
CommonModule,
|
|
4977
|
+
LayoutContentComponent,
|
|
4978
|
+
],
|
|
4979
|
+
exports: [
|
|
4980
|
+
LayoutContentComponent,
|
|
4981
|
+
]
|
|
4982
|
+
}]
|
|
4983
|
+
}] });
|
|
4984
|
+
|
|
4985
|
+
class LayoutHeaderComponent {
|
|
4986
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4987
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: LayoutHeaderComponent, isStandalone: true, selector: "mc-layout-header", ngImport: i0, template: "<div class=\"mc-layout-header\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".mc-layout-header{flex:0 0 auto;min-height:40px}\n"] }); }
|
|
4988
|
+
}
|
|
4989
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutHeaderComponent, decorators: [{
|
|
4990
|
+
type: Component,
|
|
4991
|
+
args: [{ selector: 'mc-layout-header', standalone: true, template: "<div class=\"mc-layout-header\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".mc-layout-header{flex:0 0 auto;min-height:40px}\n"] }]
|
|
4992
|
+
}] });
|
|
4993
|
+
|
|
4994
|
+
class LayoutHeaderModule {
|
|
4995
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4996
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: LayoutHeaderModule, imports: [CommonModule,
|
|
4997
|
+
LayoutHeaderComponent], exports: [LayoutHeaderComponent] }); }
|
|
4998
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutHeaderModule, imports: [CommonModule] }); }
|
|
4999
|
+
}
|
|
5000
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutHeaderModule, decorators: [{
|
|
5001
|
+
type: NgModule,
|
|
5002
|
+
args: [{
|
|
5003
|
+
declarations: [],
|
|
5004
|
+
imports: [
|
|
5005
|
+
CommonModule,
|
|
5006
|
+
LayoutHeaderComponent,
|
|
5007
|
+
],
|
|
5008
|
+
exports: [
|
|
5009
|
+
LayoutHeaderComponent,
|
|
5010
|
+
]
|
|
5011
|
+
}]
|
|
5012
|
+
}] });
|
|
5013
|
+
|
|
5014
|
+
class LayoutComponent {
|
|
5015
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5016
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: LayoutComponent, isStandalone: true, selector: "mc-layout", ngImport: i0, template: "<div class=\"mc-layout\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".mc-layout{display:flex;flex:auto;flex-direction:column}.mc-layout-aside{flex-direction:row}\n"] }); }
|
|
5017
|
+
}
|
|
5018
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
5019
|
+
type: Component,
|
|
5020
|
+
args: [{ selector: 'mc-layout', standalone: true, template: "<div class=\"mc-layout\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".mc-layout{display:flex;flex:auto;flex-direction:column}.mc-layout-aside{flex-direction:row}\n"] }]
|
|
5021
|
+
}] });
|
|
5022
|
+
|
|
5023
|
+
class LayoutModule {
|
|
5024
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5025
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: LayoutModule, imports: [CommonModule,
|
|
5026
|
+
LayoutComponent], exports: [LayoutComponent] }); }
|
|
5027
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutModule, imports: [CommonModule] }); }
|
|
5028
|
+
}
|
|
5029
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutModule, decorators: [{
|
|
5030
|
+
type: NgModule,
|
|
5031
|
+
args: [{
|
|
5032
|
+
declarations: [],
|
|
5033
|
+
imports: [
|
|
5034
|
+
CommonModule,
|
|
5035
|
+
LayoutComponent,
|
|
5036
|
+
],
|
|
5037
|
+
exports: [
|
|
5038
|
+
LayoutComponent,
|
|
5039
|
+
]
|
|
5040
|
+
}]
|
|
5041
|
+
}] });
|
|
5042
|
+
|
|
5043
|
+
class LayoutSenderComponent {
|
|
5044
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutSenderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5045
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: LayoutSenderComponent, isStandalone: true, selector: "mc-layout-sender", ngImport: i0, template: "<div class=\"mc-layout-sender\">\n <ng-content></ng-content>\n</div>\n\n", styles: [""] }); }
|
|
5046
|
+
}
|
|
5047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutSenderComponent, decorators: [{
|
|
5048
|
+
type: Component,
|
|
5049
|
+
args: [{ selector: 'mc-layout-sender', standalone: true, template: "<div class=\"mc-layout-sender\">\n <ng-content></ng-content>\n</div>\n\n" }]
|
|
5050
|
+
}] });
|
|
5051
|
+
|
|
5052
|
+
class LayoutSenderModule {
|
|
5053
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutSenderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5054
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: LayoutSenderModule, imports: [CommonModule,
|
|
5055
|
+
LayoutSenderComponent], exports: [LayoutSenderComponent] }); }
|
|
5056
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutSenderModule, imports: [CommonModule] }); }
|
|
5057
|
+
}
|
|
5058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LayoutSenderModule, decorators: [{
|
|
5059
|
+
type: NgModule,
|
|
5060
|
+
args: [{
|
|
5061
|
+
declarations: [],
|
|
5062
|
+
imports: [
|
|
5063
|
+
CommonModule,
|
|
5064
|
+
LayoutSenderComponent,
|
|
5065
|
+
],
|
|
5066
|
+
exports: [
|
|
5067
|
+
LayoutSenderComponent,
|
|
5068
|
+
]
|
|
5069
|
+
}]
|
|
5070
|
+
}] });
|
|
5071
|
+
|
|
2572
5072
|
/*
|
|
2573
5073
|
* Public API Surface of components-ng
|
|
2574
5074
|
*/
|
|
@@ -2577,5 +5077,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
2577
5077
|
* Generated bundle index. Do not edit.
|
|
2578
5078
|
*/
|
|
2579
5079
|
|
|
2580
|
-
export { AvatarBodyIconComponent, AvatarComponent, AvatarNoBodyIconComponent, BubbleComponent, BubbleLoadingComponent, BubbleModule, CodeBlockComponent, InputComponent, InputModule, LocaleModule, LocaleService, MarkdownCardComponent, MarkdownCardModule, TranslatePipe, inputContextToken };
|
|
5080
|
+
export { AttachmentComponent, AttachmentModule, AvatarBodyIconComponent, AvatarComponent, AvatarNoBodyIconComponent, BubbleComponent, BubbleLoadingComponent, BubbleModule, CodeBlockComponent, CopyIconComponent, DeleteIconComponent, DislikeIconComponent, HeaderComponent, HeaderModule, InputComponent, InputModule, IntroductionComponent, IntroductionModule, LayoutAsideComponent, LayoutAsideModule, LayoutComponent, LayoutContentComponent, LayoutContentModule, LayoutHeaderComponent, LayoutHeaderModule, LayoutModule, LayoutSenderComponent, LayoutSenderModule, LikeIconComponent, ListComponent, ListDirection, ListModule, ListVariant, LocaleModule, LocaleService, MarkdownCardComponent, MarkdownCardModule, MentionComponent, MentionModule, PromptComponent, PromptModule, RefreshIconComponent, ShareIconComponent, ToolbarAction, ToolbarComponent, ToolbarModule, TranslatePipe, inputContextToken };
|
|
2581
5081
|
//# sourceMappingURL=matechat-ng.mjs.map
|