myrta-ui 1.1.100 → 13.0.1

package/fesm2015/myrta-ui.mjs

@@ -16,7 +16,7 @@ import { OverlayModule, OverlayContainer, FullscreenOverlayContainer } from '@an
 import { createPopper } from '@popperjs/core';
 import * as i1$3 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { Subscription, Subject, timer, fromEvent, EMPTY } from 'rxjs';
+import { Subscription, asyncScheduler, Subject, timer, fromEvent, EMPTY } from 'rxjs';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { first, switchMap, map, mergeMap, filter, startWith, distinctUntilChanged, pairwise, catchError } from 'rxjs/operators';
 import * as i2 from '@angular/cdk/layout';
@@ -42,6 +42,7 @@ import tz from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import * as i1$8 from 'jodit-angular';
 import { JoditAngularModule } from 'jodit-angular';
+import isEqual from 'lodash-es/isEqual';
 import * as i2$3 from 'ngx-file-drop';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { __awaiter } from 'tslib';
@@ -1733,15 +1734,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 
 class PopupItemComponent {
     constructor() {
+        this.custom = false;
+        this.id = '';
+        this.disabled = false;
         this.clicked = new EventEmitter();
     }
+    itemClick() {
+        if (!this.disabled) {
+            this.clicked.emit();
+        }
+    }
 }
 PopupItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PopupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: PopupItemComponent, selector: "mrx-popup-item", outputs: { clicked: "clicked" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template>\r\n  <div class=\"mrx-popup-item\" (click)=\"clicked.emit()\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>\r\n", styles: [".mrx-popup-item{padding:8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer}.mrx-popup-item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}\n"] });
+PopupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: PopupItemComponent, selector: "mrx-popup-item", inputs: { custom: "custom", id: "id", disabled: "disabled" }, outputs: { clicked: "clicked" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template let-item=\"item\" let-first=\"first\" let-last=\"last\">\r\n  <div\r\n    class=\"mrx-popup-item\"\r\n    [class.mrx-popup-item--default]=\"!custom\"\r\n    [class.cursor-default]=\"disabled\"\r\n    [class.--disabled]=\"disabled\"\r\n    [class.--first]=\"first\"\r\n    [class.--last]=\"last\"\r\n    (click)=\"itemClick()\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>\r\n", styles: [".mrx-popup-item--default{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer}.mrx-popup-item--default:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-popup-item.--disabled{background-color:var(--neutral-bg-disabled, #EEF0F4)}.mrx-popup-item.--first{border-top-left-radius:4px;border-top-right-radius:4px}.mrx-popup-item.--last{border-bottom-left-radius:4px;border-bottom-right-radius:4px}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mrx-popup-item', template: "<ng-template>\r\n  <div class=\"mrx-popup-item\" (click)=\"clicked.emit()\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>\r\n", styles: [".mrx-popup-item{padding:8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer}.mrx-popup-item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}\n"] }]
-        }], propDecorators: { templateRef: [{
+            args: [{ selector: 'mrx-popup-item', template: "<ng-template let-item=\"item\" let-first=\"first\" let-last=\"last\">\r\n  <div\r\n    class=\"mrx-popup-item\"\r\n    [class.mrx-popup-item--default]=\"!custom\"\r\n    [class.cursor-default]=\"disabled\"\r\n    [class.--disabled]=\"disabled\"\r\n    [class.--first]=\"first\"\r\n    [class.--last]=\"last\"\r\n    (click)=\"itemClick()\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>\r\n", styles: [".mrx-popup-item--default{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer}.mrx-popup-item--default:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-popup-item.--disabled{background-color:var(--neutral-bg-disabled, #EEF0F4)}.mrx-popup-item.--first{border-top-left-radius:4px;border-top-right-radius:4px}.mrx-popup-item.--last{border-bottom-left-radius:4px;border-bottom-right-radius:4px}\n"] }]
+        }], propDecorators: { custom: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], templateRef: [{
                 type: ViewChild,
                 args: [TemplateRef, { static: true }]
             }], clicked: [{
@@ -1751,68 +1766,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 class PopupComponent {
     constructor() {
         this.closeAfterClick = true;
-        this.maxWidth = '800px';
-        this.closed = new EventEmitter();
+        this.minWidth = '';
+        this.toggle = new EventEmitter();
+        this._toggleInner = new EventEmitter();
+        this._updateInner = new EventEmitter();
+    }
+    togglePopup(value) {
+        this._toggleInner.emit(value);
+    }
+    updatePopup() {
+        this._updateInner.emit();
     }
 }
 PopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: PopupComponent, selector: "mrx-popup", inputs: { closeAfterClick: "closeAfterClick", maxWidth: "maxWidth" }, outputs: { closed: "closed" }, queries: [{ propertyName: "popupItemComponents", predicate: PopupItemComponent }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template>\r\n  <div class=\"mrx-popup-content\" [style.width]=\"maxWidth\">\r\n    <ng-container *ngFor=\"let item of popupItemComponents; let index = index; let first = first; let last = last\">\r\n      <ng-container *ngTemplateOutlet=\"item.templateRef\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".mrx-popup-content{padding:8px 0;background-color:#fff;border-radius:4px;box-shadow:0 1px 4px #3a3a3a4d}\n"], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+PopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: PopupComponent, selector: "mrx-popup", inputs: { closeAfterClick: "closeAfterClick", minWidth: "minWidth" }, outputs: { toggle: "toggle", _toggleInner: "_toggleInner", _updateInner: "_updateInner" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }, { propertyName: "popupItemComponents", predicate: PopupItemComponent }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template>\r\n  <div class=\"mrx-popup-content\" [style.width]=\"'100%'\" [style.min-width]=\"minWidth\">\r\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n\r\n    <div class=\"mrx-popup-content__items\" [style.max-height]=\"'280px'\">\r\n      <ng-container *ngFor=\"let item of popupItemComponents; let first = first; let last = last\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"item.templateRef\"\r\n          [ngTemplateOutletContext]=\"{item, first, last}\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".mrx-popup-content{background-color:#fff;border-radius:4px;box-shadow:0 1px 4px #3a3a3a4d}.mrx-popup-content__items{overflow-y:auto}\n"], directives: [{ type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mrx-popup', template: "<ng-template>\r\n  <div class=\"mrx-popup-content\" [style.width]=\"maxWidth\">\r\n    <ng-container *ngFor=\"let item of popupItemComponents; let index = index; let first = first; let last = last\">\r\n      <ng-container *ngTemplateOutlet=\"item.templateRef\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".mrx-popup-content{padding:8px 0;background-color:#fff;border-radius:4px;box-shadow:0 1px 4px #3a3a3a4d}\n"] }]
+            args: [{ selector: 'mrx-popup', template: "<ng-template>\r\n  <div class=\"mrx-popup-content\" [style.width]=\"'100%'\" [style.min-width]=\"minWidth\">\r\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n\r\n    <div class=\"mrx-popup-content__items\" [style.max-height]=\"'280px'\">\r\n      <ng-container *ngFor=\"let item of popupItemComponents; let first = first; let last = last\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"item.templateRef\"\r\n          [ngTemplateOutletContext]=\"{item, first, last}\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".mrx-popup-content{background-color:#fff;border-radius:4px;box-shadow:0 1px 4px #3a3a3a4d}.mrx-popup-content__items{overflow-y:auto}\n"] }]
         }], propDecorators: { closeAfterClick: [{
                 type: Input
-            }], maxWidth: [{
+            }], minWidth: [{
                 type: Input
             }], templateRef: [{
                 type: ViewChild,
                 args: [TemplateRef, { static: true }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['headerTemplate']
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: ['footerTemplate']
             }], popupItemComponents: [{
                 type: ContentChildren,
                 args: [PopupItemComponent]
-            }], closed: [{
+            }], toggle: [{
+                type: Output
+            }], _toggleInner: [{
+                type: Output
+            }], _updateInner: [{
                 type: Output
             }] } });
 
-class PopupModule {
-}
-PopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupModule, declarations: [PopupComponent,
-        PopupItemComponent], imports: [CommonModule,
-        OverlayModule], exports: [PopupComponent,
-        PopupItemComponent] });
-PopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupModule, imports: [[
-            CommonModule,
-            OverlayModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        PopupComponent,
-                        PopupItemComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        OverlayModule
-                    ],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    exports: [
-                        PopupComponent,
-                        PopupItemComponent
-                    ]
-                }]
-        }] });
+const topPosition = {
+    originX: 'center',
+    originY: 'top',
+    overlayX: 'center',
+    overlayY: 'bottom',
+    panelClass: 'top',
+};
+const bottomPosition = {
+    originX: 'center',
+    originY: 'bottom',
+    overlayX: 'center',
+    overlayY: 'top',
+    panelClass: 'bottom',
+};
+const leftPosition = {
+    originX: 'start',
+    originY: 'center',
+    overlayX: 'end',
+    overlayY: 'center',
+    panelClass: 'start',
+};
+const rightPosition = {
+    originX: 'end',
+    originY: 'center',
+    overlayX: 'start',
+    overlayY: 'center',
+    panelClass: 'end',
+};
+const topStartPosition = {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    panelClass: 'top-start',
+};
+const topEndPosition = {
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'bottom',
+    panelClass: 'top-end',
+};
+const bottomStartPosition = {
+    originX: 'start',
+    originY: 'bottom',
+    overlayX: 'start',
+    overlayY: 'top',
+    panelClass: 'bottom-start',
+};
+const bottomEndPosition = {
+    originX: 'end',
+    originY: 'bottom',
+    overlayX: 'end',
+    overlayY: 'top',
+    panelClass: 'bottom-end',
+};
+var PositionEnum;
+(function (PositionEnum) {
+    PositionEnum["Top"] = "top";
+    PositionEnum["Bottom"] = "bottom";
+    PositionEnum["Left"] = "left";
+    PositionEnum["Right"] = "right";
+    PositionEnum["TopStart"] = "top-start";
+    PositionEnum["TopEnd"] = "top-end";
+    PositionEnum["BottomStart"] = "bottom-start";
+    PositionEnum["BottomEnd"] = "bottom-end";
+})(PositionEnum || (PositionEnum = {}));
+const PositionStrategyEnum = {
+    [PositionEnum.Top]: [topPosition, bottomPosition, leftPosition, rightPosition],
+    [PositionEnum.Bottom]: [bottomPosition, topPosition, leftPosition, rightPosition],
+    [PositionEnum.Left]: [leftPosition, rightPosition, topPosition, bottomPosition],
+    [PositionEnum.Right]: [rightPosition, leftPosition, topPosition, bottomPosition],
+    [PositionEnum.TopStart]: [topStartPosition, topPosition, bottomStartPosition, bottomPosition],
+    [PositionEnum.TopEnd]: [topEndPosition, topPosition, bottomEndPosition, bottomPosition],
+    [PositionEnum.BottomStart]: [bottomStartPosition, bottomPosition, topStartPosition, topPosition],
+    [PositionEnum.BottomEnd]: [bottomEndPosition, bottomPosition, topEndPosition, topPosition],
+};
 
 class PopupTriggerDirective {
-    constructor(overlay, elementRef, viewContainerRef, dispatcher) {
+    constructor(overlay, elementRef, viewContainerRef, dispatcher, scrollDispatcher) {
         this.overlay = overlay;
         this.elementRef = elementRef;
         this.viewContainerRef = viewContainerRef;
         this.dispatcher = dispatcher;
-        this._subscriber$ = new Subscription();
+        this.scrollDispatcher = scrollDispatcher;
+        this._subscriberDetach$ = new Subscription();
+        this._subscriberAttach$ = new Subscription();
         this._isDropdownOpen = false;
         this.popupPosition = 'bottom-start';
+        this.isFullWidthDropdown = false;
+        this.minWidthDropdown = '120px';
+        this.scrollStrategy = 'close';
+    }
+    get getMinWidthDropdown() {
+        return this.isFullWidthDropdown ? this.elementRef.nativeElement.getBoundingClientRect().width : this.minWidthDropdown;
+    }
+    get getMaxWidthDropdown() {
+        return this.isFullWidthDropdown ? this.elementRef.nativeElement.getBoundingClientRect().width : this.maxWidthDropdown;
+    }
+    ngAfterViewInit() {
+        this.popupPanel._toggleInner.subscribe(isOpen => {
+            if (isOpen && !this._isDropdownOpen) {
+                this.openDropdown();
+            }
+            if (!isOpen && this._isDropdownOpen) {
+                this.closeDropdown();
+            }
+        });
+        this.popupPanel._updateInner.subscribe(() => {
+            asyncScheduler.schedule(() => this.updatePosition());
+        });
     }
     togglePopup() {
         this._isDropdownOpen ? this.destroyDropdown() : this.openDropdown();
@@ -1823,25 +1928,52 @@ class PopupTriggerDirective {
         this._overlayRef = this.overlay.create({
             positionStrategy: this.getPositionStrategy(),
             hasBackdrop: false,
-            scrollStrategy: this.overlay.scrollStrategies.close(),
+            scrollStrategy: this.scrollStrategy === 'reposition' ? this.overlay.scrollStrategies.reposition() : this.overlay.scrollStrategies.close(),
             backdropClass: 'cdk-overlay-transparent-backdrop',
-            panelClass: 'mrx-popup'
+            panelClass: 'mrx-popup',
+            minWidth: this.getMinWidthDropdown,
+            maxWidth: this.getMaxWidthDropdown,
         });
         const templatePortal = new TemplatePortal(this.popupPanel.templateRef, this.viewContainerRef);
         this._overlayRef.attach(templatePortal);
-        this._subscriber$ = this._overlayRef.detachments().subscribe(_ => {
+        this.popupPanel.toggle.emit(true);
+        this._subscriberDetach$ = this._overlayRef.detachments().subscribe(_ => {
             this._isDropdownOpen = false;
-            this.popupPanel.closed.emit();
+            this.popupPanel.toggle.emit(false);
+        });
+        this.scrollDispatcher.scrolled().subscribe((scrollable) => {
+            var _a;
+            if (scrollable &&
+                this.scrollContainerRef &&
+                scrollable.getElementRef().nativeElement === this.scrollContainerRef.nativeElement) {
+                (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.updatePosition();
+            }
         });
     }
-    close() {
+    closeDropdown() {
         this.destroyDropdown();
     }
+    updatePosition() {
+        if (this._overlayRef) {
+            this._overlayRef.updatePosition();
+        }
+    }
+    updateSize() {
+        if (this._overlayRef) {
+            this._overlayRef.updateSize({
+                minWidth: this.elementRef.nativeElement.getBoundingClientRect().width
+            });
+        }
+    }
     getPositionStrategy() {
-        return this.overlay
+        const overlay = this.overlay
             .position()
             .flexibleConnectedTo(this.elementRef)
-            .withPositions(positionStrategy[this.popupPosition]);
+            .withPositions(PositionStrategyEnum[this.popupPosition]);
+        if (this.scrollContainerRef) {
+            overlay.withScrollableContainers([this.scrollContainerRef.nativeElement]);
+        }
+        return overlay;
     }
     destroyDropdown() {
         if (!this._overlayRef || !this._isDropdownOpen) {
@@ -1860,7 +1992,8 @@ class PopupTriggerDirective {
         if (this._overlayRef) {
             this._overlayRef.dispose();
         }
-        this._subscriber$.unsubscribe();
+        this._subscriberDetach$.unsubscribe();
+        this._subscriberAttach$.unsubscribe();
     }
     handleClick(event) {
         if (this.elementRef.nativeElement.contains(event.target))
@@ -1874,9 +2007,12 @@ class PopupTriggerDirective {
             }
         }
     }
+    handleResize() {
+        this.updateSize();
+    }
 }
-PopupTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupTriggerDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$2.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Directive });
-PopupTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: { popupPanel: ["mrxPopupTrigger", "popupPanel"], popupPosition: "popupPosition" }, host: { listeners: { "click": "togglePopup()", "document:click": "handleClick($event)" } }, ngImport: i0 });
+PopupTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupTriggerDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$2.OverlayOutsideClickDispatcher }, { token: i1$2.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Directive });
+PopupTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: { popupPanel: ["mrxPopupTrigger", "popupPanel"], popupPosition: "popupPosition", isFullWidthDropdown: "isFullWidthDropdown", minWidthDropdown: "minWidthDropdown", maxWidthDropdown: "maxWidthDropdown", scrollContainerRef: "scrollContainerRef", scrollStrategy: "scrollStrategy" }, host: { listeners: { "click": "togglePopup()", "document:click": "handleClick($event)", "window:resize": "handleResize($event)" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupTriggerDirective, decorators: [{
             type: Directive,
             args: [{
@@ -1885,16 +2021,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         '(click)': 'togglePopup()'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$2.OverlayOutsideClickDispatcher }]; }, propDecorators: { popupPanel: [{
+        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$2.OverlayOutsideClickDispatcher }, { type: i1$2.ScrollDispatcher }]; }, propDecorators: { popupPanel: [{
                 type: Input,
                 args: ['mrxPopupTrigger']
             }], popupPosition: [{
                 type: Input
+            }], isFullWidthDropdown: [{
+                type: Input
+            }], minWidthDropdown: [{
+                type: Input
+            }], maxWidthDropdown: [{
+                type: Input
+            }], scrollContainerRef: [{
+                type: Input
+            }], scrollStrategy: [{
+                type: Input
             }], handleClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
+            }], handleResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
             }] } });
 
+class PopupModule {
+}
+PopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupModule, declarations: [PopupComponent,
+        PopupItemComponent,
+        PopupTriggerDirective], imports: [CommonModule,
+        OverlayModule], exports: [PopupComponent,
+        PopupItemComponent,
+        PopupTriggerDirective] });
+PopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupModule, imports: [[
+            CommonModule,
+            OverlayModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PopupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PopupComponent,
+                        PopupItemComponent,
+                        PopupTriggerDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        OverlayModule
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    exports: [
+                        PopupComponent,
+                        PopupItemComponent,
+                        PopupTriggerDirective
+                    ]
+                }]
+        }] });
+
 class ErrorMessageComponent {
     constructor() {
         this.invalid = true;
@@ -5657,7 +5840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 }]
         }] });
 
-const maskConfigFunction$8 = () => {
+const maskConfigFunction$9 = () => {
     return {
         validation: false,
     };
@@ -5676,7 +5859,7 @@ InputTextareaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
             CharsLeftModule,
             ErrorMessageModule,
             SaveStateModule,
-            NgxMaskModule.forRoot(maskConfigFunction$8),
+            NgxMaskModule.forRoot(maskConfigFunction$9),
             AutosizeModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputTextareaModule, decorators: [{
@@ -5689,7 +5872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         CharsLeftModule,
                         ErrorMessageModule,
                         SaveStateModule,
-                        NgxMaskModule.forRoot(maskConfigFunction$8),
+                        NgxMaskModule.forRoot(maskConfigFunction$9),
                         AutosizeModule
                     ],
                     exports: [InputTextareaComponent],
@@ -6008,7 +6191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
-const maskConfigFunction$7 = () => {
+const maskConfigFunction$8 = () => {
     return {
         validation: false,
     };
@@ -6029,7 +6212,7 @@ InputTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             ErrorMessageModule,
             SaveStateModule,
             CdkTooltipModule,
-            NgxMaskModule.forRoot(maskConfigFunction$7)
+            NgxMaskModule.forRoot(maskConfigFunction$8)
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputTextModule, decorators: [{
             type: NgModule,
@@ -6042,7 +6225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ErrorMessageModule,
                         SaveStateModule,
                         CdkTooltipModule,
-                        NgxMaskModule.forRoot(maskConfigFunction$7)
+                        NgxMaskModule.forRoot(maskConfigFunction$8)
                     ],
                     exports: [InputTextComponent],
                 }]
@@ -8525,7 +8708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 args: ['phoneInput']
             }] } });
 
-const maskConfigFunction$6 = () => {
+const maskConfigFunction$7 = () => {
     return {
         validation: false,
     };
@@ -8546,7 +8729,7 @@ InputPhoneModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
             DropdownModule,
             SaveStateModule,
             ErrorMessageModule,
-            NgxMaskModule.forRoot(maskConfigFunction$6)
+            NgxMaskModule.forRoot(maskConfigFunction$7)
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputPhoneModule, decorators: [{
             type: NgModule,
@@ -8560,7 +8743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         DropdownModule,
                         SaveStateModule,
                         ErrorMessageModule,
-                        NgxMaskModule.forRoot(maskConfigFunction$6)
+                        NgxMaskModule.forRoot(maskConfigFunction$7)
                     ],
                     exports: [InputPhoneComponent]
                 }]
@@ -8737,7 +8920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
-const maskConfigFunction$5 = () => {
+const maskConfigFunction$6 = () => {
     return {
         validation: false,
     };
@@ -8754,7 +8937,7 @@ InputSearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
             FormsModule,
             CharsLeftModule,
             ErrorMessageModule,
-            NgxMaskModule.forRoot(maskConfigFunction$5),
+            NgxMaskModule.forRoot(maskConfigFunction$6),
             SaveStateModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputSearchModule, decorators: [{
@@ -8766,7 +8949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         FormsModule,
                         CharsLeftModule,
                         ErrorMessageModule,
-                        NgxMaskModule.forRoot(maskConfigFunction$5),
+                        NgxMaskModule.forRoot(maskConfigFunction$6),
                         SaveStateModule
                     ],
                     exports: [InputSearchComponent],
@@ -9295,7 +9478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
-const maskConfigFunction$4 = () => {
+const maskConfigFunction$5 = () => {
     return {
         validation: false,
     };
@@ -9314,7 +9497,7 @@ InputDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
             SaveStateModule,
             ErrorMessageModule,
             LabelModule,
-            NgxMaskModule.forRoot(maskConfigFunction$4),
+            NgxMaskModule.forRoot(maskConfigFunction$5),
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDatepickerModule, decorators: [{
             type: NgModule,
@@ -9326,7 +9509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         SaveStateModule,
                         ErrorMessageModule,
                         LabelModule,
-                        NgxMaskModule.forRoot(maskConfigFunction$4),
+                        NgxMaskModule.forRoot(maskConfigFunction$5),
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     exports: [InputDatepickerComponent],
@@ -9639,84 +9822,6 @@ var InputDateSizesEnum$1;
     InputDateSizesEnum["large"] = "mrx-input-date-lg";
 })(InputDateSizesEnum$1 || (InputDateSizesEnum$1 = {}));
 
-const topPosition = {
-    originX: 'center',
-    originY: 'top',
-    overlayX: 'center',
-    overlayY: 'bottom',
-    panelClass: 'top',
-};
-const bottomPosition = {
-    originX: 'center',
-    originY: 'bottom',
-    overlayX: 'center',
-    overlayY: 'top',
-    panelClass: 'bottom',
-};
-const leftPosition = {
-    originX: 'start',
-    originY: 'center',
-    overlayX: 'end',
-    overlayY: 'center',
-    panelClass: 'start',
-};
-const rightPosition = {
-    originX: 'end',
-    originY: 'center',
-    overlayX: 'start',
-    overlayY: 'center',
-    panelClass: 'end',
-};
-const topStartPosition = {
-    originX: 'start',
-    originY: 'top',
-    overlayX: 'start',
-    overlayY: 'bottom',
-    panelClass: 'top-start',
-};
-const topEndPosition = {
-    originX: 'end',
-    originY: 'top',
-    overlayX: 'end',
-    overlayY: 'bottom',
-    panelClass: 'top-end',
-};
-const bottomStartPosition = {
-    originX: 'start',
-    originY: 'bottom',
-    overlayX: 'start',
-    overlayY: 'top',
-    panelClass: 'bottom-start',
-};
-const bottomEndPosition = {
-    originX: 'end',
-    originY: 'bottom',
-    overlayX: 'end',
-    overlayY: 'top',
-    panelClass: 'bottom-end',
-};
-var PositionEnum;
-(function (PositionEnum) {
-    PositionEnum["Top"] = "top";
-    PositionEnum["Bottom"] = "bottom";
-    PositionEnum["Left"] = "left";
-    PositionEnum["Right"] = "right";
-    PositionEnum["TopStart"] = "top-start";
-    PositionEnum["TopEnd"] = "top-end";
-    PositionEnum["BottomStart"] = "bottom-start";
-    PositionEnum["BottomEnd"] = "bottom-end";
-})(PositionEnum || (PositionEnum = {}));
-const PositionStrategyEnum = {
-    [PositionEnum.Top]: [topPosition, bottomPosition, leftPosition, rightPosition],
-    [PositionEnum.Bottom]: [bottomPosition, topPosition, leftPosition, rightPosition],
-    [PositionEnum.Left]: [leftPosition, rightPosition, topPosition, bottomPosition],
-    [PositionEnum.Right]: [rightPosition, leftPosition, topPosition, bottomPosition],
-    [PositionEnum.TopStart]: [topStartPosition, topPosition, bottomStartPosition, bottomPosition],
-    [PositionEnum.TopEnd]: [topEndPosition, topPosition, bottomEndPosition, bottomPosition],
-    [PositionEnum.BottomStart]: [bottomStartPosition, bottomPosition, topStartPosition, topPosition],
-    [PositionEnum.BottomEnd]: [bottomEndPosition, bottomPosition, topEndPosition, topPosition],
-};
-
 class InputDateComponent {
     constructor(_overlay, _detector, _elementRef) {
         this._overlay = _overlay;
@@ -10020,7 +10125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 args: ['dateInput']
             }] } });
 
-const maskConfigFunction$3 = () => {
+const maskConfigFunction$4 = () => {
     return {
         validation: false,
     };
@@ -10040,7 +10145,7 @@ InputDateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             ErrorMessageModule,
             LabelModule,
             SaveStateModule,
-            NgxMaskModule.forRoot(maskConfigFunction$3)
+            NgxMaskModule.forRoot(maskConfigFunction$4)
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDateModule, decorators: [{
             type: NgModule,
@@ -10055,7 +10160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ErrorMessageModule,
                         LabelModule,
                         SaveStateModule,
-                        NgxMaskModule.forRoot(maskConfigFunction$3)
+                        NgxMaskModule.forRoot(maskConfigFunction$4)
                     ],
                     exports: [
                         InputDateComponent
@@ -10650,7 +10755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
-const maskConfigFunction$2 = () => {
+const maskConfigFunction$3 = () => {
     return {
         validation: false,
     };
@@ -10669,7 +10774,7 @@ InputDateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
             SaveStateModule,
             ErrorMessageModule,
             LabelModule,
-            NgxMaskModule.forRoot(maskConfigFunction$2),
+            NgxMaskModule.forRoot(maskConfigFunction$3),
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDateTimeModule, decorators: [{
             type: NgModule,
@@ -10681,7 +10786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         SaveStateModule,
                         ErrorMessageModule,
                         LabelModule,
-                        NgxMaskModule.forRoot(maskConfigFunction$2),
+                        NgxMaskModule.forRoot(maskConfigFunction$3),
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     exports: [InputDateTimeComponent],
@@ -11044,7 +11149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
-const maskConfigFunction$1 = () => {
+const maskConfigFunction$2 = () => {
     return {
         validation: false,
     };
@@ -11063,7 +11168,7 @@ InputTimepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
             SaveStateModule,
             ErrorMessageModule,
             LabelModule,
-            NgxMaskModule.forRoot(maskConfigFunction$1),
+            NgxMaskModule.forRoot(maskConfigFunction$2),
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputTimepickerModule, decorators: [{
             type: NgModule,
@@ -11075,7 +11180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         SaveStateModule,
                         ErrorMessageModule,
                         LabelModule,
-                        NgxMaskModule.forRoot(maskConfigFunction$1),
+                        NgxMaskModule.forRoot(maskConfigFunction$2),
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     exports: [InputTimepickerComponent],
@@ -12372,7 +12477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
-const maskConfigFunction = () => {
+const maskConfigFunction$1 = () => {
     var _a, _b;
     // системный формат числа с дробной частью и группой разраядов (тысячи)
     const c = Intl.NumberFormat().formatToParts(1234.5);
@@ -12400,7 +12505,7 @@ InputNumberModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
             CharsLeftModule,
             SaveStateModule,
             ErrorMessageModule,
-            NgxMaskModule.forRoot(maskConfigFunction)
+            NgxMaskModule.forRoot(maskConfigFunction$1)
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputNumberModule, decorators: [{
             type: NgModule,
@@ -12413,13 +12518,444 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         CharsLeftModule,
                         SaveStateModule,
                         ErrorMessageModule,
-                        NgxMaskModule.forRoot(maskConfigFunction)
+                        NgxMaskModule.forRoot(maskConfigFunction$1)
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     exports: [InputNumberComponent],
                 }]
         }] });
 
+var SelectSizeEnum;
+(function (SelectSizeEnum) {
+    SelectSizeEnum["medium"] = "mrx-select-md";
+    SelectSizeEnum["large"] = "mrx-select-lg";
+})(SelectSizeEnum || (SelectSizeEnum = {}));
+
+const modifyOriginItems = (selected, bindValue) => {
+    if (bindValue) {
+        const modifiedSelected = [];
+        for (let item of selected) {
+            for (let key in item) {
+                if (item.hasOwnProperty(bindValue) && key === bindValue) {
+                    modifiedSelected.push(item[bindValue]);
+                }
+                if (!item.hasOwnProperty(bindValue)) {
+                    modifiedSelected.push(null);
+                    break;
+                }
+            }
+        }
+        return modifiedSelected;
+    }
+    else {
+        return selected;
+    }
+};
+
+const cleanSelectItems = (innerList) => innerList.map(cleanSelectItem);
+const cleanSelectItem = (innerItem) => innerItem.__origin;
+
+const getSelectedItems = (innerItems, bindValue) => {
+    return modifyOriginItems(cleanSelectItems(innerItems.filter(item => item.__selected)), bindValue);
+};
+
+const getInnerItems = (items, selectedItems = [], bindValue) => {
+    return items.map((item, idx) => {
+        const findItem = selectedItems.find(i => isEqual(i, item));
+        if (typeof item === 'object' && !Array.isArray(item)) {
+            return { __origin: item, __id: item['id'] || idx, __selected: !!findItem };
+        }
+        else {
+            return { __origin: item, __id: idx, __selected: !!findItem };
+        }
+    });
+};
+
+const getInnerSelected = (items, selected, bindValue) => {
+    const arr = items.filter(i => {
+        if (bindValue) {
+            return selected.some(x => isEqual(x, i[bindValue]));
+        }
+        else {
+            return selected.some(x => isEqual(x, i));
+        }
+    });
+    return arr;
+};
+
+class SelectComponent {
+    constructor() {
+        this.searchValue = '';
+        this.isOpen = false;
+        this.originSelected = [];
+        this.originItems = [];
+        this.selected = [];
+        this.innerItems = [];
+        this.form = new MrxFormValidator();
+        this.model = {
+            label: '',
+        };
+        // SAVE STATE
+        this.uuid = v4();
+        this.fields = [];
+        this.multiple = false;
+        this.isLoading = false;
+        this.searchable = false;
+        this.clearable = true;
+        this.closable = true;
+        this.size = 'large';
+        this.bindValue = null;
+        this.bindLabel = null;
+        this.bindIcon = null;
+        this.emptyText = 'Не найдено';
+        this.placeholder = 'Выберите значение';
+        this.searchPlaceholder = 'Введите значение';
+        this.multiCollapseCount = null;
+        this.optionValidation = null;
+        this.extraOptionPlaceholder = 'Введите значение';
+        this.use = 'default';
+        this.sortIcon = null;
+        this.sortPlaceholder = '';
+        this.isFullWidthDropdown = true;
+        this.withoutSelected = false;
+        this.hideSelected = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.invalid = false;
+        this.invalidMessage = '';
+        this.checkInvalid = null;
+        this.popupPosition = PositionEnum.BottomStart;
+        this.singleChange = false;
+        this.scrollStrategy = 'close';
+        this.changed = new EventEmitter();
+        this.modelChange = new EventEmitter();
+        this.onChange = (value) => {
+        };
+        this.onTouched = () => {
+        };
+    }
+    set items(items) {
+        this.originItems = items;
+        this._updateSelected(this.originItems, this.originSelected);
+    }
+    ngOnInit() {
+        if (this.optionValidation) {
+            this.form.initFields(this.model, this.optionValidation);
+        }
+    }
+    get readonlyClass() {
+        return this.readonly ? 'mrx-input__readonly' : '';
+    }
+    get checkValidClasses() {
+        return this.checkInvalid === false ?
+            'mrx-input-checked-success' :
+            this.checkInvalid === true ? 'mrx-input-checked-error' : '';
+    }
+    get getClasses() {
+        return `${SelectSizeEnum[this.size]} ${this.readonlyClass} ${this.checkValidClasses}`;
+    }
+    get getSelectedLabels() {
+        if (this.withoutSelected) {
+            return [];
+        }
+        else {
+            return this.innerItems.filter(i => i.__selected);
+        }
+    }
+    get filteredItems() {
+        if (this.customSearchFn) {
+            return this.innerItems.filter(item => {
+                var _a, _b;
+                return (_b = (_a = this.customSearchFn) === null || _a === void 0 ? void 0 : _a.call(this, this.searchValue, item.__origin)) !== null && _b !== void 0 ? _b : false;
+            });
+        }
+        else {
+            return this.innerItems.filter(i => {
+                if (this.hideSelected) {
+                    if (this.bindLabel) {
+                        return String(i.__origin[this.bindLabel]).toLowerCase().includes(this.searchValue.toLocaleLowerCase()) && !i.__selected;
+                    }
+                    else {
+                        if (i.__origin['label']) {
+                            return String(i.__origin['label']).toLowerCase().includes(this.searchValue.toLocaleLowerCase()) && !i.__selected;
+                        }
+                        else {
+                            return String(i.__origin).toLowerCase().includes(this.searchValue.toLocaleLowerCase()) && !i.__selected;
+                        }
+                    }
+                }
+                else {
+                    if (this.bindLabel) {
+                        return String(i.__origin[this.bindLabel]).toLowerCase().includes(this.searchValue.toLocaleLowerCase());
+                    }
+                    else {
+                        if (i.__origin['label']) {
+                            return String(i.__origin['label']).toLowerCase().includes(this.searchValue.toLocaleLowerCase());
+                        }
+                        else {
+                            return String(i.__origin).toLowerCase().includes(this.searchValue.toLocaleLowerCase());
+                        }
+                    }
+                }
+            });
+        }
+    }
+    get isInvalidMessage() {
+        var _a;
+        return !!this.invalidMessage || !!((_a = this.invalidMessage) === null || _a === void 0 ? void 0 : _a.length);
+    }
+    get getIconSize() {
+        return this.size === 'medium' ? 'icon-font-16' : 'icon-font-24';
+    }
+    onSelect(item) {
+        if (!this.multiple) {
+            this.innerItems = this.innerItems.map(i => {
+                if (this.singleChange) {
+                    return Object.assign(Object.assign({}, i), { __selected: i.__id === item.__id });
+                }
+                if (this.use === 'default') {
+                    return Object.assign(Object.assign({}, i), { __selected: i.__id === item.__id ? !i.__selected : false });
+                }
+                else {
+                    return Object.assign(Object.assign({}, i), { __selected: i.__id === item.__id });
+                }
+            });
+        }
+        else {
+            this.innerItems = this.innerItems.map(i => {
+                return Object.assign(Object.assign({}, i), { __selected: i.__id === item.__id ? !i.__selected : i.__selected });
+            });
+        }
+        this.dropdown.updatePopup();
+        this._updateValue(this.innerItems);
+    }
+    clearItem(item) {
+        this.onUnselect(item);
+    }
+    onUnselect(item) {
+        this.innerItems.forEach(i => {
+            if (i.__id === item.__id) {
+                i.__selected = false;
+            }
+        });
+        this._updateValue(this.innerItems);
+    }
+    onClear(event) {
+        event.stopPropagation();
+        this.innerItems = this.innerItems.map(item => (Object.assign(Object.assign({}, item), { __selected: false })));
+        this.dropdown.togglePopup(false);
+        this._updateValue([]);
+    }
+    togglePopup(isOpen) {
+        this.isOpen = isOpen;
+    }
+    asOption(option) {
+        return option;
+    }
+    asLabel(label) {
+        return label;
+    }
+    writeValue(selected = []) {
+        this.originSelected = selected;
+        this._updateSelected(this.originItems, this.originSelected);
+    }
+    changeTextValueEmpty() {
+        this.form.initModelChanged(this.model);
+    }
+    onAddNewCustomOption() {
+        if (this.form.isValid()) {
+            this.addOption(this.model.label);
+            this.model.label = '';
+            this.changeTextValueEmpty();
+        }
+    }
+    _updateSelected(items = [], selected = []) {
+        if (this.multiple && Array.isArray(this.originSelected)) {
+            this.selected = getInnerSelected(items, selected, this.bindValue);
+        }
+        else {
+            this.selected = getInnerSelected(items, [selected], this.bindValue);
+        }
+        this.innerItems = getInnerItems(items, this.selected, this.bindValue);
+    }
+    _updateValue(selectedItems) {
+        const clearedSelected = getSelectedItems(selectedItems, this.bindValue);
+        const outputSelected = this.multiple ? clearedSelected : clearedSelected.length ? clearedSelected[0] : null;
+        this.changed.emit(outputSelected);
+        this.modelChange.emit({ value: outputSelected, id: this.uuid });
+        this.onChange(outputSelected);
+        this.onTouched();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+}
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SelectComponent, selector: "mrx-select", inputs: { fields: "fields", items: "items", multiple: "multiple", isLoading: "isLoading", searchable: "searchable", clearable: "clearable", closable: "closable", size: "size", bindValue: "bindValue", bindLabel: "bindLabel", bindIcon: "bindIcon", emptyText: "emptyText", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", multiCollapseCount: "multiCollapseCount", optionValidation: ["isExtraOption", "optionValidation"], extraOptionPlaceholder: "extraOptionPlaceholder", use: "use", sortIcon: "sortIcon", sortPlaceholder: "sortPlaceholder", isFullWidthDropdown: "isFullWidthDropdown", withoutSelected: "withoutSelected", hideSelected: "hideSelected", addOption: "addOption", customSearchFn: "customSearchFn", disabled: "disabled", readonly: "readonly", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", popupPosition: "popupPosition", singleChange: "singleChange", scrollContainer: "scrollContainer", scrollStrategy: "scrollStrategy" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mrx-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], propDecorators: { fields: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], bindValue: [{
+                type: Input
+            }], bindLabel: [{
+                type: Input
+            }], bindIcon: [{
+                type: Input
+            }], emptyText: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], multiCollapseCount: [{
+                type: Input
+            }], optionValidation: [{
+                type: Input,
+                args: ['isExtraOption']
+            }], extraOptionPlaceholder: [{
+                type: Input
+            }], use: [{
+                type: Input
+            }], sortIcon: [{
+                type: Input
+            }], sortPlaceholder: [{
+                type: Input
+            }], isFullWidthDropdown: [{
+                type: Input
+            }], withoutSelected: [{
+                type: Input
+            }], hideSelected: [{
+                type: Input
+            }], addOption: [{
+                type: Input
+            }], customSearchFn: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], invalidMessage: [{
+                type: Input
+            }], checkInvalid: [{
+                type: Input
+            }], popupPosition: [{
+                type: Input
+            }], singleChange: [{
+                type: Input
+            }], scrollContainer: [{
+                type: Input
+            }], scrollStrategy: [{
+                type: Input
+            }], dropdown: [{
+                type: ViewChild,
+                args: ['dropdown']
+            }], optionTemplate: [{
+                type: ContentChild,
+                args: ['optionTemplate']
+            }], labelTemplate: [{
+                type: ContentChild,
+                args: ['labelTemplate']
+            }], popupHeaderTemplate: [{
+                type: ContentChild,
+                args: ['popupHeaderTemplate']
+            }], popupFooterTemplate: [{
+                type: ContentChild,
+                args: ['popupFooterTemplate']
+            }], contentTemplate: [{
+                type: ContentChild,
+                args: ['contentTemplate']
+            }], changed: [{
+                type: Output
+            }], modelChange: [{
+                type: Output
+            }] } });
+
+const maskConfigFunction = () => {
+    return {
+        validation: false,
+    };
+};
+class SelectModule {
+}
+SelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectModule, declarations: [SelectComponent], imports: [CommonModule,
+        FormsModule,
+        PopupModule,
+        LoaderModule,
+        InputTextModule,
+        ErrorMessageModule,
+        SaveStateModule,
+        ButtonModule,
+        InputSearchModule, i1$7.NgxMaskModule], exports: [SelectComponent] });
+SelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectModule, imports: [[
+            CommonModule,
+            FormsModule,
+            PopupModule,
+            LoaderModule,
+            InputTextModule,
+            ErrorMessageModule,
+            SaveStateModule,
+            ButtonModule,
+            InputSearchModule,
+            NgxMaskModule.forRoot(maskConfigFunction)
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SelectComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        PopupModule,
+                        LoaderModule,
+                        InputTextModule,
+                        ErrorMessageModule,
+                        SaveStateModule,
+                        ButtonModule,
+                        InputSearchModule,
+                        NgxMaskModule.forRoot(maskConfigFunction)
+                    ],
+                    exports: [
+                        SelectComponent
+                    ]
+                }]
+        }] });
+
 const bytesInOneMb = 1048576;
 function toBytes(mb) {
     return mb * bytesInOneMb;
@@ -19594,5 +20130,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertColorClasses, AlertComponent, AlertIconClasses, AlertModule, BadgeColorClassesEnum, BadgeComponent, BadgeGroupComponent, BadgeSizeEnum, BadgeTagTypeClassesEnum, BadgeTargetTypesEnum, BadgeTypeEnum, BadgesModule, BreadcrumbsComponent, BreadcrumbsModule, BreadcrumbsTypeEnum, ButtonColorsEnum, ButtonComponent, ButtonIconPositionEnum, ButtonModule, ButtonSizesEnum, ButtonTypesEnum, CdkTooltipDirective, CdkTooltipModule, CharsLeftComponent, CharsLeftModule, CheckboxComponent, CheckboxGroupComponent, CheckboxGroupModule, CheckboxModule, ColumnComponent, ContentWrapperComponent, ContentWrapperModule, ContentWrapperTypeEnum, ContextMenuAttachDirective, ContextMenuComponent, ContextMenuContentComponent, ContextMenuFixedService, ContextMenuItemDirective, ContextMenuModule, ContextMenuService, ControlsItemComponent, ControlsVisibilityEnum, ControlsWrapperComponent, ControlsWrapperModule, CountriesISO, CountriesRusLabel, CountryISO, CurrencyModule, CurrencyPipe, DateFormatModule, DateFormatPipe, DateTimeFormatPipe, DefaultPagerSettings, DocumentEditorComponent, DocumentEditorModule, DropdownComponent, DropdownModule, EditorComponent, EditorModule, ErrorMessageComponent, ErrorMessageModule, FileUploadService, FormulaEditorComponent, FormulaEditorModule, GalleryComponent, GalleryModule, HideAfterClickDirective, HintErrorMessageComponent, HintErrorMessageModule, IconButtonComponent, IconButtonModule, IconButtonSizeEnum, IconButtonStateEnum, IconButtonTypeEnum, InputDateComponent, InputDateModule, InputDateSizesEnum$2 as InputDateSizesEnum, InputDateTimeComponent, InputDateTimeModule, InputDateTimeSizesEnum, InputDatepickerComponent, InputDatepickerModule, InputEditorModeEnum, InputFileComponent, InputFileImageComponent, InputFileImageModule, InputFileImageTypeEnum, InputFileModule, InputNumberComponent, InputNumberModule, InputNumberSizesEnum, InputOptComponent, InputOptModule, InputPasswordComponent, InputPasswordModule, InputPasswordSizesEnum, InputPhoneComponent, InputPhoneModule, InputSearchComponent, InputSearchModule, InputSearchSizesEnum, InputSelectComponent, InputSelectModule, InputSelectSizeEnum, InputTelComponent, InputTelModule, InputTelSizesEnum, InputTextComponent, InputTextIconColorEnum, InputTextModule, InputTextSizesEnum, InputTextareaComponent, InputTextareaModule, InputTextareaSizesEnum, InputTimepickerComponent, InputTimepickerModule, JsonEditorComponent, JsonEditorModule, JsonEditorOptions, LabelComponent, LabelModule, LinkComponent, LinkModule, LinkSizesEnum, LinkTargetTypesEnum, LinkTypesEnum, LoaderColorEnum, LoaderComponent, LoaderModule, LoaderSizesEnum, ModalAlignButtonsEnum, ModalColorEnum, ModalComponent, ModalModule, ModalSizesEnum, MrxAutoSaveActionsEnum, MrxAutosaveService, MrxFormValidator, NgxOtpBehavior, PagesNavComponent, PagesNavEnum, PagesNavModule, PaginatorComponent, PaginatorModule, PaginatorPositionCss, PdfViewerComponent, PdfViewerComponentModule, PhoneFormatModule, PhoneFormatPipe, PopupComponent, PopupItemComponent, PopupModule, PopupTriggerDirective, PreviewEnum, ProgressClasses, ProgressComponent, ProgressModule, RadioComponent, RadioGroupComponent, RadioGroupModule, RadioModule, RadioTypesEnum, RatingComponent, RatingModule, RatingSizesEnum, RatingValueSizesEnum, RatingWrapperSizesEnum, SafeModule, SafePipe, SaveStateComponent, SaveStateModule, SaveStoreModule, StepperClasses, StepperComponent, StepperModule, SwitchComponent, SwitchModule, SwitchSizeEnum, SwitchTypeEnum, TabComponent, TableComponent, TableModule, TableTypeEnum, TabsClasses, TabsGroupComponent, TabsModule, TabsTypesClasses, Timezone$1 as Timezone, Tooltip, TooltipComponent, TooltipModule, TooltipService, TooltipTextPositionEnum, TooltipTriggerComponent, TooltipTriggerEnum, TruncateDirective, TruncateDirectiveModule, TruncateModule, TruncatePipe, TruncateTextComponent, TruncateTextModule, ValidationMethodsEnum, ValidationOptionsEnum, ValidationTypesEnum, WarningMessageComponent, WarningMessageModule, WidgetWrapperComponent, WidgetWrapperModule, autosaveAddId, autosaveError, autosaveErrorFor, autosaveStart, autosaveStartFor, autosaveStop, autosaveStopFor, autosaveSuccess, autosaveSuccessFor, convertBase64ToFile, countryData, dateTimeFormat, formatBytes, formattingDateRange, formattingIsoToString, getBase64FromUrl, getHashCode, sHashCode, selectFields, selectMrxAutoSaveState, sliceDate, toBytes, toDate, toNumberFormat, wordForm };
+export { AlertColorClasses, AlertComponent, AlertIconClasses, AlertModule, BadgeColorClassesEnum, BadgeComponent, BadgeGroupComponent, BadgeSizeEnum, BadgeTagTypeClassesEnum, BadgeTargetTypesEnum, BadgeTypeEnum, BadgesModule, BreadcrumbsComponent, BreadcrumbsModule, BreadcrumbsTypeEnum, ButtonColorsEnum, ButtonComponent, ButtonIconPositionEnum, ButtonModule, ButtonSizesEnum, ButtonTypesEnum, CdkTooltipDirective, CdkTooltipModule, CharsLeftComponent, CharsLeftModule, CheckboxComponent, CheckboxGroupComponent, CheckboxGroupModule, CheckboxModule, ColumnComponent, ContentWrapperComponent, ContentWrapperModule, ContentWrapperTypeEnum, ContextMenuAttachDirective, ContextMenuComponent, ContextMenuContentComponent, ContextMenuFixedService, ContextMenuItemDirective, ContextMenuModule, ContextMenuService, ControlsItemComponent, ControlsVisibilityEnum, ControlsWrapperComponent, ControlsWrapperModule, CountriesISO, CountriesRusLabel, CountryISO, CurrencyModule, CurrencyPipe, DateFormatModule, DateFormatPipe, DateTimeFormatPipe, DefaultPagerSettings, DocumentEditorComponent, DocumentEditorModule, DropdownComponent, DropdownModule, EditorComponent, EditorModule, ErrorMessageComponent, ErrorMessageModule, FileUploadService, FormulaEditorComponent, FormulaEditorModule, GalleryComponent, GalleryModule, HideAfterClickDirective, HintErrorMessageComponent, HintErrorMessageModule, IconButtonComponent, IconButtonModule, IconButtonSizeEnum, IconButtonStateEnum, IconButtonTypeEnum, InputDateComponent, InputDateModule, InputDateSizesEnum$2 as InputDateSizesEnum, InputDateTimeComponent, InputDateTimeModule, InputDateTimeSizesEnum, InputDatepickerComponent, InputDatepickerModule, InputEditorModeEnum, InputFileComponent, InputFileImageComponent, InputFileImageModule, InputFileImageTypeEnum, InputFileModule, InputNumberComponent, InputNumberModule, InputNumberSizesEnum, InputOptComponent, InputOptModule, InputPasswordComponent, InputPasswordModule, InputPasswordSizesEnum, InputPhoneComponent, InputPhoneModule, InputSearchComponent, InputSearchModule, InputSearchSizesEnum, InputSelectComponent, InputSelectModule, InputSelectSizeEnum, InputTelComponent, InputTelModule, InputTelSizesEnum, InputTextComponent, InputTextIconColorEnum, InputTextModule, InputTextSizesEnum, InputTextareaComponent, InputTextareaModule, InputTextareaSizesEnum, InputTimepickerComponent, InputTimepickerModule, JsonEditorComponent, JsonEditorModule, JsonEditorOptions, LabelComponent, LabelModule, LinkComponent, LinkModule, LinkSizesEnum, LinkTargetTypesEnum, LinkTypesEnum, LoaderColorEnum, LoaderComponent, LoaderModule, LoaderSizesEnum, ModalAlignButtonsEnum, ModalColorEnum, ModalComponent, ModalModule, ModalSizesEnum, MrxAutoSaveActionsEnum, MrxAutosaveService, MrxFormValidator, NgxOtpBehavior, PagesNavComponent, PagesNavEnum, PagesNavModule, PaginatorComponent, PaginatorModule, PaginatorPositionCss, PdfViewerComponent, PdfViewerComponentModule, PhoneFormatModule, PhoneFormatPipe, PopupComponent, PopupItemComponent, PopupModule, PopupTriggerDirective, PreviewEnum, ProgressClasses, ProgressComponent, ProgressModule, RadioComponent, RadioGroupComponent, RadioGroupModule, RadioModule, RadioTypesEnum, RatingComponent, RatingModule, RatingSizesEnum, RatingValueSizesEnum, RatingWrapperSizesEnum, SafeModule, SafePipe, SaveStateComponent, SaveStateModule, SaveStoreModule, SelectComponent, SelectModule, SelectSizeEnum, StepperClasses, StepperComponent, StepperModule, SwitchComponent, SwitchModule, SwitchSizeEnum, SwitchTypeEnum, TabComponent, TableComponent, TableModule, TableTypeEnum, TabsClasses, TabsGroupComponent, TabsModule, TabsTypesClasses, Timezone$1 as Timezone, Tooltip, TooltipComponent, TooltipModule, TooltipService, TooltipTextPositionEnum, TooltipTriggerComponent, TooltipTriggerEnum, TruncateDirective, TruncateDirectiveModule, TruncateModule, TruncatePipe, TruncateTextComponent, TruncateTextModule, ValidationMethodsEnum, ValidationOptionsEnum, ValidationTypesEnum, WarningMessageComponent, WarningMessageModule, WidgetWrapperComponent, WidgetWrapperModule, autosaveAddId, autosaveError, autosaveErrorFor, autosaveStart, autosaveStartFor, autosaveStop, autosaveStopFor, autosaveSuccess, autosaveSuccessFor, convertBase64ToFile, countryData, dateTimeFormat, formatBytes, formattingDateRange, formattingIsoToString, getBase64FromUrl, getHashCode, sHashCode, selectFields, selectMrxAutoSaveState, sliceDate, toBytes, toDate, toNumberFormat, wordForm };
 //# sourceMappingURL=myrta-ui.mjs.map