myrta-ui 17.1.7 → 17.1.8
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.
|
@@ -136,7 +136,7 @@ export class InputSelectComponent {
|
|
|
136
136
|
useExisting: forwardRef(() => InputSelectComponent),
|
|
137
137
|
multi: true,
|
|
138
138
|
},
|
|
139
|
-
], queries: [{ propertyName: "selectOptionsTemplate", first: true, predicate: ["selectOptionsTemplate"], 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 [maxlength]=\"maxLength.toString() || 'none'\"\r\n [dropdownPosition]=\"dropdownPosition\"\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 (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-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)}: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{color:var(--neutral-text-primary);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-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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: i4.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: i5.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: i6.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", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i6.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i6.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i6.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i6.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i6.NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "directive", type: i6.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
139
|
+
], queries: [{ propertyName: "selectOptionsTemplate", first: true, predicate: ["selectOptionsTemplate"], 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 [maxlength]=\"maxLength.toString() || 'none'\"\r\n [dropdownPosition]=\"dropdownPosition\"\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 (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-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)}: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{color:var(--neutral-text-primary);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-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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: i4.SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: i5.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: i6.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", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i6.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i6.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i6.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i6.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i6.NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "directive", type: i6.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
140
140
|
}
|
|
141
141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
142
142
|
type: Component,
|
|
@@ -146,7 +146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
146
146
|
useExisting: forwardRef(() => InputSelectComponent),
|
|
147
147
|
multi: true,
|
|
148
148
|
},
|
|
149
|
-
], 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 [maxlength]=\"maxLength.toString() || 'none'\"\r\n [dropdownPosition]=\"dropdownPosition\"\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 (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-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)}: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{color:var(--neutral-text-primary);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-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"] }]
|
|
149
|
+
], 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 [maxlength]=\"maxLength.toString() || 'none'\"\r\n [dropdownPosition]=\"dropdownPosition\"\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 (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-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)}: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{color:var(--neutral-text-primary);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-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"] }]
|
|
150
150
|
}], propDecorators: { fields: [{
|
|
151
151
|
type: Input
|
|
152
152
|
}], size: [{
|