myrta-ui 1.1.28 → 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 +30 -17
- package/esm2020/lib/components/form/formula-editor/helpers/create-tags.helper.mjs +5 -5
- package/fesm2015/myrta-ui.mjs +39 -20
- package/fesm2015/myrta-ui.mjs.map +1 -1
- package/fesm2020/myrta-ui.mjs +39 -20
- 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/fesm2020/myrta-ui.mjs
CHANGED
|
@@ -17313,16 +17313,16 @@ const ErrorMessagesEnum = {
|
|
|
17313
17313
|
|
|
17314
17314
|
//
|
|
17315
17315
|
const createTag = (content) => {
|
|
17316
|
-
return `<div class="tag" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17316
|
+
return `<div class="tag argument -medium" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17317
17317
|
};
|
|
17318
17318
|
const createOperator = (content) => {
|
|
17319
|
-
return `<div class="operator" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17319
|
+
return `<div class="tag operator -large" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17320
17320
|
};
|
|
17321
17321
|
const createNumber = (content) => {
|
|
17322
|
-
return `<div class="number" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17322
|
+
return `<div class="tag number -medium" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17323
17323
|
};
|
|
17324
17324
|
const createBracket = (content) => {
|
|
17325
|
-
return `<div class="bracket" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17325
|
+
return `<div class="tag bracket -medium" contenteditable="false" tabindex="-1">${content}</div> `;
|
|
17326
17326
|
};
|
|
17327
17327
|
const createTagOutside = (content) => {
|
|
17328
17328
|
return `{${content}}`;
|
|
@@ -17407,6 +17407,13 @@ const checkDividerErrors = (array, list) => {
|
|
|
17407
17407
|
};
|
|
17408
17408
|
};
|
|
17409
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
|
+
|
|
17410
17417
|
class FormulaEditorComponent {
|
|
17411
17418
|
constructor(document, _detector, eRef) {
|
|
17412
17419
|
this.document = document;
|
|
@@ -17441,6 +17448,7 @@ class FormulaEditorComponent {
|
|
|
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 = '';
|
|
@@ -17475,7 +17483,13 @@ class FormulaEditorComponent {
|
|
|
17475
17483
|
return this.checkInvalid === false ? 'mrx-input-checked-success' : this.checkInvalid === true ? 'mrx-input-checked-error' : '';
|
|
17476
17484
|
}
|
|
17477
17485
|
get getClasses() {
|
|
17478
|
-
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();
|
|
17479
17493
|
}
|
|
17480
17494
|
get _inputValue() {
|
|
17481
17495
|
return this.inputElement.nativeElement.textContent || '';
|
|
@@ -17489,19 +17503,28 @@ class FormulaEditorComponent {
|
|
|
17489
17503
|
}
|
|
17490
17504
|
}
|
|
17491
17505
|
onInput(event) {
|
|
17492
|
-
const { searchText } = this._transformValue(this._modifiedValue(this._inputValue), false);
|
|
17493
|
-
|
|
17506
|
+
const { value, searchText } = this._transformValue(this._modifiedValue(this._inputValue), false);
|
|
17507
|
+
this.updateValue(value);
|
|
17494
17508
|
this.searchText = searchText;
|
|
17495
17509
|
this._storeCursorPosition();
|
|
17496
17510
|
}
|
|
17497
|
-
onBlur(event) {
|
|
17498
|
-
this._storeCursorPosition();
|
|
17499
|
-
this.blurred.emit({ value: this.value, id: this.uuid });
|
|
17500
|
-
}
|
|
17501
17511
|
onFocus(event) {
|
|
17502
17512
|
this.isFocused = true;
|
|
17503
17513
|
this._detector.markForCheck();
|
|
17504
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
|
+
}
|
|
17505
17528
|
insertTag(whiteListItem) {
|
|
17506
17529
|
this._restoreCursorPosition(this.inputElement.nativeElement);
|
|
17507
17530
|
this._insertPositionText(`{${whiteListItem.sysName}}`);
|
|
@@ -17620,12 +17643,6 @@ class FormulaEditorComponent {
|
|
|
17620
17643
|
this._range.setStart(this._cursorPosition.startContainer, this._cursorPosition.startOffset);
|
|
17621
17644
|
this._range.setEnd(this._cursorPosition.endContainer, this._cursorPosition.endOffset);
|
|
17622
17645
|
}
|
|
17623
|
-
this._selection = document.getSelection();
|
|
17624
|
-
if (this._selection) {
|
|
17625
|
-
// this._selection.removeAllRanges();
|
|
17626
|
-
// this._selection.addRange(this._range);
|
|
17627
|
-
// element.focus();
|
|
17628
|
-
}
|
|
17629
17646
|
}
|
|
17630
17647
|
_placeCaretAtEnd() {
|
|
17631
17648
|
setTimeout(() => {
|
|
@@ -17656,18 +17673,18 @@ class FormulaEditorComponent {
|
|
|
17656
17673
|
}
|
|
17657
17674
|
}
|
|
17658
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 });
|
|
17659
|
-
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: [{
|
|
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: [{
|
|
17660
17677
|
provide: NG_VALUE_ACCESSOR,
|
|
17661
17678
|
useExisting: forwardRef(() => FormulaEditorComponent),
|
|
17662
17679
|
multi: true
|
|
17663
|
-
}], 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 });
|
|
17664
17681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormulaEditorComponent, decorators: [{
|
|
17665
17682
|
type: Component,
|
|
17666
17683
|
args: [{ selector: 'mrx-formula-editor', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
17667
17684
|
provide: NG_VALUE_ACCESSOR,
|
|
17668
17685
|
useExisting: forwardRef(() => FormulaEditorComponent),
|
|
17669
17686
|
multi: true
|
|
17670
|
-
}], 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"] }]
|
|
17671
17688
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
17672
17689
|
type: Inject,
|
|
17673
17690
|
args: [DOCUMENT]
|
|
@@ -17681,6 +17698,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
17681
17698
|
type: Input
|
|
17682
17699
|
}], customClasses: [{
|
|
17683
17700
|
type: Input
|
|
17701
|
+
}], size: [{
|
|
17702
|
+
type: Input
|
|
17684
17703
|
}], invalid: [{
|
|
17685
17704
|
type: Input
|
|
17686
17705
|
}], invalidMessage: [{
|