@xw-components/formula-editor 18.1.0 → 18.1.1
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/esm2022/formula-editor-request.service.mjs +11 -5
- package/esm2022/formula-editor.component.mjs +195 -32
- package/esm2022/formula-editor.model.mjs +9 -1
- package/esm2022/formula-editor.service.mjs +3 -6
- package/fesm2022/formula-editor.mjs +214 -40
- package/fesm2022/formula-editor.mjs.map +1 -1
- package/formula-editor-request.service.d.ts +43 -8
- package/formula-editor.component.d.ts +169 -7
- package/formula-editor.model.d.ts +9 -0
- package/package.json +1 -1
|
@@ -32,11 +32,17 @@ class FormulaEditorRequestService {
|
|
|
32
32
|
constructor() { }
|
|
33
33
|
/**
|
|
34
34
|
* 获取字段的描述
|
|
35
|
-
*
|
|
36
|
-
*
|
|
35
|
+
* 实现类需要根据字段id来获取字段的描述
|
|
36
|
+
* 例如：
|
|
37
|
+
* ```typescript
|
|
38
|
+
* getFieldDescription(description: WritableSignal<string>) {
|
|
39
|
+
* description.set('');
|
|
40
|
+
* }
|
|
41
|
+
* ```
|
|
42
|
+
* @param description 描述字符串信号量
|
|
37
43
|
*/
|
|
38
|
-
getFieldDescription() {
|
|
39
|
-
|
|
44
|
+
getFieldDescription(description) {
|
|
45
|
+
description.set('');
|
|
40
46
|
}
|
|
41
47
|
}
|
|
42
48
|
|
|
@@ -64,6 +70,14 @@ var FuncListType;
|
|
|
64
70
|
FuncListType["List"] = "list";
|
|
65
71
|
FuncListType["Tree"] = "tree"; // 树模式
|
|
66
72
|
})(FuncListType || (FuncListType = {}));
|
|
73
|
+
const DEFAULT_TEXT = {
|
|
74
|
+
inputTitle: '字段表达式',
|
|
75
|
+
fieldTitle: '字段',
|
|
76
|
+
checkFormatTitle: '格式校验',
|
|
77
|
+
functionTitle: '函数',
|
|
78
|
+
searchFieldPlaceholder: '搜索',
|
|
79
|
+
searchFunctionPlaceholder: '搜索'
|
|
80
|
+
};
|
|
67
81
|
const OPERATOR_LIST = [
|
|
68
82
|
{
|
|
69
83
|
type: 'add',
|
|
@@ -402,13 +416,10 @@ class FormulaEditorService {
|
|
|
402
416
|
}
|
|
403
417
|
}
|
|
404
418
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormulaEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
405
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormulaEditorService
|
|
419
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormulaEditorService }); }
|
|
406
420
|
}
|
|
407
421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormulaEditorService, decorators: [{
|
|
408
|
-
type: Injectable
|
|
409
|
-
args: [{
|
|
410
|
-
providedIn: 'root'
|
|
411
|
-
}]
|
|
422
|
+
type: Injectable
|
|
412
423
|
}] });
|
|
413
424
|
|
|
414
425
|
const ICONS = {
|
|
@@ -424,6 +435,166 @@ const ICONS = {
|
|
|
424
435
|
* 公式编辑器组件
|
|
425
436
|
* 用于创建和编辑计算公式，支持函数、指标和字段的插入与验证
|
|
426
437
|
* 依赖className与在使用组件处使用穿透样式实现样式
|
|
438
|
+
*
|
|
439
|
+
* 例如：
|
|
440
|
+
* ```typescript
|
|
441
|
+
* // 1. 首先实现 FormulaEditorRequestService
|
|
442
|
+
* @Injectable({ providedIn: 'root' })
|
|
443
|
+
* export class MyFormulaRequestService extends FormulaEditorRequestService {
|
|
444
|
+
* getFunctions(functionList: WritableSignal<NzTreeNodeOptions[]>) {
|
|
445
|
+
* functionList.set([
|
|
446
|
+
* {
|
|
447
|
+
* title: '聚合函数',
|
|
448
|
+
* key: 'agg',
|
|
449
|
+
* children: [
|
|
450
|
+
* { title: 'SUM', key: 'sum', className: 'agg', id: 'sum', description: '求和函数' },
|
|
451
|
+
* { title: 'AVG', key: 'avg', className: 'agg', id: 'avg', description: '平均值函数' },
|
|
452
|
+
* { title: 'COUNT', key: 'count', className: 'agg', id: 'count', description: '计数函数' }
|
|
453
|
+
* ]
|
|
454
|
+
* },
|
|
455
|
+
* {
|
|
456
|
+
* title: '数学函数',
|
|
457
|
+
* key: 'math',
|
|
458
|
+
* children: [
|
|
459
|
+
* { title: 'ABS', key: 'abs', className: 'math', id: 'abs', description: '绝对值函数' },
|
|
460
|
+
* { title: 'ROUND', key: 'round', className: 'math', id: 'round', description: '四舍五入函数' }
|
|
461
|
+
* ]
|
|
462
|
+
* }
|
|
463
|
+
* ]);
|
|
464
|
+
* }
|
|
465
|
+
*
|
|
466
|
+
* getFields(fieldList: WritableSignal<Field[]>) {
|
|
467
|
+
* fieldList.set([
|
|
468
|
+
* { id: 'user_count', name: '用户数量', className: 'field' },
|
|
469
|
+
* { id: 'order_amount', name: '订单金额', className: 'field' },
|
|
470
|
+
* { id: 'product_price', name: '商品价格', className: 'field' }
|
|
471
|
+
* ]);
|
|
472
|
+
* }
|
|
473
|
+
*
|
|
474
|
+
* validateFormula(formula: NzSafeAny, res: WritableSignal<ValidationResult | null>) {
|
|
475
|
+
* // 调用后端API校验公式
|
|
476
|
+
* this.http.post('/api/formula/validate', { formula }).subscribe({
|
|
477
|
+
* next: (response) => {
|
|
478
|
+
* res.set({
|
|
479
|
+
* isValid: response.valid,
|
|
480
|
+
* errors: response.errors || []
|
|
481
|
+
* });
|
|
482
|
+
* },
|
|
483
|
+
* error: () => {
|
|
484
|
+
* res.set({
|
|
485
|
+
* isValid: false,
|
|
486
|
+
* errors: ['校验失败，请稍后重试']
|
|
487
|
+
* });
|
|
488
|
+
* }
|
|
489
|
+
* });
|
|
490
|
+
* }
|
|
491
|
+
*
|
|
492
|
+
* getFieldDescription(description: WritableSignal<string>) {
|
|
493
|
+
* description.set('选择字段后显示字段描述信息');
|
|
494
|
+
* }
|
|
495
|
+
* }
|
|
496
|
+
*
|
|
497
|
+
* // 2. 在模块中提供服务
|
|
498
|
+
* providers: [
|
|
499
|
+
* { provide: FormulaEditorRequestServiceToken, useClass: MyFormulaRequestService }
|
|
500
|
+
* ]
|
|
501
|
+
*
|
|
502
|
+
* // 3. 在父组件中使用
|
|
503
|
+
* @Component({
|
|
504
|
+
* template: `
|
|
505
|
+
* <app-formula-editor
|
|
506
|
+
* [itemType]="itemType"
|
|
507
|
+
* [defaultText]="defaultText"
|
|
508
|
+
* [checkFormatMethod]="checkFormatMethod"
|
|
509
|
+
* [functionListType]="functionListType"
|
|
510
|
+
* [itemTemplate]="itemTemplate">
|
|
511
|
+
* </app-formula-editor>
|
|
512
|
+
*
|
|
513
|
+
* <button (click)="getFormula()">获取公式JSON</button>
|
|
514
|
+
* <button (click)="getFormulaText()">获取公式文本</button>
|
|
515
|
+
* <button (click)="loadExampleFormula()">加载示例公式</button>
|
|
516
|
+
* `
|
|
517
|
+
* })
|
|
518
|
+
* export class ParentComponent {
|
|
519
|
+
* @ViewChild(FormulaEditorComponent) formulaEditor!: FormulaEditorComponent;
|
|
520
|
+
*
|
|
521
|
+
* itemType = ItemType.Field;
|
|
522
|
+
* checkFormatMethod = CheckFormatMethod.self;
|
|
523
|
+
* functionListType = FuncListType.Tree;
|
|
524
|
+
*
|
|
525
|
+
* defaultText = {
|
|
526
|
+
* fieldTitle: '字段',
|
|
527
|
+
* indicatorTitle: '指标',
|
|
528
|
+
* checkFormatTitle: '格式校验'
|
|
529
|
+
* };
|
|
530
|
+
*
|
|
531
|
+
* // 获取公式JSON
|
|
532
|
+
* getFormula() {
|
|
533
|
+
* const formula = this.formulaEditor.getFormula();
|
|
534
|
+
* console.log('公式JSON:', formula);
|
|
535
|
+
* }
|
|
536
|
+
*
|
|
537
|
+
* // 获取公式文本
|
|
538
|
+
* getFormulaText() {
|
|
539
|
+
* const text = this.formulaEditor.getFormulaText();
|
|
540
|
+
* console.log('公式文本:', text);
|
|
541
|
+
* }
|
|
542
|
+
*
|
|
543
|
+
* // 加载示例公式
|
|
544
|
+
* loadExampleFormula() {
|
|
545
|
+
* const exampleFormula = {
|
|
546
|
+
* type: 'doc',
|
|
547
|
+
* content: [
|
|
548
|
+
* {
|
|
549
|
+
* type: 'paragraph',
|
|
550
|
+
* content: [
|
|
551
|
+
* {
|
|
552
|
+
* type: 'func',
|
|
553
|
+
* attrs: {
|
|
554
|
+
* name: 'SUM',
|
|
555
|
+
* id: 'sum',
|
|
556
|
+
* className: 'text-func-agg'
|
|
557
|
+
* }
|
|
558
|
+
* },
|
|
559
|
+
* {
|
|
560
|
+
* type: 'text',
|
|
561
|
+
* text: '('
|
|
562
|
+
* },
|
|
563
|
+
* {
|
|
564
|
+
* type: 'field',
|
|
565
|
+
* attrs: {
|
|
566
|
+
* name: 'order_amount',
|
|
567
|
+
* id: 'order_amount',
|
|
568
|
+
* className: 'text-field-field'
|
|
569
|
+
* }
|
|
570
|
+
* },
|
|
571
|
+
* {
|
|
572
|
+
* type: 'text',
|
|
573
|
+
* text: ')'
|
|
574
|
+
* }
|
|
575
|
+
* ]
|
|
576
|
+
* }
|
|
577
|
+
* ]
|
|
578
|
+
* };
|
|
579
|
+
* this.formulaEditor.loadFormula(exampleFormula);
|
|
580
|
+
* }
|
|
581
|
+
* }
|
|
582
|
+
*
|
|
583
|
+
* // 4. 样式穿透（在父组件样式文件中）
|
|
584
|
+
* // :host ::ng-deep .text-func-agg {
|
|
585
|
+
* // color: #1890ff;
|
|
586
|
+
* // background-color: #e6f7ff;
|
|
587
|
+
* // padding: 2px 6px;
|
|
588
|
+
* // border-radius: 4px;
|
|
589
|
+
* // }
|
|
590
|
+
*
|
|
591
|
+
* // :host ::ng-deep .text-field-field {
|
|
592
|
+
* // color: #52c41a;
|
|
593
|
+
* // background-color: #f6ffed;
|
|
594
|
+
* // padding: 2px 6px;
|
|
595
|
+
* // border-radius: 4px;
|
|
596
|
+
* // }
|
|
597
|
+
* ```
|
|
427
598
|
*/
|
|
428
599
|
class FormulaEditorComponent {
|
|
429
600
|
getOperatorIcon(type) {
|
|
@@ -455,7 +626,7 @@ class FormulaEditorComponent {
|
|
|
455
626
|
* 字段标题，当项目类型为字段时显示
|
|
456
627
|
* 默认值：'字段'
|
|
457
628
|
*/
|
|
458
|
-
this.
|
|
629
|
+
this.defaultText = input({});
|
|
459
630
|
/**
|
|
460
631
|
* 格式检查方法
|
|
461
632
|
* 默认值：CheckFormatMethod.self
|
|
@@ -469,13 +640,15 @@ class FormulaEditorComponent {
|
|
|
469
640
|
this.itemTemplate = input(null);
|
|
470
641
|
this._itemType = ItemType;
|
|
471
642
|
this._funcListType = FuncListType;
|
|
643
|
+
this._defaultText = DEFAULT_TEXT;
|
|
472
644
|
this.searchWord = '';
|
|
473
|
-
this.fieldListOrigin = [];
|
|
645
|
+
this.fieldListOrigin = signal([]);
|
|
474
646
|
this.fieldList = [];
|
|
475
647
|
this.checkLoading = false;
|
|
476
648
|
this.showDescription = true;
|
|
477
|
-
this.funcNode = [];
|
|
478
|
-
this.fieldDescription = '';
|
|
649
|
+
this.funcNode = signal([]);
|
|
650
|
+
this.fieldDescription = signal('');
|
|
651
|
+
this.validationResult = signal(null);
|
|
479
652
|
this.editDescription = '请选择函数';
|
|
480
653
|
this.editDescShow = 'none';
|
|
481
654
|
this.searchField = signal('');
|
|
@@ -483,25 +656,36 @@ class FormulaEditorComponent {
|
|
|
483
656
|
this._operatorList = OPERATOR_LIST;
|
|
484
657
|
effect(() => {
|
|
485
658
|
const searchWord = this.searchField();
|
|
486
|
-
this.fieldList = this.fieldListOrigin.filter(item => item.name.includes(searchWord));
|
|
659
|
+
this.fieldList = this.fieldListOrigin().filter(item => item.name.includes(searchWord));
|
|
487
660
|
});
|
|
488
661
|
effect(() => {
|
|
489
662
|
const itemType = this.itemType();
|
|
490
663
|
if (itemType === ItemType.Field) {
|
|
491
|
-
this.formulaEditorRequestService.getFields()
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
664
|
+
this.formulaEditorRequestService.getFields(this.fieldListOrigin);
|
|
665
|
+
}
|
|
666
|
+
}, { allowSignalWrites: true });
|
|
667
|
+
effect(() => {
|
|
668
|
+
const fieldListOrigin = this.fieldListOrigin();
|
|
669
|
+
this.fieldList = [...fieldListOrigin];
|
|
670
|
+
});
|
|
671
|
+
effect(() => {
|
|
672
|
+
const validationResult = this.validationResult();
|
|
673
|
+
if (validationResult) {
|
|
674
|
+
this.checkLoading = false;
|
|
675
|
+
if (validationResult.isValid) {
|
|
676
|
+
this.msg.success(`${this.defaultText().checkFormatTitle || this._defaultText.checkFormatTitle}通过`);
|
|
677
|
+
}
|
|
678
|
+
else {
|
|
679
|
+
this.msg.error(`${this.defaultText().checkFormatTitle || this._defaultText.checkFormatTitle}不通过: ${validationResult.errors.join(', ')}`);
|
|
680
|
+
this.editDescription = validationResult.errors.join(', ');
|
|
681
|
+
this.editDescShow = 'error';
|
|
682
|
+
}
|
|
495
683
|
}
|
|
496
684
|
});
|
|
497
685
|
}
|
|
498
686
|
ngOnInit() {
|
|
499
|
-
this.formulaEditorRequestService.getFunctions()
|
|
500
|
-
|
|
501
|
-
});
|
|
502
|
-
this.formulaEditorRequestService.getFieldDescription().then(res => {
|
|
503
|
-
this.fieldDescription = res;
|
|
504
|
-
});
|
|
687
|
+
this.formulaEditorRequestService.getFunctions(this.funcNode);
|
|
688
|
+
this.formulaEditorRequestService.getFieldDescription(this.fieldDescription);
|
|
505
689
|
}
|
|
506
690
|
ngAfterViewInit() {
|
|
507
691
|
this.formulaEditorService.initNodes();
|
|
@@ -606,27 +790,17 @@ class FormulaEditorComponent {
|
|
|
606
790
|
if (this.checkFormatMethod() === CheckFormatMethod.self) {
|
|
607
791
|
const result = this.validateFormula();
|
|
608
792
|
if (result.isValid) {
|
|
609
|
-
this.msg.success(
|
|
793
|
+
this.msg.success(`${this.defaultText().checkFormatTitle || this._defaultText.checkFormatTitle}通过`);
|
|
610
794
|
}
|
|
611
795
|
else {
|
|
612
|
-
this.msg.error(
|
|
796
|
+
this.msg.error(`${this.defaultText().checkFormatTitle || this._defaultText.checkFormatTitle}不通过: ${result.errors.join(', ')}`);
|
|
613
797
|
this.editDescription = result.errors.join(', ');
|
|
614
798
|
this.editDescShow = 'error';
|
|
615
799
|
}
|
|
616
800
|
}
|
|
617
801
|
else {
|
|
618
802
|
this.checkLoading = true;
|
|
619
|
-
this.formulaEditorRequestService.validateFormula(this.getFormula())
|
|
620
|
-
this.checkLoading = false;
|
|
621
|
-
if (res.isValid) {
|
|
622
|
-
this.msg.success('格式校验通过');
|
|
623
|
-
}
|
|
624
|
-
else {
|
|
625
|
-
this.msg.error(`格式校验不通过: ${res.errors.join(', ')}`);
|
|
626
|
-
this.editDescription = res.errors.join(', ');
|
|
627
|
-
this.editDescShow = 'error';
|
|
628
|
-
}
|
|
629
|
-
});
|
|
803
|
+
this.formulaEditorRequestService.validateFormula(this.getFormula(), this.validationResult);
|
|
630
804
|
}
|
|
631
805
|
}
|
|
632
806
|
/**
|
|
@@ -670,7 +844,7 @@ class FormulaEditorComponent {
|
|
|
670
844
|
this.showDescription = !this.showDescription;
|
|
671
845
|
}
|
|
672
846
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormulaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
673
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormulaEditorComponent, isStandalone: true, selector: "app-formula-editor", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, fieldTitle: { classPropertyName: "fieldTitle", publicName: "fieldTitle", isSignal: true, isRequired: false, transformFunction: null }, checkFormatMethod: { classPropertyName: "checkFormatMethod", publicName: "checkFormatMethod", isSignal: true, isRequired: false, transformFunction: null }, functionListType: { classPropertyName: "functionListType", publicName: "functionListType", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div nz-row class=\"formula-editor\">\n <div nz-col nzSpan=\"10\" class=\"editor-box\">\n <div class=\"editor-title\">\n <div class=\"label-title label-require\">\u5B57\u6BB5\u8868\u8FBE\u5F0F</div>\n <button nz-button nzType=\"link\" nzSize=\"small\" [nzLoading]=\"checkLoading\" (click)=\"checkFormat()\">\u683C\u5F0F\u6821\u9A8C</button>\n </div>\n <div class=\"edit-box\">\n <div class=\"edit-operation-box\">\n @for (item of _operatorList; track item) {\n <div class=\"edit-operation-item\" (click)=\"insertOperator(item.name)\">\n <span class=\"operator-icon\" [innerHTML]=\"getOperatorIcon(item.type)\"></span>\n </div>\n }\n </div>\n <div #editor class=\"editor\"></div>\n @if (editDescShow !== 'none') {\n <div class=\"edit-description-box\">\n <div class=\"edit-description-head\" [style]=\"{ marginBottom: !showDescription ? '10px' : '0' }\">\n <span class=\"edit-description-title\">{{ editDescShow === 'func' ? '\u51FD\u6570\u91CA\u4E49' : '\u6821\u9A8C\u9519\u8BEF\u4FE1\u606F' }}</span>\n <span\n class=\"edit-description-icon\"\n nz-icon\n [nzType]=\"showDescription ? 'down' : 'up'\"\n nzTheme=\"outline\"\n (click)=\"toggleDescription()\"\n ></span>\n </div>\n @if (showDescription) {\n <div class=\"edit-description-text\"> {{ editDescription }} </div>\n }\n </div>\n }\n </div>\n </div>\n @switch (itemType()) {\n @case (_itemType.Field) {\n <div nz-col nzSpan=\"7\" class=\"field-box\">\n <div class=\"label-title\"\n >{{ fieldTitle() }}\n @if (fieldDescription) {\n <span nz-icon nzType=\"question-circle\" nzTheme=\"outline\" nz-tooltip [nzTooltipTitle]=\"fieldDescription\"></span>\n }\n </div>\n <nz-input-group [nzSuffix]=\"suffixIconSearch\">\n <input type=\"text\" nz-input placeholder=\"\u641C\u7D22\" [(ngModel)]=\"searchField\" />\n </nz-input-group>\n <ng-template #suffixIconSearch>\n <i nz-icon nzType=\"search\"></i>\n </ng-template>\n <div class=\"field-list\">\n @for (item of fieldList; track item) {\n <div (click)=\"insertField(item)\" [class]=\"item.className ? 'item-field-' + item.className : ''\" class=\"field-list-item\">\n @if (item.image) {\n <img class=\"field-img\" [src]=\"item.image\" />\n }\n @if (item.icon) {\n <span class=\"field-icon\" nz-icon [nzIconfont]=\"item.icon\"></span>\n }\n <span class=\"field-name\" [innerHTML]=\"item.name | nzHighlight: searchField() : 'i' : 'node-highlight'\"></span>\n @if (item.description) {\n <span\n class=\"desc-icon\"\n nz-icon\n nzType=\"question-circle\"\n nzTheme=\"outline\"\n nz-tooltip\n [nzTooltipTitle]=\"item.description\"\n ></span>\n }\n </div>\n }\n </div>\n </div>\n }\n @case (_itemType.Template) {\n <div nz-col nzSpan=\"7\" class=\"field-box\">\n <ng-container *ngTemplateOutlet=\"itemTemplate()\"></ng-container>\n </div>\n }\n }\n <div nz-col nzSpan=\"7\" class=\"function-box\">\n <div class=\"label-title\">\u51FD\u6570</div>\n <nz-input-group [nzSuffix]=\"suffixIconSearch\">\n <input type=\"text\" nz-input placeholder=\"\u641C\u7D22\" [(ngModel)]=\"searchFunction\" />\n </nz-input-group>\n <ng-template #suffixIconSearch>\n <i nz-icon nzType=\"search\"></i>\n </ng-template>\n <nz-tree\n class=\"function-tree\"\n [nzHideUnMatched]=\"true\"\n [nzSearchValue]=\"searchFunction()\"\n [nzTreeTemplate]=\"nzTreeTemplate\"\n [nzData]=\"funcNode\"\n [nzShowExpand]=\"functionListType() === _funcListType.Tree\"\n (nzClick)=\"functionClick($event)\"\n ></nz-tree>\n <ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n <span class=\"custom-node\" [innerHTML]=\"origin.name | nzHighlight: searchFunction() : 'i' : 'node-highlight'\">\n @if (origin.description) {\n <span\n class=\"desc-icon\"\n nz-icon\n nzType=\"question-circle\"\n nzTheme=\"outline\"\n nz-tooltip\n [nzTooltipTitle]=\"origin.description\"\n ></span>\n }\n </span>\n </ng-template>\n </div>\n</div>\n", styles: [":host ::ng-deep .ant-tree-node-content-wrapper{width:100%}:host ::ng-deep .ant-input-affix-wrapper{padding:0 11px;height:32px}:host ::ng-deep .ProseMirror-focused{outline:none}:host ::ng-deep .node-highlight{color:#ff4d4f!important}:host .total-box{width:1000px;padding:8px;background-color:#fff}:host .ant-input-affix-wrapper{width:100%}:host .desc-icon{margin-left:auto}:host .formula-editor .editor-box{padding:12px;border-right:1px solid #e8e8e8}:host .formula-editor .editor-box .editor-title{display:flex;justify-content:space-between}:host .formula-editor .editor-box .edit-box{display:flex;flex-direction:column;height:400px;border:1px solid #ccc;border-radius:2px}:host .formula-editor .editor-box .edit-box .edit-operation-box{display:flex;gap:10px;align-items:center;height:32px;padding:0 10px;border-bottom:1px solid #ccc}:host .formula-editor .editor-box .edit-box .edit-operation-box .edit-operation-item{width:16px;height:16px;color:#687488;font-size:16px;line-height:16px;cursor:pointer;-webkit-user-select:none;user-select:none}:host .formula-editor .editor-box .edit-box .edit-operation-box .edit-operation-item .operator-icon{pointer-events:none}:host .formula-editor .editor-box .edit-box .edit-operation-box .edit-operation-item:hover .operator-icon{fill:#2e87ff}:host .formula-editor .editor-box .edit-box .edit-description-box{display:flex;flex-direction:column;padding:10px 10px 0;border-top:1px solid #ccc}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-head{display:flex;justify-content:space-between}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-text{max-height:128px;overflow:hidden auto;color:#333;font-size:13px;white-space:pre-wrap}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-title{color:#333;font-weight:700;font-size:14px}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-icon{font-size:14px;cursor:pointer}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-icon:hover{color:#2e87ff}:host .formula-editor .editor-box .edit-box .editor{flex:1;min-height:0;padding:12px 10px;overflow:auto;font-size:13px}:host .formula-editor .metric-box{padding:12px}:host .formula-editor .metric-box .metric-list{display:flex;flex-direction:column;gap:4px;height:360px;margin-top:12px;overflow-y:auto}:host .formula-editor .metric-box .metric-list-item{display:flex;align-items:center;height:32px;min-height:32px;padding:0 12px;border:1px solid #ccc;border-radius:2px;cursor:pointer}:host .formula-editor .metric-box .metric-list-item:hover{background:#2e87ff1a;border:1px solid #2e87ff;border-radius:2px}:host .formula-editor .metric-box .metric-list-item .metric-img{width:24px;height:24px;margin-right:8px}:host .formula-editor .metric-box .metric-list-item .metric-icon{margin-right:4px;font-size:16px}:host .formula-editor .metric-box .metric-list-item .metric-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .formula-editor .field-box{padding:12px}:host .formula-editor .field-box .field-list{display:flex;flex-direction:column;gap:4px;height:360px;margin-top:12px;overflow-y:auto}:host .formula-editor .field-box .field-list-item{display:flex;flex-direction:row;align-items:center;height:32px;min-height:32px;padding:0 10px;border:1px solid #ccc;border-radius:2px;cursor:pointer}:host .formula-editor .field-box .field-list-item:hover{background:#2e87ff1a;border:1px solid #2e87ff;border-radius:2px}:host .formula-editor .field-box .field-list-item .field-img{width:24px;height:24px;margin-right:4px}:host .formula-editor .field-box .field-list-item .field-icon{margin-right:4px;font-size:16px}:host .formula-editor .field-box .field-list-item .field-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .formula-editor .function-box{padding:12px;border-left:1px solid #e8e8e8}:host .formula-editor .function-box .function-tree{height:360px;margin-top:8px;overflow-y:auto}:host .formula-editor .function-box .function-tree .custom-node{display:flex;align-items:center}:host .formula-editor .label-title{margin-bottom:12px;color:#333;font-weight:400;font-size:14px}:host .formula-editor .label-require:after{margin-left:4px;color:#f5222d;content:\"*\"}\n"], dependencies: [{ kind: "directive", type: NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i2.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i2.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i2.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i4.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i6.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckBoxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i7.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i8.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i9.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "pipe", type: NzHighlightPipe, name: "nzHighlight" }] }); }
|
|
847
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormulaEditorComponent, isStandalone: true, selector: "app-formula-editor", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, defaultText: { classPropertyName: "defaultText", publicName: "defaultText", isSignal: true, isRequired: false, transformFunction: null }, checkFormatMethod: { classPropertyName: "checkFormatMethod", publicName: "checkFormatMethod", isSignal: true, isRequired: false, transformFunction: null }, functionListType: { classPropertyName: "functionListType", publicName: "functionListType", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [FormulaEditorService], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div nz-row class=\"formula-editor\">\n <div nz-col nzSpan=\"10\" class=\"editor-box\">\n <div class=\"editor-title\">\n <div class=\"label-title label-require\">{{ defaultText().inputTitle || _defaultText.inputTitle }}</div>\n <button nz-button nzType=\"link\" nzSize=\"small\" [nzLoading]=\"checkLoading\" (click)=\"checkFormat()\">{{\n defaultText().checkFormatTitle || _defaultText.checkFormatTitle\n }}</button>\n </div>\n <div class=\"edit-box\">\n <div class=\"edit-operation-box\">\n @for (item of _operatorList; track item) {\n <div class=\"edit-operation-item\" (click)=\"insertOperator(item.name)\">\n <span class=\"operator-icon\" [innerHTML]=\"getOperatorIcon(item.type)\"></span>\n </div>\n }\n </div>\n <div #editor class=\"editor\"></div>\n @if (editDescShow !== 'none') {\n <div class=\"edit-description-box\">\n <div class=\"edit-description-head\" [style]=\"{ marginBottom: !showDescription ? '10px' : '0' }\">\n <span class=\"edit-description-title\">{{ editDescShow === 'func' ? '\u51FD\u6570\u91CA\u4E49' : '\u6821\u9A8C\u9519\u8BEF\u4FE1\u606F' }}</span>\n <span\n class=\"edit-description-icon\"\n nz-icon\n [nzType]=\"showDescription ? 'down' : 'up'\"\n nzTheme=\"outline\"\n (click)=\"toggleDescription()\"\n ></span>\n </div>\n @if (showDescription) {\n <div class=\"edit-description-text\"> {{ editDescription }} </div>\n }\n </div>\n }\n </div>\n </div>\n @switch (itemType()) {\n @case (_itemType.Field) {\n <div nz-col nzSpan=\"7\" class=\"field-box\">\n <div class=\"label-title\"\n >{{ defaultText().fieldTitle || _defaultText.fieldTitle }}\n @if (fieldDescription()) {\n <span nz-icon nzType=\"question-circle\" nzTheme=\"outline\" nz-tooltip [nzTooltipTitle]=\"fieldDescription()\"></span>\n }\n </div>\n <nz-input-group [nzSuffix]=\"suffixIconSearch\">\n <input\n type=\"text\"\n nz-input\n [placeholder]=\"defaultText().searchFieldPlaceholder || _defaultText.searchFieldPlaceholder\"\n [(ngModel)]=\"searchField\"\n />\n </nz-input-group>\n <ng-template #suffixIconSearch>\n <i nz-icon nzType=\"search\"></i>\n </ng-template>\n <div class=\"field-list\">\n @for (item of fieldList; track item) {\n <div (click)=\"insertField(item)\" [class]=\"item.className ? 'item-field-' + item.className : ''\" class=\"field-list-item\">\n @if (item.image) {\n <img class=\"field-img\" [src]=\"item.image\" />\n }\n @if (item.icon) {\n <span class=\"field-icon\" nz-icon [nzIconfont]=\"item.icon\"></span>\n }\n <span class=\"field-name\" [innerHTML]=\"item.name | nzHighlight: searchField() : 'i' : 'node-highlight'\"></span>\n @if (item.description) {\n <span\n class=\"desc-icon\"\n nz-icon\n nzType=\"question-circle\"\n nzTheme=\"outline\"\n nz-tooltip\n [nzTooltipTitle]=\"item.description\"\n ></span>\n }\n </div>\n }\n </div>\n </div>\n }\n @case (_itemType.Template) {\n <div nz-col nzSpan=\"7\" class=\"field-box\">\n <ng-container *ngTemplateOutlet=\"itemTemplate()\"></ng-container>\n </div>\n }\n }\n <div nz-col nzSpan=\"7\" class=\"function-box\">\n <div class=\"label-title\">{{ defaultText().functionTitle || _defaultText.functionTitle }}</div>\n <nz-input-group [nzSuffix]=\"suffixIconSearch\">\n <input\n type=\"text\"\n nz-input\n [placeholder]=\"defaultText().searchFunctionPlaceholder || _defaultText.searchFunctionPlaceholder\"\n [(ngModel)]=\"searchFunction\"\n />\n </nz-input-group>\n <ng-template #suffixIconSearch>\n <i nz-icon nzType=\"search\"></i>\n </ng-template>\n <nz-tree\n class=\"function-tree\"\n [nzHideUnMatched]=\"true\"\n [nzSearchValue]=\"searchFunction()\"\n [nzTreeTemplate]=\"nzTreeTemplate\"\n [nzData]=\"funcNode()\"\n [nzShowExpand]=\"functionListType() === _funcListType.Tree\"\n (nzClick)=\"functionClick($event)\"\n ></nz-tree>\n <ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n <span class=\"custom-node\" [innerHTML]=\"origin.name | nzHighlight: searchFunction() : 'i' : 'node-highlight'\">\n @if (origin.description) {\n <span\n class=\"desc-icon\"\n nz-icon\n nzType=\"question-circle\"\n nzTheme=\"outline\"\n nz-tooltip\n [nzTooltipTitle]=\"origin.description\"\n ></span>\n }\n </span>\n </ng-template>\n </div>\n</div>\n", styles: [":host ::ng-deep .ant-tree-node-content-wrapper{width:100%}:host ::ng-deep .ant-input-affix-wrapper{padding:0 11px;height:32px}:host ::ng-deep .ProseMirror-focused{outline:none}:host ::ng-deep .node-highlight{color:#ff4d4f!important}:host .total-box{width:1000px;padding:8px;background-color:#fff}:host .ant-input-affix-wrapper{width:100%}:host .desc-icon{margin-left:auto}:host .formula-editor .editor-box{padding:12px;border-right:1px solid #e8e8e8}:host .formula-editor .editor-box .editor-title{display:flex;justify-content:space-between}:host .formula-editor .editor-box .edit-box{display:flex;flex-direction:column;height:400px;border:1px solid #ccc;border-radius:2px}:host .formula-editor .editor-box .edit-box .edit-operation-box{display:flex;gap:10px;align-items:center;height:32px;padding:0 10px;border-bottom:1px solid #ccc}:host .formula-editor .editor-box .edit-box .edit-operation-box .edit-operation-item{width:16px;height:16px;color:#687488;font-size:16px;line-height:16px;cursor:pointer;-webkit-user-select:none;user-select:none}:host .formula-editor .editor-box .edit-box .edit-operation-box .edit-operation-item .operator-icon{pointer-events:none}:host .formula-editor .editor-box .edit-box .edit-operation-box .edit-operation-item:hover .operator-icon{fill:#2e87ff}:host .formula-editor .editor-box .edit-box .edit-description-box{display:flex;flex-direction:column;padding:10px 10px 0;border-top:1px solid #ccc}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-head{display:flex;justify-content:space-between}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-text{max-height:128px;overflow:hidden auto;color:#333;font-size:13px;white-space:pre-wrap}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-title{color:#333;font-weight:700;font-size:14px}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-icon{font-size:14px;cursor:pointer}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-icon:hover{color:#2e87ff}:host .formula-editor .editor-box .edit-box .editor{flex:1;min-height:0;padding:12px 10px;overflow:auto;font-size:13px}:host .formula-editor .metric-box{padding:12px}:host .formula-editor .metric-box .metric-list{display:flex;flex-direction:column;gap:4px;height:360px;margin-top:12px;overflow-y:auto}:host .formula-editor .metric-box .metric-list-item{display:flex;align-items:center;height:32px;min-height:32px;padding:0 12px;border:1px solid #ccc;border-radius:2px;cursor:pointer}:host .formula-editor .metric-box .metric-list-item:hover{background:#2e87ff1a;border:1px solid #2e87ff;border-radius:2px}:host .formula-editor .metric-box .metric-list-item .metric-img{width:24px;height:24px;margin-right:8px}:host .formula-editor .metric-box .metric-list-item .metric-icon{margin-right:4px;font-size:16px}:host .formula-editor .metric-box .metric-list-item .metric-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .formula-editor .field-box{padding:12px}:host .formula-editor .field-box .field-list{display:flex;flex-direction:column;gap:4px;height:360px;margin-top:12px;overflow-y:auto}:host .formula-editor .field-box .field-list-item{display:flex;flex-direction:row;align-items:center;height:32px;min-height:32px;padding:0 10px;border:1px solid #ccc;border-radius:2px;cursor:pointer}:host .formula-editor .field-box .field-list-item:hover{background:#2e87ff1a;border:1px solid #2e87ff;border-radius:2px}:host .formula-editor .field-box .field-list-item .field-img{width:24px;height:24px;margin-right:4px}:host .formula-editor .field-box .field-list-item .field-icon{margin-right:4px;font-size:16px}:host .formula-editor .field-box .field-list-item .field-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .formula-editor .function-box{padding:12px;border-left:1px solid #e8e8e8}:host .formula-editor .function-box .function-tree{height:360px;margin-top:8px;overflow-y:auto}:host .formula-editor .function-box .function-tree .custom-node{display:flex;align-items:center}:host .formula-editor .label-title{margin-bottom:12px;color:#333;font-weight:400;font-size:14px}:host .formula-editor .label-require:after{margin-left:4px;color:#f5222d;content:\"*\"}\n"], dependencies: [{ kind: "directive", type: NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i2.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i2.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i2.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i4.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i6.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckBoxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i7.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i8.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i9.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "pipe", type: NzHighlightPipe, name: "nzHighlight" }] }); }
|
|
674
848
|
}
|
|
675
849
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormulaEditorComponent, decorators: [{
|
|
676
850
|
type: Component,
|
|
@@ -685,7 +859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
685
859
|
NzButtonModule,
|
|
686
860
|
NzToolTipModule,
|
|
687
861
|
NzHighlightPipe
|
|
688
|
-
], template: "<div nz-row class=\"formula-editor\">\n <div nz-col nzSpan=\"10\" class=\"editor-box\">\n <div class=\"editor-title\">\n <div class=\"label-title label-require\"
|
|
862
|
+
], providers: [FormulaEditorService], template: "<div nz-row class=\"formula-editor\">\n <div nz-col nzSpan=\"10\" class=\"editor-box\">\n <div class=\"editor-title\">\n <div class=\"label-title label-require\">{{ defaultText().inputTitle || _defaultText.inputTitle }}</div>\n <button nz-button nzType=\"link\" nzSize=\"small\" [nzLoading]=\"checkLoading\" (click)=\"checkFormat()\">{{\n defaultText().checkFormatTitle || _defaultText.checkFormatTitle\n }}</button>\n </div>\n <div class=\"edit-box\">\n <div class=\"edit-operation-box\">\n @for (item of _operatorList; track item) {\n <div class=\"edit-operation-item\" (click)=\"insertOperator(item.name)\">\n <span class=\"operator-icon\" [innerHTML]=\"getOperatorIcon(item.type)\"></span>\n </div>\n }\n </div>\n <div #editor class=\"editor\"></div>\n @if (editDescShow !== 'none') {\n <div class=\"edit-description-box\">\n <div class=\"edit-description-head\" [style]=\"{ marginBottom: !showDescription ? '10px' : '0' }\">\n <span class=\"edit-description-title\">{{ editDescShow === 'func' ? '\u51FD\u6570\u91CA\u4E49' : '\u6821\u9A8C\u9519\u8BEF\u4FE1\u606F' }}</span>\n <span\n class=\"edit-description-icon\"\n nz-icon\n [nzType]=\"showDescription ? 'down' : 'up'\"\n nzTheme=\"outline\"\n (click)=\"toggleDescription()\"\n ></span>\n </div>\n @if (showDescription) {\n <div class=\"edit-description-text\"> {{ editDescription }} </div>\n }\n </div>\n }\n </div>\n </div>\n @switch (itemType()) {\n @case (_itemType.Field) {\n <div nz-col nzSpan=\"7\" class=\"field-box\">\n <div class=\"label-title\"\n >{{ defaultText().fieldTitle || _defaultText.fieldTitle }}\n @if (fieldDescription()) {\n <span nz-icon nzType=\"question-circle\" nzTheme=\"outline\" nz-tooltip [nzTooltipTitle]=\"fieldDescription()\"></span>\n }\n </div>\n <nz-input-group [nzSuffix]=\"suffixIconSearch\">\n <input\n type=\"text\"\n nz-input\n [placeholder]=\"defaultText().searchFieldPlaceholder || _defaultText.searchFieldPlaceholder\"\n [(ngModel)]=\"searchField\"\n />\n </nz-input-group>\n <ng-template #suffixIconSearch>\n <i nz-icon nzType=\"search\"></i>\n </ng-template>\n <div class=\"field-list\">\n @for (item of fieldList; track item) {\n <div (click)=\"insertField(item)\" [class]=\"item.className ? 'item-field-' + item.className : ''\" class=\"field-list-item\">\n @if (item.image) {\n <img class=\"field-img\" [src]=\"item.image\" />\n }\n @if (item.icon) {\n <span class=\"field-icon\" nz-icon [nzIconfont]=\"item.icon\"></span>\n }\n <span class=\"field-name\" [innerHTML]=\"item.name | nzHighlight: searchField() : 'i' : 'node-highlight'\"></span>\n @if (item.description) {\n <span\n class=\"desc-icon\"\n nz-icon\n nzType=\"question-circle\"\n nzTheme=\"outline\"\n nz-tooltip\n [nzTooltipTitle]=\"item.description\"\n ></span>\n }\n </div>\n }\n </div>\n </div>\n }\n @case (_itemType.Template) {\n <div nz-col nzSpan=\"7\" class=\"field-box\">\n <ng-container *ngTemplateOutlet=\"itemTemplate()\"></ng-container>\n </div>\n }\n }\n <div nz-col nzSpan=\"7\" class=\"function-box\">\n <div class=\"label-title\">{{ defaultText().functionTitle || _defaultText.functionTitle }}</div>\n <nz-input-group [nzSuffix]=\"suffixIconSearch\">\n <input\n type=\"text\"\n nz-input\n [placeholder]=\"defaultText().searchFunctionPlaceholder || _defaultText.searchFunctionPlaceholder\"\n [(ngModel)]=\"searchFunction\"\n />\n </nz-input-group>\n <ng-template #suffixIconSearch>\n <i nz-icon nzType=\"search\"></i>\n </ng-template>\n <nz-tree\n class=\"function-tree\"\n [nzHideUnMatched]=\"true\"\n [nzSearchValue]=\"searchFunction()\"\n [nzTreeTemplate]=\"nzTreeTemplate\"\n [nzData]=\"funcNode()\"\n [nzShowExpand]=\"functionListType() === _funcListType.Tree\"\n (nzClick)=\"functionClick($event)\"\n ></nz-tree>\n <ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n <span class=\"custom-node\" [innerHTML]=\"origin.name | nzHighlight: searchFunction() : 'i' : 'node-highlight'\">\n @if (origin.description) {\n <span\n class=\"desc-icon\"\n nz-icon\n nzType=\"question-circle\"\n nzTheme=\"outline\"\n nz-tooltip\n [nzTooltipTitle]=\"origin.description\"\n ></span>\n }\n </span>\n </ng-template>\n </div>\n</div>\n", styles: [":host ::ng-deep .ant-tree-node-content-wrapper{width:100%}:host ::ng-deep .ant-input-affix-wrapper{padding:0 11px;height:32px}:host ::ng-deep .ProseMirror-focused{outline:none}:host ::ng-deep .node-highlight{color:#ff4d4f!important}:host .total-box{width:1000px;padding:8px;background-color:#fff}:host .ant-input-affix-wrapper{width:100%}:host .desc-icon{margin-left:auto}:host .formula-editor .editor-box{padding:12px;border-right:1px solid #e8e8e8}:host .formula-editor .editor-box .editor-title{display:flex;justify-content:space-between}:host .formula-editor .editor-box .edit-box{display:flex;flex-direction:column;height:400px;border:1px solid #ccc;border-radius:2px}:host .formula-editor .editor-box .edit-box .edit-operation-box{display:flex;gap:10px;align-items:center;height:32px;padding:0 10px;border-bottom:1px solid #ccc}:host .formula-editor .editor-box .edit-box .edit-operation-box .edit-operation-item{width:16px;height:16px;color:#687488;font-size:16px;line-height:16px;cursor:pointer;-webkit-user-select:none;user-select:none}:host .formula-editor .editor-box .edit-box .edit-operation-box .edit-operation-item .operator-icon{pointer-events:none}:host .formula-editor .editor-box .edit-box .edit-operation-box .edit-operation-item:hover .operator-icon{fill:#2e87ff}:host .formula-editor .editor-box .edit-box .edit-description-box{display:flex;flex-direction:column;padding:10px 10px 0;border-top:1px solid #ccc}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-head{display:flex;justify-content:space-between}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-text{max-height:128px;overflow:hidden auto;color:#333;font-size:13px;white-space:pre-wrap}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-title{color:#333;font-weight:700;font-size:14px}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-icon{font-size:14px;cursor:pointer}:host .formula-editor .editor-box .edit-box .edit-description-box .edit-description-icon:hover{color:#2e87ff}:host .formula-editor .editor-box .edit-box .editor{flex:1;min-height:0;padding:12px 10px;overflow:auto;font-size:13px}:host .formula-editor .metric-box{padding:12px}:host .formula-editor .metric-box .metric-list{display:flex;flex-direction:column;gap:4px;height:360px;margin-top:12px;overflow-y:auto}:host .formula-editor .metric-box .metric-list-item{display:flex;align-items:center;height:32px;min-height:32px;padding:0 12px;border:1px solid #ccc;border-radius:2px;cursor:pointer}:host .formula-editor .metric-box .metric-list-item:hover{background:#2e87ff1a;border:1px solid #2e87ff;border-radius:2px}:host .formula-editor .metric-box .metric-list-item .metric-img{width:24px;height:24px;margin-right:8px}:host .formula-editor .metric-box .metric-list-item .metric-icon{margin-right:4px;font-size:16px}:host .formula-editor .metric-box .metric-list-item .metric-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .formula-editor .field-box{padding:12px}:host .formula-editor .field-box .field-list{display:flex;flex-direction:column;gap:4px;height:360px;margin-top:12px;overflow-y:auto}:host .formula-editor .field-box .field-list-item{display:flex;flex-direction:row;align-items:center;height:32px;min-height:32px;padding:0 10px;border:1px solid #ccc;border-radius:2px;cursor:pointer}:host .formula-editor .field-box .field-list-item:hover{background:#2e87ff1a;border:1px solid #2e87ff;border-radius:2px}:host .formula-editor .field-box .field-list-item .field-img{width:24px;height:24px;margin-right:4px}:host .formula-editor .field-box .field-list-item .field-icon{margin-right:4px;font-size:16px}:host .formula-editor .field-box .field-list-item .field-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .formula-editor .function-box{padding:12px;border-left:1px solid #e8e8e8}:host .formula-editor .function-box .function-tree{height:360px;margin-top:8px;overflow-y:auto}:host .formula-editor .function-box .function-tree .custom-node{display:flex;align-items:center}:host .formula-editor .label-title{margin-bottom:12px;color:#333;font-weight:400;font-size:14px}:host .formula-editor .label-require:after{margin-left:4px;color:#f5222d;content:\"*\"}\n"] }]
|
|
689
863
|
}], ctorParameters: () => [], propDecorators: { editor: [{
|
|
690
864
|
type: ViewChild,
|
|
691
865
|
args: ['editor']
|
|
@@ -695,5 +869,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
695
869
|
* Generated bundle index. Do not edit.
|
|
696
870
|
*/
|
|
697
871
|
|
|
698
|
-
export { CheckFormatMethod, FormulaEditorComponent, FormulaEditorRequestService, FormulaEditorRequestServiceToken, FormulaEditorService, FuncListType, ICONS, ItemType, OPERATOR_LIST };
|
|
872
|
+
export { CheckFormatMethod, DEFAULT_TEXT, FormulaEditorComponent, FormulaEditorRequestService, FormulaEditorRequestServiceToken, FormulaEditorService, FuncListType, ICONS, ItemType, OPERATOR_LIST };
|
|
699
873
|
//# sourceMappingURL=formula-editor.mjs.map
|