myrta-ui 17.0.27 → 17.0.29

package/fesm2022/myrta-ui.mjs

@@ -10,13 +10,13 @@ import { trigger, state, transition, style, animate, group, keyframes } from '@a
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, Validators, ReactiveFormsModule, NG_VALIDATORS, FormArray, FormControl } from '@angular/forms';
 import { v4 } from 'uuid';
-import { ComponentPortal } from '@angular/cdk/portal';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i1$3 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { createPopper } from '@popperjs/core';
 import * as i6 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { delay, of, Subject, filter, BehaviorSubject, EMPTY } from 'rxjs';
+import { Subscription, delay, of, Subject, filter, BehaviorSubject, EMPTY } from 'rxjs';
 import * as i2$1 from '@angular/cdk/layout';
 import { Fancybox } from 'mrx-gallery-lib';
 import * as i1$5 from '@angular/common/http';
@@ -1548,6 +1548,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+class PopupItemComponent {
+    templateRef;
+    clicked = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class PopupComponent {
+    closeAfterClick = true;
+    // @Input() maxWidth: string = '800px';
+    templateRef;
+    popupItemComponents;
+    closed = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PopupComponent, selector: "mrx-popup", inputs: { closeAfterClick: "closeAfterClick" }, 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]=\"'100%'\">\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"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mrx-popup', template: "<ng-template>\r\n  <div class=\"mrx-popup-content\" [style.width]=\"'100%'\">\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"] }]
+        }], propDecorators: { closeAfterClick: [{
+                type: Input
+            }], templateRef: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }], popupItemComponents: [{
+                type: ContentChildren,
+                args: [PopupItemComponent]
+            }], closed: [{
+                type: Output
+            }] } });
+
+class PopupTriggerDirective {
+    overlay;
+    elementRef;
+    viewContainerRef;
+    dispatcher;
+    _subscriber$ = new Subscription();
+    _isDropdownOpen = false;
+    _overlayRef;
+    popupPanel;
+    popupPosition = 'bottom-start';
+    constructor(overlay, elementRef, viewContainerRef, dispatcher) {
+        this.overlay = overlay;
+        this.elementRef = elementRef;
+        this.viewContainerRef = viewContainerRef;
+        this.dispatcher = dispatcher;
+    }
+    togglePopup() {
+        this._isDropdownOpen ? this.destroyDropdown() : this.openDropdown();
+    }
+    openDropdown() {
+        this.hideOtherOverlays();
+        this._isDropdownOpen = true;
+        this._overlayRef = this.overlay.create({
+            positionStrategy: this.getPositionStrategy(),
+            hasBackdrop: false,
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: 'mrx-popup',
+            minWidth: this.elementRef.nativeElement.getBoundingClientRect().width
+        });
+        const templatePortal = new TemplatePortal(this.popupPanel.templateRef, this.viewContainerRef);
+        this._overlayRef.attach(templatePortal);
+        this._subscriber$ = this._overlayRef.detachments().subscribe(_ => {
+            this._isDropdownOpen = false;
+            this.popupPanel.closed.emit();
+        });
+    }
+    close() {
+        this.destroyDropdown();
+    }
+    getPositionStrategy() {
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions(positionStrategy[this.popupPosition]);
+    }
+    destroyDropdown() {
+        if (!this._overlayRef || !this._isDropdownOpen) {
+            return;
+        }
+        this._overlayRef.detach();
+    }
+    hideOtherOverlays() {
+        this.dispatcher._attachedOverlays.forEach((overlay) => {
+            if (overlay.getConfig().panelClass === 'mrx-popup') {
+                overlay.detach();
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+        }
+        this._subscriber$.unsubscribe();
+    }
+    handleClick(event) {
+        if (this.elementRef.nativeElement.contains(event.target))
+            return;
+        if (!event.target.closest('.mrx-popup')) {
+            return this.destroyDropdown();
+        }
+        else {
+            if (event.target.closest('.mrx-popup-item') && this.popupPanel.closeAfterClick) {
+                return this.destroyDropdown();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopupTriggerDirective, deps: [{ token: i1$3.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$3.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: { popupPanel: ["mrxPopupTrigger", "popupPanel"], popupPosition: "popupPosition" }, host: { listeners: { "click": "togglePopup()", "document:click": "handleClick($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopupTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mrxPopupTrigger]',
+                    host: {
+                        '(click)': 'togglePopup()'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$3.OverlayOutsideClickDispatcher }], propDecorators: { popupPanel: [{
+                type: Input,
+                args: ['mrxPopupTrigger']
+            }], popupPosition: [{
+                type: Input
+            }], handleClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class PopupModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: PopupModule, declarations: [PopupComponent,
+            PopupItemComponent,
+            PopupTriggerDirective], imports: [CommonModule,
+            OverlayModule], exports: [PopupComponent,
+            PopupItemComponent,
+            PopupTriggerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopupModule, imports: [CommonModule,
+            OverlayModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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 {
     invalid = true;
     invalidMessage = '';
@@ -3537,14 +3707,14 @@ class ModalRef {
         this.afterClosedSubject.complete();
     }
     send(result) {
+        console.log('send is ref');
         this.afterSendSubject.next(result);
-        this.afterSendSubject.complete();
     }
     afterClosed() {
         return this.afterClosedSubject.asObservable();
     }
     afterSend() {
-        return this.afterClosedSubject.asObservable();
+        return this.afterSendSubject.asObservable();
     }
 }
 
@@ -5097,7 +5267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
-const maskConfigFunction$7 = () => {
+const maskConfigFunction$8 = () => {
     return {
         validation: false,
     };
@@ -5111,7 +5281,7 @@ class InputTextareaModule {
             SaveStateModule,
             NgxMaskDirective,
             AutosizeModule], exports: [InputTextareaComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTextareaModule, providers: [provideNgxMask(maskConfigFunction$7)], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTextareaModule, providers: [provideNgxMask(maskConfigFunction$8)], imports: [CommonModule,
             FormsModule,
             CharsLeftModule,
             ErrorMessageModule,
@@ -5131,7 +5301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgxMaskDirective,
                         AutosizeModule
                     ],
-                    providers: [provideNgxMask(maskConfigFunction$7)],
+                    providers: [provideNgxMask(maskConfigFunction$8)],
                     exports: [InputTextareaComponent],
                 }]
         }] });
@@ -6042,7 +6212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-const maskConfigFunction$6 = () => {
+const maskConfigFunction$7 = () => {
     return {
         validation: false,
     };
@@ -6054,7 +6224,7 @@ class InputSearchModule {
             CharsLeftModule,
             ErrorMessageModule,
             NgxMaskDirective], exports: [InputSearchComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSearchModule, providers: [provideNgxMask(maskConfigFunction$6)], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSearchModule, providers: [provideNgxMask(maskConfigFunction$7)], imports: [CommonModule,
             FormsModule,
             CharsLeftModule,
             ErrorMessageModule] });
@@ -6070,7 +6240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ErrorMessageModule,
                         NgxMaskDirective
                     ],
-                    providers: [provideNgxMask(maskConfigFunction$6)],
+                    providers: [provideNgxMask(maskConfigFunction$7)],
                     exports: [InputSearchComponent],
                 }]
         }] });
@@ -7140,7 +7310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-const maskConfigFunction$5 = () => {
+const maskConfigFunction$6 = () => {
     return {
         validation: false,
     };
@@ -7154,7 +7324,7 @@ class InputTextModule {
             SaveStateModule,
             CdkTooltipModule,
             NgxMaskDirective], exports: [InputTextComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTextModule, providers: [provideNgxMask(maskConfigFunction$5)], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTextModule, providers: [provideNgxMask(maskConfigFunction$6)], imports: [CommonModule,
             FormsModule,
             CharsLeftModule,
             ErrorMessageModule,
@@ -7174,7 +7344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         CdkTooltipModule,
                         NgxMaskDirective
                     ],
-                    providers: [provideNgxMask(maskConfigFunction$5)],
+                    providers: [provideNgxMask(maskConfigFunction$6)],
                     exports: [InputTextComponent],
                 }]
         }] });
@@ -7442,7 +7612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-const maskConfigFunction$4 = () => {
+const maskConfigFunction$5 = () => {
     // системный формат числа с дробной частью и группой разраядов (тысячи)
     const c = Intl.NumberFormat().formatToParts(1234.5);
     const t = c.find(x => x.type === 'group')?.value;
@@ -7462,7 +7632,7 @@ class InputNumberModule {
             SaveStateModule,
             ErrorMessageModule,
             NgxMaskDirective], exports: [InputNumberComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputNumberModule, providers: [provideNgxMask(maskConfigFunction$4)], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputNumberModule, providers: [provideNgxMask(maskConfigFunction$5)], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             CharsLeftModule,
@@ -7483,7 +7653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgxMaskDirective
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    providers: [provideNgxMask(maskConfigFunction$4)],
+                    providers: [provideNgxMask(maskConfigFunction$5)],
                     exports: [InputNumberComponent],
                 }]
         }] });
@@ -9973,7 +10143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['phoneInput']
             }] } });
 
-const maskConfigFunction$3 = () => {
+const maskConfigFunction$4 = () => {
     return {
         validation: false,
     };
@@ -9987,7 +10157,7 @@ class InputPhoneModule {
             SaveStateModule,
             ErrorMessageModule,
             NgxMaskDirective], exports: [InputPhoneComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputPhoneModule, providers: [provideNgxMask(maskConfigFunction$3)], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputPhoneModule, providers: [provideNgxMask(maskConfigFunction$4)], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             DropdownModule,
@@ -10008,7 +10178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ErrorMessageModule,
                         NgxMaskDirective
                     ],
-                    providers: [provideNgxMask(maskConfigFunction$3)],
+                    providers: [provideNgxMask(maskConfigFunction$4)],
                     exports: [InputPhoneComponent]
                 }]
         }] });
@@ -11138,7 +11308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-const maskConfigFunction$2 = () => {
+const maskConfigFunction$3 = () => {
     return {
         validation: false,
     };
@@ -11151,7 +11321,7 @@ class InputDatepickerModule {
             ErrorMessageModule,
             LabelModule,
             NgxMaskDirective], exports: [InputDatepickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDatepickerModule, providers: [provideNgxMask(maskConfigFunction$2)], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDatepickerModule, providers: [provideNgxMask(maskConfigFunction$3)], imports: [CommonModule,
             FormsModule,
             SaveStateModule,
             ErrorMessageModule,
@@ -11170,7 +11340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgxMaskDirective
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    providers: [provideNgxMask(maskConfigFunction$2)],
+                    providers: [provideNgxMask(maskConfigFunction$3)],
                     exports: [InputDatepickerComponent],
                 }]
         }] });
@@ -11703,7 +11873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-const maskConfigFunction$1 = () => {
+const maskConfigFunction$2 = () => {
     return {
         validation: false,
     };
@@ -11716,7 +11886,7 @@ class InputDateTimeModule {
             ErrorMessageModule,
             LabelModule,
             NgxMaskDirective], exports: [InputDateTimeComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateTimeModule, providers: [provideNgxMask(maskConfigFunction$1)], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateTimeModule, providers: [provideNgxMask(maskConfigFunction$2)], imports: [CommonModule,
             FormsModule,
             SaveStateModule,
             ErrorMessageModule,
@@ -11735,7 +11905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgxMaskDirective
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    providers: [provideNgxMask(maskConfigFunction$1)],
+                    providers: [provideNgxMask(maskConfigFunction$2)],
                     exports: [InputDateTimeComponent],
                 }]
         }] });
@@ -12097,7 +12267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-const maskConfigFunction = () => {
+const maskConfigFunction$1 = () => {
     return {
         validation: false,
     };
@@ -12110,7 +12280,7 @@ class InputTimepickerModule {
             ErrorMessageModule,
             LabelModule,
             NgxMaskDirective], exports: [InputTimepickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTimepickerModule, providers: [provideNgxMask(maskConfigFunction)], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTimepickerModule, providers: [provideNgxMask(maskConfigFunction$1)], imports: [CommonModule,
             FormsModule,
             SaveStateModule,
             ErrorMessageModule,
@@ -12129,7 +12299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgxMaskDirective
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    providers: [provideNgxMask(maskConfigFunction)],
+                    providers: [provideNgxMask(maskConfigFunction$1)],
                     exports: [InputTimepickerComponent],
                 }]
         }] });
@@ -16006,6 +16176,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+const maskConfigFunction = () => {
+    return {
+        validation: false,
+    };
+};
 class RadioGroupModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: RadioGroupModule, declarations: [RadioGroupComponent, RadioGroupItemComponent, RadioGroupHeaderComponent], imports: [CommonModule,
@@ -16014,8 +16189,9 @@ class RadioGroupModule {
             InputSearchModule,
             LabelModule,
             ErrorMessageModule,
-            SaveStateModule], exports: [RadioGroupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioGroupModule, imports: [CommonModule,
+            SaveStateModule,
+            NgxMaskDirective], exports: [RadioGroupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioGroupModule, providers: [provideNgxMask(maskConfigFunction)], imports: [CommonModule,
             FormsModule,
             RadioModule,
             InputSearchModule,
@@ -16034,10 +16210,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         InputSearchModule,
                         LabelModule,
                         ErrorMessageModule,
-                        SaveStateModule
+                        SaveStateModule,
+                        NgxMaskDirective
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    exports: [RadioGroupComponent]
+                    exports: [RadioGroupComponent],
+                    providers: [provideNgxMask(maskConfigFunction)],
                 }]
         }] });
 
@@ -16696,6 +16874,96 @@ var StepperClasses;
     StepperClasses["success"] = "mrx-stepper-success";
 })(StepperClasses || (StepperClasses = {}));
 
+var SelectSizeEnum;
+(function (SelectSizeEnum) {
+    SelectSizeEnum["medium"] = "mrx-select-md";
+    SelectSizeEnum["large"] = "mrx-select-lg";
+})(SelectSizeEnum || (SelectSizeEnum = {}));
+
+var SelectTypeEnum;
+(function (SelectTypeEnum) {
+    SelectTypeEnum["single"] = "mrx-select-single";
+    SelectTypeEnum["multi"] = "mrx-select-multi";
+})(SelectTypeEnum || (SelectTypeEnum = {}));
+
+class SelectComponent {
+    value = null;
+    items = [];
+    type = 'single';
+    size = 'large';
+    get getClasses() {
+        return `${SelectTypeEnum[this.type]} ${SelectSizeEnum[this.size]}`;
+    }
+    onChange = (value) => { };
+    onTouched = () => { };
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(obj) {
+    }
+    updateValue(insideValue) {
+    }
+    logger(value) {
+        console.log(value);
+    }
+    onOpen(event) {
+        event.stopPropagation();
+    }
+    onClear(event) {
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectComponent, selector: "mrx-select", inputs: { items: "items", type: "type", size: "size" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"mrx-select\" [class]=\"getClasses\">\r\n  <div class=\"mrx-select__wrapper\">\r\n    @switch (type) {\r\n      @case ('multi') {\r\n\r\n      }\r\n      @default {\r\n        <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\">\r\n          <div class=\"mrx-select__input__box\">\r\n            @if (value) {\r\n              <div class=\"mrx-select__input__value\"></div>\r\n            }\r\n            @else {\r\n              <div class=\"mrx-select__input__placeholder\"></div>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"mrx-select__input__controls\">\r\n            <div class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n              <span class=\"mrx-icon icon-close icon-font-24\"></span>\r\n            </div>\r\n            <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n              <span class=\"mrx-icon icon-chevron-down icon-font-24\"></span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <mrx-popup #dropdown (closed)=\"logger('closed')\" [closeAfterClick]=\"true\">\r\n          <mrx-popup-item (clicked)=\"logger('clicked')\">Cut</mrx-popup-item>\r\n          <mrx-popup-item (clicked)=\"logger('clicked')\">Copy</mrx-popup-item>\r\n          <mrx-popup-item (clicked)=\"logger('clicked')\">Paste</mrx-popup-item>\r\n        </mrx-popup>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".mrx-select.mrx-select-single .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:center;justify-content:space-between;gap:8px}.mrx-select.mrx-select-single .mrx-select__input:focus,.mrx-select.mrx-select-single .mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select.mrx-select-single .mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select.mrx-select-single .mrx-select__input__box{flex-grow:1}.mrx-select.mrx-select-single .mrx-select__input__controls{display:flex;align-items:center;gap:8px}.mrx-select.mrx-select-single .mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select.mrx-select-single .mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-single.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-3) - var(--border-width-default)) var(--spacing-4)}.mrx-select.mrx-select-single.mrx-select-lg .mrx-select__input__box{min-height:24px}\n"], dependencies: [{ kind: "component", type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick"], outputs: ["closed"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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 class=\"mrx-select\" [class]=\"getClasses\">\r\n  <div class=\"mrx-select__wrapper\">\r\n    @switch (type) {\r\n      @case ('multi') {\r\n\r\n      }\r\n      @default {\r\n        <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\">\r\n          <div class=\"mrx-select__input__box\">\r\n            @if (value) {\r\n              <div class=\"mrx-select__input__value\"></div>\r\n            }\r\n            @else {\r\n              <div class=\"mrx-select__input__placeholder\"></div>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"mrx-select__input__controls\">\r\n            <div class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n              <span class=\"mrx-icon icon-close icon-font-24\"></span>\r\n            </div>\r\n            <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n              <span class=\"mrx-icon icon-chevron-down icon-font-24\"></span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <mrx-popup #dropdown (closed)=\"logger('closed')\" [closeAfterClick]=\"true\">\r\n          <mrx-popup-item (clicked)=\"logger('clicked')\">Cut</mrx-popup-item>\r\n          <mrx-popup-item (clicked)=\"logger('clicked')\">Copy</mrx-popup-item>\r\n          <mrx-popup-item (clicked)=\"logger('clicked')\">Paste</mrx-popup-item>\r\n        </mrx-popup>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".mrx-select.mrx-select-single .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:center;justify-content:space-between;gap:8px}.mrx-select.mrx-select-single .mrx-select__input:focus,.mrx-select.mrx-select-single .mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select.mrx-select-single .mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select.mrx-select-single .mrx-select__input__box{flex-grow:1}.mrx-select.mrx-select-single .mrx-select__input__controls{display:flex;align-items:center;gap:8px}.mrx-select.mrx-select-single .mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select.mrx-select-single .mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-single.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-3) - var(--border-width-default)) var(--spacing-4)}.mrx-select.mrx-select-single.mrx-select-lg .mrx-select__input__box{min-height:24px}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class SelectModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SelectModule, declarations: [SelectComponent], imports: [CommonModule,
+            PopupModule], exports: [SelectComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectModule, imports: [CommonModule,
+            PopupModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SelectComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PopupModule
+                    ],
+                    exports: [
+                        SelectComponent
+                    ]
+                }]
+        }] });
+
 class PdfViewerComponent {
     _pdfViewerService;
     _renderer;
@@ -17005,5 +17273,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * 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, ControlsItemComponent, ControlsVisibilityEnum, ControlsWrapperComponent, ControlsWrapperModule, CountryISO$1 as CountryISO, CurrencyModule, CurrencyPipe, DateFormatModule, DateFormatPipe, DateTimeFormatPipe, DefaultPagerSettings, DropdownComponent, DropdownModule, EditorComponent, EditorModule, ErrorMessageComponent, ErrorMessageModule, FileUploadService, GalleryComponent, GalleryModule, HideAfterClickDirective, HintErrorMessageComponent, HintErrorMessageModule, IconButtonComponent, IconButtonModule, IconButtonSizeEnum, IconButtonStateEnum, IconButtonTypeEnum, InputDateSizesEnum$2 as InputDateSizesEnum, InputDateTimeComponent, InputDateTimeModule, InputDatepickerComponent, InputDatepickerModule, InputFileComponent, InputFileImageComponent, InputFileImageModule, InputFileImageTypeEnum, InputFileModule, InputNumberComponent, InputNumberModule, InputNumberSizesEnum, InputOptComponent, InputOptModule, InputPasswordComponent, InputPasswordModule, InputPasswordSizesEnum, InputPhoneComponent, InputPhoneModule, InputSearchComponent, InputSearchModule, InputSearchSizesEnum, InputSelectComponent, InputSelectModule, InputSelectSizeEnum, InputTelComponent, InputTelModule, InputTextComponent, InputTextIconColorEnum, InputTextModule, InputTextSizesEnum, InputTextareaComponent, InputTextareaModule, InputTextareaSizesEnum, InputTimepickerComponent, InputTimepickerModule, JsonEditorComponent, JsonEditorModule, JsonEditorOptions, LabelComponent, LabelModule, LinkComponent, LinkModule, LinkSizesEnum, LinkTargetTypesEnum, LinkTypesEnum, LoaderColorEnum, LoaderComponent, LoaderModule, LoaderSizesEnum, MODAL_CONFIG, MODAL_DATA, ModalAlignButtonsEnum, ModalBackdropTypeClasses, ModalColorEnum, ModalComponent, ModalModule, ModalRef, ModalService, ModalServiceComponent, ModalServiceModule, ModalSizesEnum, ModalType, ModalTypeClasses, MrxAutoSaveActionsEnum, MrxAutosaveService, MrxFormValidator, NgxOtpBehavior, PagesNavComponent, PagesNavEnum, PagesNavModule, PaginatorComponent, PaginatorModule, PaginatorPositionCss, PdfViewerComponent, PdfViewerComponentModule, PhoneFormatModule, PhoneFormatPipe, PreviewEnum, ProgressClasses, ProgressComponent, ProgressModule, RadioComponent, RadioGroupComponent, RadioGroupModule, RadioModule, RadioTypesEnum, RatingComponent, RatingModule, RatingSizesEnum, RatingValueSizesEnum, RatingWrapperSizesEnum, SafeModule, SafePipe, SaveStateComponent, SaveStateModule, SaveStoreModule, SidePageComponent, SidePageHeaderSizesEnum, SidePageModule, SidePagePositionEnum, SidePageSizesEnum, StepperClasses, StepperComponent, StepperModule, SwitchComponent, SwitchModule, SwitchSizeEnum, SwitchTypeEnum, TabComponent, TableComponent, TableModule, TableTypeEnum, TabsClasses, TabsGroupComponent, TabsModule, TabsTypesClasses, Timezone, ToasterPosition, ToasterService, ToasterServiceModule, ToasterType, 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, dateTimeFormat, defaultConfig, defaultCustomConfig, formatBytes, formattingDateRange, formattingIsoToString, getBase64FromUrl, getHashCode, innerListToList, sHashCode, selectFields, selectMrxAutoSaveState, sliceDate, toBytes, toDate, toNumberFormat, toastrDefaultConfig, 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, ControlsItemComponent, ControlsVisibilityEnum, ControlsWrapperComponent, ControlsWrapperModule, CountryISO$1 as CountryISO, CurrencyModule, CurrencyPipe, DateFormatModule, DateFormatPipe, DateTimeFormatPipe, DefaultPagerSettings, DropdownComponent, DropdownModule, EditorComponent, EditorModule, ErrorMessageComponent, ErrorMessageModule, FileUploadService, GalleryComponent, GalleryModule, HideAfterClickDirective, HintErrorMessageComponent, HintErrorMessageModule, IconButtonComponent, IconButtonModule, IconButtonSizeEnum, IconButtonStateEnum, IconButtonTypeEnum, InputDateSizesEnum$2 as InputDateSizesEnum, InputDateTimeComponent, InputDateTimeModule, InputDatepickerComponent, InputDatepickerModule, InputFileComponent, InputFileImageComponent, InputFileImageModule, InputFileImageTypeEnum, InputFileModule, InputNumberComponent, InputNumberModule, InputNumberSizesEnum, InputOptComponent, InputOptModule, InputPasswordComponent, InputPasswordModule, InputPasswordSizesEnum, InputPhoneComponent, InputPhoneModule, InputSearchComponent, InputSearchModule, InputSearchSizesEnum, InputSelectComponent, InputSelectModule, InputSelectSizeEnum, InputTelComponent, InputTelModule, InputTextComponent, InputTextIconColorEnum, InputTextModule, InputTextSizesEnum, InputTextareaComponent, InputTextareaModule, InputTextareaSizesEnum, InputTimepickerComponent, InputTimepickerModule, JsonEditorComponent, JsonEditorModule, JsonEditorOptions, LabelComponent, LabelModule, LinkComponent, LinkModule, LinkSizesEnum, LinkTargetTypesEnum, LinkTypesEnum, LoaderColorEnum, LoaderComponent, LoaderModule, LoaderSizesEnum, MODAL_CONFIG, MODAL_DATA, ModalAlignButtonsEnum, ModalBackdropTypeClasses, ModalColorEnum, ModalComponent, ModalModule, ModalRef, ModalService, ModalServiceComponent, ModalServiceModule, ModalSizesEnum, ModalType, ModalTypeClasses, 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, SelectTypeEnum, SidePageComponent, SidePageHeaderSizesEnum, SidePageModule, SidePagePositionEnum, SidePageSizesEnum, StepperClasses, StepperComponent, StepperModule, SwitchComponent, SwitchModule, SwitchSizeEnum, SwitchTypeEnum, TabComponent, TableComponent, TableModule, TableTypeEnum, TabsClasses, TabsGroupComponent, TabsModule, TabsTypesClasses, Timezone, ToasterPosition, ToasterService, ToasterServiceModule, ToasterType, 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, dateTimeFormat, defaultConfig, defaultCustomConfig, formatBytes, formattingDateRange, formattingIsoToString, getBase64FromUrl, getHashCode, innerListToList, sHashCode, selectFields, selectMrxAutoSaveState, sliceDate, toBytes, toDate, toNumberFormat, toastrDefaultConfig, wordForm };
 //# sourceMappingURL=myrta-ui.mjs.map