myrta-ui 1.1.28 → 1.1.31
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 +36 -18
- package/esm2020/lib/components/form/formula-editor/helpers/create-tags.helper.mjs +5 -5
- package/fesm2015/myrta-ui.mjs +45 -21
- package/fesm2015/myrta-ui.mjs.map +1 -1
- package/fesm2020/myrta-ui.mjs +45 -21
- 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 +8 -2
- package/package.json +1 -1
package/fesm2015/myrta-ui.mjs
CHANGED
|
@@ -17280,16 +17280,16 @@ const ErrorMessagesEnum = {
|
|
|
17280
17280
|
|
|
17281
17281
|
//
|
|
17282
17282
|
const createTag = (content) => {
|
|
17283
|
-
return `<div class="tag" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17283
|
+
return `<div class="tag argument -medium" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17284
17284
|
};
|
|
17285
17285
|
const createOperator = (content) => {
|
|
17286
|
-
return `<div class="operator" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17286
|
+
return `<div class="tag operator -large" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17287
17287
|
};
|
|
17288
17288
|
const createNumber = (content) => {
|
|
17289
|
-
return `<div class="number" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17289
|
+
return `<div class="tag number -medium" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17290
17290
|
};
|
|
17291
17291
|
const createBracket = (content) => {
|
|
17292
|
-
return `<div class="bracket" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17292
|
+
return `<div class="tag bracket -medium" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17293
17293
|
};
|
|
17294
17294
|
const createTagOutside = (content) => {
|
|
17295
17295
|
return `{${content}}`;
|
|
@@ -17374,6 +17374,13 @@ const checkDividerErrors = (array, list) => {
|
|
|
17374
17374
|
};
|
|
17375
17375
|
};
|
|
17376
17376
|
|
|
17377
|
+
var FormulaEditorSizesEnum;
|
|
17378
|
+
(function (FormulaEditorSizesEnum) {
|
|
17379
|
+
FormulaEditorSizesEnum["small"] = "mrx-formula-editor-sm";
|
|
17380
|
+
FormulaEditorSizesEnum["medium"] = "mrx-formula-editor-md";
|
|
17381
|
+
FormulaEditorSizesEnum["large"] = "mrx-formula-editor-lg";
|
|
17382
|
+
})(FormulaEditorSizesEnum || (FormulaEditorSizesEnum = {}));
|
|
17383
|
+
|
|
17377
17384
|
class FormulaEditorComponent {
|
|
17378
17385
|
constructor(document, _detector, eRef) {
|
|
17379
17386
|
this.document = document;
|
|
@@ -17408,6 +17415,7 @@ class FormulaEditorComponent {
|
|
|
17408
17415
|
this.readonly = false;
|
|
17409
17416
|
this.placeholder = '';
|
|
17410
17417
|
this.customClasses = '';
|
|
17418
|
+
this.size = 'large';
|
|
17411
17419
|
// VALIDATE
|
|
17412
17420
|
this.invalid = false;
|
|
17413
17421
|
this.invalidMessage = '';
|
|
@@ -17425,6 +17433,9 @@ class FormulaEditorComponent {
|
|
|
17425
17433
|
this._itemList = items;
|
|
17426
17434
|
this._modifiedItemList.items = itemsMap;
|
|
17427
17435
|
this._modifiedItemList.regExp = new RegExp(items.map(s => s.label).join('|'), 'g');
|
|
17436
|
+
const { visibleValue } = this._transformValue(this._modifiedValue(this._inputValue), true);
|
|
17437
|
+
this.updateVisibleValue(visibleValue);
|
|
17438
|
+
this._detector.detectChanges();
|
|
17428
17439
|
}
|
|
17429
17440
|
get getErrorMessage() {
|
|
17430
17441
|
return this.invalidMessage || ErrorMessagesEnum[this.errorModel.errorType];
|
|
@@ -17442,7 +17453,13 @@ class FormulaEditorComponent {
|
|
|
17442
17453
|
return this.checkInvalid === false ? 'mrx-input-checked-success' : this.checkInvalid === true ? 'mrx-input-checked-error' : '';
|
|
17443
17454
|
}
|
|
17444
17455
|
get getClasses() {
|
|
17445
|
-
return `${this.customClasses} ${this.readonlyClass} ${this.checkValidClasses}`;
|
|
17456
|
+
return `${FormulaEditorSizesEnum[this.size]} ${this.customClasses} ${this.readonlyClass} ${this.checkValidClasses}`;
|
|
17457
|
+
}
|
|
17458
|
+
get getIconClass() {
|
|
17459
|
+
return `${this.size !== 'large' ? 'icon-font-16' : 'icon-font-24'}`;
|
|
17460
|
+
}
|
|
17461
|
+
get canClean() {
|
|
17462
|
+
return !!this.visibleValue.trim();
|
|
17446
17463
|
}
|
|
17447
17464
|
get _inputValue() {
|
|
17448
17465
|
return this.inputElement.nativeElement.textContent || '';
|
|
@@ -17456,19 +17473,28 @@ class FormulaEditorComponent {
|
|
|
17456
17473
|
}
|
|
17457
17474
|
}
|
|
17458
17475
|
onInput(event) {
|
|
17459
|
-
const { searchText } = this._transformValue(this._modifiedValue(this._inputValue), false);
|
|
17460
|
-
|
|
17476
|
+
const { value, searchText } = this._transformValue(this._modifiedValue(this._inputValue), false);
|
|
17477
|
+
this.updateValue(value);
|
|
17461
17478
|
this.searchText = searchText;
|
|
17462
17479
|
this._storeCursorPosition();
|
|
17463
17480
|
}
|
|
17464
|
-
onBlur(event) {
|
|
17465
|
-
this._storeCursorPosition();
|
|
17466
|
-
this.blurred.emit({ value: this.value, id: this.uuid });
|
|
17467
|
-
}
|
|
17468
17481
|
onFocus(event) {
|
|
17469
17482
|
this.isFocused = true;
|
|
17470
17483
|
this._detector.markForCheck();
|
|
17471
17484
|
}
|
|
17485
|
+
onClear() {
|
|
17486
|
+
this.updateValue('');
|
|
17487
|
+
this.updateVisibleValue('');
|
|
17488
|
+
}
|
|
17489
|
+
onBlur(event) {
|
|
17490
|
+
this._storeCursorPosition();
|
|
17491
|
+
}
|
|
17492
|
+
onKeyup(event) {
|
|
17493
|
+
event.preventDefault();
|
|
17494
|
+
this.inputElement.nativeElement.blur();
|
|
17495
|
+
this.isFocused = false;
|
|
17496
|
+
this._detector.detectChanges();
|
|
17497
|
+
}
|
|
17472
17498
|
insertTag(whiteListItem) {
|
|
17473
17499
|
this._restoreCursorPosition(this.inputElement.nativeElement);
|
|
17474
17500
|
this._insertPositionText(`{${whiteListItem.sysName}}`);
|
|
@@ -17493,7 +17519,9 @@ class FormulaEditorComponent {
|
|
|
17493
17519
|
this.onTouched();
|
|
17494
17520
|
}
|
|
17495
17521
|
_modifiedValue(value) {
|
|
17496
|
-
return value.replace(this._modifiedItemList.regExp, match =>
|
|
17522
|
+
return value.replace(this._modifiedItemList.regExp, match => {
|
|
17523
|
+
return this._modifiedItemList.items[match] ? `{${this._modifiedItemList.items[match]}}` : '';
|
|
17524
|
+
});
|
|
17497
17525
|
}
|
|
17498
17526
|
_transformValue(content, analise = false) {
|
|
17499
17527
|
const valueArray = content.split(/[\s\u00A0]+/).filter(Boolean);
|
|
@@ -17587,12 +17615,6 @@ class FormulaEditorComponent {
|
|
|
17587
17615
|
this._range.setStart(this._cursorPosition.startContainer, this._cursorPosition.startOffset);
|
|
17588
17616
|
this._range.setEnd(this._cursorPosition.endContainer, this._cursorPosition.endOffset);
|
|
17589
17617
|
}
|
|
17590
|
-
this._selection = document.getSelection();
|
|
17591
|
-
if (this._selection) {
|
|
17592
|
-
// this._selection.removeAllRanges();
|
|
17593
|
-
// this._selection.addRange(this._range);
|
|
17594
|
-
// element.focus();
|
|
17595
|
-
}
|
|
17596
17618
|
}
|
|
17597
17619
|
_placeCaretAtEnd() {
|
|
17598
17620
|
setTimeout(() => {
|
|
@@ -17623,18 +17645,18 @@ class FormulaEditorComponent {
|
|
|
17623
17645
|
}
|
|
17624
17646
|
}
|
|
17625
17647
|
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 });
|
|
17626
|
-
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", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", items: "items" }, outputs: { changed: "changed", blurred: "blurred", modelChange: "modelChange" }, host: { listeners: { "document:click": "clickOut($event)" } }, providers: [{
|
|
17648
|
+
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: [{
|
|
17627
17649
|
provide: NG_VALUE_ACCESSOR,
|
|
17628
17650
|
useExisting: forwardRef(() => FormulaEditorComponent),
|
|
17629
17651
|
multi: true
|
|
17630
|
-
}], 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{
|
|
17652
|
+
}], 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 });
|
|
17631
17653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormulaEditorComponent, decorators: [{
|
|
17632
17654
|
type: Component,
|
|
17633
17655
|
args: [{ selector: 'mrx-formula-editor', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
17634
17656
|
provide: NG_VALUE_ACCESSOR,
|
|
17635
17657
|
useExisting: forwardRef(() => FormulaEditorComponent),
|
|
17636
17658
|
multi: true
|
|
17637
|
-
}], 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{
|
|
17659
|
+
}], 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"] }]
|
|
17638
17660
|
}], ctorParameters: function () {
|
|
17639
17661
|
return [{ type: Document, decorators: [{
|
|
17640
17662
|
type: Inject,
|
|
@@ -17650,6 +17672,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
17650
17672
|
type: Input
|
|
17651
17673
|
}], customClasses: [{
|
|
17652
17674
|
type: Input
|
|
17675
|
+
}], size: [{
|
|
17676
|
+
type: Input
|
|
17653
17677
|
}], invalid: [{
|
|
17654
17678
|
type: Input
|
|
17655
17679
|
}], invalidMessage: [{
|