myrta-ui 17.0.30 → 17.0.31

package/fesm2022/myrta-ui.mjs

@@ -16,14 +16,14 @@ 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 { Subscription, delay, of, Subject, filter, BehaviorSubject, EMPTY } from 'rxjs';
+import { Subscription, asyncScheduler, 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';
 import { HttpEventType, HttpClientModule } from '@angular/common/http';
 import * as i2$2 from '@ngrx/store';
 import { createAction, props, createReducer, on, StoreModule, createFeatureSelector, createSelector } from '@ngrx/store';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, isEqual } from 'lodash-es';
 import * as i1$6 from '@ngrx/effects';
 import { EffectsModule } from '@ngrx/effects';
 import * as i1$7 from 'ngx-toastr';
@@ -1549,15 +1549,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 class PopupItemComponent {
+    custom = false;
     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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PopupItemComponent, selector: "mrx-popup-item", inputs: { custom: "custom" }, 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\" [class.mrx-popup-item--default]=\"custom\" (click)=\"clicked.emit()\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>\r\n", styles: [".mrx-popup-item{padding:8px 8px 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: [{
+            args: [{ selector: 'mrx-popup-item', template: "<ng-template>\r\n  <div class=\"mrx-popup-item\" [class.mrx-popup-item--default]=\"custom\" (click)=\"clicked.emit()\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>\r\n", styles: [".mrx-popup-item{padding:8px 8px 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: { custom: [{
+                type: Input
+            }], templateRef: [{
                 type: ViewChild,
                 args: [TemplateRef, { static: true }]
             }], clicked: [{
@@ -1566,16 +1569,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class PopupComponent {
     closeAfterClick = true;
-    // @Input() maxWidth: string = '800px';
     templateRef;
     popupItemComponents;
-    closed = new EventEmitter();
+    toggle = new EventEmitter();
+    _toggleInner = new EventEmitter();
+    _updateInner = new EventEmitter();
+    togglePopup(value) {
+        this._toggleInner.emit(value);
+    }
+    updatePopup() {
+        this._updateInner.emit();
+    }
     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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PopupComponent, selector: "mrx-popup", inputs: { closeAfterClick: "closeAfterClick" }, outputs: { toggle: "toggle", _toggleInner: "_toggleInner", _updateInner: "_updateInner" }, 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{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"] }]
+            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{background-color:#fff;border-radius:4px;box-shadow:0 1px 4px #3a3a3a4d}\n"] }]
         }], propDecorators: { closeAfterClick: [{
                 type: Input
             }], templateRef: [{
@@ -1584,7 +1594,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], popupItemComponents: [{
                 type: ContentChildren,
                 args: [PopupItemComponent]
-            }], closed: [{
+            }], toggle: [{
+                type: Output
+            }], _toggleInner: [{
+                type: Output
+            }], _updateInner: [{
                 type: Output
             }] } });
 
@@ -1593,7 +1607,8 @@ class PopupTriggerDirective {
     elementRef;
     viewContainerRef;
     dispatcher;
-    _subscriber$ = new Subscription();
+    _subscriberDetach$ = new Subscription();
+    _subscriberAttach$ = new Subscription();
     _isDropdownOpen = false;
     _overlayRef;
     popupPanel;
@@ -1604,6 +1619,20 @@ class PopupTriggerDirective {
         this.viewContainerRef = viewContainerRef;
         this.dispatcher = dispatcher;
     }
+    ngAfterViewInit() {
+        this.popupPanel._toggleInner.subscribe(isOpen => {
+            console.log(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();
     }
@@ -1620,14 +1649,27 @@ class PopupTriggerDirective {
         });
         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);
         });
     }
-    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
             .position()
@@ -1651,7 +1693,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))
@@ -1665,8 +1708,11 @@ class PopupTriggerDirective {
             }
         }
     }
+    handleResize() {
+        this.updateSize();
+    }
     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 });
+    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)", "window:resize": "handleResize($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopupTriggerDirective, decorators: [{
             type: Directive,
@@ -1684,6 +1730,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], handleClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
+            }], handleResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
             }] } });
 
 class PopupModule {
@@ -4542,9 +4591,9 @@ class ModalService {
             .centerVertically();
         const overlayRef = this.overlay.create({
             positionStrategy,
-            hasBackdrop: true,
-            backdropClass: 'mrx-modal',
-            panelClass: 'mrx-modal'
+            hasBackdrop: config.hasBackdrop !== undefined ? config.hasBackdrop : true,
+            backdropClass: config.backdropClass || ModalBackdropTypeClasses[config.type || ModalType.Modal],
+            panelClass: config.panelClass || ModalTypeClasses[config.type || ModalType.Modal]
         });
         const dialogRef = new ModalRef(overlayRef, config, this, 'default');
         const injector = Injector.create({
@@ -16879,19 +16928,20 @@ var SelectSizeEnum;
     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;
+    isOpen = false;
+    selected = null;
     items = [];
-    type = 'single';
     size = 'large';
+    bindValue = null;
+    bindLabel = 'label';
+    bindIcon = 'icon';
+    dropdown;
     get getClasses() {
-        return `${SelectTypeEnum[this.type]} ${SelectSizeEnum[this.size]}`;
+        return `${SelectSizeEnum[this.size]}`;
+    }
+    get getSelectedSingleLabels() {
+        return this.selected?.[this.bindLabel] || '';
     }
     onChange = (value) => { };
     onTouched = () => { };
@@ -16901,27 +16951,48 @@ class SelectComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    writeValue(obj) {
+    writeValue(selected) {
+        if (selected) {
+            this.selected = selected;
+        }
     }
-    updateValue(insideValue) {
+    updateValue(selected) {
+        this.selected = selected;
+        // this.changed.emit(this.formatValue(insideValue));
+        // this.modelChange.emit({value: this.formatValue(insideValue), id: this.uuid})
+        this.onChange(this.bindValue ? this.selected[this.bindValue] : this.selected);
+        this.onTouched();
     }
-    logger(value) {
-        console.log(value);
+    onSelect(item) {
+        this.selected = item;
+        this.updateValue(item);
     }
     onOpen(event) {
         event.stopPropagation();
+        if (this.isOpen) {
+            this.dropdown.togglePopup(false);
+        }
+        else {
+            this.dropdown.togglePopup(true);
+        }
     }
     onClear(event) {
         event.stopPropagation();
+        this.selected = null;
+        this.updateValue(this.selected);
+        this.dropdown.togglePopup(false);
+    }
+    togglePopup(isOpen) {
+        this.isOpen = isOpen;
     }
     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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectComponent, selector: "mrx-select", inputs: { items: "items", size: "size", bindValue: "bindValue", bindLabel: "bindLabel", bindIcon: "bindIcon" }, 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 });
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-select\" [class]=\"getClasses\">\r\n  <div class=\"mrx-select__wrapper\">\r\n    {{ selected | json }}\r\n    <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\">\r\n      <div class=\"mrx-select__input__box\">\r\n        @if (getSelectedSingleLabels) {\r\n          <div class=\"mrx-select__input__value\">{{ getSelectedSingleLabels }}</div>\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        @if (selected) {\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        }\r\n        <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n          @if (isOpen) {\r\n            <span class=\"mrx-icon icon-chevron-up icon-font-24\"></span>\r\n          } @else {\r\n            <span class=\"mrx-icon icon-chevron-down icon-font-24\"></span>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n      @for (item of items; track item.name) {\r\n        <mrx-popup-item [custom]=\"true\" (clicked)=\"onSelect(item)\">\r\n          {{ item.label }}\r\n        </mrx-popup-item>\r\n      }\r\n    </mrx-popup>\r\n  </div>\r\n</div>\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:center;justify-content:space-between;gap:8px}.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}.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__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.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-lg .mrx-select__input__box{min-height:24px}.mrx-select__dropdown__item{padding:8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;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__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}\n"], dependencies: [{ kind: "component", type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -16931,34 +17002,175 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             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"] }]
+                    ], template: "<div class=\"mrx-select\" [class]=\"getClasses\">\r\n  <div class=\"mrx-select__wrapper\">\r\n    {{ selected | json }}\r\n    <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\">\r\n      <div class=\"mrx-select__input__box\">\r\n        @if (getSelectedSingleLabels) {\r\n          <div class=\"mrx-select__input__value\">{{ getSelectedSingleLabels }}</div>\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        @if (selected) {\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        }\r\n        <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n          @if (isOpen) {\r\n            <span class=\"mrx-icon icon-chevron-up icon-font-24\"></span>\r\n          } @else {\r\n            <span class=\"mrx-icon icon-chevron-down icon-font-24\"></span>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n      @for (item of items; track item.name) {\r\n        <mrx-popup-item [custom]=\"true\" (clicked)=\"onSelect(item)\">\r\n          {{ item.label }}\r\n        </mrx-popup-item>\r\n      }\r\n    </mrx-popup>\r\n  </div>\r\n</div>\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:center;justify-content:space-between;gap:8px}.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}.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__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.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-lg .mrx-select__input__box{min-height:24px}.mrx-select__dropdown__item{padding:8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;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__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
-            }], type: [{
+            }], size: [{
+                type: Input
+            }], bindValue: [{
+                type: Input
+            }], bindLabel: [{
+                type: Input
+            }], bindIcon: [{
+                type: Input
+            }], dropdown: [{
+                type: ViewChild,
+                args: ['dropdown']
+            }] } });
+
+const getSelectedItems = (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 cleanSelectedItems = (innerList) => {
+    return innerList.map(({ __id, __selected, ...rest }) => rest);
+};
+
+class SelectMultiComponent {
+    isOpen = false;
+    originItems = [];
+    innerItems = [];
+    set items(list) {
+        this.originItems = list;
+        this.innerItems = list.map((item, idx) => ({
+            ...item, __id: item['id'] || idx, __selected: false
+        }));
+    }
+    size = 'large';
+    bindValue = null;
+    bindLabel = 'label';
+    bindIcon = 'icon';
+    dropdown;
+    get getClasses() {
+        return `${SelectSizeEnum[this.size]}`;
+    }
+    get getSelectedMultiLabels() {
+        return this.innerItems.filter(i => i.__selected);
+    }
+    onChange = (value) => {
+    };
+    onTouched = () => {
+    };
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(selected = []) {
+        if (selected) {
+            this.innerItems = this.originItems.map((item, idx) => {
+                const findItem = selected.find(i => isEqual(i, item));
+                return { ...item, __id: item['id'] || idx, __selected: !!findItem };
+            });
+        }
+    }
+    updateValue(selected) {
+        console.log(selected);
+        // this.changed.emit(this.formatValue(insideValue));
+        // this.modelChange.emit({value: this.formatValue(insideValue), id: this.uuid})
+        // this.onChange(getSelectedItems(this.selected, this.bindValue));
+        this.onTouched();
+    }
+    onSelectMulti(item) {
+        item.__selected = !item.__selected;
+        this.dropdown.updatePopup();
+        this.updateValue(getSelectedItems(cleanSelectedItems(this.innerItems.filter(item => item.__selected)), this.bindValue));
+    }
+    onOpen(event) {
+        event.stopPropagation();
+        if (this.isOpen) {
+            this.dropdown.togglePopup(false);
+        }
+        else {
+            this.dropdown.togglePopup(true);
+        }
+    }
+    onClear(event) {
+        event.stopPropagation();
+        this.innerItems = this.innerItems.map(item => ({ ...item, __selected: false }));
+        this.dropdown.togglePopup(false);
+        this.updateValue([]);
+    }
+    togglePopup(isOpen) {
+        this.isOpen = isOpen;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectMultiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectMultiComponent, selector: "mrx-select-multi", inputs: { items: "items", size: "size", bindValue: "bindValue", bindLabel: "bindLabel", bindIcon: "bindIcon" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectMultiComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-select\" [class]=\"getClasses\">\r\n  <div class=\"mrx-select__wrapper\">\r\n    <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\">\r\n      <div class=\"mrx-select__input__box\">\r\n        @if (getSelectedMultiLabels.length) {\r\n          <div class=\"mrx-select__input__value\">\r\n            @for (item of getSelectedMultiLabels; track item) {\r\n              {{ item[bindLabel] }}\r\n            }\r\n          </div>\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        @if (getSelectedMultiLabels.length) {\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        }\r\n        <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n          @if (isOpen) {\r\n            <span class=\"mrx-icon icon-chevron-up icon-font-24\"></span>\r\n          } @else {\r\n            <span class=\"mrx-icon icon-chevron-down icon-font-24\"></span>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"false\" (toggle)=\"togglePopup($event)\">\r\n      @for (item of innerItems; track item.__id) {\r\n        <mrx-popup-item [custom]=\"true\" (clicked)=\"onSelectMulti(item)\">\r\n          {{ item['label'] }}\r\n        </mrx-popup-item>\r\n      }\r\n    </mrx-popup>\r\n  </div>\r\n</div>\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:center;justify-content:space-between;gap:8px}.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}.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__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.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-lg .mrx-select__input__box{min-height:24px}.mrx-select__dropdown__item{padding:8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;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__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}\n"], dependencies: [{ kind: "component", type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom"], 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: SelectMultiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mrx-select-multi', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectMultiComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"mrx-select\" [class]=\"getClasses\">\r\n  <div class=\"mrx-select__wrapper\">\r\n    <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\">\r\n      <div class=\"mrx-select__input__box\">\r\n        @if (getSelectedMultiLabels.length) {\r\n          <div class=\"mrx-select__input__value\">\r\n            @for (item of getSelectedMultiLabels; track item) {\r\n              {{ item[bindLabel] }}\r\n            }\r\n          </div>\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        @if (getSelectedMultiLabels.length) {\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        }\r\n        <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n          @if (isOpen) {\r\n            <span class=\"mrx-icon icon-chevron-up icon-font-24\"></span>\r\n          } @else {\r\n            <span class=\"mrx-icon icon-chevron-down icon-font-24\"></span>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"false\" (toggle)=\"togglePopup($event)\">\r\n      @for (item of innerItems; track item.__id) {\r\n        <mrx-popup-item [custom]=\"true\" (clicked)=\"onSelectMulti(item)\">\r\n          {{ item['label'] }}\r\n        </mrx-popup-item>\r\n      }\r\n    </mrx-popup>\r\n  </div>\r\n</div>\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:center;justify-content:space-between;gap:8px}.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}.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__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.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-lg .mrx-select__input__box{min-height:24px}.mrx-select__dropdown__item{padding:8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;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__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}\n"] }]
+        }], propDecorators: { items: [{
                 type: Input
             }], size: [{
                 type: Input
+            }], bindValue: [{
+                type: Input
+            }], bindLabel: [{
+                type: Input
+            }], bindIcon: [{
+                type: Input
+            }], dropdown: [{
+                type: ViewChild,
+                args: ['dropdown']
             }] } });
 
 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 ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SelectModule, declarations: [SelectComponent,
+            SelectMultiComponent], imports: [CommonModule,
+            FormsModule,
+            PopupModule], exports: [SelectComponent,
+            SelectMultiComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectModule, imports: [CommonModule,
+            FormsModule,
             PopupModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        SelectComponent
+                        SelectComponent,
+                        SelectMultiComponent
                     ],
                     imports: [
                         CommonModule,
+                        FormsModule,
                         PopupModule
                     ],
                     exports: [
-                        SelectComponent
+                        SelectComponent,
+                        SelectMultiComponent
                     ]
                 }]
         }] });
@@ -17272,5 +17484,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, 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 };
+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, SelectMultiComponent, SelectSizeEnum, 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