myrta-ui 13.0.14 → 13.0.15

package/fesm2015/myrta-ui.mjs

@@ -12985,7 +12985,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             useExisting: forwardRef(() => SelectComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "popupHeaderTemplate", first: true, predicate: ["popupHeaderTemplate"], descendants: true }, { propertyName: "popupFooterTemplate", first: true, predicate: ["popupFooterTemplate"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class]=\"getClasses\"\r\n  class=\"mrx-select\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    <ng-container [ngSwitch]=\"use\">\r\n      <ng-container *ngSwitchCase=\"'default'\">\r\n        <div\r\n          class=\"mrx-select__input\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [popupPosition]=\"popupPosition\"\r\n          [scrollContainerRef]=\"scrollContainer\"\r\n          [scrollStrategy]=\"scrollStrategy\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <ng-container *ngIf=\"getSelectedLabels.length\">\r\n            <div class=\"mrx-select__input__values\" *ngIf=\"multiple\">\r\n              <ng-container *ngIf=\"multiCollapseCount && getSelectedLabels.length >= multiCollapseCount; else multipleNotCollapse\">\r\n                <div class=\"mrx-select__input__badge\">\r\n                  <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n                  <span *ngIf=\"!disabled && !readonly\" class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #multipleNotCollapse>\r\n                <ng-container *ngFor=\"let item of getSelectedLabels; let first = first; let last = last\">\r\n                  <ng-container *ngIf=\"labelTemplate; else defaultLabelTpl\">\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"labelTemplate\"\r\n                      [ngTemplateOutletContext]=\"{item: item, first, last, clear: clearItem.bind(this)}\"\r\n                    ></ng-container>\r\n                  </ng-container>\r\n                  <ng-template #defaultLabelTpl>\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                      [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n                    ></ng-container>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </ng-template>\r\n            </div>\r\n\r\n            <div class=\"mrx-select__input__value\" *ngIf=\"!multiple\">\r\n              <ng-container *ngFor=\"let item of getSelectedLabels\">\r\n                {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!getSelectedLabels.length\">\r\n            <div class=\"mrx-select__input__placeholder\">{{ placeholder }}</div>\r\n          </ng-container>\r\n\r\n          <div class=\"mrx-select__input__controls\">\r\n            <mrx-loader\r\n              *ngIf=\"isLoading\"\r\n              [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n              [color]=\"'brand'\"\r\n            ></mrx-loader>\r\n\r\n            <div\r\n              *ngIf=\"getSelectedLabels.length && clearable\"\r\n              class=\"mrx-icon icon-close mrx-select__input__controls--icon\"\r\n              [class]=\"getIconSize\"\r\n              (click)=\"onClear($event)\"\r\n            ></div>\r\n\r\n            <div\r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class.opened]=\"isOpen\"\r\n              [class]=\"getIconSize\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngSwitchCase=\"'link'\">\r\n        <div\r\n          class=\"mrx-select__input-link\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [popupPosition]=\"popupPosition\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            <p *ngIf=\"sortPlaceholder\">{{ sortPlaceholder }}</p>\r\n\r\n            <span\r\n              *ngIf=\"sortIcon\"\r\n              class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n              [class]=\"getIconSize\"\r\n            ></span>\r\n          </div>\r\n\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            <ng-container *ngIf=\"getSelectedLabels.length\">\r\n              <div class=\"mrx-select__input-link__value\">\r\n                <ng-container *ngFor=\"let item of getSelectedLabels\">\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <div\r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class.opened]=\"isOpen\"\r\n              [class]=\"getIconSize\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n      <ng-container *ngIf=\"filteredItems.length\">\r\n        <ng-container *ngFor=\"let item of filteredItems; let first = first; let last = last\">\r\n          <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n            <ng-container *ngIf=\"optionTemplate\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"optionTemplate\"\r\n                [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n              ></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!optionTemplate\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n                [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n              ></ng-container>\r\n            </ng-container>\r\n          </mrx-popup-item>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!filteredItems.length\">\r\n        <mrx-popup-item [custom]=\"true\">\r\n          <div class=\"mrx-select__dropdown__empty\">{{ emptyText }}</div>\r\n        </mrx-popup-item>\r\n      </ng-container>\r\n\r\n      <ng-template #headerTemplate>\r\n        <ng-container *ngIf=\"searchable\">\r\n          <div class=\"mrx-select__dropdown__search\">\r\n            <mrx-input-search\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"searchPlaceholder\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-search>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"contentTemplate\">\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"popupHeaderTemplate\">\r\n          <ng-container [ngTemplateOutlet]=\"popupHeaderTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        <ng-container *ngIf=\"!!addOption\">\r\n          <div class=\"mrx-select__dropdown__extra-option\">\r\n            <mrx-input-text\r\n              class=\"flex-grow-1\"\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"extraOptionPlaceholder\"\r\n              [(ngModel)]=\"model.label\"\r\n              [maxlength]=\"300\"\r\n              [invalid]=\"!!form.errors['label']\"\r\n              [invalidMessage]=\"form.errors['label']\"\r\n              (ngModelChange)=\"changeTextValueEmpty()\"\r\n            ></mrx-input-text>\r\n\r\n            <mrx-button\r\n              [iconOnly]=\"true\"\r\n              icon=\"<span class='mrx-icon icon-plus icon-font-24'></span>\"\r\n              size=\"medium\"\r\n              type=\"secondary\"\r\n              (click)=\"onAddNewCustomOption()\"\r\n            ></mrx-button>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"popupFooterTemplate\">\r\n          <ng-container [ngTemplateOutlet]=\"popupFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </mrx-popup>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"invalid && isInvalidMessage\">\r\n    <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n  </ng-container>\r\n\r\n  <mrx-save-state [fields]=\"fields\" [id]=\"uuid\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n  <ng-container *ngIf=\"asLabel(item) as label\">\r\n    <div class=\"mrx-select__input__badge\">\r\n      <p>{{ bindLabel ? label.__origin[bindLabel] : label.__origin['label'] || label.__origin }}</p>\r\n      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n  <ng-container *ngIf=\"asOption(item) as option\">\r\n    <div class=\"mrx-select__dropdown__item\">\r\n      <div class=\"mrx-select__dropdown__item--content\">\r\n        <ng-container *ngIf=\"bindIcon && option.__origin[bindIcon]\">\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        </ng-container>\r\n\r\n        <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</p>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"option.__selected\">\r\n        <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;height:100%;max-height:200px;overflow-y:auto}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding:5px 0}.mrx-select__input__controls--icon{position:relative}.mrx-select__input__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select__input-link{border-radius:var(--border-radius-1);background:var(--brand-bg-tertiary-default, #FFF);outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px;width:-moz-fit-content;width:fit-content}.mrx-select__input-link__box{flex-grow:1}.mrx-select__input-link__controls{display:flex;align-items:center;gap:8px}.mrx-select__input-link__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input-link__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input-link__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select.mrx-select-lg .mrx-select__input,.mrx-select.mrx-select-lg .mrx-select__input-link{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-lg .mrx-select__input__values,.mrx-select.mrx-select-lg .mrx-select__input-link__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge,.mrx-select.mrx-select-lg .mrx-select__input-link__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p,.mrx-select.mrx-select-lg .mrx-select__input-link__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-lg .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-3) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__placeholder,.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__controls--icon{font-size:22px}.mrx-select.mrx-select-lg .mrx-select__input-link{padding:0}.mrx-select.mrx-select-lg .mrx-select__input-link__placeholder,.mrx-select.mrx-select-lg .mrx-select__input-link__value{padding:2px 0}.mrx-select.mrx-select-md .mrx-select__input,.mrx-select.mrx-select-md .mrx-select__input-link{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input__values,.mrx-select.mrx-select-md .mrx-select__input-link__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge,.mrx-select.mrx-select-md .mrx-select__input-link__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p,.mrx-select.mrx-select-md .mrx-select__input-link__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select.mrx-select-md .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__placeholder,.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input-link,.mrx-select.mrx-select-md .mrx-select__input-link__placeholder,.mrx-select.mrx-select-md .mrx-select__input-link__value{padding:0}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__input__placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-tertiary, #71767E)}.mrx-select__dropdown__item{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.mrx-select__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select__dropdown__item--content{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-grow:1}.mrx-select__dropdown__item--content p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding-top:2px;padding-bottom:2px}.mrx-select__dropdown__search{padding:8px;border-bottom:1.794px solid var(--neutral-bg-divider, #DBDFE5);background:var(--brand-bg-tertiary-default, #FFF)}.mrx-select__dropdown__extra-option{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px;border-top:1.794px solid var(--neutral-bg-divider, #DBDFE5);border-top:var(--border-width-default) solid var(--neutral-bg-stroke-default)}.mrx-select__dropdown__empty{padding:8px 16px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}.mrx-select.-readonly .mrx-select__input__placeholder{-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}\n"], components: [{ type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick", "minWidth"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id", "disabled"], outputs: ["clicked"] }, { type: InputSearchComponent, selector: "mrx-input-search", inputs: ["fields", "disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "customClasses", "mask", "size", "invalid", "invalidMessage", "checkInvalid", "restrictInput"], outputs: ["changed", "modelChange", "blurred", "cleared", "searched"] }, { type: InputTextComponent, selector: "mrx-input-text", inputs: ["fields", "disabled", "allowPattern", "required", "readonly", "maxlength", "minlength", "placeholder", "customClasses", "size", "isTooltipValue", "icon", "iconColor", "invalid", "invalidMessage", "checkInvalid", "restrictInput", "mask", "maskPrefix", "showMaskTyped", "maskDropSpecialCharacters"], outputs: ["changed", "blurred", "modelChange"] }, { type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType", "href", "target", "routerLink", "queryParams"], outputs: ["mrxClick"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition", "isFullWidthDropdown", "minWidthDropdown", "maxWidthDropdown", "scrollContainerRef", "scrollStrategy"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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"] }] });
+    ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "popupHeaderTemplate", first: true, predicate: ["popupHeaderTemplate"], descendants: true }, { propertyName: "popupFooterTemplate", first: true, predicate: ["popupFooterTemplate"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class]=\"getClasses\"\r\n  class=\"mrx-select\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    <ng-container [ngSwitch]=\"use\">\r\n      <ng-container *ngSwitchCase=\"'default'\">\r\n        <div\r\n          class=\"mrx-select__input\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [popupPosition]=\"popupPosition\"\r\n          [scrollContainerRef]=\"scrollContainer\"\r\n          [scrollStrategy]=\"scrollStrategy\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <ng-container *ngIf=\"getSelectedLabels.length\">\r\n            <div class=\"mrx-select__input__values\" *ngIf=\"multiple\">\r\n              <ng-container *ngIf=\"multiCollapseCount && getSelectedLabels.length >= multiCollapseCount; else multipleNotCollapse\">\r\n                <div class=\"mrx-select__input__badge\">\r\n                  <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n                  <span *ngIf=\"!disabled && !readonly\" class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #multipleNotCollapse>\r\n                <ng-container *ngFor=\"let item of getSelectedLabels; let first = first; let last = last\">\r\n                  <ng-container *ngIf=\"labelTemplate; else defaultLabelTpl\">\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"labelTemplate\"\r\n                      [ngTemplateOutletContext]=\"{item: item, first, last, clear: clearItem.bind(this)}\"\r\n                    ></ng-container>\r\n                  </ng-container>\r\n                  <ng-template #defaultLabelTpl>\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                      [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n                    ></ng-container>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </ng-template>\r\n            </div>\r\n\r\n            <div class=\"mrx-select__input__value\" *ngIf=\"!multiple\">\r\n              <ng-container *ngFor=\"let item of getSelectedLabels\">\r\n                {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!getSelectedLabels.length\">\r\n            <div class=\"mrx-select__input__placeholder\">{{ placeholder }}</div>\r\n          </ng-container>\r\n\r\n          <div class=\"mrx-select__input__controls\">\r\n            <mrx-loader\r\n              *ngIf=\"isLoading\"\r\n              [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n              [color]=\"'brand'\"\r\n            ></mrx-loader>\r\n\r\n            <div\r\n              *ngIf=\"getSelectedLabels.length && clearable\"\r\n              class=\"mrx-icon icon-close mrx-select__input__controls--icon\"\r\n              [class]=\"getIconSize\"\r\n              (click)=\"onClear($event)\"\r\n            ></div>\r\n\r\n            <div\r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class.opened]=\"isOpen\"\r\n              [class]=\"getIconSize\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngSwitchCase=\"'link'\">\r\n        <div\r\n          class=\"mrx-select__input-link\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [popupPosition]=\"popupPosition\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            <p *ngIf=\"sortPlaceholder\">{{ sortPlaceholder }}</p>\r\n\r\n            <span\r\n              *ngIf=\"sortIcon\"\r\n              class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n              [class]=\"getIconSize\"\r\n            ></span>\r\n          </div>\r\n\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            <ng-container *ngIf=\"getSelectedLabels.length\">\r\n              <div class=\"mrx-select__input-link__value\">\r\n                <ng-container *ngFor=\"let item of getSelectedLabels\">\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <div\r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class.opened]=\"isOpen\"\r\n              [class]=\"getIconSize\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n      <ng-container *ngIf=\"filteredItems.length\">\r\n        <ng-container *ngFor=\"let item of filteredItems; let first = first; let last = last\">\r\n          <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n            <ng-container *ngIf=\"optionTemplate\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"optionTemplate\"\r\n                [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n              ></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!optionTemplate\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n                [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n              ></ng-container>\r\n            </ng-container>\r\n          </mrx-popup-item>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!filteredItems.length\">\r\n        <mrx-popup-item [custom]=\"true\">\r\n          <div class=\"mrx-select__dropdown__empty\">{{ emptyText }}</div>\r\n        </mrx-popup-item>\r\n      </ng-container>\r\n\r\n      <ng-template #headerTemplate>\r\n        <ng-container *ngIf=\"searchable\">\r\n          <div class=\"mrx-select__dropdown__search\">\r\n            <mrx-input-search\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"searchPlaceholder\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-search>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"contentTemplate\">\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"popupHeaderTemplate\">\r\n          <ng-container [ngTemplateOutlet]=\"popupHeaderTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        <ng-container *ngIf=\"!!addOption\">\r\n          <div class=\"mrx-select__dropdown__extra-option\">\r\n            <mrx-input-text\r\n              class=\"flex-grow-1\"\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"extraOptionPlaceholder\"\r\n              [(ngModel)]=\"model.label\"\r\n              [maxlength]=\"300\"\r\n              [invalid]=\"!!form.errors['label']\"\r\n              [invalidMessage]=\"form.errors['label']\"\r\n              (ngModelChange)=\"changeTextValueEmpty()\"\r\n            ></mrx-input-text>\r\n\r\n            <mrx-button\r\n              [iconOnly]=\"true\"\r\n              icon=\"<span class='mrx-icon icon-plus icon-font-24'></span>\"\r\n              size=\"medium\"\r\n              type=\"secondary\"\r\n              (click)=\"onAddNewCustomOption()\"\r\n            ></mrx-button>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"popupFooterTemplate\">\r\n          <ng-container [ngTemplateOutlet]=\"popupFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </mrx-popup>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"invalid && isInvalidMessage\">\r\n    <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n  </ng-container>\r\n\r\n  <mrx-save-state [fields]=\"fields\" [id]=\"uuid\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n  <ng-container *ngIf=\"asLabel(item) as label\">\r\n    <div class=\"mrx-select__input__badge\">\r\n      <p>{{ bindLabel ? label.__origin[bindLabel] : label.__origin['label'] || label.__origin }}</p>\r\n      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n  <ng-container *ngIf=\"asOption(item) as option\">\r\n    <div class=\"mrx-select__dropdown__item\">\r\n      <div class=\"mrx-select__dropdown__item--content\">\r\n        <ng-container *ngIf=\"bindIcon && option.__origin[bindIcon]\">\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        </ng-container>\r\n\r\n        <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</p>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"option.__selected\">\r\n        <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".mrx-select{position:relative}.mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;height:100%;max-height:200px;overflow-y:auto}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding:5px 0}.mrx-select__input__controls--icon{position:relative}.mrx-select__input__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select__input-link{border-radius:var(--border-radius-1);background:var(--brand-bg-tertiary-default, #FFF);outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px;width:-moz-fit-content;width:fit-content}.mrx-select__input-link__box{flex-grow:1}.mrx-select__input-link__controls{display:flex;align-items:center;gap:8px}.mrx-select__input-link__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input-link__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input-link__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select.mrx-select-lg .mrx-select__input,.mrx-select.mrx-select-lg .mrx-select__input-link{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-lg .mrx-select__input__values,.mrx-select.mrx-select-lg .mrx-select__input-link__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge,.mrx-select.mrx-select-lg .mrx-select__input-link__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p,.mrx-select.mrx-select-lg .mrx-select__input-link__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-lg .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-3) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__placeholder,.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__controls--icon{font-size:22px}.mrx-select.mrx-select-lg .mrx-select__input-link{padding:0}.mrx-select.mrx-select-lg .mrx-select__input-link__placeholder,.mrx-select.mrx-select-lg .mrx-select__input-link__value{padding:2px 0}.mrx-select.mrx-select-md .mrx-select__input,.mrx-select.mrx-select-md .mrx-select__input-link{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input__values,.mrx-select.mrx-select-md .mrx-select__input-link__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge,.mrx-select.mrx-select-md .mrx-select__input-link__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p,.mrx-select.mrx-select-md .mrx-select__input-link__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select.mrx-select-md .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__placeholder,.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input-link,.mrx-select.mrx-select-md .mrx-select__input-link__placeholder,.mrx-select.mrx-select-md .mrx-select__input-link__value{padding:0}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__input__placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-tertiary, #71767E)}.mrx-select__dropdown__item{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.mrx-select__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select__dropdown__item--content{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-grow:1}.mrx-select__dropdown__item--content p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding-top:2px;padding-bottom:2px}.mrx-select__dropdown__search{padding:8px;border-bottom:1.794px solid var(--neutral-bg-divider, #DBDFE5);background:var(--brand-bg-tertiary-default, #FFF)}.mrx-select__dropdown__extra-option{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px;border-top:1.794px solid var(--neutral-bg-divider, #DBDFE5);border-top:var(--border-width-default) solid var(--neutral-bg-stroke-default)}.mrx-select__dropdown__empty{padding:8px 16px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}.mrx-select.-readonly .mrx-select__input__placeholder{-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}\n"], components: [{ type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick", "minWidth"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id", "disabled"], outputs: ["clicked"] }, { type: InputSearchComponent, selector: "mrx-input-search", inputs: ["fields", "disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "customClasses", "mask", "size", "invalid", "invalidMessage", "checkInvalid", "restrictInput"], outputs: ["changed", "modelChange", "blurred", "cleared", "searched"] }, { type: InputTextComponent, selector: "mrx-input-text", inputs: ["fields", "disabled", "allowPattern", "required", "readonly", "maxlength", "minlength", "placeholder", "customClasses", "size", "isTooltipValue", "icon", "iconColor", "invalid", "invalidMessage", "checkInvalid", "restrictInput", "mask", "maskPrefix", "showMaskTyped", "maskDropSpecialCharacters"], outputs: ["changed", "blurred", "modelChange"] }, { type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType", "href", "target", "routerLink", "queryParams"], outputs: ["mrxClick"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition", "isFullWidthDropdown", "minWidthDropdown", "maxWidthDropdown", "scrollContainerRef", "scrollStrategy"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-select', providers: [
@@ -12994,7 +12994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class]=\"getClasses\"\r\n  class=\"mrx-select\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    <ng-container [ngSwitch]=\"use\">\r\n      <ng-container *ngSwitchCase=\"'default'\">\r\n        <div\r\n          class=\"mrx-select__input\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [popupPosition]=\"popupPosition\"\r\n          [scrollContainerRef]=\"scrollContainer\"\r\n          [scrollStrategy]=\"scrollStrategy\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <ng-container *ngIf=\"getSelectedLabels.length\">\r\n            <div class=\"mrx-select__input__values\" *ngIf=\"multiple\">\r\n              <ng-container *ngIf=\"multiCollapseCount && getSelectedLabels.length >= multiCollapseCount; else multipleNotCollapse\">\r\n                <div class=\"mrx-select__input__badge\">\r\n                  <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n                  <span *ngIf=\"!disabled && !readonly\" class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #multipleNotCollapse>\r\n                <ng-container *ngFor=\"let item of getSelectedLabels; let first = first; let last = last\">\r\n                  <ng-container *ngIf=\"labelTemplate; else defaultLabelTpl\">\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"labelTemplate\"\r\n                      [ngTemplateOutletContext]=\"{item: item, first, last, clear: clearItem.bind(this)}\"\r\n                    ></ng-container>\r\n                  </ng-container>\r\n                  <ng-template #defaultLabelTpl>\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                      [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n                    ></ng-container>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </ng-template>\r\n            </div>\r\n\r\n            <div class=\"mrx-select__input__value\" *ngIf=\"!multiple\">\r\n              <ng-container *ngFor=\"let item of getSelectedLabels\">\r\n                {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!getSelectedLabels.length\">\r\n            <div class=\"mrx-select__input__placeholder\">{{ placeholder }}</div>\r\n          </ng-container>\r\n\r\n          <div class=\"mrx-select__input__controls\">\r\n            <mrx-loader\r\n              *ngIf=\"isLoading\"\r\n              [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n              [color]=\"'brand'\"\r\n            ></mrx-loader>\r\n\r\n            <div\r\n              *ngIf=\"getSelectedLabels.length && clearable\"\r\n              class=\"mrx-icon icon-close mrx-select__input__controls--icon\"\r\n              [class]=\"getIconSize\"\r\n              (click)=\"onClear($event)\"\r\n            ></div>\r\n\r\n            <div\r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class.opened]=\"isOpen\"\r\n              [class]=\"getIconSize\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngSwitchCase=\"'link'\">\r\n        <div\r\n          class=\"mrx-select__input-link\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [popupPosition]=\"popupPosition\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            <p *ngIf=\"sortPlaceholder\">{{ sortPlaceholder }}</p>\r\n\r\n            <span\r\n              *ngIf=\"sortIcon\"\r\n              class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n              [class]=\"getIconSize\"\r\n            ></span>\r\n          </div>\r\n\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            <ng-container *ngIf=\"getSelectedLabels.length\">\r\n              <div class=\"mrx-select__input-link__value\">\r\n                <ng-container *ngFor=\"let item of getSelectedLabels\">\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <div\r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class.opened]=\"isOpen\"\r\n              [class]=\"getIconSize\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n      <ng-container *ngIf=\"filteredItems.length\">\r\n        <ng-container *ngFor=\"let item of filteredItems; let first = first; let last = last\">\r\n          <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n            <ng-container *ngIf=\"optionTemplate\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"optionTemplate\"\r\n                [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n              ></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!optionTemplate\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n                [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n              ></ng-container>\r\n            </ng-container>\r\n          </mrx-popup-item>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!filteredItems.length\">\r\n        <mrx-popup-item [custom]=\"true\">\r\n          <div class=\"mrx-select__dropdown__empty\">{{ emptyText }}</div>\r\n        </mrx-popup-item>\r\n      </ng-container>\r\n\r\n      <ng-template #headerTemplate>\r\n        <ng-container *ngIf=\"searchable\">\r\n          <div class=\"mrx-select__dropdown__search\">\r\n            <mrx-input-search\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"searchPlaceholder\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-search>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"contentTemplate\">\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"popupHeaderTemplate\">\r\n          <ng-container [ngTemplateOutlet]=\"popupHeaderTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        <ng-container *ngIf=\"!!addOption\">\r\n          <div class=\"mrx-select__dropdown__extra-option\">\r\n            <mrx-input-text\r\n              class=\"flex-grow-1\"\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"extraOptionPlaceholder\"\r\n              [(ngModel)]=\"model.label\"\r\n              [maxlength]=\"300\"\r\n              [invalid]=\"!!form.errors['label']\"\r\n              [invalidMessage]=\"form.errors['label']\"\r\n              (ngModelChange)=\"changeTextValueEmpty()\"\r\n            ></mrx-input-text>\r\n\r\n            <mrx-button\r\n              [iconOnly]=\"true\"\r\n              icon=\"<span class='mrx-icon icon-plus icon-font-24'></span>\"\r\n              size=\"medium\"\r\n              type=\"secondary\"\r\n              (click)=\"onAddNewCustomOption()\"\r\n            ></mrx-button>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"popupFooterTemplate\">\r\n          <ng-container [ngTemplateOutlet]=\"popupFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </mrx-popup>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"invalid && isInvalidMessage\">\r\n    <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n  </ng-container>\r\n\r\n  <mrx-save-state [fields]=\"fields\" [id]=\"uuid\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n  <ng-container *ngIf=\"asLabel(item) as label\">\r\n    <div class=\"mrx-select__input__badge\">\r\n      <p>{{ bindLabel ? label.__origin[bindLabel] : label.__origin['label'] || label.__origin }}</p>\r\n      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n  <ng-container *ngIf=\"asOption(item) as option\">\r\n    <div class=\"mrx-select__dropdown__item\">\r\n      <div class=\"mrx-select__dropdown__item--content\">\r\n        <ng-container *ngIf=\"bindIcon && option.__origin[bindIcon]\">\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        </ng-container>\r\n\r\n        <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</p>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"option.__selected\">\r\n        <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;height:100%;max-height:200px;overflow-y:auto}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding:5px 0}.mrx-select__input__controls--icon{position:relative}.mrx-select__input__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select__input-link{border-radius:var(--border-radius-1);background:var(--brand-bg-tertiary-default, #FFF);outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px;width:-moz-fit-content;width:fit-content}.mrx-select__input-link__box{flex-grow:1}.mrx-select__input-link__controls{display:flex;align-items:center;gap:8px}.mrx-select__input-link__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input-link__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input-link__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select.mrx-select-lg .mrx-select__input,.mrx-select.mrx-select-lg .mrx-select__input-link{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-lg .mrx-select__input__values,.mrx-select.mrx-select-lg .mrx-select__input-link__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge,.mrx-select.mrx-select-lg .mrx-select__input-link__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p,.mrx-select.mrx-select-lg .mrx-select__input-link__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-lg .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-3) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__placeholder,.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__controls--icon{font-size:22px}.mrx-select.mrx-select-lg .mrx-select__input-link{padding:0}.mrx-select.mrx-select-lg .mrx-select__input-link__placeholder,.mrx-select.mrx-select-lg .mrx-select__input-link__value{padding:2px 0}.mrx-select.mrx-select-md .mrx-select__input,.mrx-select.mrx-select-md .mrx-select__input-link{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input__values,.mrx-select.mrx-select-md .mrx-select__input-link__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge,.mrx-select.mrx-select-md .mrx-select__input-link__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p,.mrx-select.mrx-select-md .mrx-select__input-link__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select.mrx-select-md .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__placeholder,.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input-link,.mrx-select.mrx-select-md .mrx-select__input-link__placeholder,.mrx-select.mrx-select-md .mrx-select__input-link__value{padding:0}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__input__placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-tertiary, #71767E)}.mrx-select__dropdown__item{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.mrx-select__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select__dropdown__item--content{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-grow:1}.mrx-select__dropdown__item--content p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding-top:2px;padding-bottom:2px}.mrx-select__dropdown__search{padding:8px;border-bottom:1.794px solid var(--neutral-bg-divider, #DBDFE5);background:var(--brand-bg-tertiary-default, #FFF)}.mrx-select__dropdown__extra-option{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px;border-top:1.794px solid var(--neutral-bg-divider, #DBDFE5);border-top:var(--border-width-default) solid var(--neutral-bg-stroke-default)}.mrx-select__dropdown__empty{padding:8px 16px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}.mrx-select.-readonly .mrx-select__input__placeholder{-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}\n"] }]
+                    ], template: "<div\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class]=\"getClasses\"\r\n  class=\"mrx-select\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    <ng-container [ngSwitch]=\"use\">\r\n      <ng-container *ngSwitchCase=\"'default'\">\r\n        <div\r\n          class=\"mrx-select__input\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [popupPosition]=\"popupPosition\"\r\n          [scrollContainerRef]=\"scrollContainer\"\r\n          [scrollStrategy]=\"scrollStrategy\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <ng-container *ngIf=\"getSelectedLabels.length\">\r\n            <div class=\"mrx-select__input__values\" *ngIf=\"multiple\">\r\n              <ng-container *ngIf=\"multiCollapseCount && getSelectedLabels.length >= multiCollapseCount; else multipleNotCollapse\">\r\n                <div class=\"mrx-select__input__badge\">\r\n                  <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n                  <span *ngIf=\"!disabled && !readonly\" class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #multipleNotCollapse>\r\n                <ng-container *ngFor=\"let item of getSelectedLabels; let first = first; let last = last\">\r\n                  <ng-container *ngIf=\"labelTemplate; else defaultLabelTpl\">\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"labelTemplate\"\r\n                      [ngTemplateOutletContext]=\"{item: item, first, last, clear: clearItem.bind(this)}\"\r\n                    ></ng-container>\r\n                  </ng-container>\r\n                  <ng-template #defaultLabelTpl>\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                      [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n                    ></ng-container>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </ng-template>\r\n            </div>\r\n\r\n            <div class=\"mrx-select__input__value\" *ngIf=\"!multiple\">\r\n              <ng-container *ngFor=\"let item of getSelectedLabels\">\r\n                {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!getSelectedLabels.length\">\r\n            <div class=\"mrx-select__input__placeholder\">{{ placeholder }}</div>\r\n          </ng-container>\r\n\r\n          <div class=\"mrx-select__input__controls\">\r\n            <mrx-loader\r\n              *ngIf=\"isLoading\"\r\n              [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n              [color]=\"'brand'\"\r\n            ></mrx-loader>\r\n\r\n            <div\r\n              *ngIf=\"getSelectedLabels.length && clearable\"\r\n              class=\"mrx-icon icon-close mrx-select__input__controls--icon\"\r\n              [class]=\"getIconSize\"\r\n              (click)=\"onClear($event)\"\r\n            ></div>\r\n\r\n            <div\r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class.opened]=\"isOpen\"\r\n              [class]=\"getIconSize\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngSwitchCase=\"'link'\">\r\n        <div\r\n          class=\"mrx-select__input-link\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [popupPosition]=\"popupPosition\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            <p *ngIf=\"sortPlaceholder\">{{ sortPlaceholder }}</p>\r\n\r\n            <span\r\n              *ngIf=\"sortIcon\"\r\n              class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n              [class]=\"getIconSize\"\r\n            ></span>\r\n          </div>\r\n\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            <ng-container *ngIf=\"getSelectedLabels.length\">\r\n              <div class=\"mrx-select__input-link__value\">\r\n                <ng-container *ngFor=\"let item of getSelectedLabels\">\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <div\r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class.opened]=\"isOpen\"\r\n              [class]=\"getIconSize\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n      <ng-container *ngIf=\"filteredItems.length\">\r\n        <ng-container *ngFor=\"let item of filteredItems; let first = first; let last = last\">\r\n          <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n            <ng-container *ngIf=\"optionTemplate\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"optionTemplate\"\r\n                [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n              ></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!optionTemplate\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n                [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n              ></ng-container>\r\n            </ng-container>\r\n          </mrx-popup-item>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!filteredItems.length\">\r\n        <mrx-popup-item [custom]=\"true\">\r\n          <div class=\"mrx-select__dropdown__empty\">{{ emptyText }}</div>\r\n        </mrx-popup-item>\r\n      </ng-container>\r\n\r\n      <ng-template #headerTemplate>\r\n        <ng-container *ngIf=\"searchable\">\r\n          <div class=\"mrx-select__dropdown__search\">\r\n            <mrx-input-search\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"searchPlaceholder\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-search>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"contentTemplate\">\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"popupHeaderTemplate\">\r\n          <ng-container [ngTemplateOutlet]=\"popupHeaderTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        <ng-container *ngIf=\"!!addOption\">\r\n          <div class=\"mrx-select__dropdown__extra-option\">\r\n            <mrx-input-text\r\n              class=\"flex-grow-1\"\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"extraOptionPlaceholder\"\r\n              [(ngModel)]=\"model.label\"\r\n              [maxlength]=\"300\"\r\n              [invalid]=\"!!form.errors['label']\"\r\n              [invalidMessage]=\"form.errors['label']\"\r\n              (ngModelChange)=\"changeTextValueEmpty()\"\r\n            ></mrx-input-text>\r\n\r\n            <mrx-button\r\n              [iconOnly]=\"true\"\r\n              icon=\"<span class='mrx-icon icon-plus icon-font-24'></span>\"\r\n              size=\"medium\"\r\n              type=\"secondary\"\r\n              (click)=\"onAddNewCustomOption()\"\r\n            ></mrx-button>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"popupFooterTemplate\">\r\n          <ng-container [ngTemplateOutlet]=\"popupFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </mrx-popup>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"invalid && isInvalidMessage\">\r\n    <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n  </ng-container>\r\n\r\n  <mrx-save-state [fields]=\"fields\" [id]=\"uuid\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n  <ng-container *ngIf=\"asLabel(item) as label\">\r\n    <div class=\"mrx-select__input__badge\">\r\n      <p>{{ bindLabel ? label.__origin[bindLabel] : label.__origin['label'] || label.__origin }}</p>\r\n      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n  <ng-container *ngIf=\"asOption(item) as option\">\r\n    <div class=\"mrx-select__dropdown__item\">\r\n      <div class=\"mrx-select__dropdown__item--content\">\r\n        <ng-container *ngIf=\"bindIcon && option.__origin[bindIcon]\">\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        </ng-container>\r\n\r\n        <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</p>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"option.__selected\">\r\n        <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".mrx-select{position:relative}.mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;height:100%;max-height:200px;overflow-y:auto}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding:5px 0}.mrx-select__input__controls--icon{position:relative}.mrx-select__input__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select__input-link{border-radius:var(--border-radius-1);background:var(--brand-bg-tertiary-default, #FFF);outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px;width:-moz-fit-content;width:fit-content}.mrx-select__input-link__box{flex-grow:1}.mrx-select__input-link__controls{display:flex;align-items:center;gap:8px}.mrx-select__input-link__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input-link__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input-link__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select.mrx-select-lg .mrx-select__input,.mrx-select.mrx-select-lg .mrx-select__input-link{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-lg .mrx-select__input__values,.mrx-select.mrx-select-lg .mrx-select__input-link__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge,.mrx-select.mrx-select-lg .mrx-select__input-link__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p,.mrx-select.mrx-select-lg .mrx-select__input-link__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-lg .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-3) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__placeholder,.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__controls--icon{font-size:22px}.mrx-select.mrx-select-lg .mrx-select__input-link{padding:0}.mrx-select.mrx-select-lg .mrx-select__input-link__placeholder,.mrx-select.mrx-select-lg .mrx-select__input-link__value{padding:2px 0}.mrx-select.mrx-select-md .mrx-select__input,.mrx-select.mrx-select-md .mrx-select__input-link{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input__values,.mrx-select.mrx-select-md .mrx-select__input-link__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge,.mrx-select.mrx-select-md .mrx-select__input-link__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p,.mrx-select.mrx-select-md .mrx-select__input-link__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select.mrx-select-md .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__placeholder,.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input-link,.mrx-select.mrx-select-md .mrx-select__input-link__placeholder,.mrx-select.mrx-select-md .mrx-select__input-link__value{padding:0}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__input__placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-tertiary, #71767E)}.mrx-select__dropdown__item{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.mrx-select__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select__dropdown__item--content{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-grow:1}.mrx-select__dropdown__item--content p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding-top:2px;padding-bottom:2px}.mrx-select__dropdown__search{padding:8px;border-bottom:1.794px solid var(--neutral-bg-divider, #DBDFE5);background:var(--brand-bg-tertiary-default, #FFF)}.mrx-select__dropdown__extra-option{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px;border-top:1.794px solid var(--neutral-bg-divider, #DBDFE5);border-top:var(--border-width-default) solid var(--neutral-bg-stroke-default)}.mrx-select__dropdown__empty{padding:8px 16px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}.mrx-select.-readonly .mrx-select__input__placeholder{-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fields: [{
                 type: Input
             }], items: [{
@@ -13188,6 +13188,8 @@ var ErrorMessagesEnum$1;
     ErrorMessagesEnum["FileTooBig"] = "\u0421\u043B\u0438\u0448\u043A\u043E\u043C \u0431\u043E\u043B\u044C\u0448\u043E\u0439 \u0444\u0430\u0439\u043B";
     ErrorMessagesEnum["EmptyFile"] = "\u041F\u0443\u0441\u0442\u043E\u0439 \u0444\u0430\u0439\u043B";
     ErrorMessagesEnum["InvalidFileFormat"] = "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430";
+    ErrorMessagesEnum["FileNameTooLong"] = "\u0421\u043B\u0438\u0448\u043A\u043E\u043C \u0434\u043B\u0438\u043D\u043D\u043E\u0435 \u0438\u043C\u044F \u0444\u0430\u0439\u043B\u0430";
+    ErrorMessagesEnum["InvalidFileNameCharacters"] = "\u0418\u043C\u044F \u0444\u0430\u0439\u043B\u0430 \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u0442 \u043D\u0435\u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u044B\u0435 \u0441\u0438\u043C\u0432\u043E\u043B\u044B";
 })(ErrorMessagesEnum$1 || (ErrorMessagesEnum$1 = {}));
 
 var InputFileTargetTypesEnum;
@@ -13230,6 +13232,8 @@ class InputFileComponent {
         this.messageFileTooBig = ErrorMessagesEnum$1.FileTooBig;
         this.messageEmptyFile = ErrorMessagesEnum$1.EmptyFile;
         this.messageInvalidFileFormat = ErrorMessagesEnum$1.InvalidFileFormat;
+        this.messageFileNameTooLong = ErrorMessagesEnum$1.FileNameTooLong;
+        this.messageInvalidFileName = ErrorMessagesEnum$1.InvalidFileNameCharacters;
         // PLACEHOLDERS
         this.placeholder = 'Перенесите файл с устройства или нажмите на данное поле для добавления файла';
         this.placeholderFileMaxSize = 'Размер файла: не больше';
@@ -13482,11 +13486,31 @@ class InputFileComponent {
             data.uploading = false;
             return false;
         }
+        if (this.fileNameRegex && data.name) {
+            const fileNameWithoutExtension = this._getFileNameWithoutExtension(data.name);
+            const regex = typeof this.fileNameRegex === 'string'
+                ? new RegExp(this.fileNameRegex)
+                : this.fileNameRegex;
+            if (!regex.test(fileNameWithoutExtension)) {
+                data.error = this.messageInvalidFileName;
+                data.uploading = false;
+                return false;
+            }
+        }
+        if (this.maxFileNameLength && data.file && data.file.name.length > this.maxFileNameLength) {
+            data.error = this.messageFileNameTooLong;
+            data.uploading = false;
+            return false;
+        }
         return true;
     }
+    _getFileNameWithoutExtension(fileName) {
+        const lastDotIndex = fileName.lastIndexOf('.');
+        return lastDotIndex === -1 ? fileName : fileName.substring(0, lastDotIndex);
+    }
 }
 InputFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileComponent, deps: [{ token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
-InputFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputFileComponent, selector: "mrx-input-file", inputs: { autoUpload: "autoUpload", required: "required", readonly: "readonly", viewOnly: "viewOnly", disabled: "disabled", bottomFiles: "bottomFiles", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", showInputWithError: "showInputWithError", showDeleteButton: "showDeleteButton", isTooltipValue: "isTooltipValue", isDownloadingFile: "isDownloadingFile", isHideListFiles: "isHideListFiles", target: "target", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", uploadAdditionalData: "uploadAdditionalData", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", messageTooManyFiles: "messageTooManyFiles", messageFileTooBig: "messageFileTooBig", messageEmptyFile: "messageEmptyFile", messageInvalidFileFormat: "messageInvalidFileFormat", placeholder: "placeholder", placeholderFileMaxSize: "placeholderFileMaxSize", placeholderFileFormat: "placeholderFileFormat", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"readonly; else notReadonly\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.size)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notReadonly>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"disabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': disabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size mb-1\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!readonly && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF)}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;word-break:break-word;white-space:normal;color:var(--neutral-text-primary)}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default, #DAD5CE);height:94px}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border:1px dashed var(--neutral-bg-stroke-hover, #BCB5AC)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__content{height:94px}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);border:1px dashed var(--system-bg-controls-positive-default, #108E3A)}\n"], components: [{ type: i2$3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+InputFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputFileComponent, selector: "mrx-input-file", inputs: { autoUpload: "autoUpload", required: "required", readonly: "readonly", viewOnly: "viewOnly", disabled: "disabled", bottomFiles: "bottomFiles", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", maxFileNameLength: "maxFileNameLength", fileNameRegex: "fileNameRegex", formData: "formData", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", showInputWithError: "showInputWithError", showDeleteButton: "showDeleteButton", isTooltipValue: "isTooltipValue", isDownloadingFile: "isDownloadingFile", isHideListFiles: "isHideListFiles", target: "target", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", uploadAdditionalData: "uploadAdditionalData", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", messageTooManyFiles: "messageTooManyFiles", messageFileTooBig: "messageFileTooBig", messageEmptyFile: "messageEmptyFile", messageInvalidFileFormat: "messageInvalidFileFormat", messageFileNameTooLong: "messageFileNameTooLong", messageInvalidFileName: "messageInvalidFileName", placeholder: "placeholder", placeholderFileMaxSize: "placeholderFileMaxSize", placeholderFileFormat: "placeholderFileFormat", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"readonly; else notReadonly\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.size)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notReadonly>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"disabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': disabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size mb-1\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!readonly && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF)}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;word-break:break-word;white-space:normal;color:var(--neutral-text-primary)}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default, #DAD5CE);height:94px}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border:1px dashed var(--neutral-bg-stroke-hover, #BCB5AC)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__content{height:94px}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);border:1px dashed var(--system-bg-controls-positive-default, #108E3A)}\n"], components: [{ type: i2$3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-input-file', template: "<div\r\n  class=\"ng-form-file-input\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"form-row\" *ngIf=\"readonly; else notReadonly\">\r\n    <div *ngIf=\"!files || files.length == 0\"\r\n         class=\"col-sm-12 col-md-6\"\r\n    >\r\n      <div class=\"d-flex align-items-center color-tertiary\">\r\n        <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n        <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12\">\r\n      <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n        <li\r\n          class=\"new-custom-file-input__item\"\r\n          *ngFor=\"let file of files; trackBy: trackByFn\"\r\n        >\r\n          <div class=\"qq-file-info\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n              <a\r\n                class=\"qq-upload-file-selector qq-upload-file\"\r\n                [target]=\"getTarget\"\r\n                [href]=\"downloadUrl(file)\"\r\n                [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n              >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n            </div>\r\n            <div class=\"info\">\r\n              <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.size)}}</span>\r\n            </div>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #notReadonly>\r\n    <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ngx-file-drop\r\n      *ngIf=\"canAdd\"\r\n      [className]=\"'ng-custom-file-input'\"\r\n      [accept]=\"extensions || ''\"\r\n      [disabled]=\"disabled\"\r\n      [ngClass]=\"{'ng-custom-file-input--disabled': disabled}\"\r\n      (onFileDrop)=\"dropped($event)\"\r\n    >\r\n      <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n        <div\r\n          class=\"ng-custom-file-input-content\"\r\n          (click)=\"!disabled ? openFileSelector() : undefined\"\r\n        >\r\n          <div class=\"text-center\">\r\n            <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n              {{placeholder}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--size mb-1\">\r\n              {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n            </div>\r\n            <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n              {{placeholderFileFormat}} {{extensions}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n\r\n    <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n      <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n  *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n  [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n  <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n    <li\r\n      class=\"new-custom-file-input__item\"\r\n      *ngFor=\"let file of files; trackBy: trackByFn\"\r\n      [ngClass]=\"{'file-error': file.error}\"\r\n      [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n      [tooltipPosition]=\"'top-start'\"\r\n    >\r\n      <ng-container *ngIf=\"autoUpload\">\r\n        <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n      </ng-container>\r\n      <div class=\"qq-file-info\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n          <span\r\n            class=\"qq-upload-file-selector qq-upload-file\"\r\n            [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n          >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n        </div>\r\n        <div class=\"info\">\r\n          <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n            <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n          </div>\r\n\r\n          <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.size)}}</span>\r\n          <span\r\n            *ngIf=\"!readonly && file.uuid && showDeleteButton && !viewOnly\"\r\n            (click)=\"delete(file)\"\r\n            class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n            aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n          ></span>\r\n\r\n          <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n            <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n            <span class=\"color-negative\">{{file.error}}</span>\r\n          </div>\r\n\r\n          <div\r\n            class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n            *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n            (click)=\"clear(file)\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF)}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;word-break:break-word;white-space:normal;color:var(--neutral-text-primary)}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:1px dashed var(--neutral-bg-stroke-default, #DAD5CE);height:94px}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{border:1px dashed var(--neutral-bg-stroke-hover, #BCB5AC)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__content{height:94px}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);border:1px dashed var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);border:1px dashed var(--system-bg-controls-positive-default, #108E3A)}\n"] }]
@@ -13508,6 +13532,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], minFiles: [{
                 type: Input
+            }], maxFileNameLength: [{
+                type: Input
+            }], fileNameRegex: [{
+                type: Input
             }], formData: [{
                 type: Input
             }], uploadEndPoint: [{
@@ -13550,6 +13578,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], messageInvalidFileFormat: [{
                 type: Input
+            }], messageFileNameTooLong: [{
+                type: Input
+            }], messageInvalidFileName: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], placeholderFileMaxSize: [{