monkey-style-guide-v2 0.0.22 → 0.0.23

package/fesm2022/monkey-style-guide-v2.mjs

@@ -14,6 +14,8 @@ import { filter, BehaviorSubject, map, merge, Subject, debounceTime, Subscriptio
 import { format, parseISO, subYears, addYears, subMonths, addMonths, getMonth, getYear, startOfWeek, startOfMonth, endOfWeek, endOfMonth, isSameMonth, isBefore, isAfter, isToday, addDays, isWithinInterval, subDays } from 'date-fns';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { getSupportedInputTypes } from '@angular/cdk/platform';
+import parsePhoneNumberFromString, { getCountries, getCountryCallingCode, getExampleNumber, AsYouType, isValidPhoneNumber } from 'libphonenumber-js';
+import examples from 'libphonenumber-js/examples.mobile.json';
 import { hasModifierKey } from '@angular/cdk/keycodes';
 
 const counters = {};
@@ -985,6 +987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 const MONKEY_I18N_WRAPPER = new InjectionToken('');
 const MONKEY_POPOVER_OPTIONS = new InjectionToken('MONKEY_POPOVER_OPTIONS');
+const MONKEY_COUNTRY_CODE = new InjectionToken('+55');
 
 class MonkeyPopoverContentComponent {
     constructor(host) {
@@ -2134,7 +2137,7 @@ class MonkeyFormFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: { id: "id", hideAction: ["hideAction", "hideAction", booleanAttribute], enableClear: ["enableClear", "enableClear", booleanAttribute], size: "size" }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "class.mecx-form-field-borderless": "hideBorder", "attr.id": "id", "id": "id", "class": "size" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true }, { propertyName: "_labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "_helperChildren", predicate: MonkeyHelperDirective, descendants: true }, { propertyName: "_prefixChildren", predicate: MonkeyPrefixDirective, descendants: true }, { propertyName: "_suffixChildren", predicate: MonkeySuffixDirective, descendants: true }, { propertyName: "_infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "_errorChildren", predicate: MonkeyErrorDirective, descendants: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (showHeader) {\n  <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n    <label [id]=\"labelId\" [attr.for]=\"control.id\">\n      <ng-content select=\"monkey-label\"></ng-content>\n    </label>\n    <ng-content select=\"monkey-helper\"></ng-content>\n  </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n  @if (hasPrefix) {\n    <ng-content select=\"monkey-prefix\"></ng-content>\n  }\n  @if (getSymbols(); as symbols) {\n    <div class=\"mecx-form-field-prefix-symbol\">\n      {{ symbols }}\n    </div>\n  }\n\n  <ng-content></ng-content>\n\n  @if (showClear) {\n    <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n  }\n  @if (showCalendar) {\n    <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n  }\n  @if (showLoading) {\n    <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n  }\n\n  @if (hasSuffix) {\n    <ng-content select=\"monkey-suffix\"></ng-content>\n  }\n</div>\n\n@if (showFooter) {\n  <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n    @switch (getFooterMessages()) {\n      @case ('error') {\n        <ng-content select=\"monkey-error\"></ng-content>\n      }\n      @case ('info') {\n        <div class=\"mecx-form-field-info\">\n          <ng-content select=\"monkey-info\"></ng-content>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.md .mecx-form-field-body{height:40px}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: { id: "id", hideAction: ["hideAction", "hideAction", booleanAttribute], enableClear: ["enableClear", "enableClear", booleanAttribute], size: "size" }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "class.mecx-form-field-borderless": "hideBorder", "attr.id": "id", "id": "id", "class": "size" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true }, { propertyName: "_labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "_helperChildren", predicate: MonkeyHelperDirective, descendants: true }, { propertyName: "_prefixChildren", predicate: MonkeyPrefixDirective, descendants: true }, { propertyName: "_suffixChildren", predicate: MonkeySuffixDirective, descendants: true }, { propertyName: "_infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "_errorChildren", predicate: MonkeyErrorDirective, descendants: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (showHeader) {\n  <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n    <label [id]=\"labelId\" [attr.for]=\"control.id\">\n      <ng-content select=\"monkey-label\"></ng-content>\n    </label>\n    <ng-content select=\"monkey-helper\"></ng-content>\n  </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n  @if (hasPrefix) {\n    <ng-content select=\"monkey-prefix\"></ng-content>\n  }\n  @if (getSymbols(); as symbols) {\n    <div class=\"mecx-form-field-prefix-symbol\">\n      {{ symbols }}\n    </div>\n  }\n\n  <ng-content></ng-content>\n\n  @if (showClear) {\n    <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n  }\n  @if (showCalendar) {\n    <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n  }\n  @if (showLoading) {\n    <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n  }\n\n  @if (hasSuffix) {\n    <ng-content select=\"monkey-suffix\"></ng-content>\n  }\n</div>\n\n@if (showFooter) {\n  <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n    @switch (getFooterMessages()) {\n      @case ('error') {\n        <ng-content select=\"monkey-error\"></ng-content>\n      }\n      @case ('info') {\n        <div class=\"mecx-form-field-info\">\n          <ng-content select=\"monkey-info\"></ng-content>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.md .mecx-form-field-body{height:40px}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
             type: Component,
@@ -2147,7 +2150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[attr.id]': 'id',
                         '[id]': 'id',
                         '[class]': 'size'
-                    }, template: "@if (showHeader) {\n  <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n    <label [id]=\"labelId\" [attr.for]=\"control.id\">\n      <ng-content select=\"monkey-label\"></ng-content>\n    </label>\n    <ng-content select=\"monkey-helper\"></ng-content>\n  </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n  @if (hasPrefix) {\n    <ng-content select=\"monkey-prefix\"></ng-content>\n  }\n  @if (getSymbols(); as symbols) {\n    <div class=\"mecx-form-field-prefix-symbol\">\n      {{ symbols }}\n    </div>\n  }\n\n  <ng-content></ng-content>\n\n  @if (showClear) {\n    <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n  }\n  @if (showCalendar) {\n    <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n  }\n  @if (showLoading) {\n    <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n  }\n\n  @if (hasSuffix) {\n    <ng-content select=\"monkey-suffix\"></ng-content>\n  }\n</div>\n\n@if (showFooter) {\n  <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n    @switch (getFooterMessages()) {\n      @case ('error') {\n        <ng-content select=\"monkey-error\"></ng-content>\n      }\n      @case ('info') {\n        <div class=\"mecx-form-field-info\">\n          <ng-content select=\"monkey-info\"></ng-content>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.md .mecx-form-field-body{height:40px}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"] }]
+                    }, template: "@if (showHeader) {\n  <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n    <label [id]=\"labelId\" [attr.for]=\"control.id\">\n      <ng-content select=\"monkey-label\"></ng-content>\n    </label>\n    <ng-content select=\"monkey-helper\"></ng-content>\n  </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n  @if (hasPrefix) {\n    <ng-content select=\"monkey-prefix\"></ng-content>\n  }\n  @if (getSymbols(); as symbols) {\n    <div class=\"mecx-form-field-prefix-symbol\">\n      {{ symbols }}\n    </div>\n  }\n\n  <ng-content></ng-content>\n\n  @if (showClear) {\n    <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n  }\n  @if (showCalendar) {\n    <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n  }\n  @if (showLoading) {\n    <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n  }\n\n  @if (hasSuffix) {\n    <ng-content select=\"monkey-suffix\"></ng-content>\n  }\n</div>\n\n@if (showFooter) {\n  <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n    @switch (getFooterMessages()) {\n      @case ('error') {\n        <ng-content select=\"monkey-error\"></ng-content>\n      }\n      @case ('info') {\n        <div class=\"mecx-form-field-info\">\n          <ng-content select=\"monkey-info\"></ng-content>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.md .mecx-form-field-body{height:40px}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input
             }], hideAction: [{
@@ -3463,7 +3466,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyInputUploadComponent {
+class MonkeyOptionComponent {
+    constructor() {
+        this.idGenerator = inject(IdGenerator);
+        this.disabled = false;
+        this.type = 'select';
+        this.selected = false;
+        this.tabIndex = 0;
+        this.id = this.idGenerator.getId('mecx-option-');
+    }
+    get displayContent() {
+        return (this._content?.nativeElement.textContent || '').trim();
+    }
+    handleAction(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        else {
+            this.action?.();
+        }
+    }
+    onClick(event) {
+        this.handleAction(event);
+    }
+    handleKeyDown(event) {
+        const { key } = event;
+        if (key === 'Enter' || key === ' ') {
+            this.handleAction(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], type: "type" }, host: { attributes: { "data-testid": "monkey-option" }, listeners: { "click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "attr.id": "id", "class.mecx-option-disabled": "disabled", "class.mecx-option-selected": "selected", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "type" }, classAttribute: "mecx-option" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `<div #content><ng-content /></div>`, isInline: true, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:#fff;cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus{outline:unset;outline-offset:1px}monkey-option.radio:focus:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-option', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div #content><ng-content /></div>`, encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-option',
+                        '[attr.id]': 'id',
+                        class: 'mecx-option',
+                        '[class.mecx-option-disabled]': 'disabled',
+                        '[class.mecx-option-selected]': 'selected',
+                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
+                        '[class]': 'type'
+                    }, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:#fff;cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus{outline:unset;outline-offset:1px}monkey-option.radio:focus:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}\n"] }]
+        }], propDecorators: { _content: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], type: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], handleKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeySelectComponent {
     get disabled() {
         if (this.ngControl && this.ngControl.disabled !== null) {
             return this.ngControl.disabled;
@@ -3485,813 +3561,1014 @@ class MonkeyInputUploadComponent {
         this.stateChanges.next();
     }
     set value(value) {
-        if (this._value !== value && value !== undefined) {
+        if (this._value !== value) {
             this._value = value;
             this._onChange(value);
-            this._onTouched(value);
         }
     }
     get value() {
         return this._value;
     }
-    constructor() {
-        this.progress = 0;
+    constructor(overlay, changeDetectorRef, viewContainerRef, formField) {
+        this.overlay = overlay;
+        this.changeDetectorRef = changeDetectorRef;
+        this.viewContainerRef = viewContainerRef;
+        this.formField = formField;
+        this.tabIndex = 0;
+        this.onChange = new EventEmitter();
+        this.onSearch = new EventEmitter();
         this.placeholder = '';
-        this.maxSizeBytes = 5 * 1024 * 1024;
-        this.allowedExtensions = ['.jpg', '.jpeg', '.png', '.pdf', '.txt', '.xls', '.xlsx'];
         this.loading = false;
-        this.tabIndex = 0;
-        this._disabled = false;
+        this.showSearch = true;
+        this.searchPlaceholder = '';
+        this.callbackSearch = false;
         this._value = null;
-        this.onChange = new EventEmitter();
-        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.labelSelected = '';
+        this.overlayRef = null;
+        this._destroyRef = inject(DestroyRef);
         this.idGenerator = inject(IdGenerator);
-        this.id = this.idGenerator.getId('monkey-input-upload-');
-        this.focused = false;
-        this.type = '';
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this._elementRef = inject(ElementRef);
         this.currency = false;
+        this.focused = false;
+        this._disabled = false;
+        this.id = this.idGenerator.getId('monkey-select-');
         this.percent = false;
         this.stateChanges = new Subject();
+        this.type = '';
+        this.searchHandle = new EventEmitter();
+        this.searchDictionary = inject(MonkeyDictionaryService).get('NO-DATA');
+        this.loadingDictionary = inject(MonkeyDictionaryService).get('LOADING');
+        this.showSearchNoData = false;
+        this.isOpen = false;
+        this.searchData = '';
+        this.onAnimationEnd = (event) => {
+            if (event.toState === 'closed') {
+                this.closeOverlay();
+            }
+        };
         this._onChange = () => { };
         this._onTouched = () => { };
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
     }
-    validateFileSize(file) {
-        return file.size <= this.maxSizeBytes;
-    }
-    validateFileExtension(file) {
-        if (!this.allowedExtensions || !this.allowedExtensions.length) {
-            return true;
+    changeControl() {
+        if (this.formField?.control) {
+            this.formField.control.loading = this.loading;
         }
-        const fileExtension = getFileExtension(file.name);
-        const allowedExts = this.allowedExtensions.map((ext) => {
-            return ext.trim().replace('.', '').toLowerCase();
+    }
+    changeSelected() {
+        setTimeout(() => {
+            if (this.options) {
+                this.options.forEach((opt) => {
+                    opt.selected = opt.value === this.value;
+                });
+                this.updateSelectedLabel();
+            }
+            this.changeDetectorRef.markForCheck();
         });
-        return allowedExts.includes(fileExtension);
     }
-    onContainerClick(event) {
-        if (!this.loading) {
-            this.fileInput.nativeElement.click();
-        }
+    initializeOptions() {
+        this.options.forEach((option) => {
+            if (!option.action) {
+                option.action = this.selectOption.bind(this, option);
+            }
+        });
     }
-    _onFocus() {
-        if (!this.disabled) {
-            this.focused = true;
-            this._onTouched();
-            this.stateChanges.next();
+    openDropdown() {
+        if (this.options?.length) {
+            this.formField.control.disableToBeDirty = true;
+            this.isOpen = true;
+            this.createOverlay();
         }
     }
-    _onBlur() {
+    closeDropdown() {
+        this.changeDetectorRef.markForCheck();
+        this.isOpen = false;
         this.focused = false;
-        this.stateChanges.next();
-    }
-    ngAfterContentInit() { }
-    ngOnChanges(changes) { }
-    ngOnDestroy() { }
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        if (this.fileInput) {
-            this.fileInput.nativeElement.disabled = isDisabled;
+        this.formField.control.disableToBeDirty = false;
+        if (!this.callbackSearch) {
+            this.searchData = '';
         }
     }
-    writeValue(value) {
-        this.value = value;
-    }
-    reset() {
-        if (this.fileInput) {
-            this.fileInput.nativeElement.value = '';
+    closeOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
         }
     }
-    onFileSelected(event) {
-        const input = event.target;
-        this._onTouched();
-        if (!input.files?.length) {
-            return;
-        }
-        const file = input.files.item(0);
-        if (this.fileInput) {
-            this.fileInput.nativeElement.value = '';
-        }
-        if (!this.validateFileSize(file)) {
-            this.ngControl?.control?.setErrors({
-                maxFileSize: true,
-                sizeAllowed: formatFileSize(this.maxSizeBytes)
+    initializeWithOverlay() {
+        if (this.showSearch) {
+            const element = this.overlayRef?.overlayElement.querySelector(`#${this.id}-search`);
+            this.options.forEach((opt) => {
+                const element = this.overlayRef?.overlayElement.querySelector(`#${opt.id}`);
+                if (!element)
+                    return;
+                element.style.display = '';
             });
-            this._onBlur();
-            this.reset();
-            return;
+            setTimeout(() => {
+                element?.focus();
+            }, 0);
+            this.showSearchNoData = false;
         }
-        if (!this.validateFileExtension(file)) {
-            this.ngControl?.control?.setErrors({
-                fileExtension: true,
-                extensionAllowed: this.allowedExtensions.join(', ')
+        setTimeout(() => {
+            const selected = this.options.find((opt) => {
+                return opt.selected;
             });
-            this._onBlur();
-            this.reset();
+            if (selected) {
+                const element = this.overlayRef?.overlayElement.querySelector(`#${selected.id}`);
+                element?.scrollIntoView({ behavior: 'instant', block: 'center' });
+            }
+        }, 0);
+    }
+    createOverlay() {
+        if (this.overlayRef) {
             return;
         }
-        this._onBlur();
-        if (this.onChange.observed) {
-            this.onChange.emit({ component: this, file: file });
-        }
-        else {
-            this.value = {
-                fileName: file.name,
-                file
-            };
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyInputUploadComponent, isStandalone: true, selector: "monkey-input-upload", inputs: { progress: "progress", placeholder: "placeholder", maxSizeBytes: "maxSizeBytes", allowedExtensions: "allowedExtensions", loading: ["loading", "loading", booleanAttribute], tabIndex: "tabIndex", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-input-upload'", "class.mecx-input-upload-disabled": "_disabled", "class.mecx-input-upload-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-input-upload" }, providers: [
-            // eslint-disable-next-line no-use-before-define
-            { provide: MonkeyFormFieldControl, useExisting: MonkeyInputUploadComponent }
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="mecx-input-upload-value" [class.has-value]="value">
-      {{ value?.fileName || placeholder }}
-    </div>
-    <input
-      (change)="onFileSelected($event)"
-      type="file"
-      class="file-input"
-      #fileInput
-      [accept]="allowedExtensions.join(',')"
-    />
-    @if (loading) {
-      <div class="progress">
-        <div class="progress-bar" [style.width.%]="progress"></div>
-      </div>
+        const offset = 4;
+        const positions = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: offset
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -offset
+            }
+        ];
+        let anchor = this.trigger;
+        let width = anchor.nativeElement.offsetWidth;
+        if (this.formField?.elementRef) {
+            const el = this.formField?.elementRef.nativeElement.querySelector('.mecx-form-field-body');
+            anchor = el;
+            width = el.offsetWidth;
+        }
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(anchor)
+            .withPositions(positions)
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            width,
+            hasBackdrop: true,
+            backdropClass: 'no-class'
+        });
+        const portal = new TemplatePortal(this.overlayTemplate, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        this.overlayRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            return this.closeDropdown();
+        });
+        this.initializeWithOverlay();
     }
-  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0;cursor:pointer}:host .progress{position:absolute;left:0;bottom:0;right:0;height:2px;background-color:var(--mecx-color-gray-300);width:100%}:host .progress .progress-bar{background-color:var(--mecx-color-success-main);height:100%;transition:width .2s}:host:focus-visible,:host:focus{outline:none}:host .mecx-input-upload-value{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}:host .mecx-input-upload-value.has-value{color:var(--mecx-color-gray-900)}:host.mecx-input-upload-disabled .mecx-input-upload-value{color:var(--mecx-color-gray-400)!important}:host .file-input{display:none}\n"] }); }
+    updateSelectedLabel() {
+        const selectedOption = this.options.find((opt) => {
+            return opt.value === this.value;
+        });
+        this.labelSelected = selectedOption ? selectedOption.displayContent : '';
+    }
+    executeSearch(search) {
+        let found = false;
+        this.options.forEach((opt) => {
+            const element = this.overlayRef?.overlayElement.querySelector(`#${opt.id}`);
+            if (!element)
+                return;
+            const isMatch = normalizeStringToSearch(opt.displayContent).includes(normalizeStringToSearch(search));
+            if (isMatch) {
+                found = true;
+            }
+            element.style.display = isMatch ? '' : 'none';
+        });
+        this.repositionScroll();
+        this.showSearchNoData = !found;
+    }
+    repositionScroll() {
+        const overlayElement = this.overlayRef?.overlayElement.querySelector('.mecx-select-overlay');
+        if (overlayElement) {
+            overlayElement.scrollTop = 0;
+        }
+    }
+    ngOnInit() {
+        this.searchHandle
+            .pipe(debounceTime(200), takeUntilDestroyed(this._destroyRef))
+            .subscribe((search) => {
+            if (this.callbackSearch) {
+                this.onSearch.next(search);
+                this.repositionScroll();
+            }
+            else {
+                this.executeSearch(search);
+            }
+        });
+    }
+    ngAfterContentInit() {
+        this.initializeOptions();
+        this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((resp) => {
+            this.updateSelectedLabel();
+            this.initializeOptions();
+            this.changeSelected();
+        });
+    }
+    ngOnDestroy() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+        }
+    }
+    toggleDropdown() {
+        if (!this.disabled) {
+            if (this.isOpen) {
+                this.closeDropdown();
+                this._onTouched();
+            }
+            else {
+                this.openDropdown();
+            }
+        }
+    }
+    selectOption(option) {
+        if (!option.disabled && !this.disabled) {
+            this.value = option.value;
+            this.updateSelectedLabel();
+            this.closeDropdown();
+            this._onChange(this.value);
+            this.onChange.emit(this.value);
+            this.options.forEach((opt) => {
+                opt.selected = opt.value === this.value;
+            });
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+        this.changeSelected();
+    }
+    onContainerClick(event) {
+        if (this.disabled)
+            return;
+        this.openDropdown();
+        this._elementRef.nativeElement.focus();
+    }
+    _onFocus() {
+        if (!this.disabled) {
+            this.focused = true;
+            this._onTouched();
+            this.stateChanges.next();
+        }
+    }
+    _onBlur() {
+        this.focused = false;
+        this.stateChanges.next();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngOnChanges(changes) {
+        let hasChanges = false;
+        // eslint-disable-next-line dot-notation
+        const changesLoading = changes?.['loading'];
+        if (changesLoading?.currentValue !== changesLoading?.previousValue) {
+            hasChanges = true;
+            this.changeControl();
+        }
+        if (hasChanges) {
+            this.stateChanges.next();
+        }
+    }
+    onHandleSearch(event) {
+        try {
+            const { value } = event.target;
+            const handled = sanitizeString(value);
+            this.searchHandle.next(handled || '');
+        }
+        catch (e) {
+            // not to do
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySelectComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeySelectComponent, isStandalone: true, selector: "monkey-select", inputs: { tabIndex: "tabIndex", placeholder: "placeholder", loading: ["loading", "loading", booleanAttribute], showSearch: ["showSearch", "showSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder", callbackSearch: ["callbackSearch", "callbackSearch", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange", onSearch: "onSearch" }, host: { attributes: { "data-testid": "monkey-select" }, listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "class.mecx-select-disabled": "_disabled", "class.mecx-select-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-select" }, providers: [
+            // eslint-disable-next-line no-use-before-define
+            { provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent }
+        ], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], viewQueries: [{ propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }, { propertyName: "overlayEl", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"mecx-select-trigger\"\n  [class.open]=\"isOpen\"\n  (click)=\"toggleDropdown()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen\"\n  #trigger\n>\n  <div class=\"mecx-select-value\" [class.has-value]=\"value\">\n    <span>{{ labelSelected || placeholder }}</span>\n  </div>\n\n  @if (!loading) {\n    <util-icon class=\"mecx-select-icon\" name=\"arrowDown\" />\n  }\n</div>\n\n<ng-template #overlayTemplate>\n  <div class=\"mecx-select-body-overlay\">\n    @if (showSearch) {\n      <div class=\"mecx-select-search\">\n        <util-icon class=\"mecx-select-search-icon\" name=\"search\" />\n        <input\n          (input)=\"onHandleSearch($event)\"\n          type=\"text\"\n          [id]=\"id + '-search'\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          [placeholder]=\"searchPlaceholder\"\n          [(ngModel)]=\"searchData\"\n        />\n      </div>\n    }\n    <div\n      class=\"mecx-select-overlay\"\n      #overlay\n      [@animation]=\"isOpen ? 'open' : 'closed'\"\n      (@animation.done)=\"onAnimationEnd($event)\"\n    >\n      <ng-content />\n    </div>\n    @if (showSearch && showSearchNoData) {\n      <div class=\"mecx-select-search-no-data\">\n        <util-icon class=\"mecx-select-search-no-data-icon\" name=\"searchFail\" />\n        {{ searchDictionary | async }}\n      </div>\n    }\n    @if (loading) {\n      <div class=\"mecx-select-search-loading\">\n        {{ loadingDictionary | async }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["monkey-select{display:inline-flex;width:100%;min-width:0;position:relative}monkey-select:focus-visible,monkey-select:focus{outline:none}.mecx-select-trigger{width:100%;display:inline-flex;align-items:center;cursor:pointer;gap:8px;box-sizing:border-box}.mecx-select-trigger .mecx-select-value{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mecx-color-gray-500);font-size:14px;line-height:24px;letter-spacing:.42px}.mecx-select-trigger .mecx-select-value.has-value{color:var(--mecx-color-gray-900)}.mecx-select-trigger .mecx-select-icon{display:flex;transition:all .2s ease-in-out}.mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-theme-main)}.mecx-select-disabled .mecx-select-trigger{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-50);cursor:default}.mecx-select-disabled .mecx-select-trigger .mecx-select-value{color:var(--mecx-color-gray-400)}.mecx-select-disabled .mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-gray-400)}.mecx-select-trigger.open .mecx-select-icon{transform:rotate(180deg)}.mecx-select-body-overlay{width:100%;background:#fff;border:2px solid var(--mecx-color-gray-400);overflow:hidden;border-radius:4px;box-shadow:0 16px 32px 0 var(--mecx-color-box-shadow)}.mecx-select-body-overlay .mecx-select-search{display:flex;gap:4px;border-bottom:2px solid var(--mecx-color-gray-400);padding:8px}.mecx-select-body-overlay .mecx-select-search-icon{width:12px;display:flex}.mecx-select-body-overlay .mecx-select-search-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-body-overlay input{border:none;width:90%;color:var(--mecx-color-gray-600)!important;font-size:12px;letter-spacing:.54px}.mecx-select-body-overlay .mecx-select-search-no-data,.mecx-select-body-overlay .mecx-select-search-loading{padding:12px;display:flex;justify-content:center;flex-direction:column;align-items:center;gap:4px;color:var(--mecx-color-gray-600);font-size:12px;letter-spacing:.54px;text-align:center}.mecx-select-body-overlay .mecx-select-search-no-data-icon svg path,.mecx-select-body-overlay .mecx-select-search-loading-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-overlay{width:100%;background:#fff;overflow:hidden auto;max-height:360px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
+            trigger('animation', [
+                transition(':enter', [
+                    style({
+                        opacity: 0,
+                        transform: 'scaleY(.9)'
+                    }),
+                    animate('100ms ease-in-out', style({
+                        opacity: 1,
+                        transform: 'scaleY(1)'
+                    }))
+                ]),
+                state('closed', style({
+                    transform: 'scaleY(.9)',
+                    opacity: 0
+                })),
+                transition('closed <=> open', animate('200ms ease-in-out'))
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-input-upload', standalone: true, imports: [], template: `
-    <div class="mecx-input-upload-value" [class.has-value]="value">
-      {{ value?.fileName || placeholder }}
-    </div>
-    <input
-      (change)="onFileSelected($event)"
-      type="file"
-      class="file-input"
-      #fileInput
-      [accept]="allowedExtensions.join(',')"
-    />
-    @if (loading) {
-      <div class="progress">
-        <div class="progress-bar" [style.width.%]="progress"></div>
-      </div>
-    }
-  `, providers: [
+            args: [{ selector: 'monkey-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         // eslint-disable-next-line no-use-before-define
-                        { provide: MonkeyFormFieldControl, useExisting: MonkeyInputUploadComponent }
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent }
+                    ], animations: [
+                        trigger('animation', [
+                            transition(':enter', [
+                                style({
+                                    opacity: 0,
+                                    transform: 'scaleY(.9)'
+                                }),
+                                animate('100ms ease-in-out', style({
+                                    opacity: 1,
+                                    transform: 'scaleY(1)'
+                                }))
+                            ]),
+                            state('closed', style({
+                                transform: 'scaleY(.9)',
+                                opacity: 0
+                            })),
+                            transition('closed <=> open', animate('200ms ease-in-out'))
+                        ])
                     ], host: {
-                        '[attr.data-testid]': "'monkey-input-upload'",
-                        class: 'mecx-input-upload',
-                        '[class.mecx-input-upload-disabled]': '_disabled',
-                        '[class.mecx-input-upload-focused]': 'focused',
+                        'data-testid': 'monkey-select',
+                        class: 'mecx-select',
+                        '[class.mecx-select-disabled]': '_disabled',
+                        '[class.mecx-select-focused]': 'focused',
                         '[attr.id]': 'id',
                         '[attr.tabindex]': 'disabled ? -1 : tabIndex',
                         '(focus)': '_onFocus()',
                         '(blur)': '_onBlur()'
-                    }, styles: [":host{display:inline-flex;width:100%;min-width:0;cursor:pointer}:host .progress{position:absolute;left:0;bottom:0;right:0;height:2px;background-color:var(--mecx-color-gray-300);width:100%}:host .progress .progress-bar{background-color:var(--mecx-color-success-main);height:100%;transition:width .2s}:host:focus-visible,:host:focus{outline:none}:host .mecx-input-upload-value{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}:host .mecx-input-upload-value.has-value{color:var(--mecx-color-gray-900)}:host.mecx-input-upload-disabled .mecx-input-upload-value{color:var(--mecx-color-gray-400)!important}:host .file-input{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { fileInput: [{
+                    }, template: "<div\n  class=\"mecx-select-trigger\"\n  [class.open]=\"isOpen\"\n  (click)=\"toggleDropdown()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen\"\n  #trigger\n>\n  <div class=\"mecx-select-value\" [class.has-value]=\"value\">\n    <span>{{ labelSelected || placeholder }}</span>\n  </div>\n\n  @if (!loading) {\n    <util-icon class=\"mecx-select-icon\" name=\"arrowDown\" />\n  }\n</div>\n\n<ng-template #overlayTemplate>\n  <div class=\"mecx-select-body-overlay\">\n    @if (showSearch) {\n      <div class=\"mecx-select-search\">\n        <util-icon class=\"mecx-select-search-icon\" name=\"search\" />\n        <input\n          (input)=\"onHandleSearch($event)\"\n          type=\"text\"\n          [id]=\"id + '-search'\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          [placeholder]=\"searchPlaceholder\"\n          [(ngModel)]=\"searchData\"\n        />\n      </div>\n    }\n    <div\n      class=\"mecx-select-overlay\"\n      #overlay\n      [@animation]=\"isOpen ? 'open' : 'closed'\"\n      (@animation.done)=\"onAnimationEnd($event)\"\n    >\n      <ng-content />\n    </div>\n    @if (showSearch && showSearchNoData) {\n      <div class=\"mecx-select-search-no-data\">\n        <util-icon class=\"mecx-select-search-no-data-icon\" name=\"searchFail\" />\n        {{ searchDictionary | async }}\n      </div>\n    }\n    @if (loading) {\n      <div class=\"mecx-select-search-loading\">\n        {{ loadingDictionary | async }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["monkey-select{display:inline-flex;width:100%;min-width:0;position:relative}monkey-select:focus-visible,monkey-select:focus{outline:none}.mecx-select-trigger{width:100%;display:inline-flex;align-items:center;cursor:pointer;gap:8px;box-sizing:border-box}.mecx-select-trigger .mecx-select-value{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mecx-color-gray-500);font-size:14px;line-height:24px;letter-spacing:.42px}.mecx-select-trigger .mecx-select-value.has-value{color:var(--mecx-color-gray-900)}.mecx-select-trigger .mecx-select-icon{display:flex;transition:all .2s ease-in-out}.mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-theme-main)}.mecx-select-disabled .mecx-select-trigger{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-50);cursor:default}.mecx-select-disabled .mecx-select-trigger .mecx-select-value{color:var(--mecx-color-gray-400)}.mecx-select-disabled .mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-gray-400)}.mecx-select-trigger.open .mecx-select-icon{transform:rotate(180deg)}.mecx-select-body-overlay{width:100%;background:#fff;border:2px solid var(--mecx-color-gray-400);overflow:hidden;border-radius:4px;box-shadow:0 16px 32px 0 var(--mecx-color-box-shadow)}.mecx-select-body-overlay .mecx-select-search{display:flex;gap:4px;border-bottom:2px solid var(--mecx-color-gray-400);padding:8px}.mecx-select-body-overlay .mecx-select-search-icon{width:12px;display:flex}.mecx-select-body-overlay .mecx-select-search-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-body-overlay input{border:none;width:90%;color:var(--mecx-color-gray-600)!important;font-size:12px;letter-spacing:.54px}.mecx-select-body-overlay .mecx-select-search-no-data,.mecx-select-body-overlay .mecx-select-search-loading{padding:12px;display:flex;justify-content:center;flex-direction:column;align-items:center;gap:4px;color:var(--mecx-color-gray-600);font-size:12px;letter-spacing:.54px;text-align:center}.mecx-select-body-overlay .mecx-select-search-no-data-icon svg path,.mecx-select-body-overlay .mecx-select-search-loading-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-overlay{width:100%;background:#fff;overflow:hidden auto;max-height:360px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: MonkeyFormFieldComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { overlayTemplate: [{
                 type: ViewChild,
-                args: ['fileInput']
-            }], progress: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], maxSizeBytes: [{
-                type: Input
-            }], allowedExtensions: [{
-                type: Input
-            }], loading: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], tabIndex: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], value: [{
-                type: Input
-            }], onChange: [{
-                type: Output
-            }] } });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyModalActionsDirective {
-    constructor() {
-        this.mkAlign = 'end';
-        this.id = inject(IdGenerator).getId('monkey-modal-actions-');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: { mkAlign: "mkAlign" }, host: { properties: { "class": "'mecx-modal-actions align-'+mkAlign", "attr.id": "id || null" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalActionsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-modal-actions, [monkey-modal-actions]',
-                    host: {
-                        '[class]': `'mecx-modal-actions align-'+mkAlign`,
-                        '[attr.id]': 'id || null'
-                    }
-                }]
-        }], propDecorators: { mkAlign: [{
-                type: Input
-            }] } });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyModalContentDirective {
-    constructor() {
-        this.id = inject(IdGenerator).getId('monkey-modal-content-');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-content" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-modal-content, [monkey-modal-content]',
-                    host: {
-                        class: 'mecx-modal-content',
-                        '[attr.id]': 'id || null'
-                    }
-                }]
-        }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyModalSubtitleDirective {
-    constructor() {
-        this.id = inject(IdGenerator).getId('monkey-modal-subtitle-');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalSubtitleDirective, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-subtitle" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalSubtitleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-modal-subtitle, [monkey-modal-subtitle]',
-                    host: {
-                        class: 'mecx-modal-subtitle',
-                        '[attr.id]': 'id || null'
-                    }
-                }]
-        }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyModalTitleDirective {
-    constructor() {
-        this.id = inject(IdGenerator).getId('monkey-modal-title-');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-title" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalTitleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-modal-title, [monkey-modal-title]',
-                    host: {
-                        class: 'mecx-modal-title',
-                        '[attr.id]': 'id || null'
-                    }
-                }]
-        }] });
+                args: ['overlayTemplate']
+            }], overlayEl: [{
+                type: ViewChild,
+                args: ['overlay']
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], options: [{
+                type: ContentChildren,
+                args: [MonkeyOptionComponent]
+            }], tabIndex: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], onSearch: [{
+                type: Output
+            }], placeholder: [{
+                type: Input,
+                args: [{ required: true }]
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showSearch: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], searchPlaceholder: [{
+                type: Input
+            }], callbackSearch: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }] } });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyModalConfig {
-    constructor() {
-        this.panelClass = '';
-        this.hasBackdrop = true;
-        this.backdropClass = 'mecx-modal-overlay';
-        this.disableClose = false;
-        this.disableBackdropClose = false;
-        this.fullscreen = false;
-        this.position = 'center-center';
-        this.data = null;
-        this.closeOnNavigation = true;
-    }
-}
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyModalRef {
-    constructor(overlayRef, config) {
-        this.overlayRef = overlayRef;
-        this.config = config;
-        this.closed = new Subject();
-        this.id = config.id;
-        this.icon = config.icon;
-        this.disableClose = config.disableClose;
-        this.disableBackdropClose = config.disableBackdropClose;
-        this.closeOnNavigation = config.closeOnNavigation;
-        this.backdropClick = overlayRef.backdropClick();
-        this.keydownEvents = overlayRef.keydownEvents();
-        this.outsidePointerEvents = overlayRef.outsidePointerEvents();
-        if (!this.disableBackdropClose) {
-            this.keydownEvents.subscribe((event) => {
-                if (event.key === 'Escape' && !this.disableClose && !hasModifierKey(event)) {
-                    event.preventDefault();
-                    this.close(undefined);
-                }
-            });
-            this.backdropClick.subscribe(() => {
-                if (!this.disableClose) {
-                    this.close(undefined);
-                }
-            });
+class MonkeyInputPhoneComponent {
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            return this.ngControl.disabled;
         }
+        return this._disabled;
     }
-    close(result) {
-        if (this.componentInstance) {
-            const closedSubject = this.closed;
-            const active = document.activeElement;
-            if (active && this.componentElement.contains(active)) {
-                active.blur();
-            }
-            this.componentElement.querySelectorAll('monkey-modal')[0].classList.add('fade-out');
-            setTimeout(() => {
-                this.overlayRef.detach();
-            }, 150);
-            closedSubject.next(result);
-            closedSubject.complete();
-            // eslint-disable-next-line no-multi-assign
-            this.componentInstance = null;
+    set disabled(value) {
+        this._disabled = value;
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
         }
     }
-    afterClosed() {
-        return this.closed;
-    }
-}
-
-class MonkeyModalComponent {
-    constructor(_elementRef, overlayRef, modalRef) {
-        this._elementRef = _elementRef;
-        this.overlayRef = overlayRef;
-        this.modalRef = modalRef;
-        this._navigationSubscription = null;
-        this._router = inject(Router);
-        // not to do
+    get required() {
+        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
     }
-    ngAfterViewInit() {
-        if (this._elementRef) {
-            this._elementRef.nativeElement.focus();
-        }
-        if (this.modalRef?.closeOnNavigation) {
-            this._navigationSubscription = this._router.events.subscribe((event) => {
-                if (event instanceof NavigationStart) {
-                    this.close();
-                }
-            });
-        }
+    set required(value) {
+        this._required = value;
+        this.stateChanges.next();
     }
-    ngOnDestroy() {
-        if (this._navigationSubscription) {
-            this._navigationSubscription.unsubscribe();
-            this._navigationSubscription = null;
+    set value(value) {
+        if (this._value !== value && value !== undefined) {
+            this._value = value;
+            this.formatValue(value);
+            this._onChange(value);
+            this._onTouched(value);
         }
     }
-    close() {
-        const element = this._elementRef.nativeElement;
-        element.classList.add('fade-out');
-        setTimeout(() => {
-            this.modalRef?.close();
-        }, 150);
+    get value() {
+        return this._value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.OverlayRef, optional: true }, { token: MonkeyModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyModalComponent, selector: "monkey-modal", host: { attributes: { "tabindex": "-1" }, properties: { "attr.id": "modalRef?.id || null" }, classAttribute: "mecx-modal" }, ngImport: i0, template: `
-    <div class="mecx-modal-header">
-      <div class="mecx-modal-header-group">
-        <div class="mecx-modal-header-title">
-          @if (modalRef?.icon) {
-            <div class="mecx-modal-header-icon">
-              <monkey-icon [icon]="modalRef?.icon + ''" first></monkey-icon>
-            </div>
-          }
-          <ng-content select="monkey-modal-title"></ng-content>
-          <ng-content select="[monkey-modal-title]"></ng-content>
-        </div>
-
-        <ng-content select="monkey-modal-subtitle"></ng-content>
-        <ng-content select="[monkey-modal-subtitle]"></ng-content>
-      </div>
-      @if (!modalRef?.disableClose) {
-        <monkey-icon-button
-          size="sm"
-          type="tertiary"
-          icon="close"
-          class="mecx-modal-close"
-          (click)="close()"
-        >
-        </monkey-icon-button>
-      }
-    </div>
-    <ng-content select="monkey-modal-content"></ng-content>
-    <ng-content select="[monkey-modal-content]"></ng-content>
-    <ng-content select="monkey-modal-actions"></ng-content>
-    <ng-content select="[monkey-modal-actions]"></ng-content>
-  `, isInline: true, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:8px}.mecx-modal{opacity:0;animation:modalFadeIn .2s ease-out forwards;transition:opacity .15s ease-in}.mecx-modal.fade-out{animation:modalFadeOut .15s ease-in forwards}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes modalFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:12px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--mecx-color-gray-200);padding:12px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:#00000052}.monkey-modal-panel{padding:16px}.monkey-modal-panel.monkey-modal-fullscreen{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;padding:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal{border-radius:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal .mecx-modal-content{max-height:100%}\n"], dependencies: [{ kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalComponent, decorators: [{
-            type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-modal', template: `
-    <div class="mecx-modal-header">
-      <div class="mecx-modal-header-group">
-        <div class="mecx-modal-header-title">
-          @if (modalRef?.icon) {
-            <div class="mecx-modal-header-icon">
-              <monkey-icon [icon]="modalRef?.icon + ''" first></monkey-icon>
-            </div>
-          }
-          <ng-content select="monkey-modal-title"></ng-content>
-          <ng-content select="[monkey-modal-title]"></ng-content>
-        </div>
-
-        <ng-content select="monkey-modal-subtitle"></ng-content>
-        <ng-content select="[monkey-modal-subtitle]"></ng-content>
-      </div>
-      @if (!modalRef?.disableClose) {
-        <monkey-icon-button
-          size="sm"
-          type="tertiary"
-          icon="close"
-          class="mecx-modal-close"
-          (click)="close()"
-        >
-        </monkey-icon-button>
-      }
-    </div>
-    <ng-content select="monkey-modal-content"></ng-content>
-    <ng-content select="[monkey-modal-content]"></ng-content>
-    <ng-content select="monkey-modal-actions"></ng-content>
-    <ng-content select="[monkey-modal-actions]"></ng-content>
-  `, host: {
-                        class: 'mecx-modal',
-                        tabindex: '-1',
-                        '[attr.id]': 'modalRef?.id || null'
-                    }, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:8px}.mecx-modal{opacity:0;animation:modalFadeIn .2s ease-out forwards;transition:opacity .15s ease-in}.mecx-modal.fade-out{animation:modalFadeOut .15s ease-in forwards}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes modalFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:12px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--mecx-color-gray-200);padding:12px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:#00000052}.monkey-modal-panel{padding:16px}.monkey-modal-panel.monkey-modal-fullscreen{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;padding:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal{border-radius:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal .mecx-modal-content{max-height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.OverlayRef, decorators: [{
-                    type: Optional
-                }] }, { type: MonkeyModalRef, decorators: [{
-                    type: Optional
-                }] }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-const MECX_MODAL_DATA = new InjectionToken('mecxModalData');
-const MECX_MODAL_DEFAULT_CONFIG = new InjectionToken('mecxModalDefaultConfig');
-const MECX_MODAL_CONFIRMATION_CONFIG = new InjectionToken('mecxModalConfirmationConfig');
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-function reverseForEach(items, callback) {
-    let i = items.length;
-    // eslint-disable-next-line no-plusplus
-    while (i--) {
-        callback(items[i]);
+    constructor() {
+        this.placeholder = '';
+        this.tabIndex = 0;
+        this._disabled = false;
+        this._value = null;
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.idGenerator = inject(IdGenerator);
+        this.countryCode = inject(MONKEY_COUNTRY_CODE);
+        this.locale = inject(LOCALE_ID);
+        this.id = this.idGenerator.getId('monkey-input-upload-');
+        this.inputId = this.idGenerator.getId('monkey-input-upload-input-');
+        this.focused = false;
+        this.type = 'input-phone';
+        this.stateChanges = new Subject();
+        this.countries = getCountries()
+            .map((code) => {
+            return {
+                code: `+${getCountryCallingCode(code)}`,
+                name: this.getCountryNameFromCode(code),
+                flag: `${this.isoToFlagEmoji(code)} `
+            };
+        })
+            .sort((a, b) => {
+            return a.name.localeCompare(b.name);
+        });
+        this.countriesFiltered = this.countries;
+        this.selectedCallingCode = this.countryCode.toString();
+        this.phoneFormatted = '';
+        this.phoneValid = false;
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
     }
-}
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyModalDefaultComponent {
-    constructor(config, modalRef) {
-        this.config = config;
-        this.modalRef = modalRef;
-        // not to do
+    getCountryNameFromCode(code) {
+        try {
+            const locale = this.locale.toString();
+            const display = new Intl.DisplayNames([locale], { type: 'region' });
+            return display.of(code.toUpperCase()) || code;
+        }
+        catch {
+            return code;
+        }
     }
-    onSubmit() {
-        this.modalRef.close(true);
+    getCountryByCallingCode(code) {
+        const cleanCode = code.replace('+', '');
+        return (getCountries().find((country) => {
+            return getCountryCallingCode(country) === cleanCode;
+        }) || null);
     }
-    onClose() {
-        this.modalRef.close();
+    isoToFlagEmoji(isoCode) {
+        return isoCode.toUpperCase().replace(/./g, (char) => {
+            return String.fromCodePoint(127397 + char.charCodeAt(0));
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalDefaultComponent, deps: [{ token: MECX_MODAL_DEFAULT_CONFIG }, { token: MonkeyModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalDefaultComponent, selector: "monkey-modal-default", ngImport: i0, template: `
-    <monkey-modal>
-      <monkey-modal-title [innerHTML]="config.title"></monkey-modal-title>
-      <monkey-modal-subtitle [innerHTML]="config.subtitle"></monkey-modal-subtitle>
-      <monkey-modal-content [innerHTML]="config.content"></monkey-modal-content>
-      <monkey-modal-actions mkAlign="end">
-        <monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
-        <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
-      </monkey-modal-actions>
-    </monkey-modal>
-  `, isInline: true, dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "size", "type", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]" }, { kind: "directive", type: MonkeyModalSubtitleDirective, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalDefaultComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'monkey-modal-default',
-                    template: `
-    <monkey-modal>
-      <monkey-modal-title [innerHTML]="config.title"></monkey-modal-title>
-      <monkey-modal-subtitle [innerHTML]="config.subtitle"></monkey-modal-subtitle>
-      <monkey-modal-content [innerHTML]="config.content"></monkey-modal-content>
-      <monkey-modal-actions mkAlign="end">
-        <monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
-        <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
-      </monkey-modal-actions>
-    </monkey-modal>
-  `
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MECX_MODAL_DEFAULT_CONFIG]
-                }] }, { type: MonkeyModalRef, decorators: [{
-                    type: Inject,
-                    args: [MonkeyModalRef]
-                }] }] });
-
-class MonkeyModalConfirmationComponent {
-    constructor(config, modalRef) {
-        this.config = config;
-        this.modalRef = modalRef;
-        // not to do
+    getCountryFromPhoneNumber(input, changedCountry) {
+        try {
+            if (changedCountry) {
+                return this.selectedCallingCode;
+            }
+            const parsed = parsePhoneNumberFromString(input);
+            const country = getCountryCallingCode(parsed?.country);
+            return `+${country}`;
+        }
+        catch (e) {
+            // not to do
+        }
+        return this.selectedCallingCode;
     }
-    onSubmit() {
-        this.modalRef.close(true);
+    performValue(value) {
+        this._value = `${this.selectedCallingCode}${value}`;
+        this._onChange(this._value);
+        this._onTouched(this._value);
     }
-    onClose() {
-        this.modalRef.close();
+    validateValue() {
+        const { phoneValid } = this;
+        if (!phoneValid) {
+            const countryCode = this.getCountryByCallingCode(this.selectedCallingCode);
+            const example = getExampleNumber(countryCode, examples);
+            this.ngControl?.control?.setErrors({
+                phone: true,
+                phoneAllowed: example?.nationalNumber
+            });
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalConfirmationComponent, deps: [{ token: MECX_MODAL_CONFIRMATION_CONFIG }, { token: MonkeyModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyModalConfirmationComponent, selector: "monkey-modal-confirmation", ngImport: i0, template: `
-    <monkey-modal class="modal-confirmation">
-      <monkey-modal-content>
-        @if (config.icon) {
-          <div class="modal-confirmation-icon {{ config.type }}">
-            <monkey-icon [icon]="config.icon" size="xxl"></monkey-icon>
-          </div>
+    formatValue(value, changedCountry = false) {
+        if (!value) {
+            this.phoneFormatted = '';
+            this.phoneValid = false;
+            this.validateValue();
+            return;
         }
-        <div class="confirmation-title" [innerHTML]="config.title"></div>
-        <div class="confirmation-description" [innerHTML]="config.content"></div>
-      </monkey-modal-content>
-      <monkey-modal-actions>
-        <monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
-        <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
-      </monkey-modal-actions>
-    </monkey-modal>
-  `, isInline: true, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 16px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon monkey-icon{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning monkey-icon{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error monkey-icon{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success monkey-icon{color:var(--mecx-color-success-500)}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "size", "type", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        const detectedCallingCode = this.getCountryFromPhoneNumber(value, changedCountry);
+        const isCountryChanged = changedCountry || detectedCallingCode !== this.selectedCallingCode;
+        if (isCountryChanged && detectedCallingCode) {
+            this.selectedCallingCode = detectedCallingCode;
+        }
+        const countryCode = this.getCountryByCallingCode(this.selectedCallingCode);
+        if (!countryCode) {
+            this.phoneFormatted = value;
+            this.phoneValid = false;
+            this.validateValue();
+            return;
+        }
+        const nationalPart = value.replace(this.selectedCallingCode, '').replace(/[^\d+]/g, '');
+        const formatter = new AsYouType(countryCode);
+        this.phoneFormatted = formatter.input(nationalPart);
+        this.performValue(nationalPart);
+        this.phoneValid = isValidPhoneNumber(nationalPart, countryCode);
+        this.validateValue();
+    }
+    ngAfterContentInit() { }
+    ngOnChanges(changes) { }
+    ngOnDestroy() { }
+    onContainerClick(event) {
+        this.inputs.first.nativeElement.focus();
+    }
+    _onFocus() {
+        if (!this.disabled) {
+            this.focused = true;
+            this._onTouched();
+            this.stateChanges.next();
+        }
+    }
+    _onBlur() {
+        this.focused = false;
+        this.stateChanges.next();
+        this.validateValue();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    onInputChange(event) {
+        const { value } = event.target;
+        this.formatValue(value);
+    }
+    onCountryChange() {
+        this.formatValue(this._value, true);
+        this.validateValue();
+    }
+    getMaxLength() {
+        try {
+            const countryCode = this.getCountryByCallingCode(this.selectedCallingCode);
+            if (!countryCode)
+                return 20;
+            const example = getExampleNumber(countryCode, examples);
+            const formatted = new AsYouType(countryCode).input(example.nationalNumber);
+            return formatted.length;
+        }
+        catch {
+            return 20;
+        }
+    }
+    onHandleSearchSelect(query) {
+        const normalizedQuery = query.trim().toLowerCase();
+        this.countriesFiltered = this.countries.filter(({ name }) => {
+            return name.toLowerCase().includes(normalizedQuery);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputPhoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyInputPhoneComponent, isStandalone: true, selector: "monkey-input-phone", inputs: { placeholder: "placeholder", tabIndex: "tabIndex", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-input-phone'", "class.mecx-input-phone-disabled": "_disabled", "class.mecx-input-phone-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-input-phone" }, providers: [
+            // eslint-disable-next-line no-use-before-define
+            { provide: MonkeyFormFieldControl, useExisting: MonkeyInputPhoneComponent }
+        ], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <monkey-select
+      placeholder=""
+      [disabled]="disabled"
+      showSearch
+      [(ngModel)]="selectedCallingCode"
+      class="mecx-phone-select-country"
+      (onChange)="onCountryChange()"
+      callbackSearch
+      (onSearch)="onHandleSearchSelect($event)"
+    >
+      @for (item of countriesFiltered; track $index) {
+        <monkey-option [value]="item.code">
+          <span class="option-flag">{{ item.flag }}</span>
+          <div class="option-name">{{ item.name }} {{ item.code }}</div>
+        </monkey-option>
+      }
+    </monkey-select>
+    <input
+      #input
+      class="mecx-input"
+      [attr.disabled]="disabled"
+      placeholder="Enter phone number"
+      (input)="onInputChange($event)"
+      [ngModel]="phoneFormatted"
+      [maxlength]="getMaxLength()"
+      (focus)="_onFocus()"
+      (blur)="_onBlur()"
+      [attr.id]="inputId"
+    />
+  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host.mecx-input-phone-disabled monkey-select{border-right:2px solid var(--mecx-color-gray-200)}:host monkey-select{width:164px;border-right:2px solid var(--mecx-color-gray-400)}:host input{width:100%;border:none;margin-left:8px}monkey-option .option-flag{font-size:30px}monkey-option .option-name{letter-spacing:.48px;margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "callbackSearch", "disabled", "required", "value"], outputs: ["onChange", "onSearch"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalConfirmationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputPhoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-modal-confirmation', encapsulation: ViewEncapsulation.None, template: `
-    <monkey-modal class="modal-confirmation">
-      <monkey-modal-content>
-        @if (config.icon) {
-          <div class="modal-confirmation-icon {{ config.type }}">
-            <monkey-icon [icon]="config.icon" size="xxl"></monkey-icon>
-          </div>
-        }
-        <div class="confirmation-title" [innerHTML]="config.title"></div>
-        <div class="confirmation-description" [innerHTML]="config.content"></div>
-      </monkey-modal-content>
-      <monkey-modal-actions>
-        <monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
-        <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
-      </monkey-modal-actions>
-    </monkey-modal>
-  `, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 16px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon monkey-icon{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning monkey-icon{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error monkey-icon{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success monkey-icon{color:var(--mecx-color-success-500)}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MECX_MODAL_CONFIRMATION_CONFIG]
-                }] }, { type: MonkeyModalRef, decorators: [{
-                    type: Inject,
-                    args: [MonkeyModalRef]
-                }] }] });
+            args: [{ selector: 'monkey-input-phone', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MonkeySelectComponent,
+                        MonkeyOptionComponent,
+                        MonkeyFormFieldModule
+                    ], template: `
+    <monkey-select
+      placeholder=""
+      [disabled]="disabled"
+      showSearch
+      [(ngModel)]="selectedCallingCode"
+      class="mecx-phone-select-country"
+      (onChange)="onCountryChange()"
+      callbackSearch
+      (onSearch)="onHandleSearchSelect($event)"
+    >
+      @for (item of countriesFiltered; track $index) {
+        <monkey-option [value]="item.code">
+          <span class="option-flag">{{ item.flag }}</span>
+          <div class="option-name">{{ item.name }} {{ item.code }}</div>
+        </monkey-option>
+      }
+    </monkey-select>
+    <input
+      #input
+      class="mecx-input"
+      [attr.disabled]="disabled"
+      placeholder="Enter phone number"
+      (input)="onInputChange($event)"
+      [ngModel]="phoneFormatted"
+      [maxlength]="getMaxLength()"
+      (focus)="_onFocus()"
+      (blur)="_onBlur()"
+      [attr.id]="inputId"
+    />
+  `, providers: [
+                        // eslint-disable-next-line no-use-before-define
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeyInputPhoneComponent }
+                    ], host: {
+                        '[attr.data-testid]': "'monkey-input-phone'",
+                        class: 'mecx-input-phone',
+                        '[class.mecx-input-phone-disabled]': '_disabled',
+                        '[class.mecx-input-phone-focused]': 'focused',
+                        '[attr.id]': 'id',
+                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
+                        '(focus)': '_onFocus()',
+                        '(blur)': '_onBlur()'
+                    }, styles: [":host{display:inline-flex;width:100%;min-width:0}:host.mecx-input-phone-disabled monkey-select{border-right:2px solid var(--mecx-color-gray-200)}:host monkey-select{width:164px;border-right:2px solid var(--mecx-color-gray-400)}:host input{width:100%;border:none;margin-left:8px}monkey-option .option-flag{font-size:30px}monkey-option .option-name{letter-spacing:.48px;margin-left:4px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }], inputs: [{
+                type: ViewChildren,
+                args: ['input']
+            }] } });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyModalModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, declarations: [MonkeyModalComponent,
-            MonkeyModalDefaultComponent,
-            MonkeyModalConfirmationComponent,
-            MonkeyModalTitleDirective,
-            MonkeyModalSubtitleDirective,
-            MonkeyModalContentDirective,
-            MonkeyModalActionsDirective], imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent], exports: [MonkeyModalComponent,
-            MonkeyModalTitleDirective,
-            MonkeyModalSubtitleDirective,
-            MonkeyModalContentDirective,
-            MonkeyModalActionsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent],
-                    declarations: [
-                        MonkeyModalComponent,
-                        MonkeyModalDefaultComponent,
-                        MonkeyModalConfirmationComponent,
-                        MonkeyModalTitleDirective,
-                        MonkeyModalSubtitleDirective,
-                        MonkeyModalContentDirective,
-                        MonkeyModalActionsDirective
-                    ],
-                    exports: [
-                        MonkeyModalComponent,
-                        MonkeyModalTitleDirective,
-                        MonkeyModalSubtitleDirective,
-                        MonkeyModalContentDirective,
-                        MonkeyModalActionsDirective
-                    ]
-                }]
-        }] });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyModalService {
-    constructor() {
-        this._idGenerator = inject(IdGenerator);
-        this._injector = inject(Injector);
-        this._overlay = inject(Overlay);
-        this._openDialogsAtThisLevel = [];
-        this._parentDialog = inject(MonkeyModalService, { optional: true, skipSelf: true });
-    }
-    get openDialogs() {
-        return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;
-    }
-    getOverlayConfig(config) {
-        let positionStrategy;
-        const marginStrategy = '20px';
-        if (config.position === 'left-top') {
-            positionStrategy = this._overlay.position().global().left(marginStrategy).top(marginStrategy);
-        }
-        else if (config.position === 'center-top') {
-            positionStrategy = this._overlay.position().global().centerHorizontally().top(marginStrategy);
+class MonkeyInputUploadComponent {
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            return this.ngControl.disabled;
         }
-        else if (config.position === 'right-top') {
-            positionStrategy = this._overlay
-                .position()
-                .global()
-                .right(marginStrategy)
-                .top(marginStrategy);
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
         }
-        else if (config.position === 'left-center') {
-            positionStrategy = this._overlay.position().global().left(marginStrategy).centerVertically();
+    }
+    get required() {
+        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
+    }
+    set required(value) {
+        this._required = value;
+        this.stateChanges.next();
+    }
+    set value(value) {
+        if (this._value !== value && value !== undefined) {
+            this._value = value;
+            this._onChange(value);
+            this._onTouched(value);
         }
-        else if (config.position === 'center-center') {
-            positionStrategy = this._overlay.position().global().centerHorizontally().centerVertically();
+    }
+    get value() {
+        return this._value;
+    }
+    constructor() {
+        this.progress = 0;
+        this.placeholder = '';
+        this.maxSizeBytes = 5 * 1024 * 1024;
+        this.allowedExtensions = ['.jpg', '.jpeg', '.png', '.pdf', '.txt', '.xls', '.xlsx'];
+        this.loading = false;
+        this.tabIndex = 0;
+        this._disabled = false;
+        this._value = null;
+        this.onChange = new EventEmitter();
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.idGenerator = inject(IdGenerator);
+        this.id = this.idGenerator.getId('monkey-input-upload-');
+        this.focused = false;
+        this.type = '';
+        this.currency = false;
+        this.percent = false;
+        this.stateChanges = new Subject();
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
         }
-        else if (config.position === 'right-center') {
-            positionStrategy = this._overlay.position().global().right(marginStrategy).centerVertically();
+    }
+    validateFileSize(file) {
+        return file.size <= this.maxSizeBytes;
+    }
+    validateFileExtension(file) {
+        if (!this.allowedExtensions || !this.allowedExtensions.length) {
+            return true;
         }
-        else if (config.position === 'left-bottom') {
-            positionStrategy = this._overlay
-                .position()
-                .global()
-                .left(marginStrategy)
-                .bottom(marginStrategy);
+        const fileExtension = getFileExtension(file.name);
+        const allowedExts = this.allowedExtensions.map((ext) => {
+            return ext.trim().replace('.', '').toLowerCase();
+        });
+        return allowedExts.includes(fileExtension);
+    }
+    onContainerClick(event) {
+        if (!this.loading) {
+            this.fileInput.nativeElement.click();
         }
-        else if (config.position === 'center-bottom') {
-            positionStrategy = this._overlay.position().global().centerHorizontally().bottom('20px');
+    }
+    _onFocus() {
+        if (!this.disabled) {
+            this.focused = true;
+            this._onTouched();
+            this.stateChanges.next();
         }
-        else if (config.position === 'right-bottom') {
-            positionStrategy = this._overlay
-                .position()
-                .global()
-                .right(marginStrategy)
-                .bottom(marginStrategy);
+    }
+    _onBlur() {
+        this.focused = false;
+        this.stateChanges.next();
+    }
+    ngAfterContentInit() { }
+    ngOnChanges(changes) { }
+    ngOnDestroy() { }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        if (this.fileInput) {
+            this.fileInput.nativeElement.disabled = isDisabled;
         }
-        let panelClass = ['monkey-modal-panel'];
-        if (config.fullscreen) {
-            panelClass.push('monkey-modal-fullscreen');
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    reset() {
+        if (this.fileInput) {
+            this.fileInput.nativeElement.value = '';
         }
-        if (Array.isArray(config.panelClass)) {
-            panelClass = [...panelClass, ...config.panelClass];
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        this._onTouched();
+        if (!input.files?.length) {
+            return;
         }
-        else {
-            panelClass.push(config.panelClass);
+        const file = input.files.item(0);
+        if (this.fileInput) {
+            this.fileInput.nativeElement.value = '';
         }
-        const state = new OverlayConfig({
-            positionStrategy,
-            scrollStrategy: this._overlay.scrollStrategies.block(),
-            panelClass,
-            hasBackdrop: config.hasBackdrop,
-            maxWidth: config.maxWidth,
-            maxHeight: config.maxHeight,
-            disposeOnNavigation: config.closeOnNavigation
-        });
-        if (config.backdropClass) {
-            state.backdropClass = config.backdropClass;
+        if (!this.validateFileSize(file)) {
+            this.ngControl?.control?.setErrors({
+                maxFileSize: true,
+                sizeAllowed: formatFileSize(this.maxSizeBytes)
+            });
+            this._onBlur();
+            this.reset();
+            return;
         }
-        if (config.maxWidth) {
-            state.width = '100%';
+        if (!this.validateFileExtension(file)) {
+            this.ngControl?.control?.setErrors({
+                fileExtension: true,
+                extensionAllowed: this.allowedExtensions.join(', ')
+            });
+            this._onBlur();
+            this.reset();
+            return;
         }
-        if (config.maxHeight) {
-            state.height = '100%';
+        this._onBlur();
+        if (this.onChange.observed) {
+            this.onChange.emit({ component: this, file: file });
         }
-        return state;
-    }
-    createInjector(config, dialogRef, overlayRef, fallbackInjector) {
-        const providers = [
-            { provide: OverlayRef, useValue: overlayRef },
-            { provide: MonkeyModalRef, useValue: dialogRef },
-            { provide: MECX_MODAL_DATA, useValue: config.data }
-        ];
-        if (config.providers) {
-            providers.push(...config.providers);
+        else {
+            this.value = {
+                fileName: file.name,
+                file
+            };
         }
-        return Injector.create({ parent: fallbackInjector, providers });
     }
-    open(component, config) {
-        const defaultConfig = new MonkeyModalConfig();
-        config = { ...defaultConfig, ...config };
-        config.id = this._idGenerator.getId('monkey-modal-');
-        const overlayConfig = this.getOverlayConfig(config);
-        const overlayRef = this._overlay.create(overlayConfig);
-        const modalRef = new MonkeyModalRef(overlayRef, config);
-        const injector = this.createInjector(config, modalRef, overlayRef, this._injector);
-        const componentPortal = new ComponentPortal(component, null, injector);
-        const componentRef = overlayRef.attach(componentPortal);
-        const componentElement = componentRef.location.nativeElement;
-        componentElement.style.width = '100%';
-        componentElement.style.height = '100%';
-        modalRef.componentElement = componentElement;
-        modalRef.componentInstance = componentRef.instance;
-        this.openDialogs.push(modalRef);
-        return modalRef;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyInputUploadComponent, isStandalone: true, selector: "monkey-input-upload", inputs: { progress: "progress", placeholder: "placeholder", maxSizeBytes: "maxSizeBytes", allowedExtensions: "allowedExtensions", loading: ["loading", "loading", booleanAttribute], tabIndex: "tabIndex", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-input-upload'", "class.mecx-input-upload-disabled": "_disabled", "class.mecx-input-upload-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-input-upload" }, providers: [
+            // eslint-disable-next-line no-use-before-define
+            { provide: MonkeyFormFieldControl, useExisting: MonkeyInputUploadComponent }
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="mecx-input-upload-value" [class.has-value]="value">
+      {{ value?.fileName || placeholder }}
+    </div>
+    <input
+      (change)="onFileSelected($event)"
+      type="file"
+      class="file-input"
+      #fileInput
+      [accept]="allowedExtensions.join(',')"
+    />
+    @if (loading) {
+      <div class="progress">
+        <div class="progress-bar" [style.width.%]="progress"></div>
+      </div>
     }
-    openDefault(params, config) {
-        config.providers = [{ provide: MECX_MODAL_DEFAULT_CONFIG, useValue: params }];
-        config.icon = config.icon ? config.icon : 'help';
-        return this.open(MonkeyModalDefaultComponent, config);
+  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0;cursor:pointer}:host .progress{position:absolute;left:0;bottom:0;right:0;height:2px;background-color:var(--mecx-color-gray-300);width:100%}:host .progress .progress-bar{background-color:var(--mecx-color-success-main);height:100%;transition:width .2s}:host:focus-visible,:host:focus{outline:none}:host .mecx-input-upload-value{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}:host .mecx-input-upload-value.has-value{color:var(--mecx-color-gray-900)}:host.mecx-input-upload-disabled .mecx-input-upload-value{color:var(--mecx-color-gray-400)!important}:host .file-input{display:none}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-input-upload', standalone: true, imports: [], template: `
+    <div class="mecx-input-upload-value" [class.has-value]="value">
+      {{ value?.fileName || placeholder }}
+    </div>
+    <input
+      (change)="onFileSelected($event)"
+      type="file"
+      class="file-input"
+      #fileInput
+      [accept]="allowedExtensions.join(',')"
+    />
+    @if (loading) {
+      <div class="progress">
+        <div class="progress-bar" [style.width.%]="progress"></div>
+      </div>
     }
-    openConfirmation(params, config) {
-        config.providers = [{ provide: MECX_MODAL_CONFIRMATION_CONFIG, useValue: params }];
-        return this.open(MonkeyModalConfirmationComponent, config);
+  `, providers: [
+                        // eslint-disable-next-line no-use-before-define
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeyInputUploadComponent }
+                    ], host: {
+                        '[attr.data-testid]': "'monkey-input-upload'",
+                        class: 'mecx-input-upload',
+                        '[class.mecx-input-upload-disabled]': '_disabled',
+                        '[class.mecx-input-upload-focused]': 'focused',
+                        '[attr.id]': 'id',
+                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
+                        '(focus)': '_onFocus()',
+                        '(blur)': '_onBlur()'
+                    }, styles: [":host{display:inline-flex;width:100%;min-width:0;cursor:pointer}:host .progress{position:absolute;left:0;bottom:0;right:0;height:2px;background-color:var(--mecx-color-gray-300);width:100%}:host .progress .progress-bar{background-color:var(--mecx-color-success-main);height:100%;transition:width .2s}:host:focus-visible,:host:focus{outline:none}:host .mecx-input-upload-value{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}:host .mecx-input-upload-value.has-value{color:var(--mecx-color-gray-900)}:host.mecx-input-upload-disabled .mecx-input-upload-value{color:var(--mecx-color-gray-400)!important}:host .file-input{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }], progress: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], maxSizeBytes: [{
+                type: Input
+            }], allowedExtensions: [{
+                type: Input
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], tabIndex: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyModalActionsDirective {
+    constructor() {
+        this.mkAlign = 'end';
+        this.id = inject(IdGenerator).getId('monkey-modal-actions-');
     }
-    closeAll() {
-        reverseForEach(this.openDialogs, (dialog) => {
-            return dialog.close();
-        });
-        this.openDialogs.splice(0, this.openDialogs.length);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: { mkAlign: "mkAlign" }, host: { properties: { "class": "'mecx-modal-actions align-'+mkAlign", "attr.id": "id || null" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-modal-actions, [monkey-modal-actions]',
+                    host: {
+                        '[class]': `'mecx-modal-actions align-'+mkAlign`,
+                        '[attr.id]': 'id || null'
+                    }
+                }]
+        }], propDecorators: { mkAlign: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyModalContentDirective {
+    constructor() {
+        this.id = inject(IdGenerator).getId('monkey-modal-content-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-content" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-modal-content, [monkey-modal-content]',
+                    host: {
+                        class: 'mecx-modal-content',
+                        '[attr.id]': 'id || null'
+                    }
+                }]
         }] });
 
 /** ************************
@@ -4299,316 +4576,549 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
+class MonkeyModalSubtitleDirective {
+    constructor() {
+        this.id = inject(IdGenerator).getId('monkey-modal-subtitle-');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalSubtitleDirective, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-subtitle" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalSubtitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-modal-subtitle, [monkey-modal-subtitle]',
+                    host: {
+                        class: 'mecx-modal-subtitle',
+                        '[attr.id]': 'id || null'
+                    }
+                }]
+        }] });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyOptionComponent {
+class MonkeyModalTitleDirective {
     constructor() {
-        this.idGenerator = inject(IdGenerator);
-        this.disabled = false;
-        this.type = 'select';
-        this.selected = false;
-        this.tabIndex = 0;
-        this.id = this.idGenerator.getId('mecx-option-');
+        this.id = inject(IdGenerator).getId('monkey-modal-title-');
     }
-    get displayContent() {
-        return (this._content?.nativeElement.textContent || '').trim();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-title" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-modal-title, [monkey-modal-title]',
+                    host: {
+                        class: 'mecx-modal-title',
+                        '[attr.id]': 'id || null'
+                    }
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyModalConfig {
+    constructor() {
+        this.panelClass = '';
+        this.hasBackdrop = true;
+        this.backdropClass = 'mecx-modal-overlay';
+        this.disableClose = false;
+        this.disableBackdropClose = false;
+        this.fullscreen = false;
+        this.position = 'center-center';
+        this.data = null;
+        this.closeOnNavigation = true;
     }
-    handleAction(event) {
-        if (this.disabled) {
-            event.stopPropagation();
-            event.preventDefault();
+}
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyModalRef {
+    constructor(overlayRef, config) {
+        this.overlayRef = overlayRef;
+        this.config = config;
+        this.closed = new Subject();
+        this.id = config.id;
+        this.icon = config.icon;
+        this.disableClose = config.disableClose;
+        this.disableBackdropClose = config.disableBackdropClose;
+        this.closeOnNavigation = config.closeOnNavigation;
+        this.backdropClick = overlayRef.backdropClick();
+        this.keydownEvents = overlayRef.keydownEvents();
+        this.outsidePointerEvents = overlayRef.outsidePointerEvents();
+        if (!this.disableBackdropClose) {
+            this.keydownEvents.subscribe((event) => {
+                if (event.key === 'Escape' && !this.disableClose && !hasModifierKey(event)) {
+                    event.preventDefault();
+                    this.close(undefined);
+                }
+            });
+            this.backdropClick.subscribe(() => {
+                if (!this.disableClose) {
+                    this.close(undefined);
+                }
+            });
         }
-        else {
-            this.action?.();
+    }
+    close(result) {
+        if (this.componentInstance) {
+            const closedSubject = this.closed;
+            const active = document.activeElement;
+            if (active && this.componentElement.contains(active)) {
+                active.blur();
+            }
+            this.componentElement.querySelectorAll('monkey-modal')[0].classList.add('fade-out');
+            setTimeout(() => {
+                this.overlayRef.detach();
+            }, 150);
+            closedSubject.next(result);
+            closedSubject.complete();
+            // eslint-disable-next-line no-multi-assign
+            this.componentInstance = null;
         }
     }
-    onClick(event) {
-        this.handleAction(event);
+    afterClosed() {
+        return this.closed;
     }
-    handleKeyDown(event) {
-        const { key } = event;
-        if (key === 'Enter' || key === ' ') {
-            this.handleAction(event);
+}
+
+class MonkeyModalComponent {
+    constructor(_elementRef, overlayRef, modalRef) {
+        this._elementRef = _elementRef;
+        this.overlayRef = overlayRef;
+        this.modalRef = modalRef;
+        this._navigationSubscription = null;
+        this._router = inject(Router);
+        // not to do
+    }
+    ngAfterViewInit() {
+        if (this._elementRef) {
+            this._elementRef.nativeElement.focus();
+        }
+        if (this.modalRef?.closeOnNavigation) {
+            this._navigationSubscription = this._router.events.subscribe((event) => {
+                if (event instanceof NavigationStart) {
+                    this.close();
+                }
+            });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], type: "type" }, host: { attributes: { "data-testid": "monkey-option" }, listeners: { "click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "attr.id": "id", "class.mecx-option-disabled": "disabled", "class.mecx-option-selected": "selected", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "type" }, classAttribute: "mecx-option" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `<div #content><ng-content /></div>`, isInline: true, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:#fff;cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus{outline:unset;outline-offset:1px}monkey-option.radio:focus:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    ngOnDestroy() {
+        if (this._navigationSubscription) {
+            this._navigationSubscription.unsubscribe();
+            this._navigationSubscription = null;
+        }
+    }
+    close() {
+        const element = this._elementRef.nativeElement;
+        element.classList.add('fade-out');
+        setTimeout(() => {
+            this.modalRef?.close();
+        }, 150);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.OverlayRef, optional: true }, { token: MonkeyModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyModalComponent, selector: "monkey-modal", host: { attributes: { "tabindex": "-1" }, properties: { "attr.id": "modalRef?.id || null" }, classAttribute: "mecx-modal" }, ngImport: i0, template: `
+    <div class="mecx-modal-header">
+      <div class="mecx-modal-header-group">
+        <div class="mecx-modal-header-title">
+          @if (modalRef?.icon) {
+            <div class="mecx-modal-header-icon">
+              <monkey-icon [icon]="modalRef?.icon + ''" first></monkey-icon>
+            </div>
+          }
+          <ng-content select="monkey-modal-title"></ng-content>
+          <ng-content select="[monkey-modal-title]"></ng-content>
+        </div>
+
+        <ng-content select="monkey-modal-subtitle"></ng-content>
+        <ng-content select="[monkey-modal-subtitle]"></ng-content>
+      </div>
+      @if (!modalRef?.disableClose) {
+        <monkey-icon-button
+          size="sm"
+          type="tertiary"
+          icon="close"
+          class="mecx-modal-close"
+          (click)="close()"
+        >
+        </monkey-icon-button>
+      }
+    </div>
+    <ng-content select="monkey-modal-content"></ng-content>
+    <ng-content select="[monkey-modal-content]"></ng-content>
+    <ng-content select="monkey-modal-actions"></ng-content>
+    <ng-content select="[monkey-modal-actions]"></ng-content>
+  `, isInline: true, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:8px}.mecx-modal{opacity:0;animation:modal-fade-in .2s ease-out forwards;transition:opacity .15s ease-in}.mecx-modal.fade-out{animation:modal-fade-out .15s ease-in forwards}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes modal-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:12px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--mecx-color-gray-200);padding:12px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:#00000052}.monkey-modal-panel{padding:16px}.monkey-modal-panel.monkey-modal-fullscreen{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;padding:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal{border-radius:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal .mecx-modal-content{max-height:100%}\n"], dependencies: [{ kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-option', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div #content><ng-content /></div>`, encapsulation: ViewEncapsulation.None, host: {
-                        'data-testid': 'monkey-option',
-                        '[attr.id]': 'id',
-                        class: 'mecx-option',
-                        '[class.mecx-option-disabled]': 'disabled',
-                        '[class.mecx-option-selected]': 'selected',
-                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
-                        '[class]': 'type'
-                    }, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:#fff;cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus{outline:unset;outline-offset:1px}monkey-option.radio:focus:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}\n"] }]
-        }], propDecorators: { _content: [{
-                type: ViewChild,
-                args: ['content', { static: true }]
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], type: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], handleKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+            args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-modal', template: `
+    <div class="mecx-modal-header">
+      <div class="mecx-modal-header-group">
+        <div class="mecx-modal-header-title">
+          @if (modalRef?.icon) {
+            <div class="mecx-modal-header-icon">
+              <monkey-icon [icon]="modalRef?.icon + ''" first></monkey-icon>
+            </div>
+          }
+          <ng-content select="monkey-modal-title"></ng-content>
+          <ng-content select="[monkey-modal-title]"></ng-content>
+        </div>
+
+        <ng-content select="monkey-modal-subtitle"></ng-content>
+        <ng-content select="[monkey-modal-subtitle]"></ng-content>
+      </div>
+      @if (!modalRef?.disableClose) {
+        <monkey-icon-button
+          size="sm"
+          type="tertiary"
+          icon="close"
+          class="mecx-modal-close"
+          (click)="close()"
+        >
+        </monkey-icon-button>
+      }
+    </div>
+    <ng-content select="monkey-modal-content"></ng-content>
+    <ng-content select="[monkey-modal-content]"></ng-content>
+    <ng-content select="monkey-modal-actions"></ng-content>
+    <ng-content select="[monkey-modal-actions]"></ng-content>
+  `, host: {
+                        class: 'mecx-modal',
+                        tabindex: '-1',
+                        '[attr.id]': 'modalRef?.id || null'
+                    }, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:8px}.mecx-modal{opacity:0;animation:modal-fade-in .2s ease-out forwards;transition:opacity .15s ease-in}.mecx-modal.fade-out{animation:modal-fade-out .15s ease-in forwards}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes modal-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:12px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--mecx-color-gray-200);padding:12px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:#00000052}.monkey-modal-panel{padding:16px}.monkey-modal-panel.monkey-modal-fullscreen{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;padding:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal{border-radius:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal .mecx-modal-content{max-height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.OverlayRef, decorators: [{
+                    type: Optional
+                }] }, { type: MonkeyModalRef, decorators: [{
+                    type: Optional
+                }] }] });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
+const MECX_MODAL_DATA = new InjectionToken('mecxModalData');
+const MECX_MODAL_DEFAULT_CONFIG = new InjectionToken('mecxModalDefaultConfig');
+const MECX_MODAL_CONFIRMATION_CONFIG = new InjectionToken('mecxModalConfirmationConfig');
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+function reverseForEach(items, callback) {
+    let i = items.length;
+    // eslint-disable-next-line no-plusplus
+    while (i--) {
+        callback(items[i]);
+    }
+}
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyRadioButtonComponent {
-    get classes() {
-        return `${this.position} ${this.size}`;
-    }
-    get disabled() {
-        if (this.ngControl && this.ngControl.disabled !== null) {
-            return this.ngControl.disabled;
-        }
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-        if (this.focused) {
-            this.focused = false;
-            this.stateChanges.next();
-        }
-    }
-    get required() {
-        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
-    }
-    set required(value) {
-        this._required = value;
-        this.stateChanges.next();
-    }
-    set value(value) {
-        if (this._value !== value) {
-            this._value = value;
-            this._onChange(value);
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    constructor(changeDetectorRef, formField) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.formField = formField;
-        this.tabIndex = 0;
-        this.onChange = new EventEmitter();
-        this.onSearch = new EventEmitter();
-        this.position = 'horizontal';
-        this.size = 'lg';
-        this._value = null;
-        this._destroyRef = inject(DestroyRef);
-        this.idGenerator = inject(IdGenerator);
-        this.ngControl = inject(NgControl, { self: true, optional: true });
-        this._elementRef = inject(ElementRef);
-        this.focused = false;
-        this._disabled = false;
-        this.id = this.idGenerator.getId('monkey-radiobutton-');
-        this.stateChanges = new Subject();
-        this.type = 'radio-button';
-        this._onChange = () => { };
-        this._onTouched = () => { };
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
-    changeSelected() {
-        setTimeout(() => {
-            if (this.options) {
-                this.options.forEach((opt) => {
-                    opt.selected = opt.value === this.value;
-                });
-            }
-            this.changeDetectorRef.markForCheck();
-        });
-    }
-    initializeOptions() {
-        setTimeout(() => {
-            this.options?.forEach((option) => {
-                option.type = 'radio';
-                if (!option.action) {
-                    option.action = this.selectOption.bind(this, option);
-                }
-            });
-            this.changeDetectorRef.markForCheck();
-        }, 0);
-    }
-    ngAfterContentInit() {
-        this.initializeOptions();
-        this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
-            this.initializeOptions();
-            this.changeSelected();
-        });
-    }
-    selectOption(option) {
-        if (!option.disabled && !this.disabled) {
-            this.value = option.value;
-            this._onChange(this.value);
-            this.onChange.emit(this.value);
-            this.options.forEach((opt) => {
-                opt.selected = opt.value === this.value;
-            });
-        }
-    }
-    writeValue(value) {
-        this.value = value;
-        this.changeSelected();
-    }
-    onContainerClick(event) {
-        if (this.disabled)
-            return;
-        this._elementRef.nativeElement.focus();
+class MonkeyModalDefaultComponent {
+    constructor(config, modalRef) {
+        this.config = config;
+        this.modalRef = modalRef;
+        // not to do
     }
-    _onFocus() {
-        if (!this.disabled) {
-            this.focused = true;
-            this._onTouched();
-            this.stateChanges.next();
-        }
+    onSubmit() {
+        this.modalRef.close(true);
     }
-    _onBlur() {
-        this.focused = false;
-        this.stateChanges.next();
+    onClose() {
+        this.modalRef.close();
     }
-    registerOnChange(fn) {
-        this._onChange = fn;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalDefaultComponent, deps: [{ token: MECX_MODAL_DEFAULT_CONFIG }, { token: MonkeyModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalDefaultComponent, selector: "monkey-modal-default", ngImport: i0, template: `
+    <monkey-modal>
+      <monkey-modal-title [innerHTML]="config.title"></monkey-modal-title>
+      <monkey-modal-subtitle [innerHTML]="config.subtitle"></monkey-modal-subtitle>
+      <monkey-modal-content [innerHTML]="config.content"></monkey-modal-content>
+      <monkey-modal-actions mkAlign="end">
+        <monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
+        <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
+      </monkey-modal-actions>
+    </monkey-modal>
+  `, isInline: true, dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "size", "type", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]" }, { kind: "directive", type: MonkeyModalSubtitleDirective, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'monkey-modal-default',
+                    template: `
+    <monkey-modal>
+      <monkey-modal-title [innerHTML]="config.title"></monkey-modal-title>
+      <monkey-modal-subtitle [innerHTML]="config.subtitle"></monkey-modal-subtitle>
+      <monkey-modal-content [innerHTML]="config.content"></monkey-modal-content>
+      <monkey-modal-actions mkAlign="end">
+        <monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
+        <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
+      </monkey-modal-actions>
+    </monkey-modal>
+  `
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MECX_MODAL_DEFAULT_CONFIG]
+                }] }, { type: MonkeyModalRef, decorators: [{
+                    type: Inject,
+                    args: [MonkeyModalRef]
+                }] }] });
+
+class MonkeyModalConfirmationComponent {
+    constructor(config, modalRef) {
+        this.config = config;
+        this.modalRef = modalRef;
+        // not to do
     }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
+    onSubmit() {
+        this.modalRef.close(true);
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.initializeOptions();
+    onClose() {
+        this.modalRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyRadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyRadioButtonComponent, isStandalone: true, selector: "monkey-radiobutton", inputs: { tabIndex: "tabIndex", position: "position", size: "size", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange", onSearch: "onSearch" }, host: { attributes: { "data-testid": "monkey-radiobutton" }, listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "class.mecx-disabled": "disabled", "class.mecx-radiobutton-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "this.classes" }, classAttribute: "mecx-radiobutton" }, providers: [
-            // eslint-disable-next-line no-use-before-define
-            { provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
-        ], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], ngImport: i0, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalConfirmationComponent, deps: [{ token: MECX_MODAL_CONFIRMATION_CONFIG }, { token: MonkeyModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyModalConfirmationComponent, selector: "monkey-modal-confirmation", ngImport: i0, template: `
+    <monkey-modal class="modal-confirmation">
+      <monkey-modal-content>
+        @if (config.icon) {
+          <div class="modal-confirmation-icon {{ config.type }}">
+            <monkey-icon [icon]="config.icon" size="xxl"></monkey-icon>
+          </div>
+        }
+        <div class="confirmation-title" [innerHTML]="config.title"></div>
+        <div class="confirmation-description" [innerHTML]="config.content"></div>
+      </monkey-modal-content>
+      <monkey-modal-actions>
+        <monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
+        <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
+      </monkey-modal-actions>
+    </monkey-modal>
+  `, isInline: true, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 16px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon monkey-icon{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning monkey-icon{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error monkey-icon{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success monkey-icon{color:var(--mecx-color-success-500)}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "size", "type", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyRadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalConfirmationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-radiobutton', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
-                        // eslint-disable-next-line no-use-before-define
-                        { provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
-                    ], host: {
-                        'data-testid': 'monkey-radiobutton',
-                        class: 'mecx-radiobutton',
-                        '[class.mecx-disabled]': 'disabled',
-                        '[class.mecx-radiobutton-focused]': 'focused',
-                        '[attr.id]': 'id',
-                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
-                        '(focus)': '_onFocus()',
-                        '(blur)': '_onBlur()'
-                    }, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MonkeyFormFieldComponent, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { options: [{
-                type: ContentChildren,
-                args: [MonkeyOptionComponent]
-            }], tabIndex: [{
-                type: Input
-            }], onChange: [{
-                type: Output
-            }], onSearch: [{
-                type: Output
-            }], position: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], classes: [{
-                type: HostBinding,
-                args: ['class']
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], value: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'monkey-modal-confirmation', encapsulation: ViewEncapsulation.None, template: `
+    <monkey-modal class="modal-confirmation">
+      <monkey-modal-content>
+        @if (config.icon) {
+          <div class="modal-confirmation-icon {{ config.type }}">
+            <monkey-icon [icon]="config.icon" size="xxl"></monkey-icon>
+          </div>
+        }
+        <div class="confirmation-title" [innerHTML]="config.title"></div>
+        <div class="confirmation-description" [innerHTML]="config.content"></div>
+      </monkey-modal-content>
+      <monkey-modal-actions>
+        <monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
+        <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
+      </monkey-modal-actions>
+    </monkey-modal>
+  `, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 16px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon monkey-icon{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning monkey-icon{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error monkey-icon{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success monkey-icon{color:var(--mecx-color-success-500)}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MECX_MODAL_CONFIRMATION_CONFIG]
+                }] }, { type: MonkeyModalRef, decorators: [{
+                    type: Inject,
+                    args: [MonkeyModalRef]
+                }] }] });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
+class MonkeyModalModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, declarations: [MonkeyModalComponent,
+            MonkeyModalDefaultComponent,
+            MonkeyModalConfirmationComponent,
+            MonkeyModalTitleDirective,
+            MonkeyModalSubtitleDirective,
+            MonkeyModalContentDirective,
+            MonkeyModalActionsDirective], imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent], exports: [MonkeyModalComponent,
+            MonkeyModalTitleDirective,
+            MonkeyModalSubtitleDirective,
+            MonkeyModalContentDirective,
+            MonkeyModalActionsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent],
+                    declarations: [
+                        MonkeyModalComponent,
+                        MonkeyModalDefaultComponent,
+                        MonkeyModalConfirmationComponent,
+                        MonkeyModalTitleDirective,
+                        MonkeyModalSubtitleDirective,
+                        MonkeyModalContentDirective,
+                        MonkeyModalActionsDirective
+                    ],
+                    exports: [
+                        MonkeyModalComponent,
+                        MonkeyModalTitleDirective,
+                        MonkeyModalSubtitleDirective,
+                        MonkeyModalContentDirective,
+                        MonkeyModalActionsDirective
+                    ]
+                }]
+        }] });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeySecurityLevelComponent {
-    get class() {
-        if (this.score() === 0) {
-            return 'empty';
+class MonkeyModalService {
+    constructor() {
+        this._idGenerator = inject(IdGenerator);
+        this._injector = inject(Injector);
+        this._overlay = inject(Overlay);
+        this._openDialogsAtThisLevel = [];
+        this._parentDialog = inject(MonkeyModalService, { optional: true, skipSelf: true });
+    }
+    get openDialogs() {
+        return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;
+    }
+    getOverlayConfig(config) {
+        let positionStrategy;
+        const marginStrategy = '20px';
+        if (config.position === 'left-top') {
+            positionStrategy = this._overlay.position().global().left(marginStrategy).top(marginStrategy);
         }
-        if (this.score() < 300) {
-            return 'weak';
+        else if (config.position === 'center-top') {
+            positionStrategy = this._overlay.position().global().centerHorizontally().top(marginStrategy);
         }
-        if (this.score() >= 300 && this.score() < 800) {
-            return 'medium';
+        else if (config.position === 'right-top') {
+            positionStrategy = this._overlay
+                .position()
+                .global()
+                .right(marginStrategy)
+                .top(marginStrategy);
         }
-        if (this.score() >= 800 && this.score() < 1000) {
-            return 'strong';
+        else if (config.position === 'left-center') {
+            positionStrategy = this._overlay.position().global().left(marginStrategy).centerVertically();
         }
-        return 'very-strong';
+        else if (config.position === 'center-center') {
+            positionStrategy = this._overlay.position().global().centerHorizontally().centerVertically();
+        }
+        else if (config.position === 'right-center') {
+            positionStrategy = this._overlay.position().global().right(marginStrategy).centerVertically();
+        }
+        else if (config.position === 'left-bottom') {
+            positionStrategy = this._overlay
+                .position()
+                .global()
+                .left(marginStrategy)
+                .bottom(marginStrategy);
+        }
+        else if (config.position === 'center-bottom') {
+            positionStrategy = this._overlay.position().global().centerHorizontally().bottom('20px');
+        }
+        else if (config.position === 'right-bottom') {
+            positionStrategy = this._overlay
+                .position()
+                .global()
+                .right(marginStrategy)
+                .bottom(marginStrategy);
+        }
+        let panelClass = ['monkey-modal-panel'];
+        if (config.fullscreen) {
+            panelClass.push('monkey-modal-fullscreen');
+        }
+        if (Array.isArray(config.panelClass)) {
+            panelClass = [...panelClass, ...config.panelClass];
+        }
+        else {
+            panelClass.push(config.panelClass);
+        }
+        const state = new OverlayConfig({
+            positionStrategy,
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+            panelClass,
+            hasBackdrop: config.hasBackdrop,
+            maxWidth: config.maxWidth,
+            maxHeight: config.maxHeight,
+            disposeOnNavigation: config.closeOnNavigation
+        });
+        if (config.backdropClass) {
+            state.backdropClass = config.backdropClass;
+        }
+        if (config.maxWidth) {
+            state.width = '100%';
+        }
+        if (config.maxHeight) {
+            state.height = '100%';
+        }
+        return state;
+    }
+    createInjector(config, dialogRef, overlayRef, fallbackInjector) {
+        const providers = [
+            { provide: OverlayRef, useValue: overlayRef },
+            { provide: MonkeyModalRef, useValue: dialogRef },
+            { provide: MECX_MODAL_DATA, useValue: config.data }
+        ];
+        if (config.providers) {
+            providers.push(...config.providers);
+        }
+        return Injector.create({ parent: fallbackInjector, providers });
+    }
+    open(component, config) {
+        const defaultConfig = new MonkeyModalConfig();
+        config = { ...defaultConfig, ...config };
+        config.id = this._idGenerator.getId('monkey-modal-');
+        const overlayConfig = this.getOverlayConfig(config);
+        const overlayRef = this._overlay.create(overlayConfig);
+        const modalRef = new MonkeyModalRef(overlayRef, config);
+        const injector = this.createInjector(config, modalRef, overlayRef, this._injector);
+        const componentPortal = new ComponentPortal(component, null, injector);
+        const componentRef = overlayRef.attach(componentPortal);
+        const componentElement = componentRef.location.nativeElement;
+        componentElement.style.width = '100%';
+        componentElement.style.height = '100%';
+        modalRef.componentElement = componentElement;
+        modalRef.componentInstance = componentRef.instance;
+        this.openDialogs.push(modalRef);
+        return modalRef;
     }
-    get id() {
-        return this._id;
+    openDefault(params, config) {
+        config.providers = [{ provide: MECX_MODAL_DEFAULT_CONFIG, useValue: params }];
+        config.icon = config.icon ? config.icon : 'help';
+        return this.open(MonkeyModalDefaultComponent, config);
     }
-    set id(value) {
-        this._id = value || this._uid;
+    openConfirmation(params, config) {
+        config.providers = [{ provide: MECX_MODAL_CONFIRMATION_CONFIG, useValue: params }];
+        return this.open(MonkeyModalConfirmationComponent, config);
     }
-    constructor() {
-        this.label = input();
-        this.score = input.required();
-        this.strengthLabel = input();
-        this._uid = inject(IdGenerator).getId('monkey-security-level-');
-        // eslint-disable-next-line no-self-assign
-        this.id = this.id;
+    closeAll() {
+        reverseForEach(this.openDialogs, (dialog) => {
+            return dialog.close();
+        });
+        this.openDialogs.splice(0, this.openDialogs.length);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeySecurityLevelComponent, isStandalone: true, selector: "monkey-security-level", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, score: { classPropertyName: "score", publicName: "score", isSignal: true, isRequired: true, transformFunction: null }, strengthLabel: { classPropertyName: "strengthLabel", publicName: "strengthLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-security-level" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:var(--mecx-color-gray-300);position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:var(--mecx-color-success-main);width:100%}monkey-security-level.strong .bar:before{background:var(--mecx-color-success-main);width:80%}monkey-security-level.medium .bar:before{background:var(--mecx-color-warning-main);width:66%}monkey-security-level.weak .bar:before{background:var(--mecx-color-error-700);width:33%}monkey-security-level.empty .bar:before{background:var(--mecx-color-error-700);width:0%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, decorators: [{
-            type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule], selector: 'monkey-security-level', standalone: true, host: {
-                        'data-testid': 'monkey-security-level',
-                        '[attr.id]': 'id',
-                        '[id]': 'id'
-                    }, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:var(--mecx-color-gray-300);position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:var(--mecx-color-success-main);width:100%}monkey-security-level.strong .bar:before{background:var(--mecx-color-success-main);width:80%}monkey-security-level.medium .bar:before{background:var(--mecx-color-warning-main);width:66%}monkey-security-level.weak .bar:before{background:var(--mecx-color-error-700);width:33%}monkey-security-level.empty .bar:before{background:var(--mecx-color-error-700);width:0%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], id: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
@@ -4621,7 +5131,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeySelectComponent {
+class MonkeyRadioButtonComponent {
+    get classes() {
+        return `${this.position} ${this.size}`;
+    }
     get disabled() {
         if (this.ngControl && this.ngControl.disabled !== null) {
             return this.ngControl.disabled;
@@ -4643,246 +5156,69 @@ class MonkeySelectComponent {
         this.stateChanges.next();
     }
     set value(value) {
-        if (this._value !== value) {
-            this._value = value;
-            this._onChange(value);
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    constructor(overlay, changeDetectorRef, viewContainerRef, formField) {
-        this.overlay = overlay;
-        this.changeDetectorRef = changeDetectorRef;
-        this.viewContainerRef = viewContainerRef;
-        this.formField = formField;
-        this.tabIndex = 0;
-        this.onChange = new EventEmitter();
-        this.onSearch = new EventEmitter();
-        this.placeholder = '';
-        this.loading = false;
-        this.showSearch = true;
-        this.searchPlaceholder = '';
-        this.callbackSearch = false;
-        this._value = null;
-        this.labelSelected = '';
-        this.overlayRef = null;
-        this._destroyRef = inject(DestroyRef);
-        this.idGenerator = inject(IdGenerator);
-        this.ngControl = inject(NgControl, { self: true, optional: true });
-        this._elementRef = inject(ElementRef);
-        this.currency = false;
-        this.focused = false;
-        this._disabled = false;
-        this.id = this.idGenerator.getId('monkey-select-');
-        this.percent = false;
-        this.stateChanges = new Subject();
-        this.type = '';
-        this.searchHandle = new EventEmitter();
-        this.searchDictionary = inject(MonkeyDictionaryService).get('NO-DATA');
-        this.loadingDictionary = inject(MonkeyDictionaryService).get('LOADING');
-        this.showSearchNoData = false;
-        this.isOpen = false;
-        this.searchData = '';
-        this.onAnimationEnd = (event) => {
-            if (event.toState === 'closed') {
-                this.closeOverlay();
-            }
-        };
-        this._onChange = () => { };
-        this._onTouched = () => { };
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
-    changeControl() {
-        if (this.formField?.control) {
-            this.formField.control.loading = this.loading;
-        }
-    }
-    changeSelected() {
-        setTimeout(() => {
-            if (this.options) {
-                this.options.forEach((opt) => {
-                    opt.selected = opt.value === this.value;
-                });
-                this.updateSelectedLabel();
-            }
-            this.changeDetectorRef.markForCheck();
-        });
-    }
-    initializeOptions() {
-        this.options.forEach((option) => {
-            if (!option.action) {
-                option.action = this.selectOption.bind(this, option);
-            }
-        });
-    }
-    openDropdown() {
-        if (this.options?.length) {
-            this.formField.control.disableToBeDirty = true;
-            this.isOpen = true;
-            this.createOverlay();
-        }
-    }
-    closeDropdown() {
-        this.changeDetectorRef.markForCheck();
-        this.isOpen = false;
-        this.focused = false;
-        this.formField.control.disableToBeDirty = false;
-        if (!this.callbackSearch) {
-            this.searchData = '';
-        }
-    }
-    closeOverlay() {
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
-    }
-    initializeWithOverlay() {
-        if (this.showSearch) {
-            const element = this.overlayRef?.overlayElement.querySelector(`#${this.id}-search`);
-            this.options.forEach((opt) => {
-                const element = this.overlayRef?.overlayElement.querySelector(`#${opt.id}`);
-                if (!element)
-                    return;
-                element.style.display = '';
-            });
-            setTimeout(() => {
-                element?.focus();
-            }, 0);
-            this.showSearchNoData = false;
-        }
-        setTimeout(() => {
-            const selected = this.options.find((opt) => {
-                return opt.selected;
-            });
-            if (selected) {
-                const element = this.overlayRef?.overlayElement.querySelector(`#${selected.id}`);
-                element?.scrollIntoView({ behavior: 'instant', block: 'center' });
-            }
-        }, 0);
-    }
-    createOverlay() {
-        if (this.overlayRef) {
-            return;
-        }
-        const offset = 4;
-        const positions = [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: offset
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -offset
-            }
-        ];
-        let anchor = this.trigger;
-        let width = anchor.nativeElement.offsetWidth;
-        if (this.formField?.elementRef) {
-            const el = this.formField?.elementRef.nativeElement.querySelector('.mecx-form-field-body');
-            anchor = el;
-            width = el.offsetWidth;
-        }
-        const positionStrategy = this.overlay
-            .position()
-            .flexibleConnectedTo(anchor)
-            .withPositions(positions)
-            .withPush(true);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            scrollStrategy: this.overlay.scrollStrategies.block(),
-            width,
-            hasBackdrop: true,
-            backdropClass: 'no-class'
-        });
-        const portal = new TemplatePortal(this.overlayTemplate, this.viewContainerRef);
-        this.overlayRef.attach(portal);
-        this.overlayRef
-            .backdropClick()
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => {
-            return this.closeDropdown();
-        });
-        this.initializeWithOverlay();
-    }
-    updateSelectedLabel() {
-        const selectedOption = this.options.find((opt) => {
-            return opt.value === this.value;
-        });
-        this.labelSelected = selectedOption ? selectedOption.displayContent : '';
-    }
-    executeSearch(search) {
-        let found = false;
-        this.options.forEach((opt) => {
-            const element = this.overlayRef?.overlayElement.querySelector(`#${opt.id}`);
-            if (!element)
-                return;
-            const isMatch = normalizeStringToSearch(opt.displayContent).includes(normalizeStringToSearch(search));
-            if (isMatch) {
-                found = true;
-            }
-            element.style.display = isMatch ? '' : 'none';
-        });
-        this.repositionScroll();
-        this.showSearchNoData = !found;
+        if (this._value !== value) {
+            this._value = value;
+            this._onChange(value);
+        }
     }
-    repositionScroll() {
-        const overlayElement = this.overlayRef?.overlayElement.querySelector('.mecx-select-overlay');
-        if (overlayElement) {
-            overlayElement.scrollTop = 0;
+    get value() {
+        return this._value;
+    }
+    constructor(changeDetectorRef, formField) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.formField = formField;
+        this.tabIndex = 0;
+        this.onChange = new EventEmitter();
+        this.onSearch = new EventEmitter();
+        this.position = 'horizontal';
+        this.size = 'lg';
+        this._value = null;
+        this._destroyRef = inject(DestroyRef);
+        this.idGenerator = inject(IdGenerator);
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this._elementRef = inject(ElementRef);
+        this.focused = false;
+        this._disabled = false;
+        this.id = this.idGenerator.getId('monkey-radiobutton-');
+        this.stateChanges = new Subject();
+        this.type = 'radio-button';
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
         }
     }
-    ngOnInit() {
-        this.searchHandle
-            .pipe(debounceTime(200), takeUntilDestroyed(this._destroyRef))
-            .subscribe((search) => {
-            if (this.callbackSearch) {
-                this.onSearch.next(search);
-                this.repositionScroll();
-            }
-            else {
-                this.executeSearch(search);
+    changeSelected() {
+        setTimeout(() => {
+            if (this.options) {
+                this.options.forEach((opt) => {
+                    opt.selected = opt.value === this.value;
+                });
             }
+            this.changeDetectorRef.markForCheck();
         });
     }
+    initializeOptions() {
+        setTimeout(() => {
+            this.options?.forEach((option) => {
+                option.type = 'radio';
+                if (!option.action) {
+                    option.action = this.selectOption.bind(this, option);
+                }
+            });
+            this.changeDetectorRef.markForCheck();
+        }, 0);
+    }
     ngAfterContentInit() {
         this.initializeOptions();
-        this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((resp) => {
-            this.updateSelectedLabel();
+        this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
             this.initializeOptions();
             this.changeSelected();
         });
     }
-    ngOnDestroy() {
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-        }
-    }
-    toggleDropdown() {
-        if (!this.disabled) {
-            if (this.isOpen) {
-                this.closeDropdown();
-                this._onTouched();
-            }
-            else {
-                this.openDropdown();
-            }
-        }
-    }
     selectOption(option) {
         if (!option.disabled && !this.disabled) {
             this.value = option.value;
-            this.updateSelectedLabel();
-            this.closeDropdown();
             this._onChange(this.value);
             this.onChange.emit(this.value);
             this.options.forEach((opt) => {
@@ -4897,7 +5233,6 @@ class MonkeySelectComponent {
     onContainerClick(event) {
         if (this.disabled)
             return;
-        this.openDropdown();
         this._elementRef.nativeElement.focus();
     }
     _onFocus() {
@@ -4919,98 +5254,32 @@ class MonkeySelectComponent {
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        this.initializeOptions();
     }
-    ngOnChanges(changes) {
-        let hasChanges = false;
-        // eslint-disable-next-line dot-notation
-        const changesLoading = changes?.['loading'];
-        if (changesLoading?.currentValue !== changesLoading?.previousValue) {
-            hasChanges = true;
-            this.changeControl();
-        }
-        if (hasChanges) {
-            this.stateChanges.next();
-        }
-    }
-    onHandleSearch(event) {
-        try {
-            const { value } = event.target;
-            const handled = sanitizeString(value);
-            this.searchHandle.next(handled || '');
-        }
-        catch (e) {
-            // not to do
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySelectComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeySelectComponent, isStandalone: true, selector: "monkey-select", inputs: { tabIndex: "tabIndex", placeholder: "placeholder", loading: ["loading", "loading", booleanAttribute], showSearch: ["showSearch", "showSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder", callbackSearch: ["callbackSearch", "callbackSearch", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange", onSearch: "onSearch" }, host: { attributes: { "data-testid": "monkey-select" }, listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "class.mecx-select-disabled": "_disabled", "class.mecx-select-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-select" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyRadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyRadioButtonComponent, isStandalone: true, selector: "monkey-radiobutton", inputs: { tabIndex: "tabIndex", position: "position", size: "size", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange", onSearch: "onSearch" }, host: { attributes: { "data-testid": "monkey-radiobutton" }, listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "class.mecx-disabled": "disabled", "class.mecx-radiobutton-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "this.classes" }, classAttribute: "mecx-radiobutton" }, providers: [
             // eslint-disable-next-line no-use-before-define
-            { provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent }
-        ], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], viewQueries: [{ propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }, { propertyName: "overlayEl", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"mecx-select-trigger\"\n  [class.open]=\"isOpen\"\n  (click)=\"toggleDropdown()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen\"\n  #trigger\n>\n  <div class=\"mecx-select-value\" [class.has-value]=\"value\">\n    <span>{{ labelSelected || placeholder }}</span>\n  </div>\n\n  @if (!loading) {\n    <util-icon class=\"mecx-select-icon\" name=\"arrowDown\" />\n  }\n</div>\n\n<ng-template #overlayTemplate>\n  <div class=\"mecx-select-body-overlay\">\n    @if (showSearch) {\n      <div class=\"mecx-select-search\">\n        <util-icon class=\"mecx-select-search-icon\" name=\"search\" />\n        <input\n          (input)=\"onHandleSearch($event)\"\n          type=\"text\"\n          [id]=\"id + '-search'\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          [placeholder]=\"searchPlaceholder\"\n          [(ngModel)]=\"searchData\"\n        />\n      </div>\n    }\n    <div\n      class=\"mecx-select-overlay\"\n      #overlay\n      [@animation]=\"isOpen ? 'open' : 'closed'\"\n      (@animation.done)=\"onAnimationEnd($event)\"\n    >\n      <ng-content />\n    </div>\n    @if (showSearch && showSearchNoData) {\n      <div class=\"mecx-select-search-no-data\">\n        <util-icon class=\"mecx-select-search-no-data-icon\" name=\"searchFail\" />\n        {{ searchDictionary | async }}\n      </div>\n    }\n    @if (loading) {\n      <div class=\"mecx-select-search-loading\">\n        {{ loadingDictionary | async }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["monkey-select{display:inline-flex;width:100%;min-width:0;position:relative}monkey-select:focus-visible,monkey-select:focus{outline:none}.mecx-select-trigger{width:100%;display:inline-flex;align-items:center;cursor:pointer;gap:8px;box-sizing:border-box}.mecx-select-trigger .mecx-select-value{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mecx-color-gray-500);font-size:14px;line-height:24px;letter-spacing:.42px}.mecx-select-trigger .mecx-select-value.has-value{color:var(--mecx-color-gray-900)}.mecx-select-trigger .mecx-select-icon{display:flex;transition:all .2s ease-in-out}.mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-theme-main)}.mecx-select-disabled .mecx-select-trigger{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-50);cursor:default}.mecx-select-disabled .mecx-select-trigger .mecx-select-value{color:var(--mecx-color-gray-400)}.mecx-select-disabled .mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-gray-400)}.mecx-select-trigger.open .mecx-select-icon{transform:rotate(180deg)}.mecx-select-body-overlay{width:100%;background:#fff;border:2px solid var(--mecx-color-gray-400);overflow:hidden;border-radius:4px;box-shadow:0 16px 32px 0 var(--mecx-color-box-shadow)}.mecx-select-body-overlay .mecx-select-search{display:flex;gap:4px;border-bottom:2px solid var(--mecx-color-gray-400);padding:8px}.mecx-select-body-overlay .mecx-select-search-icon{width:12px;display:flex}.mecx-select-body-overlay .mecx-select-search-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-body-overlay input{border:none;width:90%;color:var(--mecx-color-gray-600)!important;font-size:12px;letter-spacing:.54px}.mecx-select-body-overlay .mecx-select-search-no-data,.mecx-select-body-overlay .mecx-select-search-loading{padding:12px;display:flex;justify-content:center;flex-direction:column;align-items:center;gap:4px;color:var(--mecx-color-gray-600);font-size:12px;letter-spacing:.54px;text-align:center}.mecx-select-body-overlay .mecx-select-search-no-data-icon svg path,.mecx-select-body-overlay .mecx-select-search-loading-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-overlay{width:100%;background:#fff;overflow:hidden auto;max-height:360px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
-            trigger('animation', [
-                transition(':enter', [
-                    style({
-                        opacity: 0,
-                        transform: 'scaleY(.9)'
-                    }),
-                    animate('100ms ease-in-out', style({
-                        opacity: 1,
-                        transform: 'scaleY(1)'
-                    }))
-                ]),
-                state('closed', style({
-                    transform: 'scaleY(.9)',
-                    opacity: 0
-                })),
-                transition('closed <=> open', animate('200ms ease-in-out'))
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            { provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
+        ], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], ngImport: i0, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyRadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'monkey-radiobutton', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         // eslint-disable-next-line no-use-before-define
-                        { provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent }
-                    ], animations: [
-                        trigger('animation', [
-                            transition(':enter', [
-                                style({
-                                    opacity: 0,
-                                    transform: 'scaleY(.9)'
-                                }),
-                                animate('100ms ease-in-out', style({
-                                    opacity: 1,
-                                    transform: 'scaleY(1)'
-                                }))
-                            ]),
-                            state('closed', style({
-                                transform: 'scaleY(.9)',
-                                opacity: 0
-                            })),
-                            transition('closed <=> open', animate('200ms ease-in-out'))
-                        ])
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
                     ], host: {
-                        'data-testid': 'monkey-select',
-                        class: 'mecx-select',
-                        '[class.mecx-select-disabled]': '_disabled',
-                        '[class.mecx-select-focused]': 'focused',
+                        'data-testid': 'monkey-radiobutton',
+                        class: 'mecx-radiobutton',
+                        '[class.mecx-disabled]': 'disabled',
+                        '[class.mecx-radiobutton-focused]': 'focused',
                         '[attr.id]': 'id',
                         '[attr.tabindex]': 'disabled ? -1 : tabIndex',
                         '(focus)': '_onFocus()',
                         '(blur)': '_onBlur()'
-                    }, template: "<div\n  class=\"mecx-select-trigger\"\n  [class.open]=\"isOpen\"\n  (click)=\"toggleDropdown()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen\"\n  #trigger\n>\n  <div class=\"mecx-select-value\" [class.has-value]=\"value\">\n    <span>{{ labelSelected || placeholder }}</span>\n  </div>\n\n  @if (!loading) {\n    <util-icon class=\"mecx-select-icon\" name=\"arrowDown\" />\n  }\n</div>\n\n<ng-template #overlayTemplate>\n  <div class=\"mecx-select-body-overlay\">\n    @if (showSearch) {\n      <div class=\"mecx-select-search\">\n        <util-icon class=\"mecx-select-search-icon\" name=\"search\" />\n        <input\n          (input)=\"onHandleSearch($event)\"\n          type=\"text\"\n          [id]=\"id + '-search'\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          [placeholder]=\"searchPlaceholder\"\n          [(ngModel)]=\"searchData\"\n        />\n      </div>\n    }\n    <div\n      class=\"mecx-select-overlay\"\n      #overlay\n      [@animation]=\"isOpen ? 'open' : 'closed'\"\n      (@animation.done)=\"onAnimationEnd($event)\"\n    >\n      <ng-content />\n    </div>\n    @if (showSearch && showSearchNoData) {\n      <div class=\"mecx-select-search-no-data\">\n        <util-icon class=\"mecx-select-search-no-data-icon\" name=\"searchFail\" />\n        {{ searchDictionary | async }}\n      </div>\n    }\n    @if (loading) {\n      <div class=\"mecx-select-search-loading\">\n        {{ loadingDictionary | async }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["monkey-select{display:inline-flex;width:100%;min-width:0;position:relative}monkey-select:focus-visible,monkey-select:focus{outline:none}.mecx-select-trigger{width:100%;display:inline-flex;align-items:center;cursor:pointer;gap:8px;box-sizing:border-box}.mecx-select-trigger .mecx-select-value{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mecx-color-gray-500);font-size:14px;line-height:24px;letter-spacing:.42px}.mecx-select-trigger .mecx-select-value.has-value{color:var(--mecx-color-gray-900)}.mecx-select-trigger .mecx-select-icon{display:flex;transition:all .2s ease-in-out}.mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-theme-main)}.mecx-select-disabled .mecx-select-trigger{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-50);cursor:default}.mecx-select-disabled .mecx-select-trigger .mecx-select-value{color:var(--mecx-color-gray-400)}.mecx-select-disabled .mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-gray-400)}.mecx-select-trigger.open .mecx-select-icon{transform:rotate(180deg)}.mecx-select-body-overlay{width:100%;background:#fff;border:2px solid var(--mecx-color-gray-400);overflow:hidden;border-radius:4px;box-shadow:0 16px 32px 0 var(--mecx-color-box-shadow)}.mecx-select-body-overlay .mecx-select-search{display:flex;gap:4px;border-bottom:2px solid var(--mecx-color-gray-400);padding:8px}.mecx-select-body-overlay .mecx-select-search-icon{width:12px;display:flex}.mecx-select-body-overlay .mecx-select-search-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-body-overlay input{border:none;width:90%;color:var(--mecx-color-gray-600)!important;font-size:12px;letter-spacing:.54px}.mecx-select-body-overlay .mecx-select-search-no-data,.mecx-select-body-overlay .mecx-select-search-loading{padding:12px;display:flex;justify-content:center;flex-direction:column;align-items:center;gap:4px;color:var(--mecx-color-gray-600);font-size:12px;letter-spacing:.54px;text-align:center}.mecx-select-body-overlay .mecx-select-search-no-data-icon svg path,.mecx-select-body-overlay .mecx-select-search-loading-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-overlay{width:100%;background:#fff;overflow:hidden auto;max-height:360px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: MonkeyFormFieldComponent, decorators: [{
+                    }, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MonkeyFormFieldComponent, decorators: [{
                     type: Optional
-                }] }], propDecorators: { overlayTemplate: [{
-                type: ViewChild,
-                args: ['overlayTemplate']
-            }], overlayEl: [{
-                type: ViewChild,
-                args: ['overlay']
-            }], trigger: [{
-                type: ViewChild,
-                args: ['trigger']
-            }], options: [{
+                }] }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [MonkeyOptionComponent]
             }], tabIndex: [{
@@ -5019,20 +5288,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }], onSearch: [{
                 type: Output
-            }], placeholder: [{
-                type: Input,
-                args: [{ required: true }]
-            }], loading: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], showSearch: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], searchPlaceholder: [{
+            }], position: [{
                 type: Input
-            }], callbackSearch: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
+            }], size: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -5049,6 +5311,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * MIT Licence
  ************************* */
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeySecurityLevelComponent {
+    get class() {
+        if (this.score() === 0) {
+            return 'empty';
+        }
+        if (this.score() < 300) {
+            return 'weak';
+        }
+        if (this.score() >= 300 && this.score() < 800) {
+            return 'medium';
+        }
+        if (this.score() >= 800 && this.score() < 1000) {
+            return 'strong';
+        }
+        return 'very-strong';
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.label = input();
+        this.score = input.required();
+        this.strengthLabel = input();
+        this._uid = inject(IdGenerator).getId('monkey-security-level-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeySecurityLevelComponent, isStandalone: true, selector: "monkey-security-level", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, score: { classPropertyName: "score", publicName: "score", isSignal: true, isRequired: true, transformFunction: null }, strengthLabel: { classPropertyName: "strengthLabel", publicName: "strengthLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-security-level" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:var(--mecx-color-gray-300);position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:var(--mecx-color-success-main);width:100%}monkey-security-level.strong .bar:before{background:var(--mecx-color-success-main);width:80%}monkey-security-level.medium .bar:before{background:var(--mecx-color-warning-main);width:66%}monkey-security-level.weak .bar:before{background:var(--mecx-color-error-700);width:33%}monkey-security-level.empty .bar:before{background:var(--mecx-color-error-700);width:0%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule], selector: 'monkey-security-level', standalone: true, host: {
+                        'data-testid': 'monkey-security-level',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:var(--mecx-color-gray-300);position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:var(--mecx-color-success-main);width:100%}monkey-security-level.strong .bar:before{background:var(--mecx-color-success-main);width:80%}monkey-security-level.medium .bar:before{background:var(--mecx-color-warning-main);width:66%}monkey-security-level.weak .bar:before{background:var(--mecx-color-error-700);width:33%}monkey-security-level.empty .bar:before{background:var(--mecx-color-error-700);width:0%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -6369,5 +6689,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MONKEY_I18N_WRAPPER, MONKEY_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyErrorDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDirective, MonkeyInputModule, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeySuffixDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, getCurrencySymbol };
+export { MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MONKEY_COUNTRY_CODE, MONKEY_I18N_WRAPPER, MONKEY_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyErrorDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeySuffixDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, getCurrencySymbol };
 //# sourceMappingURL=monkey-style-guide-v2.mjs.map