myrta-ui 1.1.27 → 1.1.29
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/esm2020/lib/components/form/formula-editor/enums/formula-editor-size.enum.mjs +7 -0
- package/esm2020/lib/components/form/formula-editor/formula-editor.component.mjs +52 -50
- package/esm2020/lib/components/form/formula-editor/helpers/create-tags.helper.mjs +5 -5
- package/esm2020/lib/services/mrx-form-validator/validations/callback.validation.mjs +2 -2
- package/esm2020/lib/services/mrx-form-validator/validations/email.validation.mjs +1 -1
- package/esm2020/lib/services/mrx-form-validator/validations/max-length.validation.mjs +1 -1
- package/esm2020/lib/services/mrx-form-validator/validations/min-length.validation.mjs +2 -2
- package/esm2020/lib/services/mrx-form-validator/validations/pattern.validation.mjs +1 -1
- package/esm2020/lib/services/mrx-form-validator/validations/required.validation.mjs +1 -4
- package/fesm2015/myrta-ui.mjs +61 -56
- package/fesm2015/myrta-ui.mjs.map +1 -1
- package/fesm2020/myrta-ui.mjs +61 -56
- package/fesm2020/myrta-ui.mjs.map +1 -1
- package/lib/components/form/formula-editor/enums/formula-editor-size.enum.d.ts +6 -0
- package/lib/components/form/formula-editor/formula-editor.component.d.ts +14 -7
- package/lib/services/mrx-form-validator/validations/callback.validation.d.ts +1 -2
- package/lib/services/mrx-form-validator/validations/email.validation.d.ts +1 -2
- package/lib/services/mrx-form-validator/validations/max-length.validation.d.ts +1 -2
- package/lib/services/mrx-form-validator/validations/min-length.validation.d.ts +1 -2
- package/lib/services/mrx-form-validator/validations/pattern.validation.d.ts +1 -2
- package/lib/services/mrx-form-validator/validations/required.validation.d.ts +1 -2
- package/package.json +1 -1
package/fesm2020/myrta-ui.mjs
CHANGED
|
@@ -4256,9 +4256,6 @@ const getErrorMessageHelper = (key, invalidMessages, messages, params) => {
|
|
|
4256
4256
|
|
|
4257
4257
|
const requiredValidation = (value, validations, key, invalidMessages) => {
|
|
4258
4258
|
const result = { isValid: true, message: null };
|
|
4259
|
-
console.log(validations);
|
|
4260
|
-
console.log(key);
|
|
4261
|
-
console.log();
|
|
4262
4259
|
if (Array.isArray(value) && validations.type !== 'single' && validations[key]) {
|
|
4263
4260
|
value.forEach((field, idx) => {
|
|
4264
4261
|
if ((field === '' || field === null || field === undefined)) {
|
|
@@ -17316,16 +17313,16 @@ const ErrorMessagesEnum = {
|
|
|
17316
17313
|
|
|
17317
17314
|
//
|
|
17318
17315
|
const createTag = (content) => {
|
|
17319
|
-
return `<div class="tag" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17316
|
+
return `<div class="tag argument -medium" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17320
17317
|
};
|
|
17321
17318
|
const createOperator = (content) => {
|
|
17322
|
-
return `<div class="operator" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17319
|
+
return `<div class="tag operator -large" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17323
17320
|
};
|
|
17324
17321
|
const createNumber = (content) => {
|
|
17325
|
-
return `<div class="number" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17322
|
+
return `<div class="tag number -medium" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17326
17323
|
};
|
|
17327
17324
|
const createBracket = (content) => {
|
|
17328
|
-
return `<div class="bracket" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17325
|
+
return `<div class="tag bracket -medium" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17329
17326
|
};
|
|
17330
17327
|
const createTagOutside = (content) => {
|
|
17331
17328
|
return `{${content}}`;
|
|
@@ -17410,6 +17407,13 @@ const checkDividerErrors = (array, list) => {
|
|
|
17410
17407
|
};
|
|
17411
17408
|
};
|
|
17412
17409
|
|
|
17410
|
+
var FormulaEditorSizesEnum;
|
|
17411
|
+
(function (FormulaEditorSizesEnum) {
|
|
17412
|
+
FormulaEditorSizesEnum["small"] = "mrx-formula-editor-sm";
|
|
17413
|
+
FormulaEditorSizesEnum["medium"] = "mrx-formula-editor-md";
|
|
17414
|
+
FormulaEditorSizesEnum["large"] = "mrx-formula-editor-lg";
|
|
17415
|
+
})(FormulaEditorSizesEnum || (FormulaEditorSizesEnum = {}));
|
|
17416
|
+
|
|
17413
17417
|
class FormulaEditorComponent {
|
|
17414
17418
|
constructor(document, _detector, eRef) {
|
|
17415
17419
|
this.document = document;
|
|
@@ -17423,8 +17427,13 @@ class FormulaEditorComponent {
|
|
|
17423
17427
|
endOffset: 0
|
|
17424
17428
|
};
|
|
17425
17429
|
this.searchText = '';
|
|
17426
|
-
this.
|
|
17427
|
-
this.
|
|
17430
|
+
this._operatorList = ['+', '-', '*', '/'];
|
|
17431
|
+
this._bracketList = ['(', ')'];
|
|
17432
|
+
this._itemList = [];
|
|
17433
|
+
this._modifiedItemList = {
|
|
17434
|
+
items: {},
|
|
17435
|
+
regExp: new RegExp(''),
|
|
17436
|
+
};
|
|
17428
17437
|
this.value = '';
|
|
17429
17438
|
this.visibleValue = '';
|
|
17430
17439
|
this.isFocused = false;
|
|
@@ -17435,12 +17444,11 @@ class FormulaEditorComponent {
|
|
|
17435
17444
|
// SAVE STATE
|
|
17436
17445
|
this.uuid = v4();
|
|
17437
17446
|
this.fields = [];
|
|
17438
|
-
// TODO items
|
|
17439
|
-
this.items = [];
|
|
17440
17447
|
this.disabled = false;
|
|
17441
17448
|
this.readonly = false;
|
|
17442
17449
|
this.placeholder = '';
|
|
17443
17450
|
this.customClasses = '';
|
|
17451
|
+
this.size = 'large';
|
|
17444
17452
|
// VALIDATE
|
|
17445
17453
|
this.invalid = false;
|
|
17446
17454
|
this.invalidMessage = '';
|
|
@@ -17453,11 +17461,17 @@ class FormulaEditorComponent {
|
|
|
17453
17461
|
this.onTouched = () => {
|
|
17454
17462
|
};
|
|
17455
17463
|
}
|
|
17464
|
+
set items(items) {
|
|
17465
|
+
const itemsMap = Object.fromEntries(items.map(obj => [obj.label, obj.sysName]));
|
|
17466
|
+
this._itemList = items;
|
|
17467
|
+
this._modifiedItemList.items = itemsMap;
|
|
17468
|
+
this._modifiedItemList.regExp = new RegExp(items.map(s => s.label).join('|'), 'g');
|
|
17469
|
+
}
|
|
17456
17470
|
get getErrorMessage() {
|
|
17457
17471
|
return this.invalidMessage || ErrorMessagesEnum[this.errorModel.errorType];
|
|
17458
17472
|
}
|
|
17459
17473
|
get filteredList() {
|
|
17460
|
-
return this.
|
|
17474
|
+
return this._itemList.filter(item => item.label.includes(this.searchText));
|
|
17461
17475
|
}
|
|
17462
17476
|
get getInvalid() {
|
|
17463
17477
|
return this.errorModel.isError || this.invalid;
|
|
@@ -17469,14 +17483,20 @@ class FormulaEditorComponent {
|
|
|
17469
17483
|
return this.checkInvalid === false ? 'mrx-input-checked-success' : this.checkInvalid === true ? 'mrx-input-checked-error' : '';
|
|
17470
17484
|
}
|
|
17471
17485
|
get getClasses() {
|
|
17472
|
-
return `${this.customClasses} ${this.readonlyClass} ${this.checkValidClasses}`;
|
|
17486
|
+
return `${FormulaEditorSizesEnum[this.size]} ${this.customClasses} ${this.readonlyClass} ${this.checkValidClasses}`;
|
|
17487
|
+
}
|
|
17488
|
+
get getIconClass() {
|
|
17489
|
+
return `${this.size !== 'large' ? 'icon-font-16' : 'icon-font-24'}`;
|
|
17490
|
+
}
|
|
17491
|
+
get canClean() {
|
|
17492
|
+
return !!this.visibleValue.trim();
|
|
17473
17493
|
}
|
|
17474
17494
|
get _inputValue() {
|
|
17475
17495
|
return this.inputElement.nativeElement.textContent || '';
|
|
17476
17496
|
}
|
|
17477
17497
|
writeValue(outsideValue) {
|
|
17478
17498
|
if (outsideValue !== null) {
|
|
17479
|
-
const {
|
|
17499
|
+
const { visibleValue } = this._transformValue(this._modifiedValue(outsideValue));
|
|
17480
17500
|
this.value = outsideValue;
|
|
17481
17501
|
this.visibleValue = visibleValue;
|
|
17482
17502
|
this._detector.detectChanges();
|
|
@@ -17488,14 +17508,23 @@ class FormulaEditorComponent {
|
|
|
17488
17508
|
this.searchText = searchText;
|
|
17489
17509
|
this._storeCursorPosition();
|
|
17490
17510
|
}
|
|
17491
|
-
onBlur(event) {
|
|
17492
|
-
this._storeCursorPosition();
|
|
17493
|
-
this.blurred.emit({ value: this.value, id: this.uuid });
|
|
17494
|
-
}
|
|
17495
17511
|
onFocus(event) {
|
|
17496
17512
|
this.isFocused = true;
|
|
17497
17513
|
this._detector.markForCheck();
|
|
17498
17514
|
}
|
|
17515
|
+
onClear() {
|
|
17516
|
+
this.updateValue('');
|
|
17517
|
+
this.updateVisibleValue('');
|
|
17518
|
+
}
|
|
17519
|
+
onBlur(event) {
|
|
17520
|
+
this._storeCursorPosition();
|
|
17521
|
+
}
|
|
17522
|
+
onKeyup(event) {
|
|
17523
|
+
event.preventDefault();
|
|
17524
|
+
this.inputElement.nativeElement.blur();
|
|
17525
|
+
this.isFocused = false;
|
|
17526
|
+
this._detector.detectChanges();
|
|
17527
|
+
}
|
|
17499
17528
|
insertTag(whiteListItem) {
|
|
17500
17529
|
this._restoreCursorPosition(this.inputElement.nativeElement);
|
|
17501
17530
|
this._insertPositionText(`{${whiteListItem.sysName}}`);
|
|
@@ -17520,10 +17549,7 @@ class FormulaEditorComponent {
|
|
|
17520
17549
|
this.onTouched();
|
|
17521
17550
|
}
|
|
17522
17551
|
_modifiedValue(value) {
|
|
17523
|
-
|
|
17524
|
-
const str = this.items.map(s => s.label);
|
|
17525
|
-
const reg = new RegExp(str.join('|'), 'g');
|
|
17526
|
-
return value.replace(reg, match => `{${labelsMap[match]}}`);
|
|
17552
|
+
return value.replace(this._modifiedItemList.regExp, match => `{${this._modifiedItemList.items[match]}}`);
|
|
17527
17553
|
}
|
|
17528
17554
|
_transformValue(content, analise = false) {
|
|
17529
17555
|
const valueArray = content.split(/[\s\u00A0]+/).filter(Boolean);
|
|
@@ -17533,16 +17559,16 @@ class FormulaEditorComponent {
|
|
|
17533
17559
|
let searchText = '';
|
|
17534
17560
|
valueArray.forEach((item) => {
|
|
17535
17561
|
const clearedItem = item.trim();
|
|
17536
|
-
const findItem = this.
|
|
17562
|
+
const findItem = this._itemList.find(v => clearedItem.includes(v.sysName));
|
|
17537
17563
|
if (findItem) {
|
|
17538
17564
|
visibleValueArray.push(createTag(findItem.label));
|
|
17539
17565
|
originalValueArray.push(createTagOutside(findItem.sysName));
|
|
17540
17566
|
}
|
|
17541
|
-
else if (this.
|
|
17567
|
+
else if (this._bracketList.find(v => v === clearedItem)) {
|
|
17542
17568
|
visibleValueArray.push(createBracket(clearedItem));
|
|
17543
17569
|
originalValueArray.push(clearedItem);
|
|
17544
17570
|
}
|
|
17545
|
-
else if (this.
|
|
17571
|
+
else if (this._operatorList.find(v => v === clearedItem)) {
|
|
17546
17572
|
visibleValueArray.push(createOperator(clearedItem));
|
|
17547
17573
|
originalValueArray.push(clearedItem);
|
|
17548
17574
|
}
|
|
@@ -17560,8 +17586,6 @@ class FormulaEditorComponent {
|
|
|
17560
17586
|
if (analise) {
|
|
17561
17587
|
this._checkErrors(originalValueArray, isInterpretationError);
|
|
17562
17588
|
}
|
|
17563
|
-
console.log(visibleValueArray);
|
|
17564
|
-
console.log(originalValueArray);
|
|
17565
17589
|
return {
|
|
17566
17590
|
value: originalValueArray.join(' '),
|
|
17567
17591
|
visibleValue: visibleValueArray.join(' '),
|
|
@@ -17571,8 +17595,8 @@ class FormulaEditorComponent {
|
|
|
17571
17595
|
_checkErrors(valueArray, isInterpretationError) {
|
|
17572
17596
|
this._disableError();
|
|
17573
17597
|
this._toggleError(checkBracketErrors(valueArray));
|
|
17574
|
-
this._toggleError(checkDividerErrors(valueArray, this.
|
|
17575
|
-
this._toggleError(checkSequenceErrors(valueArray, this.
|
|
17598
|
+
this._toggleError(checkDividerErrors(valueArray, this._itemList));
|
|
17599
|
+
this._toggleError(checkSequenceErrors(valueArray, this._operatorList, this._bracketList));
|
|
17576
17600
|
this._toggleError(checkInterpretationErrors(isInterpretationError));
|
|
17577
17601
|
}
|
|
17578
17602
|
_toggleError(errorModel) {
|
|
@@ -17619,12 +17643,6 @@ class FormulaEditorComponent {
|
|
|
17619
17643
|
this._range.setStart(this._cursorPosition.startContainer, this._cursorPosition.startOffset);
|
|
17620
17644
|
this._range.setEnd(this._cursorPosition.endContainer, this._cursorPosition.endOffset);
|
|
17621
17645
|
}
|
|
17622
|
-
this._selection = document.getSelection();
|
|
17623
|
-
if (this._selection) {
|
|
17624
|
-
// this._selection.removeAllRanges();
|
|
17625
|
-
// this._selection.addRange(this._range);
|
|
17626
|
-
// element.focus();
|
|
17627
|
-
}
|
|
17628
17646
|
}
|
|
17629
17647
|
_placeCaretAtEnd() {
|
|
17630
17648
|
setTimeout(() => {
|
|
@@ -17640,27 +17658,12 @@ class FormulaEditorComponent {
|
|
|
17640
17658
|
});
|
|
17641
17659
|
}
|
|
17642
17660
|
clickOut(event) {
|
|
17643
|
-
// console.dir(event);
|
|
17644
|
-
// console.log(this._modifiedValue(this._inputValue));
|
|
17645
17661
|
if (!this.eRef.nativeElement.contains(event.target)) {
|
|
17646
|
-
const {
|
|
17647
|
-
//
|
|
17648
|
-
// this.updateValue(value);
|
|
17662
|
+
const { visibleValue } = this._transformValue(this._modifiedValue(this._inputValue), true);
|
|
17649
17663
|
this.updateVisibleValue(visibleValue);
|
|
17650
|
-
//
|
|
17651
17664
|
this.isFocused = false;
|
|
17652
17665
|
this._detector.detectChanges();
|
|
17653
17666
|
}
|
|
17654
|
-
// if (!this.eRef.nativeElement.contains(event.target)) {
|
|
17655
|
-
// console.log(this._inputValue);
|
|
17656
|
-
// const {value, visibleValue} = this._transformValue(this._inputValue, true);
|
|
17657
|
-
//
|
|
17658
|
-
// this.updateValue(value);
|
|
17659
|
-
// this.updateVisibleValue(visibleValue);
|
|
17660
|
-
//
|
|
17661
|
-
// this.isFocused = false;
|
|
17662
|
-
// this._detector.detectChanges();
|
|
17663
|
-
// }
|
|
17664
17667
|
}
|
|
17665
17668
|
registerOnChange(fn) {
|
|
17666
17669
|
this.onChange = fn;
|
|
@@ -17670,25 +17673,23 @@ class FormulaEditorComponent {
|
|
|
17670
17673
|
}
|
|
17671
17674
|
}
|
|
17672
17675
|
FormulaEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormulaEditorComponent, deps: [{ token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
17673
|
-
FormulaEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FormulaEditorComponent, selector: "mrx-formula-editor", inputs: { fields: "fields",
|
|
17676
|
+
FormulaEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FormulaEditorComponent, selector: "mrx-formula-editor", inputs: { fields: "fields", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", customClasses: "customClasses", size: "size", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", items: "items" }, outputs: { changed: "changed", blurred: "blurred", modelChange: "modelChange" }, host: { listeners: { "document:click": "clickOut($event)" } }, providers: [{
|
|
17674
17677
|
provide: NG_VALUE_ACCESSOR,
|
|
17675
17678
|
useExisting: forwardRef(() => FormulaEditorComponent),
|
|
17676
17679
|
multi: true
|
|
17677
|
-
}], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n class=\"mrx-formula-editor\"\r\n [class.mrx-input-error]=\"getInvalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"mrx-formula-editor__wrapper\">\r\n <div\r\n [innerHTML]=\"visibleValue.trim() | safe\"\r\n #inputElement\r\n class=\"mrx-formula-editor__box\"\r\n contenteditable=\"true\"\r\n [attr.data-ph]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n ></div>\r\n\r\n <div class=\"mrx-formula-editor__popup\" *ngIf=\"isFocused\">\r\n <ng-container *ngIf=\"errorModel.isError && isFocused\">\r\n <div class=\"mrx-formula-editor__popup--error\">\r\n {{ getErrorMessage }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"filteredList.length; else emptyList\">\r\n <div\r\n class=\"mrx-formula-editor__popup--row\"\r\n *ngFor=\"let item of filteredList\"\r\n (click)=\"insertTag(item); $event.stopPropagation()\"\r\n >\r\n {{ item.label }}\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyList>\r\n <div class=\"mrx-formula-editor__popup--row\">\r\n \u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getErrorMessage && !isFocused\"\r\n [invalidMessage]=\"getErrorMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-formula-editor{position:relative}.mrx-formula-editor__box{
|
|
17680
|
+
}], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n class=\"mrx-formula-editor\"\r\n [class.mrx-input-error]=\"getInvalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"mrx-formula-editor__wrapper\">\r\n <div\r\n [innerHTML]=\"visibleValue.trim() | safe\"\r\n #inputElement\r\n class=\"mrx-formula-editor__box\"\r\n contenteditable=\"true\"\r\n [attr.data-ph]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (keydown.enter)=\"onKeyup($event)\"\r\n (keydown.tab)=\"onKeyup($event)\"\r\n ></div>\r\n\r\n <div class=\"mrx-formula-editor__clear\" *ngIf=\"canClean\" (click)=\"onClear()\">\r\n <div class=\"mrx-icon icon-close\" [class]=\"getIconClass\"></div>\r\n </div>\r\n\r\n <div class=\"mrx-formula-editor__popup\" *ngIf=\"isFocused\">\r\n <ng-container *ngIf=\"errorModel.isError && isFocused\">\r\n <div class=\"mrx-formula-editor__popup--error\">\r\n {{ getErrorMessage }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"filteredList.length; else emptyList\">\r\n <div\r\n class=\"mrx-formula-editor__popup--row\"\r\n *ngFor=\"let item of filteredList\"\r\n (click)=\"insertTag(item); $event.stopPropagation()\"\r\n >\r\n {{ item.label }}\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyList>\r\n <div class=\"mrx-formula-editor__popup--row\">\r\n \u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getErrorMessage && !isFocused\"\r\n [invalidMessage]=\"getErrorMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-formula-editor{position:relative}.mrx-formula-editor__box{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1, 4px);outline:none;color:var(--neutral-text-primary, #262626);transition:outline-width .2s,border .2s;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space}.mrx-formula-editor__box:focus,.mrx-formula-editor__box:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-formula-editor__box:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-formula-editor__wrapper{position:relative}.mrx-formula-editor__clear{position:absolute;top:12px;right:12px;cursor:pointer}.mrx-formula-editor__box ::ng-deep .tag{display:inline-flex;cursor:default;-webkit-user-modify:read-only}.mrx-formula-editor__box ::ng-deep .argument{border-radius:var(--border-radius-1, 4px);background:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-formula-editor__box ::ng-deep .bracket{color:var(--neutral-text-tertiary, #71767E)}.mrx-formula-editor__box ::ng-deep .operator{color:var(--system-text-attention, #AC5C06)}.mrx-formula-editor__box ::ng-deep .number{color:var(--system-text-negative, #8E2100)}.mrx-formula-editor.mrx-formula-editor-lg .mrx-formula-editor__box{padding:5px 44px 5px var(--spacing-2, 8px);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:36px}.mrx-formula-editor.mrx-formula-editor-lg .mrx-formula-editor__box::ng-deep .tag.-large{font-family:var(--body-lg-font-family, \"PT Sans\");font-size:var(--body-lg-font-size, 16px);font-weight:var(--body-lg-font-weight, 400);line-height:var(--body-lg-line-height, 24px)}.mrx-formula-editor.mrx-formula-editor-lg .mrx-formula-editor__box::ng-deep .tag.-medium{font-family:var(--body-md-font-family, \"PT Sans\");font-size:var(--body-md-font-size, 14px);font-weight:var(--body-md-font-weight, 400);line-height:var(--body-md-line-height, 20px)}.mrx-formula-editor.mrx-formula-editor-lg .mrx-formula-editor__box::ng-deep .tag.argument{padding:6px 12px;margin:0 2px}.mrx-formula-editor.mrx-formula-editor-md .mrx-formula-editor__box{padding:5px 36px 5px var(--spacing-2, 8px);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:28px}.mrx-formula-editor.mrx-formula-editor-md .mrx-formula-editor__box::ng-deep .tag.-large{font-family:var(--body-md-font-family, \"PT Sans\");font-size:var(--body-md-font-size, 14px);font-weight:var(--body-md-font-weight, 400);line-height:var(--body-md-line-height, 20px)}.mrx-formula-editor.mrx-formula-editor-md .mrx-formula-editor__box::ng-deep .tag.-medium{font-family:var(--body-sm-font-family, \"PT Sans\");font-size:var(--body-sm-font-size, 12px);font-weight:var(--body-sm-font-weight, 400);line-height:var(--body-sm-line-height, 16px)}.mrx-formula-editor.mrx-formula-editor-md .mrx-formula-editor__box::ng-deep .tag.argument{padding:4px 8px;margin:0 2px}.mrx-formula-editor.mrx-formula-editor-sm .mrx-formula-editor__box{padding:5px 36px 5px var(--spacing-2, 8px);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:28px}.mrx-formula-editor.mrx-formula-editor-sm .mrx-formula-editor__box::ng-deep .tag.-large{font-family:var(--body-md-font-family, \"PT Sans\");font-size:var(--body-md-font-size, 14px);font-weight:var(--body-md-font-weight, 400);line-height:var(--body-md-line-height, 20px)}.mrx-formula-editor.mrx-formula-editor-sm .mrx-formula-editor__box::ng-deep .tag.-medium{font-family:var(--body-sm-font-family, \"PT Sans\");font-size:var(--body-sm-font-size, 12px);font-weight:var(--body-sm-font-weight, 400);line-height:var(--body-sm-line-height, 16px)}.mrx-formula-editor.mrx-formula-editor-sm .mrx-formula-editor__box::ng-deep .tag.argument{padding:4px 8px;margin:0 2px}.mrx-formula-editor__popup{position:absolute;z-index:99;width:100%;border-radius:var(--border-radius-1);background:var(--neutral-bg-island-default, #F8F9FA);box-shadow:0 1px 4px #3a3a3a4d;background-color:#fff;max-height:240px;overflow-x:hidden;overflow-y:auto;margin-top:4px}.mrx-formula-editor__popup--error{padding:var(--spacing-2) var(--spacing-4);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--system-text-negative, #8E2100)}.mrx-formula-editor__popup--row{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) + var(--spacing-half)) var(--spacing-4);white-space:normal;transition:background-color .2s}.mrx-formula-editor__popup--row:hover{cursor:pointer;background-color:var(--Bg2)!important}.mrx-formula-editor__box:empty:not(:focus):before{content:attr(data-ph);color:var(--neutral-text-tertiary, #71767E);padding-left:8px}.mrx-formula-editor.-disabled .mrx-formula-editor__box{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-formula-editor.-readonly .mrx-formula-editor__box{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-primary, #262626);pointer-events:none}.mrx-formula-editor.mrx-input-error .mrx-formula-editor__box{border-color:var(--system-bg-controls-negative-default)}.mrx-formula-editor.mrx-input-error .mrx-formula-editor__box:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-formula-editor.mrx-input-checked-error .mrx-formula-editor__box{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-formula-editor.mrx-input-checked-error .mrx-formula-editor__box:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-formula-editor.mrx-input-checked-success .mrx-formula-editor__box{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-formula-editor.mrx-input-checked-success .mrx-formula-editor__box:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}\n"], components: [{ type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "safe": SafePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17678
17681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormulaEditorComponent, decorators: [{
|
|
17679
17682
|
type: Component,
|
|
17680
17683
|
args: [{ selector: 'mrx-formula-editor', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
17681
17684
|
provide: NG_VALUE_ACCESSOR,
|
|
17682
17685
|
useExisting: forwardRef(() => FormulaEditorComponent),
|
|
17683
17686
|
multi: true
|
|
17684
|
-
}], template: "<div\r\n class=\"mrx-formula-editor\"\r\n [class.mrx-input-error]=\"getInvalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"mrx-formula-editor__wrapper\">\r\n <div\r\n [innerHTML]=\"visibleValue.trim() | safe\"\r\n #inputElement\r\n class=\"mrx-formula-editor__box\"\r\n contenteditable=\"true\"\r\n [attr.data-ph]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n ></div>\r\n\r\n <div class=\"mrx-formula-editor__popup\" *ngIf=\"isFocused\">\r\n <ng-container *ngIf=\"errorModel.isError && isFocused\">\r\n <div class=\"mrx-formula-editor__popup--error\">\r\n {{ getErrorMessage }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"filteredList.length; else emptyList\">\r\n <div\r\n class=\"mrx-formula-editor__popup--row\"\r\n *ngFor=\"let item of filteredList\"\r\n (click)=\"insertTag(item); $event.stopPropagation()\"\r\n >\r\n {{ item.label }}\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyList>\r\n <div class=\"mrx-formula-editor__popup--row\">\r\n \u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getErrorMessage && !isFocused\"\r\n [invalidMessage]=\"getErrorMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-formula-editor{position:relative}.mrx-formula-editor__box{
|
|
17687
|
+
}], template: "<div\r\n class=\"mrx-formula-editor\"\r\n [class.mrx-input-error]=\"getInvalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"mrx-formula-editor__wrapper\">\r\n <div\r\n [innerHTML]=\"visibleValue.trim() | safe\"\r\n #inputElement\r\n class=\"mrx-formula-editor__box\"\r\n contenteditable=\"true\"\r\n [attr.data-ph]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (keydown.enter)=\"onKeyup($event)\"\r\n (keydown.tab)=\"onKeyup($event)\"\r\n ></div>\r\n\r\n <div class=\"mrx-formula-editor__clear\" *ngIf=\"canClean\" (click)=\"onClear()\">\r\n <div class=\"mrx-icon icon-close\" [class]=\"getIconClass\"></div>\r\n </div>\r\n\r\n <div class=\"mrx-formula-editor__popup\" *ngIf=\"isFocused\">\r\n <ng-container *ngIf=\"errorModel.isError && isFocused\">\r\n <div class=\"mrx-formula-editor__popup--error\">\r\n {{ getErrorMessage }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"filteredList.length; else emptyList\">\r\n <div\r\n class=\"mrx-formula-editor__popup--row\"\r\n *ngFor=\"let item of filteredList\"\r\n (click)=\"insertTag(item); $event.stopPropagation()\"\r\n >\r\n {{ item.label }}\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyList>\r\n <div class=\"mrx-formula-editor__popup--row\">\r\n \u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getErrorMessage && !isFocused\"\r\n [invalidMessage]=\"getErrorMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n", styles: [".mrx-formula-editor{position:relative}.mrx-formula-editor__box{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1, 4px);outline:none;color:var(--neutral-text-primary, #262626);transition:outline-width .2s,border .2s;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space}.mrx-formula-editor__box:focus,.mrx-formula-editor__box:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-formula-editor__box:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-formula-editor__wrapper{position:relative}.mrx-formula-editor__clear{position:absolute;top:12px;right:12px;cursor:pointer}.mrx-formula-editor__box ::ng-deep .tag{display:inline-flex;cursor:default;-webkit-user-modify:read-only}.mrx-formula-editor__box ::ng-deep .argument{border-radius:var(--border-radius-1, 4px);background:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-formula-editor__box ::ng-deep .bracket{color:var(--neutral-text-tertiary, #71767E)}.mrx-formula-editor__box ::ng-deep .operator{color:var(--system-text-attention, #AC5C06)}.mrx-formula-editor__box ::ng-deep .number{color:var(--system-text-negative, #8E2100)}.mrx-formula-editor.mrx-formula-editor-lg .mrx-formula-editor__box{padding:5px 44px 5px var(--spacing-2, 8px);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:36px}.mrx-formula-editor.mrx-formula-editor-lg .mrx-formula-editor__box::ng-deep .tag.-large{font-family:var(--body-lg-font-family, \"PT Sans\");font-size:var(--body-lg-font-size, 16px);font-weight:var(--body-lg-font-weight, 400);line-height:var(--body-lg-line-height, 24px)}.mrx-formula-editor.mrx-formula-editor-lg .mrx-formula-editor__box::ng-deep .tag.-medium{font-family:var(--body-md-font-family, \"PT Sans\");font-size:var(--body-md-font-size, 14px);font-weight:var(--body-md-font-weight, 400);line-height:var(--body-md-line-height, 20px)}.mrx-formula-editor.mrx-formula-editor-lg .mrx-formula-editor__box::ng-deep .tag.argument{padding:6px 12px;margin:0 2px}.mrx-formula-editor.mrx-formula-editor-md .mrx-formula-editor__box{padding:5px 36px 5px var(--spacing-2, 8px);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:28px}.mrx-formula-editor.mrx-formula-editor-md .mrx-formula-editor__box::ng-deep .tag.-large{font-family:var(--body-md-font-family, \"PT Sans\");font-size:var(--body-md-font-size, 14px);font-weight:var(--body-md-font-weight, 400);line-height:var(--body-md-line-height, 20px)}.mrx-formula-editor.mrx-formula-editor-md .mrx-formula-editor__box::ng-deep .tag.-medium{font-family:var(--body-sm-font-family, \"PT Sans\");font-size:var(--body-sm-font-size, 12px);font-weight:var(--body-sm-font-weight, 400);line-height:var(--body-sm-line-height, 16px)}.mrx-formula-editor.mrx-formula-editor-md .mrx-formula-editor__box::ng-deep .tag.argument{padding:4px 8px;margin:0 2px}.mrx-formula-editor.mrx-formula-editor-sm .mrx-formula-editor__box{padding:5px 36px 5px var(--spacing-2, 8px);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:28px}.mrx-formula-editor.mrx-formula-editor-sm .mrx-formula-editor__box::ng-deep .tag.-large{font-family:var(--body-md-font-family, \"PT Sans\");font-size:var(--body-md-font-size, 14px);font-weight:var(--body-md-font-weight, 400);line-height:var(--body-md-line-height, 20px)}.mrx-formula-editor.mrx-formula-editor-sm .mrx-formula-editor__box::ng-deep .tag.-medium{font-family:var(--body-sm-font-family, \"PT Sans\");font-size:var(--body-sm-font-size, 12px);font-weight:var(--body-sm-font-weight, 400);line-height:var(--body-sm-line-height, 16px)}.mrx-formula-editor.mrx-formula-editor-sm .mrx-formula-editor__box::ng-deep .tag.argument{padding:4px 8px;margin:0 2px}.mrx-formula-editor__popup{position:absolute;z-index:99;width:100%;border-radius:var(--border-radius-1);background:var(--neutral-bg-island-default, #F8F9FA);box-shadow:0 1px 4px #3a3a3a4d;background-color:#fff;max-height:240px;overflow-x:hidden;overflow-y:auto;margin-top:4px}.mrx-formula-editor__popup--error{padding:var(--spacing-2) var(--spacing-4);font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--system-text-negative, #8E2100)}.mrx-formula-editor__popup--row{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) + var(--spacing-half)) var(--spacing-4);white-space:normal;transition:background-color .2s}.mrx-formula-editor__popup--row:hover{cursor:pointer;background-color:var(--Bg2)!important}.mrx-formula-editor__box:empty:not(:focus):before{content:attr(data-ph);color:var(--neutral-text-tertiary, #71767E);padding-left:8px}.mrx-formula-editor.-disabled .mrx-formula-editor__box{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-formula-editor.-readonly .mrx-formula-editor__box{background-color:var(--neutral-bg-disabled, #EEF0F4);color:var(--neutral-text-primary, #262626);pointer-events:none}.mrx-formula-editor.mrx-input-error .mrx-formula-editor__box{border-color:var(--system-bg-controls-negative-default)}.mrx-formula-editor.mrx-input-error .mrx-formula-editor__box:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-formula-editor.mrx-input-checked-error .mrx-formula-editor__box{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-formula-editor.mrx-input-checked-error .mrx-formula-editor__box:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-formula-editor.mrx-input-checked-success .mrx-formula-editor__box{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-formula-editor.mrx-input-checked-success .mrx-formula-editor__box:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}\n"] }]
|
|
17685
17688
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
17686
17689
|
type: Inject,
|
|
17687
17690
|
args: [DOCUMENT]
|
|
17688
17691
|
}] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { fields: [{
|
|
17689
17692
|
type: Input
|
|
17690
|
-
}], items: [{
|
|
17691
|
-
type: Input
|
|
17692
17693
|
}], disabled: [{
|
|
17693
17694
|
type: Input
|
|
17694
17695
|
}], readonly: [{
|
|
@@ -17697,12 +17698,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
17697
17698
|
type: Input
|
|
17698
17699
|
}], customClasses: [{
|
|
17699
17700
|
type: Input
|
|
17701
|
+
}], size: [{
|
|
17702
|
+
type: Input
|
|
17700
17703
|
}], invalid: [{
|
|
17701
17704
|
type: Input
|
|
17702
17705
|
}], invalidMessage: [{
|
|
17703
17706
|
type: Input
|
|
17704
17707
|
}], checkInvalid: [{
|
|
17705
17708
|
type: Input
|
|
17709
|
+
}], items: [{
|
|
17710
|
+
type: Input
|
|
17706
17711
|
}], inputElement: [{
|
|
17707
17712
|
type: ViewChild,
|
|
17708
17713
|
args: ['inputElement', { static: true }]
|