myrta-ui 1.1.83 → 1.1.85
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/editor/editor.component.mjs +2 -2
- package/esm2020/lib/components/form/input-select/input-select.component.mjs +2 -2
- package/esm2020/lib/components/table/table.component.mjs +3 -3
- package/fesm2015/myrta-ui.mjs +6 -6
- package/fesm2015/myrta-ui.mjs.map +1 -1
- package/fesm2020/myrta-ui.mjs +6 -6
- package/fesm2020/myrta-ui.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2020/myrta-ui.mjs
CHANGED
|
@@ -2468,7 +2468,7 @@ InputSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
|
|
|
2468
2468
|
useExisting: forwardRef(() => InputSelectComponent),
|
|
2469
2469
|
multi: true,
|
|
2470
2470
|
},
|
|
2471
|
-
], queries: [{ propertyName: "selectOptionsTemplate", first: true, predicate: ["selectOptionsTemplate"], descendants: true }, { propertyName: "selectOptionsGroupTemplate", first: true, predicate: ["selectOptionsGroupTemplate"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "multiLabelTemplate", first: true, predicate: ["multiLabelTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-input-select\" [class.mrx-input-error]=\"invalid\" [class]=\"wrapperCustomClasses\">\r\n <div [class.inputbox-error]=\"showEmptyFields && required && !isVerified\"\r\n [class.inputbox-success]=\"showEmptyFields && required && isVerified\">\r\n\r\n <ng-select\r\n [items]=\"items\"\r\n [ngModel]=\"value\"\r\n [addTag]=\"addTag\"\r\n [bindValue]=\"bindValue\"\r\n [bindLabel]=\"bindLabel\"\r\n [multiple]=\"multiple\"\r\n [maxSelectedItems]=\"maxSelectedItems\"\r\n [groupBy]=\"groupBy ? groupBy : ''\"\r\n [placeholder]=\"placeholder\"\r\n [trackByFn]=\"trackByFn\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [loading]=\"loading\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [clearable]=\"clearable\"\r\n [class]=\"getClasses\"\r\n [searchable]=\"searchable\"\r\n [closeOnSelect]=\"closeOnSelect\"\r\n [searchFn]=\"customSearchFn\"\r\n [notFoundText]=\"notFoundText\"\r\n [hideSelected]=\"hideSelected\"\r\n [maxlength]=\"maxLength.toString() || 'none'\"\r\n clearAllText=\"\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C\"\r\n addTagText=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\"\r\n loadingText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n (clear)=\"onClear($event)\"\r\n (search)=\"updateSearch($event)\"\r\n >\r\n <ng-template ng-label-tmp let-item=\"item\" *ngIf=\"disabled && disabledFromDisplay\">\r\n {{ displayValue }}\r\n </ng-template>\r\n <ng-template ng-optgroup-tmp let-item=\"item\" let-index=\"index\" *ngIf=\"selectOptionsGroupTemplate\">\r\n <ng-container *ngTemplateOutlet=\"selectOptionsGroupTemplate; context:{item: item, index: index}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-option-tmp let-item=\"item\" let-clear=\"clear\" *ngIf=\"selectOptionsTemplate\">\r\n <ng-container *ngTemplateOutlet=\"selectOptionsTemplate; context:{item: item, clear: clear}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" *ngIf=\"labelTemplate\">\r\n <ng-container *ngTemplateOutlet=\"labelTemplate; context:{item: item, clear: clear}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-tag-tmp let-items=\"items\" *ngIf=\"tagTemplate\">\r\n <ng-container *ngTemplateOutlet=\"tagTemplate; context:{items: items}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-loadingtext-tmp>\r\n <div class=\"ng-option disabled\">{{ loadLabel || '\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430' }}</div>\r\n </ng-template>\r\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\" *ngIf=\"multiLabelTemplate\">\r\n <ng-container *ngTemplateOutlet=\"multiLabelTemplate; context:{items: items, clear: clear}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\" *ngIf=\"multiCollapseCount\">\r\n <ng-container *ngIf=\"value.length < multiCollapseCount\">\r\n <div class=\"ng-value\" *ngFor=\"let item of items\">\r\n <span class=\"ng-value-label\">{{item['label']}}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\u00D7</span>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"value.length >= multiCollapseCount\" class=\"ng-summary-list\">\r\n <div class=\"ng-value ng-value-empty\">\r\n <span class=\"ng-value-label\">\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ value.length }}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template ng-loadingspinner-tmp>\r\n <mrx-loader\r\n [ngStyle]=\"{display: 'flex'}\"\r\n [color]=\"'brand'\" size=\"small\"\r\n customClasses=\"align-self-center mr-2\"\r\n ></mrx-loader>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\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: [":host::ng-deep .mrx-input-select{position:relative}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container{background-color:var(--neutral-bg-disabled)}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container:hover:before{border-color:var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container .ng-arrow-wrapper .ng-arrow:after{color:var(--neutral-icon-disabled)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container{align-items:flex-start;padding:var(--spacing-2);padding-right:var(--spacing-3);box-sizing:border-box;border:none!important;border-radius:var(--border-radius-1)!important;width:100%;height:auto;outline:none;transition:outline-width .2s,border .2s;z-index:1}:host::ng-deep .mrx-input-select .ng-select .ng-select-container:before{content:\"\";position:absolute;left:0;top:0;width:100%;height:100%;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;z-index:-1}:host::ng-deep .mrx-input-select .ng-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host::ng-deep .mrx-input-select .ng-select .ng-select-container:focus,:host::ng-deep .mrx-input-select .ng-select .ng-select-container:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)!important}:host::ng-deep .mrx-input-select .ng-select .ng-select-container:hover:before{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;position:relative;padding:var(--spacing-1) var(--spacing-2)!important;min-height:var(--sizing-8)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-placeholder{top:revert!important;color:var(--neutral-text-tertiary)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-value{display:flex;align-items:center;white-space:nowrap}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-label{overflow:hidden;font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{color:transparent}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-input{display:flex;align-items:center;height:auto;padding-left:var(--spacing-2)!important;z-index:-1}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-input>input{position:relative;z-index:-1;padding:0;transform:none;padding-right:var(--spacing-2)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .mrx-loader{transform:translateY(4px)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper{display:flex;align-items:center;justify-content:center;padding:0;transform:translateY(4px)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-arrow{font-size:0;position:relative;width:100%!important;height:100%!important;background-image:none;line-height:normal;border-radius:var(--border-radius-1)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:after,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-arrow:after{content:\"\";position:absolute;inset:0;width:100%;height:100%;font-family:mrx-icon-font;font-size:var(--body-extra-lg-font-size);color:var(--neutral-icon-default)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:hover .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:hover .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:focus .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:focus .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:hover .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:hover .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:focus .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:focus .ng-arrow{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper{margin-right:var(--spacing-2)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-clear:after{content:\"\\e92b\"}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:after{content:\"\\e923\"}:host::ng-deep .mrx-input-select .ng-select.ng-select-opened .ng-select-container{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.ng-select-clearable .ng-has-value .ng-value-container{max-width:calc(100% - 56px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container.ng-has-value .ng-value-container{max-width:calc(100% - 88px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container .ng-value-container{max-width:calc(100% - 56px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.mrx-input-loading .ng-value-container{max-width:calc(100% - 56px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple .ng-value-container{max-width:calc(100% - var(--sizing-6))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple .ng-value-container .ng-value{min-height:var(--sizing-8)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg .ng-select-container{min-height:var(--sizing-12)!important}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg .ng-select-container .ng-clear-wrapper,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg .ng-select-container .ng-arrow-wrapper{width:var(--sizing-6)!important;min-width:var(--sizing-6);height:var(--sizing-6);min-height:var(--sizing-6)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.ng-select-clearable .ng-has-value .ng-value-container{max-width:calc(100% - var(--sizing-10))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container.ng-has-value .ng-value-container{max-width:calc(100% - 64px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container .ng-value-container{max-width:calc(100% - var(--sizing-10))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.mrx-input-loading .ng-value-container{max-width:calc(100% - var(--sizing-10))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{font-size:var(--body-sm-font-size);line-height:var(--body-sm-line-height)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container{min-height:var(--sizing-10)!important}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-value-container{padding:0 var(--spacing-2) 0 var(--spacing-2)!important;min-height:var(--sizing-6);max-width:calc(100% - var(--sizing-4))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-value-container .ng-value{margin-bottom:0;min-height:var(--sizing-6)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .mrx-loader{width:var(--sizing-4);height:var(--sizing-4)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-clear-wrapper,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-arrow-wrapper{width:var(--sizing-4)!important;min-width:var(--sizing-4);height:var(--sizing-4);min-height:var(--sizing-4)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-clear-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-arrow-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-clear-wrapper .ng-arrow:after,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-arrow-wrapper .ng-arrow:after{font-size:var(--body-lg-font-size)}:host::ng-deep .mrx-input-select .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-label{text-overflow:ellipsis!important;overflow:hidden;max-width:100%!important;display:block;white-space:nowrap}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-value-container{gap:var(--spacing-2);padding:0!important;padding-right:var(--spacing-2)!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{display:flex;flex-direction:row;width:100%;max-width:max-content;margin:0;background:var(--brand-bg-secondary-default);border-radius:var(--border-radius-1);padding:0;padding-left:var(--spacing-2);padding-right:var(--spacing-1)}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-empty{padding-right:var(--spacing-3)}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{padding-right:var(--spacing-1);text-overflow:ellipsis!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{position:relative;min-width:var(--sizing-4);min-height:var(--sizing-4);order:1}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:after{content:\"\\e92b\";position:absolute;left:0;top:0;width:100%;height:100%;font-family:mrx-icon-font;font-size:var(--body-lg-font-size);color:var(--neutral-icon-default)}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);transform:none!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:0;padding-left:0!important}:host::ng-deep .mrx-input-select .ng-dropdown-panel{z-index:900;background:var(--brand-bg-tertiary-default);box-shadow:0 4px 10px #3a3a3a26;border-radius:var(--border-radius-1);margin-top:var(--spacing-1);border:none}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items{border-radius:var(--border-radius-1)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:8px;background-color:transparent}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{border-radius:var(--border-radius-2);background-color:transparent}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{border-radius:var(--border-radius-2);background-color:var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{min-height:var(--sizing-10);transition:.2s;display:flex;align-items:center;padding:var(--spacing-1) var(--spacing-4);white-space:normal}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:var(--spacing-6)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option span{display:flex;align-items:center;font-size:var(--body-md-font-size);line-height:var(--body-md-line-height)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--brand-bg-tertiary-default);color:var(--neutral-text-primary)!important}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:var(--brand-bg-tertiary-default);position:relative;padding-right:40px;color:var(--neutral-text-primary)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-label{font-weight:400}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected:before{content:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3336 4.6665L6.00032 11.9998L2.66699 8.66649' stroke='%23000' stroke-width='0.999998' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");position:absolute;top:50%;transform:translateY(-50%);right:16px;line-height:0}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover{background:var(--brand-bg-secondary-default)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{min-height:var(--sizing-10);transition:.2s;display:flex;align-items:center;padding:var(--spacing-1) var(--spacing-4);white-space:normal;color:var(--neutral-text-tertiary);font-weight:700}:host::ng-deep .mrx-input-select.mrx-input-error{display:block}:host::ng-deep .mrx-input-select.mrx-input-error .ng-select .ng-select-container:before{border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-input-select .mrx-input-checked-error.ng-select .ng-select-container{background-color:var(--system-bg-negative-secondary)}:host::ng-deep .mrx-input-select .mrx-input-checked-error.ng-select .ng-select-container:hover{border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-input-select .mrx-input-checked-success.ng-select .ng-select-container{background-color:var(--system-bg-positive-secondary)}:host::ng-deep .mrx-input-select .mrx-input-checked-success.ng-select .ng-select-container:before{border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-input-select .mrx-input-checked-success.ng-select .ng-select-container:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}:host::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-summary-list .ng-value{max-width:100%!important}:host::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-summary-list .ng-value .ng-value-label{text-overflow:initial!important;overflow:initial}\n"], components: [{ type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$3.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i1$3.NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { type: i1$3.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { type: i1$3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2471
|
+
], queries: [{ propertyName: "selectOptionsTemplate", first: true, predicate: ["selectOptionsTemplate"], descendants: true }, { propertyName: "selectOptionsGroupTemplate", first: true, predicate: ["selectOptionsGroupTemplate"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "multiLabelTemplate", first: true, predicate: ["multiLabelTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-input-select\" [class.mrx-input-error]=\"invalid\" [class]=\"wrapperCustomClasses\">\r\n <div [class.inputbox-error]=\"showEmptyFields && required && !isVerified\"\r\n [class.inputbox-success]=\"showEmptyFields && required && isVerified\">\r\n\r\n <ng-select\r\n [items]=\"items\"\r\n [ngModel]=\"value\"\r\n [addTag]=\"addTag\"\r\n [bindValue]=\"bindValue\"\r\n [bindLabel]=\"bindLabel\"\r\n [multiple]=\"multiple\"\r\n [maxSelectedItems]=\"maxSelectedItems\"\r\n [groupBy]=\"groupBy ? groupBy : ''\"\r\n [placeholder]=\"placeholder\"\r\n [trackByFn]=\"trackByFn\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [loading]=\"loading\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [clearable]=\"clearable\"\r\n [class]=\"getClasses\"\r\n [searchable]=\"searchable\"\r\n [closeOnSelect]=\"closeOnSelect\"\r\n [searchFn]=\"customSearchFn\"\r\n [notFoundText]=\"notFoundText\"\r\n [hideSelected]=\"hideSelected\"\r\n [maxlength]=\"maxLength.toString() || 'none'\"\r\n clearAllText=\"\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C\"\r\n addTagText=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\"\r\n loadingText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n (clear)=\"onClear($event)\"\r\n (search)=\"updateSearch($event)\"\r\n >\r\n <ng-template ng-label-tmp let-item=\"item\" *ngIf=\"disabled && disabledFromDisplay\">\r\n {{ displayValue }}\r\n </ng-template>\r\n <ng-template ng-optgroup-tmp let-item=\"item\" let-index=\"index\" *ngIf=\"selectOptionsGroupTemplate\">\r\n <ng-container *ngTemplateOutlet=\"selectOptionsGroupTemplate; context:{item: item, index: index}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-option-tmp let-item=\"item\" let-clear=\"clear\" *ngIf=\"selectOptionsTemplate\">\r\n <ng-container *ngTemplateOutlet=\"selectOptionsTemplate; context:{item: item, clear: clear}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" *ngIf=\"labelTemplate\">\r\n <ng-container *ngTemplateOutlet=\"labelTemplate; context:{item: item, clear: clear}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-tag-tmp let-items=\"items\" *ngIf=\"tagTemplate\">\r\n <ng-container *ngTemplateOutlet=\"tagTemplate; context:{items: items}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-loadingtext-tmp>\r\n <div class=\"ng-option disabled\">{{ loadLabel || '\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430' }}</div>\r\n </ng-template>\r\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\" *ngIf=\"multiLabelTemplate\">\r\n <ng-container *ngTemplateOutlet=\"multiLabelTemplate; context:{items: items, clear: clear}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\" *ngIf=\"multiCollapseCount\">\r\n <ng-container *ngIf=\"value.length < multiCollapseCount\">\r\n <div class=\"ng-value\" *ngFor=\"let item of items\">\r\n <span class=\"ng-value-label\">{{item['label']}}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\u00D7</span>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"value.length >= multiCollapseCount\" class=\"ng-summary-list\">\r\n <div class=\"ng-value ng-value-empty\">\r\n <span class=\"ng-value-label\">\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ value.length }}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template ng-loadingspinner-tmp>\r\n <mrx-loader\r\n [ngStyle]=\"{display: 'flex'}\"\r\n [color]=\"'brand'\" size=\"small\"\r\n customClasses=\"align-self-center mr-2\"\r\n ></mrx-loader>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\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: [":host::ng-deep .mrx-input-select{position:relative}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container{background-color:var(--neutral-bg-disabled)}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value .ng-value-label{color:var(--neutral-text-tertiary, #71767E)}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container:hover:before{border-color:var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container .ng-arrow-wrapper .ng-arrow:after{color:var(--neutral-icon-disabled)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container{align-items:flex-start;padding:var(--spacing-2);padding-right:var(--spacing-3);box-sizing:border-box;border:none!important;border-radius:var(--border-radius-1)!important;width:100%;height:auto;outline:none;transition:outline-width .2s,border .2s;z-index:1}:host::ng-deep .mrx-input-select .ng-select .ng-select-container:before{content:\"\";position:absolute;left:0;top:0;width:100%;height:100%;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;z-index:-1}:host::ng-deep .mrx-input-select .ng-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host::ng-deep .mrx-input-select .ng-select .ng-select-container:focus,:host::ng-deep .mrx-input-select .ng-select .ng-select-container:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)!important}:host::ng-deep .mrx-input-select .ng-select .ng-select-container:hover:before{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;position:relative;padding:var(--spacing-1) var(--spacing-2)!important;min-height:var(--sizing-8)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-placeholder{top:revert!important;color:var(--neutral-text-tertiary)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-value{display:flex;align-items:center;white-space:nowrap}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-label{overflow:hidden;font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{color:transparent}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-input{display:flex;align-items:center;height:auto;padding-left:var(--spacing-2)!important;z-index:-1}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-input>input{position:relative;z-index:-1;padding:0;transform:none;padding-right:var(--spacing-2)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .mrx-loader{transform:translateY(4px)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper{display:flex;align-items:center;justify-content:center;padding:0;transform:translateY(4px)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-arrow{font-size:0;position:relative;width:100%!important;height:100%!important;background-image:none;line-height:normal;border-radius:var(--border-radius-1)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:after,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-arrow:after{content:\"\";position:absolute;inset:0;width:100%;height:100%;font-family:mrx-icon-font;font-size:var(--body-extra-lg-font-size);color:var(--neutral-icon-default)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:hover .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:hover .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:focus .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:focus .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:hover .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:hover .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:focus .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:focus .ng-arrow{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper{margin-right:var(--spacing-2)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-clear:after{content:\"\\e92b\"}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:after{content:\"\\e923\"}:host::ng-deep .mrx-input-select .ng-select.ng-select-opened .ng-select-container{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.ng-select-clearable .ng-has-value .ng-value-container{max-width:calc(100% - 56px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container.ng-has-value .ng-value-container{max-width:calc(100% - 88px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container .ng-value-container{max-width:calc(100% - 56px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.mrx-input-loading .ng-value-container{max-width:calc(100% - 56px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple .ng-value-container{max-width:calc(100% - var(--sizing-6))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple .ng-value-container .ng-value{min-height:var(--sizing-8)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg .ng-select-container{min-height:var(--sizing-12)!important}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg .ng-select-container .ng-clear-wrapper,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg .ng-select-container .ng-arrow-wrapper{width:var(--sizing-6)!important;min-width:var(--sizing-6);height:var(--sizing-6);min-height:var(--sizing-6)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.ng-select-clearable .ng-has-value .ng-value-container{max-width:calc(100% - var(--sizing-10))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container.ng-has-value .ng-value-container{max-width:calc(100% - 64px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container .ng-value-container{max-width:calc(100% - var(--sizing-10))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.mrx-input-loading .ng-value-container{max-width:calc(100% - var(--sizing-10))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{font-size:var(--body-sm-font-size);line-height:var(--body-sm-line-height)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container{min-height:var(--sizing-10)!important}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-value-container{padding:0 var(--spacing-2) 0 var(--spacing-2)!important;min-height:var(--sizing-6);max-width:calc(100% - var(--sizing-4))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-value-container .ng-value{margin-bottom:0;min-height:var(--sizing-6)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .mrx-loader{width:var(--sizing-4);height:var(--sizing-4)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-clear-wrapper,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-arrow-wrapper{width:var(--sizing-4)!important;min-width:var(--sizing-4);height:var(--sizing-4);min-height:var(--sizing-4)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-clear-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-arrow-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-clear-wrapper .ng-arrow:after,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-arrow-wrapper .ng-arrow:after{font-size:var(--body-lg-font-size)}:host::ng-deep .mrx-input-select .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-label{text-overflow:ellipsis!important;overflow:hidden;max-width:100%!important;display:block;white-space:nowrap}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-value-container{gap:var(--spacing-2);padding:0!important;padding-right:var(--spacing-2)!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{display:flex;flex-direction:row;width:100%;max-width:max-content;margin:0;background:var(--brand-bg-secondary-default);border-radius:var(--border-radius-1);padding:0;padding-left:var(--spacing-2);padding-right:var(--spacing-1)}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-empty{padding-right:var(--spacing-3)}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{padding-right:var(--spacing-1);text-overflow:ellipsis!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{position:relative;min-width:var(--sizing-4);min-height:var(--sizing-4);order:1}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:after{content:\"\\e92b\";position:absolute;left:0;top:0;width:100%;height:100%;font-family:mrx-icon-font;font-size:var(--body-lg-font-size);color:var(--neutral-icon-default)}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);transform:none!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:0;padding-left:0!important}:host::ng-deep .mrx-input-select .ng-dropdown-panel{z-index:900;background:var(--brand-bg-tertiary-default);box-shadow:0 4px 10px #3a3a3a26;border-radius:var(--border-radius-1);margin-top:var(--spacing-1);border:none}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items{border-radius:var(--border-radius-1)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:8px;background-color:transparent}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{border-radius:var(--border-radius-2);background-color:transparent}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{border-radius:var(--border-radius-2);background-color:var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{min-height:var(--sizing-10);transition:.2s;display:flex;align-items:center;padding:var(--spacing-1) var(--spacing-4);white-space:normal}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:var(--spacing-6)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option span{display:flex;align-items:center;font-size:var(--body-md-font-size);line-height:var(--body-md-line-height)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--brand-bg-tertiary-default);color:var(--neutral-text-primary)!important}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:var(--brand-bg-tertiary-default);position:relative;padding-right:40px;color:var(--neutral-text-primary)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-label{font-weight:400}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected:before{content:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3336 4.6665L6.00032 11.9998L2.66699 8.66649' stroke='%23000' stroke-width='0.999998' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");position:absolute;top:50%;transform:translateY(-50%);right:16px;line-height:0}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover{background:var(--brand-bg-secondary-default)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{min-height:var(--sizing-10);transition:.2s;display:flex;align-items:center;padding:var(--spacing-1) var(--spacing-4);white-space:normal;color:var(--neutral-text-tertiary);font-weight:700}:host::ng-deep .mrx-input-select.mrx-input-error{display:block}:host::ng-deep .mrx-input-select.mrx-input-error .ng-select .ng-select-container:before{border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-input-select .mrx-input-checked-error.ng-select .ng-select-container{background-color:var(--system-bg-negative-secondary)}:host::ng-deep .mrx-input-select .mrx-input-checked-error.ng-select .ng-select-container:hover{border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-input-select .mrx-input-checked-success.ng-select .ng-select-container{background-color:var(--system-bg-positive-secondary)}:host::ng-deep .mrx-input-select .mrx-input-checked-success.ng-select .ng-select-container:before{border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-input-select .mrx-input-checked-success.ng-select .ng-select-container:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}:host::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-summary-list .ng-value{max-width:100%!important}:host::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-summary-list .ng-value .ng-value-label{text-overflow:initial!important;overflow:initial}\n"], components: [{ type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$3.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i1$3.NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { type: i1$3.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { type: i1$3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2472
2472
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
2473
2473
|
type: Component,
|
|
2474
2474
|
args: [{ selector: 'mrx-input-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -2477,7 +2477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
2477
2477
|
useExisting: forwardRef(() => InputSelectComponent),
|
|
2478
2478
|
multi: true,
|
|
2479
2479
|
},
|
|
2480
|
-
], template: "<div class=\"mrx-input-select\" [class.mrx-input-error]=\"invalid\" [class]=\"wrapperCustomClasses\">\r\n <div [class.inputbox-error]=\"showEmptyFields && required && !isVerified\"\r\n [class.inputbox-success]=\"showEmptyFields && required && isVerified\">\r\n\r\n <ng-select\r\n [items]=\"items\"\r\n [ngModel]=\"value\"\r\n [addTag]=\"addTag\"\r\n [bindValue]=\"bindValue\"\r\n [bindLabel]=\"bindLabel\"\r\n [multiple]=\"multiple\"\r\n [maxSelectedItems]=\"maxSelectedItems\"\r\n [groupBy]=\"groupBy ? groupBy : ''\"\r\n [placeholder]=\"placeholder\"\r\n [trackByFn]=\"trackByFn\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [loading]=\"loading\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [clearable]=\"clearable\"\r\n [class]=\"getClasses\"\r\n [searchable]=\"searchable\"\r\n [closeOnSelect]=\"closeOnSelect\"\r\n [searchFn]=\"customSearchFn\"\r\n [notFoundText]=\"notFoundText\"\r\n [hideSelected]=\"hideSelected\"\r\n [maxlength]=\"maxLength.toString() || 'none'\"\r\n clearAllText=\"\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C\"\r\n addTagText=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\"\r\n loadingText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n (clear)=\"onClear($event)\"\r\n (search)=\"updateSearch($event)\"\r\n >\r\n <ng-template ng-label-tmp let-item=\"item\" *ngIf=\"disabled && disabledFromDisplay\">\r\n {{ displayValue }}\r\n </ng-template>\r\n <ng-template ng-optgroup-tmp let-item=\"item\" let-index=\"index\" *ngIf=\"selectOptionsGroupTemplate\">\r\n <ng-container *ngTemplateOutlet=\"selectOptionsGroupTemplate; context:{item: item, index: index}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-option-tmp let-item=\"item\" let-clear=\"clear\" *ngIf=\"selectOptionsTemplate\">\r\n <ng-container *ngTemplateOutlet=\"selectOptionsTemplate; context:{item: item, clear: clear}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" *ngIf=\"labelTemplate\">\r\n <ng-container *ngTemplateOutlet=\"labelTemplate; context:{item: item, clear: clear}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-tag-tmp let-items=\"items\" *ngIf=\"tagTemplate\">\r\n <ng-container *ngTemplateOutlet=\"tagTemplate; context:{items: items}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-loadingtext-tmp>\r\n <div class=\"ng-option disabled\">{{ loadLabel || '\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430' }}</div>\r\n </ng-template>\r\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\" *ngIf=\"multiLabelTemplate\">\r\n <ng-container *ngTemplateOutlet=\"multiLabelTemplate; context:{items: items, clear: clear}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\" *ngIf=\"multiCollapseCount\">\r\n <ng-container *ngIf=\"value.length < multiCollapseCount\">\r\n <div class=\"ng-value\" *ngFor=\"let item of items\">\r\n <span class=\"ng-value-label\">{{item['label']}}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\u00D7</span>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"value.length >= multiCollapseCount\" class=\"ng-summary-list\">\r\n <div class=\"ng-value ng-value-empty\">\r\n <span class=\"ng-value-label\">\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ value.length }}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template ng-loadingspinner-tmp>\r\n <mrx-loader\r\n [ngStyle]=\"{display: 'flex'}\"\r\n [color]=\"'brand'\" size=\"small\"\r\n customClasses=\"align-self-center mr-2\"\r\n ></mrx-loader>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\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: [":host::ng-deep .mrx-input-select{position:relative}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container{background-color:var(--neutral-bg-disabled)}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container:hover:before{border-color:var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container .ng-arrow-wrapper .ng-arrow:after{color:var(--neutral-icon-disabled)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container{align-items:flex-start;padding:var(--spacing-2);padding-right:var(--spacing-3);box-sizing:border-box;border:none!important;border-radius:var(--border-radius-1)!important;width:100%;height:auto;outline:none;transition:outline-width .2s,border .2s;z-index:1}:host::ng-deep .mrx-input-select .ng-select .ng-select-container:before{content:\"\";position:absolute;left:0;top:0;width:100%;height:100%;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;z-index:-1}:host::ng-deep .mrx-input-select .ng-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host::ng-deep .mrx-input-select .ng-select .ng-select-container:focus,:host::ng-deep .mrx-input-select .ng-select .ng-select-container:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)!important}:host::ng-deep .mrx-input-select .ng-select .ng-select-container:hover:before{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;position:relative;padding:var(--spacing-1) var(--spacing-2)!important;min-height:var(--sizing-8)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-placeholder{top:revert!important;color:var(--neutral-text-tertiary)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-value{display:flex;align-items:center;white-space:nowrap}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-label{overflow:hidden;font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{color:transparent}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-input{display:flex;align-items:center;height:auto;padding-left:var(--spacing-2)!important;z-index:-1}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-input>input{position:relative;z-index:-1;padding:0;transform:none;padding-right:var(--spacing-2)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .mrx-loader{transform:translateY(4px)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper{display:flex;align-items:center;justify-content:center;padding:0;transform:translateY(4px)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-arrow{font-size:0;position:relative;width:100%!important;height:100%!important;background-image:none;line-height:normal;border-radius:var(--border-radius-1)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:after,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-arrow:after{content:\"\";position:absolute;inset:0;width:100%;height:100%;font-family:mrx-icon-font;font-size:var(--body-extra-lg-font-size);color:var(--neutral-icon-default)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:hover .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:hover .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:focus .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:focus .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:hover .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:hover .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:focus .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:focus .ng-arrow{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper{margin-right:var(--spacing-2)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-clear:after{content:\"\\e92b\"}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:after{content:\"\\e923\"}:host::ng-deep .mrx-input-select .ng-select.ng-select-opened .ng-select-container{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.ng-select-clearable .ng-has-value .ng-value-container{max-width:calc(100% - 56px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container.ng-has-value .ng-value-container{max-width:calc(100% - 88px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container .ng-value-container{max-width:calc(100% - 56px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.mrx-input-loading .ng-value-container{max-width:calc(100% - 56px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple .ng-value-container{max-width:calc(100% - var(--sizing-6))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple .ng-value-container .ng-value{min-height:var(--sizing-8)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg .ng-select-container{min-height:var(--sizing-12)!important}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg .ng-select-container .ng-clear-wrapper,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg .ng-select-container .ng-arrow-wrapper{width:var(--sizing-6)!important;min-width:var(--sizing-6);height:var(--sizing-6);min-height:var(--sizing-6)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.ng-select-clearable .ng-has-value .ng-value-container{max-width:calc(100% - var(--sizing-10))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container.ng-has-value .ng-value-container{max-width:calc(100% - 64px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container .ng-value-container{max-width:calc(100% - var(--sizing-10))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.mrx-input-loading .ng-value-container{max-width:calc(100% - var(--sizing-10))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{font-size:var(--body-sm-font-size);line-height:var(--body-sm-line-height)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container{min-height:var(--sizing-10)!important}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-value-container{padding:0 var(--spacing-2) 0 var(--spacing-2)!important;min-height:var(--sizing-6);max-width:calc(100% - var(--sizing-4))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-value-container .ng-value{margin-bottom:0;min-height:var(--sizing-6)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .mrx-loader{width:var(--sizing-4);height:var(--sizing-4)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-clear-wrapper,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-arrow-wrapper{width:var(--sizing-4)!important;min-width:var(--sizing-4);height:var(--sizing-4);min-height:var(--sizing-4)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-clear-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-arrow-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-clear-wrapper .ng-arrow:after,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-arrow-wrapper .ng-arrow:after{font-size:var(--body-lg-font-size)}:host::ng-deep .mrx-input-select .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-label{text-overflow:ellipsis!important;overflow:hidden;max-width:100%!important;display:block;white-space:nowrap}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-value-container{gap:var(--spacing-2);padding:0!important;padding-right:var(--spacing-2)!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{display:flex;flex-direction:row;width:100%;max-width:max-content;margin:0;background:var(--brand-bg-secondary-default);border-radius:var(--border-radius-1);padding:0;padding-left:var(--spacing-2);padding-right:var(--spacing-1)}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-empty{padding-right:var(--spacing-3)}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{padding-right:var(--spacing-1);text-overflow:ellipsis!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{position:relative;min-width:var(--sizing-4);min-height:var(--sizing-4);order:1}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:after{content:\"\\e92b\";position:absolute;left:0;top:0;width:100%;height:100%;font-family:mrx-icon-font;font-size:var(--body-lg-font-size);color:var(--neutral-icon-default)}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);transform:none!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:0;padding-left:0!important}:host::ng-deep .mrx-input-select .ng-dropdown-panel{z-index:900;background:var(--brand-bg-tertiary-default);box-shadow:0 4px 10px #3a3a3a26;border-radius:var(--border-radius-1);margin-top:var(--spacing-1);border:none}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items{border-radius:var(--border-radius-1)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:8px;background-color:transparent}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{border-radius:var(--border-radius-2);background-color:transparent}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{border-radius:var(--border-radius-2);background-color:var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{min-height:var(--sizing-10);transition:.2s;display:flex;align-items:center;padding:var(--spacing-1) var(--spacing-4);white-space:normal}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:var(--spacing-6)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option span{display:flex;align-items:center;font-size:var(--body-md-font-size);line-height:var(--body-md-line-height)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--brand-bg-tertiary-default);color:var(--neutral-text-primary)!important}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:var(--brand-bg-tertiary-default);position:relative;padding-right:40px;color:var(--neutral-text-primary)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-label{font-weight:400}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected:before{content:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3336 4.6665L6.00032 11.9998L2.66699 8.66649' stroke='%23000' stroke-width='0.999998' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");position:absolute;top:50%;transform:translateY(-50%);right:16px;line-height:0}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover{background:var(--brand-bg-secondary-default)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{min-height:var(--sizing-10);transition:.2s;display:flex;align-items:center;padding:var(--spacing-1) var(--spacing-4);white-space:normal;color:var(--neutral-text-tertiary);font-weight:700}:host::ng-deep .mrx-input-select.mrx-input-error{display:block}:host::ng-deep .mrx-input-select.mrx-input-error .ng-select .ng-select-container:before{border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-input-select .mrx-input-checked-error.ng-select .ng-select-container{background-color:var(--system-bg-negative-secondary)}:host::ng-deep .mrx-input-select .mrx-input-checked-error.ng-select .ng-select-container:hover{border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-input-select .mrx-input-checked-success.ng-select .ng-select-container{background-color:var(--system-bg-positive-secondary)}:host::ng-deep .mrx-input-select .mrx-input-checked-success.ng-select .ng-select-container:before{border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-input-select .mrx-input-checked-success.ng-select .ng-select-container:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}:host::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-summary-list .ng-value{max-width:100%!important}:host::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-summary-list .ng-value .ng-value-label{text-overflow:initial!important;overflow:initial}\n"] }]
|
|
2480
|
+
], template: "<div class=\"mrx-input-select\" [class.mrx-input-error]=\"invalid\" [class]=\"wrapperCustomClasses\">\r\n <div [class.inputbox-error]=\"showEmptyFields && required && !isVerified\"\r\n [class.inputbox-success]=\"showEmptyFields && required && isVerified\">\r\n\r\n <ng-select\r\n [items]=\"items\"\r\n [ngModel]=\"value\"\r\n [addTag]=\"addTag\"\r\n [bindValue]=\"bindValue\"\r\n [bindLabel]=\"bindLabel\"\r\n [multiple]=\"multiple\"\r\n [maxSelectedItems]=\"maxSelectedItems\"\r\n [groupBy]=\"groupBy ? groupBy : ''\"\r\n [placeholder]=\"placeholder\"\r\n [trackByFn]=\"trackByFn\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [loading]=\"loading\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [clearable]=\"clearable\"\r\n [class]=\"getClasses\"\r\n [searchable]=\"searchable\"\r\n [closeOnSelect]=\"closeOnSelect\"\r\n [searchFn]=\"customSearchFn\"\r\n [notFoundText]=\"notFoundText\"\r\n [hideSelected]=\"hideSelected\"\r\n [maxlength]=\"maxLength.toString() || 'none'\"\r\n clearAllText=\"\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C\"\r\n addTagText=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\"\r\n loadingText=\"\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n (clear)=\"onClear($event)\"\r\n (search)=\"updateSearch($event)\"\r\n >\r\n <ng-template ng-label-tmp let-item=\"item\" *ngIf=\"disabled && disabledFromDisplay\">\r\n {{ displayValue }}\r\n </ng-template>\r\n <ng-template ng-optgroup-tmp let-item=\"item\" let-index=\"index\" *ngIf=\"selectOptionsGroupTemplate\">\r\n <ng-container *ngTemplateOutlet=\"selectOptionsGroupTemplate; context:{item: item, index: index}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-option-tmp let-item=\"item\" let-clear=\"clear\" *ngIf=\"selectOptionsTemplate\">\r\n <ng-container *ngTemplateOutlet=\"selectOptionsTemplate; context:{item: item, clear: clear}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" *ngIf=\"labelTemplate\">\r\n <ng-container *ngTemplateOutlet=\"labelTemplate; context:{item: item, clear: clear}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-tag-tmp let-items=\"items\" *ngIf=\"tagTemplate\">\r\n <ng-container *ngTemplateOutlet=\"tagTemplate; context:{items: items}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-loadingtext-tmp>\r\n <div class=\"ng-option disabled\">{{ loadLabel || '\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430' }}</div>\r\n </ng-template>\r\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\" *ngIf=\"multiLabelTemplate\">\r\n <ng-container *ngTemplateOutlet=\"multiLabelTemplate; context:{items: items, clear: clear}\"></ng-container>\r\n </ng-template>\r\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\" *ngIf=\"multiCollapseCount\">\r\n <ng-container *ngIf=\"value.length < multiCollapseCount\">\r\n <div class=\"ng-value\" *ngFor=\"let item of items\">\r\n <span class=\"ng-value-label\">{{item['label']}}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\u00D7</span>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"value.length >= multiCollapseCount\" class=\"ng-summary-list\">\r\n <div class=\"ng-value ng-value-empty\">\r\n <span class=\"ng-value-label\">\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ value.length }}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template ng-loadingspinner-tmp>\r\n <mrx-loader\r\n [ngStyle]=\"{display: 'flex'}\"\r\n [color]=\"'brand'\" size=\"small\"\r\n customClasses=\"align-self-center mr-2\"\r\n ></mrx-loader>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\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: [":host::ng-deep .mrx-input-select{position:relative}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container{background-color:var(--neutral-bg-disabled)}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value .ng-value-label{color:var(--neutral-text-tertiary, #71767E)}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container:hover:before{border-color:var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-input-select .ng-select.ng-select-disabled .ng-select-container .ng-arrow-wrapper .ng-arrow:after{color:var(--neutral-icon-disabled)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container{align-items:flex-start;padding:var(--spacing-2);padding-right:var(--spacing-3);box-sizing:border-box;border:none!important;border-radius:var(--border-radius-1)!important;width:100%;height:auto;outline:none;transition:outline-width .2s,border .2s;z-index:1}:host::ng-deep .mrx-input-select .ng-select .ng-select-container:before{content:\"\";position:absolute;left:0;top:0;width:100%;height:100%;border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);transition:.2s;z-index:-1}:host::ng-deep .mrx-input-select .ng-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host::ng-deep .mrx-input-select .ng-select .ng-select-container:focus,:host::ng-deep .mrx-input-select .ng-select .ng-select-container:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)!important}:host::ng-deep .mrx-input-select .ng-select .ng-select-container:hover:before{border-color:var(--neutral-bg-stroke-hover)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;position:relative;padding:var(--spacing-1) var(--spacing-2)!important;min-height:var(--sizing-8)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-placeholder{top:revert!important;color:var(--neutral-text-tertiary)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-value{display:flex;align-items:center;white-space:nowrap}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-label{overflow:hidden;font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{color:transparent}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-input{display:flex;align-items:center;height:auto;padding-left:var(--spacing-2)!important;z-index:-1}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-value-container .ng-input>input{position:relative;z-index:-1;padding:0;transform:none;padding-right:var(--spacing-2)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .mrx-loader{transform:translateY(4px)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper{display:flex;align-items:center;justify-content:center;padding:0;transform:translateY(4px)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-arrow{font-size:0;position:relative;width:100%!important;height:100%!important;background-image:none;line-height:normal;border-radius:var(--border-radius-1)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:after,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-arrow:after{content:\"\";position:absolute;inset:0;width:100%;height:100%;font-family:mrx-icon-font;font-size:var(--body-extra-lg-font-size);color:var(--neutral-icon-default)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:hover .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:hover .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:focus .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:focus .ng-clear,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:hover .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:hover .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper:focus .ng-arrow,:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper:focus .ng-arrow{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper{margin-right:var(--spacing-2)}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-clear-wrapper .ng-clear:after{content:\"\\e92b\"}:host::ng-deep .mrx-input-select .ng-select .ng-select-container .ng-arrow-wrapper .ng-arrow:after{content:\"\\e923\"}:host::ng-deep .mrx-input-select .ng-select.ng-select-opened .ng-select-container{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.ng-select-clearable .ng-has-value .ng-value-container{max-width:calc(100% - 56px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container.ng-has-value .ng-value-container{max-width:calc(100% - 88px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container .ng-value-container{max-width:calc(100% - 56px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple.mrx-input-loading .ng-value-container{max-width:calc(100% - 56px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple .ng-value-container{max-width:calc(100% - var(--sizing-6))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg.ng-select-multiple .ng-value-container .ng-value{min-height:var(--sizing-8)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg .ng-select-container{min-height:var(--sizing-12)!important}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg .ng-select-container .ng-clear-wrapper,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-lg .ng-select-container .ng-arrow-wrapper{width:var(--sizing-6)!important;min-width:var(--sizing-6);height:var(--sizing-6);min-height:var(--sizing-6)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.ng-select-clearable .ng-has-value .ng-value-container{max-width:calc(100% - var(--sizing-10))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container.ng-has-value .ng-value-container{max-width:calc(100% - 64px)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.ng-select-clearable.mrx-input-loading .ng-select-container .ng-value-container{max-width:calc(100% - var(--sizing-10))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple.mrx-input-loading .ng-value-container{max-width:calc(100% - var(--sizing-10))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{font-size:var(--body-sm-font-size);line-height:var(--body-sm-line-height)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container{min-height:var(--sizing-10)!important}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-value-container{padding:0 var(--spacing-2) 0 var(--spacing-2)!important;min-height:var(--sizing-6);max-width:calc(100% - var(--sizing-4))}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-value-container .ng-value{margin-bottom:0;min-height:var(--sizing-6)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .mrx-loader{width:var(--sizing-4);height:var(--sizing-4)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-clear-wrapper,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-arrow-wrapper{width:var(--sizing-4)!important;min-width:var(--sizing-4);height:var(--sizing-4);min-height:var(--sizing-4)}:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-clear-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-arrow-wrapper .ng-clear:after,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-clear-wrapper .ng-arrow:after,:host::ng-deep .mrx-input-select .ng-select.mrx-input-select-md .ng-select-container .ng-arrow-wrapper .ng-arrow:after{font-size:var(--body-lg-font-size)}:host::ng-deep .mrx-input-select .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-label{text-overflow:ellipsis!important;overflow:hidden;max-width:100%!important;display:block;white-space:nowrap}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-value-container{gap:var(--spacing-2);padding:0!important;padding-right:var(--spacing-2)!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{display:flex;flex-direction:row;width:100%;max-width:max-content;margin:0;background:var(--brand-bg-secondary-default);border-radius:var(--border-radius-1);padding:0;padding-left:var(--spacing-2);padding-right:var(--spacing-1)}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-empty{padding-right:var(--spacing-3)}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{padding-right:var(--spacing-1);text-overflow:ellipsis!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{position:relative;min-width:var(--sizing-4);min-height:var(--sizing-4);order:1}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:after{content:\"\\e92b\";position:absolute;left:0;top:0;width:100%;height:100%;font-family:mrx-icon-font;font-size:var(--body-lg-font-size);color:var(--neutral-icon-default)}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);transform:none!important}:host::ng-deep .mrx-input-select .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:0;padding-left:0!important}:host::ng-deep .mrx-input-select .ng-dropdown-panel{z-index:900;background:var(--brand-bg-tertiary-default);box-shadow:0 4px 10px #3a3a3a26;border-radius:var(--border-radius-1);margin-top:var(--spacing-1);border:none}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items{border-radius:var(--border-radius-1)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:8px;background-color:transparent}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{border-radius:var(--border-radius-2);background-color:transparent}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{border-radius:var(--border-radius-2);background-color:var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{min-height:var(--sizing-10);transition:.2s;display:flex;align-items:center;padding:var(--spacing-1) var(--spacing-4);white-space:normal}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:var(--spacing-6)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option span{display:flex;align-items:center;font-size:var(--body-md-font-size);line-height:var(--body-md-line-height)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--brand-bg-tertiary-default);color:var(--neutral-text-primary)!important}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background:var(--brand-bg-tertiary-default);position:relative;padding-right:40px;color:var(--neutral-text-primary)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-label{font-weight:400}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected:before{content:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3336 4.6665L6.00032 11.9998L2.66699 8.66649' stroke='%23000' stroke-width='0.999998' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");position:absolute;top:50%;transform:translateY(-50%);right:16px;line-height:0}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover{background:var(--brand-bg-secondary-default)}:host::ng-deep .mrx-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{min-height:var(--sizing-10);transition:.2s;display:flex;align-items:center;padding:var(--spacing-1) var(--spacing-4);white-space:normal;color:var(--neutral-text-tertiary);font-weight:700}:host::ng-deep .mrx-input-select.mrx-input-error{display:block}:host::ng-deep .mrx-input-select.mrx-input-error .ng-select .ng-select-container:before{border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-input-select .mrx-input-checked-error.ng-select .ng-select-container{background-color:var(--system-bg-negative-secondary)}:host::ng-deep .mrx-input-select .mrx-input-checked-error.ng-select .ng-select-container:hover{border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-input-select .mrx-input-checked-success.ng-select .ng-select-container{background-color:var(--system-bg-positive-secondary)}:host::ng-deep .mrx-input-select .mrx-input-checked-success.ng-select .ng-select-container:before{border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-input-select .mrx-input-checked-success.ng-select .ng-select-container:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}:host::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-summary-list .ng-value{max-width:100%!important}:host::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-summary-list .ng-value .ng-value-label{text-overflow:initial!important;overflow:initial}\n"] }]
|
|
2481
2481
|
}], propDecorators: { fields: [{
|
|
2482
2482
|
type: Input
|
|
2483
2483
|
}], size: [{
|
|
@@ -4040,7 +4040,7 @@ class TableComponent {
|
|
|
4040
4040
|
}
|
|
4041
4041
|
}
|
|
4042
4042
|
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4043
|
-
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableComponent, selector: "mrx-table", inputs: { type: "type", data: "data", pageSize: "pageSize", currentPage: "currentPage", total: "total", link: "link", isLoading: "isLoading", sort: "sort", trackById: "trackById", sortable: "sortable", striped: "striped", customClasses: "customClasses", emptyResultMsg: "emptyResultMsg", hovered: "hovered", autoHeight: "autoHeight", headerSettings: "headerSettings", contentSettings: "contentSettings", paginatorSettings: "paginatorSettings", setPageable: ["pageable", "setPageable"] }, outputs: { dataStateChanged: "dataStateChanged", downloadData: "downloadData", changeTypeTable: "changeTypeTable", change: "change" }, queries: [{ propertyName: "templateCard", first: true, predicate: ["templateCard"], descendants: true }, { propertyName: "emptyResultMsgTemplate", first: true, predicate: ["emptyResultMsgTemplate"], descendants: true }, { propertyName: "contentChildren", predicate: ColumnComponent }], ngImport: i0, template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n <ng-container *ngIf=\"headerSettings\">\r\n <div\r\n class=\"mrx-table-card-header pt-2 pb-2 mb-3\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'default'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"counterTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n <div class=\"ml-4\" *ngIf=\"headerSettings.toggle\">\r\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-table-card-header mb-3 pt-2 pb-2\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'second'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"downloadTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container [ngSwitch]=\"type\">\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'default'\"\r\n [class.mrx-table__wrapper--substrate]=\"contentSettings.substrate\">\r\n <table\r\n [class.table-striped]=\"striped\"\r\n [class.table-solid]=\"!striped\"\r\n [class.mt-2]=\"contentSettings.substrate\"\r\n [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n >\r\n <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n <tr>\r\n <th *ngFor=\"let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn\" [class]=\"col.customClasses\">\r\n <ng-container *ngIf=\"!col.templateHead; else headerItemTemplate\">\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <span>{{ col.label }}</span>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <div><span>{{ col.label }}</span></div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #headerItemTemplate>\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col }\"></ng-container>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col, index, first, last }\"></ng-container>\r\n </ng-template>\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let dataItem of data; let index = index; let first = first; let last = last\" [class.-hovered]=\"hovered\">\r\n <td\r\n #tableTD\r\n class=\"p-0\"\r\n *ngFor=\"let col of contentChildren\"\r\n [class]=\"col.customClasses\"\r\n >\r\n <a\r\n class=\"link-wrapper td-content-wrapper\"\r\n [href]=\"getLinkForStroke(link, dataItem)\"\r\n *ngIf=\"link && col['isLink']; else defaultTemplate\"\r\n ></a>\r\n\r\n <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n <div class=\"p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n </ng-container>\r\n\r\n <ng-template #bodyItemTemplate>\r\n <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n </ng-template>\r\n\r\n <ng-template #defaultTemplate>\r\n <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n </ng-container>\r\n\r\n <ng-template #bodyItemTemplate>\r\n <div class=\"td-content-wrapper h-100\">\r\n <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\" >\r\n <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\" >\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\" >\r\n <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n <mrx-paginator\r\n *ngIf=\"pageable\"\r\n [total]=\"total\"\r\n [pageSize]=\"pageSize\"\r\n [position]=\"pageable.position\"\r\n [pageSizes]=\"pageable.pageSizes\"\r\n [currentPage]=\"currentPage\"\r\n [withPageSize]=\"pageable.withPageSize\"\r\n (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n <span class=\"d-flex align-items-center\" *ngIf=\"headerSettings?.count\">\r\n {{ total }} {{headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439'}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n <div class=\"mrx-table-sort-scale\" (click)=\"changeSort()\">\r\n <span class=\"mrx-table-sort-scale__title\">\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n <div class=\"mrx-table-sort-scale__icon\">\r\n <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n </div>\r\n </div>\r\n <ng-select\r\n bindLabel=\"sortLabel\"\r\n bindValue=\"name\"\r\n [items]=\"colArray\"\r\n [ngModel]=\"selectedSort\"\r\n (change)=\"updateSortSelect($event)\"\r\n [clearable]=\"false\"\r\n [searchable]=\"false\"\r\n [closeOnSelect]=\"true\"\r\n ></ng-select>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n <div class=\"mrx-table-toggle\">\r\n <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n </div>\r\n <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n {{emptyResultMsg}}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;margin-right:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-sort-scale__title{font-family:PT Sans;font-style:normal;font-weight:400;font-size:14px;line-height:143%;color:var(--neutral-text-primary, #262626);margin-right:12px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(even){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"], components: [{ type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { type: PaginatorComponent, selector: "mrx-paginator", inputs: ["pageSizes", "currentPage", "pageSize", "total", "customClasses", "isEmptyPaginator", "isPaginatorText", "paginatorText", "position", "withPageSize"], outputs: ["dataStateChanged"] }, { type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
|
|
4043
|
+
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableComponent, selector: "mrx-table", inputs: { type: "type", data: "data", pageSize: "pageSize", currentPage: "currentPage", total: "total", link: "link", isLoading: "isLoading", sort: "sort", trackById: "trackById", sortable: "sortable", striped: "striped", customClasses: "customClasses", emptyResultMsg: "emptyResultMsg", hovered: "hovered", autoHeight: "autoHeight", headerSettings: "headerSettings", contentSettings: "contentSettings", paginatorSettings: "paginatorSettings", setPageable: ["pageable", "setPageable"] }, outputs: { dataStateChanged: "dataStateChanged", downloadData: "downloadData", changeTypeTable: "changeTypeTable", change: "change" }, queries: [{ propertyName: "templateCard", first: true, predicate: ["templateCard"], descendants: true }, { propertyName: "emptyResultMsgTemplate", first: true, predicate: ["emptyResultMsgTemplate"], descendants: true }, { propertyName: "contentChildren", predicate: ColumnComponent }], ngImport: i0, template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n <ng-container *ngIf=\"headerSettings\">\r\n <div\r\n class=\"mrx-table-card-header pt-2 pb-2 mb-3\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'default'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"counterTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n <div class=\"ml-4\" *ngIf=\"headerSettings.toggle\">\r\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-table-card-header mb-3 pt-2 pb-2\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'second'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"downloadTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container [ngSwitch]=\"type\">\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'default'\"\r\n [class.mrx-table__wrapper--substrate]=\"contentSettings.substrate\">\r\n <table\r\n [class.table-striped]=\"striped\"\r\n [class.table-solid]=\"!striped\"\r\n [class.mt-2]=\"contentSettings.substrate\"\r\n [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n >\r\n <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n <tr>\r\n <th *ngFor=\"let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn\" [class]=\"col.customClasses\">\r\n <ng-container *ngIf=\"!col.templateHead; else headerItemTemplate\">\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <span>{{ col.label }}</span>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <div><span>{{ col.label }}</span></div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #headerItemTemplate>\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col }\"></ng-container>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col, index, first, last }\"></ng-container>\r\n </ng-template>\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let dataItem of data; let index = index; let first = first; let last = last\" [class.-hovered]=\"hovered\">\r\n <td\r\n #tableTD\r\n class=\"p-0\"\r\n *ngFor=\"let col of contentChildren\"\r\n [class]=\"col.customClasses\"\r\n >\r\n <a\r\n class=\"link-wrapper td-content-wrapper\"\r\n [href]=\"getLinkForStroke(link, dataItem)\"\r\n *ngIf=\"link && col['isLink']\"\r\n ></a>\r\n\r\n <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n </ng-container>\r\n\r\n <ng-template #bodyItemTemplate>\r\n <div class=\"td-content-wrapper h-100\">\r\n <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n </div>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\" >\r\n <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\" >\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\" >\r\n <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n <mrx-paginator\r\n *ngIf=\"pageable\"\r\n [total]=\"total\"\r\n [pageSize]=\"pageSize\"\r\n [position]=\"pageable.position\"\r\n [pageSizes]=\"pageable.pageSizes\"\r\n [currentPage]=\"currentPage\"\r\n [withPageSize]=\"pageable.withPageSize\"\r\n (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n <span class=\"d-flex align-items-center\" *ngIf=\"headerSettings?.count\">\r\n {{ total }} {{headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439'}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n <div class=\"mrx-table-sort-scale\" (click)=\"changeSort()\">\r\n <span class=\"mrx-table-sort-scale__title\">\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n <div class=\"mrx-table-sort-scale__icon\">\r\n <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n </div>\r\n </div>\r\n <ng-select\r\n bindLabel=\"sortLabel\"\r\n bindValue=\"name\"\r\n [items]=\"colArray\"\r\n [ngModel]=\"selectedSort\"\r\n (change)=\"updateSortSelect($event)\"\r\n [clearable]=\"false\"\r\n [searchable]=\"false\"\r\n [closeOnSelect]=\"true\"\r\n ></ng-select>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n <div class=\"mrx-table-toggle\">\r\n <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n </div>\r\n <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n {{emptyResultMsg}}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;margin-right:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-sort-scale__title{font-family:PT Sans;font-style:normal;font-weight:400;font-size:14px;line-height:143%;color:var(--neutral-text-primary, #262626);margin-right:12px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(even){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"], components: [{ type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { type: PaginatorComponent, selector: "mrx-paginator", inputs: ["pageSizes", "currentPage", "pageSize", "total", "customClasses", "isEmptyPaginator", "isPaginatorText", "paginatorText", "position", "withPageSize"], outputs: ["dataStateChanged"] }, { type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
|
|
4044
4044
|
trigger('visibleLoading', [
|
|
4045
4045
|
state('in', style({ opacity: 1, visibility: 'visible' })),
|
|
4046
4046
|
state('out', style({ opacity: 0, visibility: 'hidden' })),
|
|
@@ -4069,7 +4069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
4069
4069
|
animate('300ms ease-in-out', style({ opacity: 1 }))
|
|
4070
4070
|
])])
|
|
4071
4071
|
])
|
|
4072
|
-
], template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n <ng-container *ngIf=\"headerSettings\">\r\n <div\r\n class=\"mrx-table-card-header pt-2 pb-2 mb-3\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'default'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"counterTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n <div class=\"ml-4\" *ngIf=\"headerSettings.toggle\">\r\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-table-card-header mb-3 pt-2 pb-2\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'second'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"downloadTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container [ngSwitch]=\"type\">\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'default'\"\r\n [class.mrx-table__wrapper--substrate]=\"contentSettings.substrate\">\r\n <table\r\n [class.table-striped]=\"striped\"\r\n [class.table-solid]=\"!striped\"\r\n [class.mt-2]=\"contentSettings.substrate\"\r\n [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n >\r\n <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n <tr>\r\n <th *ngFor=\"let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn\" [class]=\"col.customClasses\">\r\n <ng-container *ngIf=\"!col.templateHead; else headerItemTemplate\">\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <span>{{ col.label }}</span>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <div><span>{{ col.label }}</span></div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #headerItemTemplate>\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col }\"></ng-container>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col, index, first, last }\"></ng-container>\r\n </ng-template>\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let dataItem of data; let index = index; let first = first; let last = last\" [class.-hovered]=\"hovered\">\r\n <td\r\n #tableTD\r\n class=\"p-0\"\r\n *ngFor=\"let col of contentChildren\"\r\n [class]=\"col.customClasses\"\r\n >\r\n <a\r\n class=\"link-wrapper td-content-wrapper\"\r\n [href]=\"getLinkForStroke(link, dataItem)\"\r\n *ngIf=\"link && col['isLink']; else defaultTemplate\"\r\n ></a>\r\n\r\n <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n <div class=\"p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n </ng-container>\r\n\r\n <ng-template #bodyItemTemplate>\r\n <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n </ng-template>\r\n\r\n <ng-template #defaultTemplate>\r\n <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n </ng-container>\r\n\r\n <ng-template #bodyItemTemplate>\r\n <div class=\"td-content-wrapper h-100\">\r\n <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\" >\r\n <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\" >\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\" >\r\n <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n <mrx-paginator\r\n *ngIf=\"pageable\"\r\n [total]=\"total\"\r\n [pageSize]=\"pageSize\"\r\n [position]=\"pageable.position\"\r\n [pageSizes]=\"pageable.pageSizes\"\r\n [currentPage]=\"currentPage\"\r\n [withPageSize]=\"pageable.withPageSize\"\r\n (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n <span class=\"d-flex align-items-center\" *ngIf=\"headerSettings?.count\">\r\n {{ total }} {{headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439'}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n <div class=\"mrx-table-sort-scale\" (click)=\"changeSort()\">\r\n <span class=\"mrx-table-sort-scale__title\">\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n <div class=\"mrx-table-sort-scale__icon\">\r\n <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n </div>\r\n </div>\r\n <ng-select\r\n bindLabel=\"sortLabel\"\r\n bindValue=\"name\"\r\n [items]=\"colArray\"\r\n [ngModel]=\"selectedSort\"\r\n (change)=\"updateSortSelect($event)\"\r\n [clearable]=\"false\"\r\n [searchable]=\"false\"\r\n [closeOnSelect]=\"true\"\r\n ></ng-select>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n <div class=\"mrx-table-toggle\">\r\n <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n </div>\r\n <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n {{emptyResultMsg}}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;margin-right:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-sort-scale__title{font-family:PT Sans;font-style:normal;font-weight:400;font-size:14px;line-height:143%;color:var(--neutral-text-primary, #262626);margin-right:12px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(even){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"] }]
|
|
4072
|
+
], template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n <ng-container *ngIf=\"headerSettings\">\r\n <div\r\n class=\"mrx-table-card-header pt-2 pb-2 mb-3\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'default'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"counterTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n <div class=\"ml-4\" *ngIf=\"headerSettings.toggle\">\r\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-table-card-header mb-3 pt-2 pb-2\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'second'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"downloadTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container [ngSwitch]=\"type\">\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'default'\"\r\n [class.mrx-table__wrapper--substrate]=\"contentSettings.substrate\">\r\n <table\r\n [class.table-striped]=\"striped\"\r\n [class.table-solid]=\"!striped\"\r\n [class.mt-2]=\"contentSettings.substrate\"\r\n [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n >\r\n <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n <tr>\r\n <th *ngFor=\"let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn\" [class]=\"col.customClasses\">\r\n <ng-container *ngIf=\"!col.templateHead; else headerItemTemplate\">\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <span>{{ col.label }}</span>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <div><span>{{ col.label }}</span></div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #headerItemTemplate>\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col }\"></ng-container>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col, index, first, last }\"></ng-container>\r\n </ng-template>\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let dataItem of data; let index = index; let first = first; let last = last\" [class.-hovered]=\"hovered\">\r\n <td\r\n #tableTD\r\n class=\"p-0\"\r\n *ngFor=\"let col of contentChildren\"\r\n [class]=\"col.customClasses\"\r\n >\r\n <a\r\n class=\"link-wrapper td-content-wrapper\"\r\n [href]=\"getLinkForStroke(link, dataItem)\"\r\n *ngIf=\"link && col['isLink']\"\r\n ></a>\r\n\r\n <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n </ng-container>\r\n\r\n <ng-template #bodyItemTemplate>\r\n <div class=\"td-content-wrapper h-100\">\r\n <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n </div>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\" >\r\n <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\" >\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\" >\r\n <mrx-loader size=\"large\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n <mrx-paginator\r\n *ngIf=\"pageable\"\r\n [total]=\"total\"\r\n [pageSize]=\"pageSize\"\r\n [position]=\"pageable.position\"\r\n [pageSizes]=\"pageable.pageSizes\"\r\n [currentPage]=\"currentPage\"\r\n [withPageSize]=\"pageable.withPageSize\"\r\n (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n <span class=\"d-flex align-items-center\" *ngIf=\"headerSettings?.count\">\r\n {{ total }} {{headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439'}}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n <div class=\"mrx-table-sort-scale\" (click)=\"changeSort()\">\r\n <span class=\"mrx-table-sort-scale__title\">\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n <div class=\"mrx-table-sort-scale__icon\">\r\n <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n </div>\r\n </div>\r\n <ng-select\r\n bindLabel=\"sortLabel\"\r\n bindValue=\"name\"\r\n [items]=\"colArray\"\r\n [ngModel]=\"selectedSort\"\r\n (change)=\"updateSortSelect($event)\"\r\n [clearable]=\"false\"\r\n [searchable]=\"false\"\r\n [closeOnSelect]=\"true\"\r\n ></ng-select>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n <div class=\"mrx-table-toggle\">\r\n <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n </div>\r\n <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n {{emptyResultMsg}}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;margin-right:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-sort-scale__title{font-family:PT Sans;font-style:normal;font-weight:400;font-size:14px;line-height:143%;color:var(--neutral-text-primary, #262626);margin-right:12px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(even){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#FFFFFF;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"] }]
|
|
4073
4073
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { contentChildren: [{
|
|
4074
4074
|
type: ContentChildren,
|
|
4075
4075
|
args: [ColumnComponent]
|
|
@@ -10828,7 +10828,7 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
10828
10828
|
useExisting: forwardRef(() => EditorComponent),
|
|
10829
10829
|
multi: true,
|
|
10830
10830
|
},
|
|
10831
|
-
], viewQueries: [{ propertyName: "editorElementRef", first: true, predicate: ["editorElementRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"mrx-editor\"\r\n [class.mrx-input-focused]=\"isFocused\"\r\n [class.mrx-input-error]=\"getInvalid\"\r\n [class]=\"getClasses\"\r\n>\r\n <jodit-editor\r\n #editorElementRef\r\n [config]=\"defaultConfig\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n (onFocus)=\"changeFocused(true)\"\r\n (onBlur)=\"onBlur(false)\"\r\n ></jodit-editor>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getInvalidMessage\"\r\n [invalidMessage]=\"getInvalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state type=\"editor\" [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n\r\n <mrx-chars-left\r\n *ngIf=\"!disabled && maxLength\"\r\n [valueLength]=\"valueLength\"\r\n [maxlength]=\"maxLength\"\r\n ></mrx-chars-left>\r\n</div>\r\n", styles: [":host::ng-deep .mrx-editor .jodit-toolbar__box:not(:empty){background-color:#fff;padding:4px}:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-collection_size_middle.jodit-toolbar-collection_mode_horizontal,:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-collection_size_middle.jodit-toolbar-editor-collection_mode_horizontal,:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-editor-collection_size_middle.jodit-toolbar-collection_mode_horizontal,:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-editor-collection_size_middle.jodit-toolbar-editor-collection_mode_horizontal{background-image:none}:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-editor-collection:after{display:none}:host::ng-deep .mrx-editor .jodit-ui-group{flex-wrap:wrap;gap:var(--sizing-1)}:host::ng-deep .mrx-editor .jodit-toolbar-button{height:28px;margin:0;border:none}:host::ng-deep .mrx-editor .jodit-toolbar-button.jodit-toolbar-button_with-trigger_true:hover:not([disabled]){border-color:transparent;box-shadow:0 1px 4px #3a3a3a4d}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__button{height:28px}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__button:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__button[aria-pressed=true]:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__trigger:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-editor .jodit-ui-separator{border-color:var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-editor .jodit-add-new-line{display:none}:host::ng-deep .mrx-editor{position:relative}:host::ng-deep .mrx-editor .jodit-container .jodit-wysiwyg{padding:var(--spacing-3) var(--spacing-4)}:host::ng-deep .mrx-editor .jodit-container:not(.jodit_inline).jodit_disabled .jodit-toolbar__box{background-color:var(--neutral-bg-island-default)}:host::ng-deep .mrx-editor .jodit-container:not(.jodit_inline).jodit_disabled .jodit-workplace{opacity:1;background-color:var(--neutral-bg-disabled)}:host::ng-deep .mrx-editor.mrx-input-error .jodit-container,:host::ng-deep .mrx-editor.mrx-input-checked-error .jodit-container{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}:host::ng-deep .mrx-editor.mrx-input-error .jodit-container .jodit-toolbar__box:not(:empty),:host::ng-deep .mrx-editor.mrx-input-checked-error .jodit-container .jodit-toolbar__box:not(:empty){border-bottom:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}:host::ng-deep .mrx-editor.mrx-input-success .jodit-container,:host::ng-deep .mrx-editor.mrx-input-checked-success .jodit-container{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}:host::ng-deep .mrx-editor.mrx-input-success .jodit-container .jodit-toolbar__box:not(:empty),:host::ng-deep .mrx-editor.mrx-input-checked-success .jodit-container .jodit-toolbar__box:not(:empty){border-bottom:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}:host::ng-deep .mrx-editor.mrx-input-checked-error .jodit-workplace{background-color:var(--system-bg-negative-secondary)!important}:host::ng-deep .mrx-editor.mrx-input-checked-success .jodit-workplace{background-color:var(--system-bg-positive-secondary)!important}:host::ng-deep .mrx-editor .jodit-container{transition:border .2s;border:var(--border-width-default) solid var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-editor .jodit-container:not(.jodit_inline),:host::ng-deep .mrx-editor .jodit-container .jodit-workplace{border-radius:4px}:host::ng-deep .mrx-editor .jodit-container .jodit-toolbar__box:not(:empty){transition:border .2s;border-bottom:var(--border-width-default) solid var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-editor .jodit-container:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}:host::ng-deep .mrx-editor .jodit-container:hover .jodit-toolbar__box:not(:empty){border-bottom:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}:host::ng-deep .mrx-editor.mrx-input-focused .jodit-container{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-popup__content:not(:empty){background-color:#fff;padding:4px}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-ui-group{flex-wrap:wrap;gap:var(--sizing-1)}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-toolbar-button.jodit-toolbar-button_with-trigger_true:hover:not([disabled]){border-color:transparent;box-shadow:0 1px 4px #3a3a3a4d}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-toolbar-button .jodit-toolbar-button__button:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-toolbar-button .jodit-toolbar-button__trigger:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}::ng-deep .jodit.jodit-popup-container .jodit-toolbar-button_nullable{display:none!important}::ng-deep .jodit.jodit-popup-container .jodit-form__table-creator-box .jodit-form__container span.jodit_hovered{background-color:var(--system-diagram-diagram-2);border-color:var(--system-diagram-diagram-2)}::ng-deep .jodit.jodit-popup-container .jodit-popup__content .jodit-ui-checkbox__wrapper .jodit-ui-checkbox__input{-webkit-appearance:checkbox!important;position:static!important;width:auto!important}\n"], components: [{ type: i1$8.JoditAngularComponent, selector: "jodit-editor", inputs: ["config", "tagName", "id", "defaultValue"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10831
|
+
], viewQueries: [{ propertyName: "editorElementRef", first: true, predicate: ["editorElementRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"mrx-editor\"\r\n [class.mrx-input-focused]=\"isFocused\"\r\n [class.mrx-input-error]=\"getInvalid\"\r\n [class]=\"getClasses\"\r\n>\r\n <jodit-editor\r\n #editorElementRef\r\n [config]=\"defaultConfig\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n (onFocus)=\"changeFocused(true)\"\r\n (onBlur)=\"onBlur(false)\"\r\n ></jodit-editor>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getInvalidMessage\"\r\n [invalidMessage]=\"getInvalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state type=\"editor\" [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n\r\n <mrx-chars-left\r\n *ngIf=\"!disabled && maxLength\"\r\n [valueLength]=\"valueLength\"\r\n [maxlength]=\"maxLength\"\r\n ></mrx-chars-left>\r\n</div>\r\n", styles: [":host::ng-deep .mrx-editor .jodit-toolbar__box:not(:empty){background-color:#fff;padding:4px}:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-collection_size_middle.jodit-toolbar-collection_mode_horizontal,:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-collection_size_middle.jodit-toolbar-editor-collection_mode_horizontal,:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-editor-collection_size_middle.jodit-toolbar-collection_mode_horizontal,:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-editor-collection_size_middle.jodit-toolbar-editor-collection_mode_horizontal{background-image:none}:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-editor-collection:after{display:none}:host::ng-deep .mrx-editor .jodit-ui-group{flex-wrap:wrap;gap:var(--sizing-1)}:host::ng-deep .mrx-editor .jodit-toolbar-button{height:28px;margin:0;border:none}:host::ng-deep .mrx-editor .jodit-toolbar-button.jodit-toolbar-button_with-trigger_true:hover:not([disabled]){border-color:transparent;box-shadow:0 1px 4px #3a3a3a4d}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__button{height:28px}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__button:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__button[aria-pressed=true]:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__trigger:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-editor .jodit-ui-separator{border-color:var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-editor .jodit-add-new-line{display:none}:host::ng-deep .mrx-editor{position:relative}:host::ng-deep .mrx-editor .jodit-container .jodit-wysiwyg{padding:var(--spacing-3) var(--spacing-4)}:host::ng-deep .mrx-editor .jodit-container:not(.jodit_inline).jodit_disabled .jodit-toolbar__box{background-color:var(--neutral-bg-island-default)}:host::ng-deep .mrx-editor .jodit-container:not(.jodit_inline).jodit_disabled .jodit-workplace{opacity:1;background-color:var(--neutral-bg-disabled);color:var(--neutral-text-tertiary, #71767E)}:host::ng-deep .mrx-editor.mrx-input-error .jodit-container,:host::ng-deep .mrx-editor.mrx-input-checked-error .jodit-container{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}:host::ng-deep .mrx-editor.mrx-input-error .jodit-container .jodit-toolbar__box:not(:empty),:host::ng-deep .mrx-editor.mrx-input-checked-error .jodit-container .jodit-toolbar__box:not(:empty){border-bottom:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}:host::ng-deep .mrx-editor.mrx-input-success .jodit-container,:host::ng-deep .mrx-editor.mrx-input-checked-success .jodit-container{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}:host::ng-deep .mrx-editor.mrx-input-success .jodit-container .jodit-toolbar__box:not(:empty),:host::ng-deep .mrx-editor.mrx-input-checked-success .jodit-container .jodit-toolbar__box:not(:empty){border-bottom:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}:host::ng-deep .mrx-editor.mrx-input-checked-error .jodit-workplace{background-color:var(--system-bg-negative-secondary)!important}:host::ng-deep .mrx-editor.mrx-input-checked-success .jodit-workplace{background-color:var(--system-bg-positive-secondary)!important}:host::ng-deep .mrx-editor .jodit-container{transition:border .2s;border:var(--border-width-default) solid var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-editor .jodit-container:not(.jodit_inline),:host::ng-deep .mrx-editor .jodit-container .jodit-workplace{border-radius:4px}:host::ng-deep .mrx-editor .jodit-container .jodit-toolbar__box:not(:empty){transition:border .2s;border-bottom:var(--border-width-default) solid var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-editor .jodit-container:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}:host::ng-deep .mrx-editor .jodit-container:hover .jodit-toolbar__box:not(:empty){border-bottom:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}:host::ng-deep .mrx-editor.mrx-input-focused .jodit-container{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-popup__content:not(:empty){background-color:#fff;padding:4px}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-ui-group{flex-wrap:wrap;gap:var(--sizing-1)}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-toolbar-button.jodit-toolbar-button_with-trigger_true:hover:not([disabled]){border-color:transparent;box-shadow:0 1px 4px #3a3a3a4d}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-toolbar-button .jodit-toolbar-button__button:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-toolbar-button .jodit-toolbar-button__trigger:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}::ng-deep .jodit.jodit-popup-container .jodit-toolbar-button_nullable{display:none!important}::ng-deep .jodit.jodit-popup-container .jodit-form__table-creator-box .jodit-form__container span.jodit_hovered{background-color:var(--system-diagram-diagram-2);border-color:var(--system-diagram-diagram-2)}::ng-deep .jodit.jodit-popup-container .jodit-popup__content .jodit-ui-checkbox__wrapper .jodit-ui-checkbox__input{-webkit-appearance:checkbox!important;position:static!important;width:auto!important}\n"], components: [{ type: i1$8.JoditAngularComponent, selector: "jodit-editor", inputs: ["config", "tagName", "id", "defaultValue"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: CharsLeftComponent, selector: "mrx-chars-left", inputs: ["maxlength", "valueLength", "value"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10832
10832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EditorComponent, decorators: [{
|
|
10833
10833
|
type: Component,
|
|
10834
10834
|
args: [{ selector: 'mrx-editor', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -10837,7 +10837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
10837
10837
|
useExisting: forwardRef(() => EditorComponent),
|
|
10838
10838
|
multi: true,
|
|
10839
10839
|
},
|
|
10840
|
-
], template: "<div\r\n class=\"mrx-editor\"\r\n [class.mrx-input-focused]=\"isFocused\"\r\n [class.mrx-input-error]=\"getInvalid\"\r\n [class]=\"getClasses\"\r\n>\r\n <jodit-editor\r\n #editorElementRef\r\n [config]=\"defaultConfig\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n (onFocus)=\"changeFocused(true)\"\r\n (onBlur)=\"onBlur(false)\"\r\n ></jodit-editor>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getInvalidMessage\"\r\n [invalidMessage]=\"getInvalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state type=\"editor\" [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n\r\n <mrx-chars-left\r\n *ngIf=\"!disabled && maxLength\"\r\n [valueLength]=\"valueLength\"\r\n [maxlength]=\"maxLength\"\r\n ></mrx-chars-left>\r\n</div>\r\n", styles: [":host::ng-deep .mrx-editor .jodit-toolbar__box:not(:empty){background-color:#fff;padding:4px}:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-collection_size_middle.jodit-toolbar-collection_mode_horizontal,:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-collection_size_middle.jodit-toolbar-editor-collection_mode_horizontal,:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-editor-collection_size_middle.jodit-toolbar-collection_mode_horizontal,:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-editor-collection_size_middle.jodit-toolbar-editor-collection_mode_horizontal{background-image:none}:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-editor-collection:after{display:none}:host::ng-deep .mrx-editor .jodit-ui-group{flex-wrap:wrap;gap:var(--sizing-1)}:host::ng-deep .mrx-editor .jodit-toolbar-button{height:28px;margin:0;border:none}:host::ng-deep .mrx-editor .jodit-toolbar-button.jodit-toolbar-button_with-trigger_true:hover:not([disabled]){border-color:transparent;box-shadow:0 1px 4px #3a3a3a4d}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__button{height:28px}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__button:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__button[aria-pressed=true]:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__trigger:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-editor .jodit-ui-separator{border-color:var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-editor .jodit-add-new-line{display:none}:host::ng-deep .mrx-editor{position:relative}:host::ng-deep .mrx-editor .jodit-container .jodit-wysiwyg{padding:var(--spacing-3) var(--spacing-4)}:host::ng-deep .mrx-editor .jodit-container:not(.jodit_inline).jodit_disabled .jodit-toolbar__box{background-color:var(--neutral-bg-island-default)}:host::ng-deep .mrx-editor .jodit-container:not(.jodit_inline).jodit_disabled .jodit-workplace{opacity:1;background-color:var(--neutral-bg-disabled)}:host::ng-deep .mrx-editor.mrx-input-error .jodit-container,:host::ng-deep .mrx-editor.mrx-input-checked-error .jodit-container{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}:host::ng-deep .mrx-editor.mrx-input-error .jodit-container .jodit-toolbar__box:not(:empty),:host::ng-deep .mrx-editor.mrx-input-checked-error .jodit-container .jodit-toolbar__box:not(:empty){border-bottom:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}:host::ng-deep .mrx-editor.mrx-input-success .jodit-container,:host::ng-deep .mrx-editor.mrx-input-checked-success .jodit-container{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}:host::ng-deep .mrx-editor.mrx-input-success .jodit-container .jodit-toolbar__box:not(:empty),:host::ng-deep .mrx-editor.mrx-input-checked-success .jodit-container .jodit-toolbar__box:not(:empty){border-bottom:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}:host::ng-deep .mrx-editor.mrx-input-checked-error .jodit-workplace{background-color:var(--system-bg-negative-secondary)!important}:host::ng-deep .mrx-editor.mrx-input-checked-success .jodit-workplace{background-color:var(--system-bg-positive-secondary)!important}:host::ng-deep .mrx-editor .jodit-container{transition:border .2s;border:var(--border-width-default) solid var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-editor .jodit-container:not(.jodit_inline),:host::ng-deep .mrx-editor .jodit-container .jodit-workplace{border-radius:4px}:host::ng-deep .mrx-editor .jodit-container .jodit-toolbar__box:not(:empty){transition:border .2s;border-bottom:var(--border-width-default) solid var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-editor .jodit-container:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}:host::ng-deep .mrx-editor .jodit-container:hover .jodit-toolbar__box:not(:empty){border-bottom:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}:host::ng-deep .mrx-editor.mrx-input-focused .jodit-container{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-popup__content:not(:empty){background-color:#fff;padding:4px}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-ui-group{flex-wrap:wrap;gap:var(--sizing-1)}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-toolbar-button.jodit-toolbar-button_with-trigger_true:hover:not([disabled]){border-color:transparent;box-shadow:0 1px 4px #3a3a3a4d}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-toolbar-button .jodit-toolbar-button__button:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-toolbar-button .jodit-toolbar-button__trigger:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}::ng-deep .jodit.jodit-popup-container .jodit-toolbar-button_nullable{display:none!important}::ng-deep .jodit.jodit-popup-container .jodit-form__table-creator-box .jodit-form__container span.jodit_hovered{background-color:var(--system-diagram-diagram-2);border-color:var(--system-diagram-diagram-2)}::ng-deep .jodit.jodit-popup-container .jodit-popup__content .jodit-ui-checkbox__wrapper .jodit-ui-checkbox__input{-webkit-appearance:checkbox!important;position:static!important;width:auto!important}\n"] }]
|
|
10840
|
+
], template: "<div\r\n class=\"mrx-editor\"\r\n [class.mrx-input-focused]=\"isFocused\"\r\n [class.mrx-input-error]=\"getInvalid\"\r\n [class]=\"getClasses\"\r\n>\r\n <jodit-editor\r\n #editorElementRef\r\n [config]=\"defaultConfig\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n (onFocus)=\"changeFocused(true)\"\r\n (onBlur)=\"onBlur(false)\"\r\n ></jodit-editor>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getInvalidMessage\"\r\n [invalidMessage]=\"getInvalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state type=\"editor\" [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n\r\n <mrx-chars-left\r\n *ngIf=\"!disabled && maxLength\"\r\n [valueLength]=\"valueLength\"\r\n [maxlength]=\"maxLength\"\r\n ></mrx-chars-left>\r\n</div>\r\n", styles: [":host::ng-deep .mrx-editor .jodit-toolbar__box:not(:empty){background-color:#fff;padding:4px}:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-collection_size_middle.jodit-toolbar-collection_mode_horizontal,:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-collection_size_middle.jodit-toolbar-editor-collection_mode_horizontal,:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-editor-collection_size_middle.jodit-toolbar-collection_mode_horizontal,:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-editor-collection_size_middle.jodit-toolbar-editor-collection_mode_horizontal{background-image:none}:host::ng-deep .mrx-editor .jodit-toolbar__box .jodit-toolbar-editor-collection:after{display:none}:host::ng-deep .mrx-editor .jodit-ui-group{flex-wrap:wrap;gap:var(--sizing-1)}:host::ng-deep .mrx-editor .jodit-toolbar-button{height:28px;margin:0;border:none}:host::ng-deep .mrx-editor .jodit-toolbar-button.jodit-toolbar-button_with-trigger_true:hover:not([disabled]){border-color:transparent;box-shadow:0 1px 4px #3a3a3a4d}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__button{height:28px}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__button:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__button[aria-pressed=true]:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-editor .jodit-toolbar-button .jodit-toolbar-button__trigger:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-editor .jodit-ui-separator{border-color:var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-editor .jodit-add-new-line{display:none}:host::ng-deep .mrx-editor{position:relative}:host::ng-deep .mrx-editor .jodit-container .jodit-wysiwyg{padding:var(--spacing-3) var(--spacing-4)}:host::ng-deep .mrx-editor .jodit-container:not(.jodit_inline).jodit_disabled .jodit-toolbar__box{background-color:var(--neutral-bg-island-default)}:host::ng-deep .mrx-editor .jodit-container:not(.jodit_inline).jodit_disabled .jodit-workplace{opacity:1;background-color:var(--neutral-bg-disabled);color:var(--neutral-text-tertiary, #71767E)}:host::ng-deep .mrx-editor.mrx-input-error .jodit-container,:host::ng-deep .mrx-editor.mrx-input-checked-error .jodit-container{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}:host::ng-deep .mrx-editor.mrx-input-error .jodit-container .jodit-toolbar__box:not(:empty),:host::ng-deep .mrx-editor.mrx-input-checked-error .jodit-container .jodit-toolbar__box:not(:empty){border-bottom:var(--border-width-default) solid var(--system-bg-controls-negative-default)!important}:host::ng-deep .mrx-editor.mrx-input-success .jodit-container,:host::ng-deep .mrx-editor.mrx-input-checked-success .jodit-container{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}:host::ng-deep .mrx-editor.mrx-input-success .jodit-container .jodit-toolbar__box:not(:empty),:host::ng-deep .mrx-editor.mrx-input-checked-success .jodit-container .jodit-toolbar__box:not(:empty){border-bottom:var(--border-width-default) solid var(--system-bg-controls-positive-default)!important}:host::ng-deep .mrx-editor.mrx-input-checked-error .jodit-workplace{background-color:var(--system-bg-negative-secondary)!important}:host::ng-deep .mrx-editor.mrx-input-checked-success .jodit-workplace{background-color:var(--system-bg-positive-secondary)!important}:host::ng-deep .mrx-editor .jodit-container{transition:border .2s;border:var(--border-width-default) solid var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-editor .jodit-container:not(.jodit_inline),:host::ng-deep .mrx-editor .jodit-container .jodit-workplace{border-radius:4px}:host::ng-deep .mrx-editor .jodit-container .jodit-toolbar__box:not(:empty){transition:border .2s;border-bottom:var(--border-width-default) solid var(--neutral-bg-stroke-default)}:host::ng-deep .mrx-editor .jodit-container:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}:host::ng-deep .mrx-editor .jodit-container:hover .jodit-toolbar__box:not(:empty){border-bottom:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}:host::ng-deep .mrx-editor.mrx-input-focused .jodit-container{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-popup__content:not(:empty){background-color:#fff;padding:4px}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-ui-group{flex-wrap:wrap;gap:var(--sizing-1)}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-toolbar-button.jodit-toolbar-button_with-trigger_true:hover:not([disabled]){border-color:transparent;box-shadow:0 1px 4px #3a3a3a4d}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-toolbar-button .jodit-toolbar-button__button:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}::ng-deep .jodit.jodit-popup-container .jodit-popup .jodit-toolbar-button .jodit-toolbar-button__trigger:hover:not([disabled]){background-color:var(--brand-bg-tertiary-hover)}::ng-deep .jodit.jodit-popup-container .jodit-toolbar-button_nullable{display:none!important}::ng-deep .jodit.jodit-popup-container .jodit-form__table-creator-box .jodit-form__container span.jodit_hovered{background-color:var(--system-diagram-diagram-2);border-color:var(--system-diagram-diagram-2)}::ng-deep .jodit.jodit-popup-container .jodit-popup__content .jodit-ui-checkbox__wrapper .jodit-ui-checkbox__input{-webkit-appearance:checkbox!important;position:static!important;width:auto!important}\n"] }]
|
|
10841
10841
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fields: [{
|
|
10842
10842
|
type: Input
|
|
10843
10843
|
}], toolbar: [{
|