monkey-style-guide-v2 0.0.31 → 0.0.33

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

@@ -2163,7 +2163,7 @@ class MonkeyFormFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyFormFieldComponent, isStandalone: false, 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyFormFieldComponent, isStandalone: false, 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;cursor:not-allowed}.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: "19.2.14", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
             type: Component,
@@ -2176,7 +2176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         '[attr.id]': 'id',
                         '[id]': 'id',
                         '[class]': 'size'
-                    }, standalone: false, 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"] }]
+                    }, standalone: false, 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;cursor:not-allowed}.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: [{
@@ -3001,10 +3001,14 @@ class MonkeyDateRangeComponent {
         this.handledEndDate = val;
     }
     set minDate(val) {
-        this.handledMinDate = parseStringDate(val);
+        if (val) {
+            this.handledMinDate = parseStringDate(val);
+        }
     }
     set maxDate(val) {
-        this.handledMaxDate = parseStringDate(val);
+        if (val) {
+            this.handledMaxDate = parseStringDate(val);
+        }
     }
     get id() {
         return this._id;
@@ -3127,6 +3131,9 @@ class MonkeyDateRangeComponent {
             this.handledStartDate = parseStringDate(baseDate);
             this.handledEndDate = parseStringDate(endDate);
         }
+        if (this.hideActions) {
+            this.onSubmit();
+        }
     }
     onChangeInputStartDate(event) {
         this.handleInputChange(event, true);
@@ -3155,7 +3162,7 @@ class MonkeyDateRangeComponent {
         this.secondCalendar = calendars.secondCalendar;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyDateRangeComponent, isStandalone: true, selector: "monkey-date-range", inputs: { startDate: "startDate", endDate: "endDate", hideQuickAction: ["hideQuickAction", "hideQuickAction", booleanAttribute], hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], hideSecondCalendar: ["hideSecondCalendar", "hideSecondCalendar", booleanAttribute], allowFastActionOnHeader: ["allowFastActionOnHeader", "allowFastActionOnHeader", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onCancel: "onCancel", onDate: "onDate" }, host: { attributes: { "data-testid": "monkey-date-range" }, listeners: { "window:resize": "onResize($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  <div class=\"container-group\">\n    @if (!hideQuickAction) {\n      <div class=\"quick-actions\">\n        <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n        </monkey-date-range-quick-actions>\n      </div>\n    }\n\n    <div class=\"container\">\n      @if (!hideHeader) {\n        <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\n          @if (allowFastActionOnHeader) {\n            <div class=\"quick-actions\">\n              <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n              </monkey-date-range-quick-actions>\n            </div>\n          } @else {\n            <div class=\"inputs\">\n              <monkey-form-field hideAction enableClear size=\"sm\">\n                <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\n                <input\n                  type=\"date\"\n                  monkey-input\n                  id=\"startDate\"\n                  [(ngModel)]=\"handledStartDate\"\n                  (ngModelChange)=\"onDataChange($event, true)\"\n                  [min]=\"handledMinDate\"\n                  [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\n                  (change)=\"onChangeInputStartDate($event)\"\n                />\n              </monkey-form-field>\n              <monkey-form-field hideAction enableClear size=\"sm\">\n                <monkey-label>{{ i18n?.['END-DATE'] }}</monkey-label>\n                <input\n                  type=\"date\"\n                  monkey-input\n                  id=\"endDate\"\n                  [(ngModel)]=\"handledEndDate\"\n                  (ngModelChange)=\"onDataChange($event, false)\"\n                  [min]=\"handledStartDate ? handledStartDate : ''\"\n                  [max]=\"handledMaxDate\"\n                  (change)=\"onChangeInputEndDate($event)\"\n                />\n              </monkey-form-field>\n            </div>\n            @if (isInvalidInterval) {\n              <monkey-error>{{ i18n?.['INVALID'] }}</monkey-error>\n            }\n          }\n        </div>\n      }\n\n      <div class=\"body\">\n        <div class=\"calendars\">\n          <monkey-date-range-month\n            [month]=\"firstCalendar.month\"\n            [year]=\"firstCalendar.year\"\n            [startDate]=\"handledStartDate\"\n            [endDate]=\"handledEndDate\"\n            (onDate)=\"onHandleDate($event)\"\n            (onNavigate)=\"onHandleNavigate($event)\"\n            [hideNext]=\"!hideSecondCalendar\"\n            [minDate]=\"handledMinDate\"\n            [maxDate]=\"handledMaxDate\"\n          >\n          </monkey-date-range-month>\n\n          @if (!hideSecondCalendar) {\n            <monkey-date-range-month\n              [month]=\"secondCalendar.month\"\n              [year]=\"secondCalendar.year\"\n              [startDate]=\"handledStartDate\"\n              [endDate]=\"handledEndDate\"\n              (onDate)=\"onHandleDate($event)\"\n              (onNavigate)=\"onHandleNavigate($event)\"\n              hidePrevious\n              [minDate]=\"handledMinDate\"\n              [maxDate]=\"handledMaxDate\"\n            >\n            </monkey-date-range-month>\n          }\n        </div>\n      </div>\n\n      @if (!hideActions) {\n        <div class=\"actions\">\n          <monkey-button size=\"md\" type=\"secondary\" (click)=\"onCancel.next(null)\">\n            {{ i18n?.ACTIONS?.CANCEL }}\n          </monkey-button>\n          <monkey-button\n            size=\"md\"\n            (click)=\"onSubmit()\"\n            [disabled]=\"!this.handledStartDate || !this.handledEndDate\"\n          >\n            {{ i18n?.ACTIONS?.APPLY }}\n          </monkey-button>\n        </div>\n      }\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;border:2px solid var(--mecx-color-gray-200);border-radius:16px}:host .container-group{width:100%;display:inline-flex}:host .container-group .quick-actions{width:100%;max-width:172px;border-top-left-radius:16px;border-bottom-left-radius:16px;border-right:2px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}:host .container-group .container{width:100%;display:inline-flex;flex-direction:column}:host .header{padding:16px 24px;border-radius:1px 16px 1px 1px;border-bottom:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50)}:host .header .quick-actions{max-width:unset;border:unset}:host .header .quick-actions monkey-date-range-quick-actions{flex-flow:row wrap;padding:unset;justify-content:space-between;background:var(--mecx-color-gray-50)}:host .header.no-quick-action{border-top-left-radius:16px}:host .header .inputs{max-width:400px;display:flex;gap:16px}:host .header monkey-error{margin-top:2px}:host .body{padding:16px 24px}:host .body .calendars{display:inline-flex;width:100%;gap:48px}:host .actions{border-top:1px solid var(--mecx-color-gray-200);padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyErrorDirective, selector: "monkey-error" }, { kind: "directive", type: MonkeyLabelDirective, selector: "monkey-label" }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "id"] }, { kind: "component", type: MonkeyDateRangeMonthComponent, selector: "monkey-date-range-month", inputs: ["month", "year", "startDate", "endDate", "hidePrevious", "hideNext", "minDate", "maxDate", "id"], outputs: ["onNavigate", "onDate"] }, { kind: "component", type: MonkeyDateRangeQuickActionsComponent, selector: "monkey-date-range-quick-actions", inputs: ["id"], outputs: ["onChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyDateRangeComponent, isStandalone: true, selector: "monkey-date-range", inputs: { startDate: "startDate", endDate: "endDate", hideQuickAction: ["hideQuickAction", "hideQuickAction", booleanAttribute], hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], hideSecondCalendar: ["hideSecondCalendar", "hideSecondCalendar", booleanAttribute], allowFastActionOnHeader: ["allowFastActionOnHeader", "allowFastActionOnHeader", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onCancel: "onCancel", onDate: "onDate" }, host: { attributes: { "data-testid": "monkey-date-range" }, listeners: { "window:resize": "onResize($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  <div class=\"container-date-range-group\">\n    @if (!hideQuickAction) {\n      <div class=\"quick-actions\">\n        <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n        </monkey-date-range-quick-actions>\n      </div>\n    }\n\n    <div class=\"container-date-range\">\n      @if (!hideHeader) {\n        <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\n          @if (allowFastActionOnHeader) {\n            <div class=\"quick-actions\">\n              <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n              </monkey-date-range-quick-actions>\n            </div>\n          } @else {\n            <div class=\"inputs\">\n              <monkey-form-field hideAction enableClear size=\"sm\">\n                <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\n                <input\n                  type=\"date\"\n                  monkey-input\n                  id=\"startDate\"\n                  [(ngModel)]=\"handledStartDate\"\n                  (ngModelChange)=\"onDataChange($event, true)\"\n                  [min]=\"handledMinDate\"\n                  [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\n                  (change)=\"onChangeInputStartDate($event)\"\n                />\n              </monkey-form-field>\n              <monkey-form-field hideAction enableClear size=\"sm\">\n                <monkey-label>{{ i18n?.['END-DATE'] }}</monkey-label>\n                <input\n                  type=\"date\"\n                  monkey-input\n                  id=\"endDate\"\n                  [(ngModel)]=\"handledEndDate\"\n                  (ngModelChange)=\"onDataChange($event, false)\"\n                  [min]=\"handledStartDate ? handledStartDate : ''\"\n                  [max]=\"handledMaxDate\"\n                  (change)=\"onChangeInputEndDate($event)\"\n                />\n              </monkey-form-field>\n            </div>\n            @if (isInvalidInterval) {\n              <monkey-error>{{ i18n?.['INVALID'] }}</monkey-error>\n            }\n          }\n        </div>\n      }\n\n      <div class=\"body\">\n        <div class=\"calendars\">\n          <monkey-date-range-month\n            [month]=\"firstCalendar.month\"\n            [year]=\"firstCalendar.year\"\n            [startDate]=\"handledStartDate\"\n            [endDate]=\"handledEndDate\"\n            (onDate)=\"onHandleDate($event)\"\n            (onNavigate)=\"onHandleNavigate($event)\"\n            [hideNext]=\"!hideSecondCalendar\"\n            [minDate]=\"handledMinDate\"\n            [maxDate]=\"handledMaxDate\"\n          >\n          </monkey-date-range-month>\n\n          @if (!hideSecondCalendar) {\n            <monkey-date-range-month\n              [month]=\"secondCalendar.month\"\n              [year]=\"secondCalendar.year\"\n              [startDate]=\"handledStartDate\"\n              [endDate]=\"handledEndDate\"\n              (onDate)=\"onHandleDate($event)\"\n              (onNavigate)=\"onHandleNavigate($event)\"\n              hidePrevious\n              [minDate]=\"handledMinDate\"\n              [maxDate]=\"handledMaxDate\"\n            >\n            </monkey-date-range-month>\n          }\n        </div>\n      </div>\n\n      @if (!hideActions) {\n        <div class=\"actions\">\n          <monkey-button size=\"md\" type=\"secondary\" (click)=\"onCancel.next(null)\">\n            {{ i18n?.ACTIONS?.CANCEL }}\n          </monkey-button>\n          <monkey-button\n            size=\"md\"\n            (click)=\"onSubmit()\"\n            [disabled]=\"!this.handledStartDate || !this.handledEndDate\"\n          >\n            {{ i18n?.ACTIONS?.APPLY }}\n          </monkey-button>\n        </div>\n      }\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;border:2px solid var(--mecx-color-gray-200);border-radius:16px}:host .container-date-range-group{width:100%;display:inline-flex}:host .container-date-range-group .quick-actions{width:100%;max-width:172px;border-top-left-radius:16px;border-bottom-left-radius:16px;border-right:2px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}:host .container-date-range-group .container-date-range{width:100%;display:inline-flex;flex-direction:column}:host .header{padding:16px 24px;border-radius:1px 16px 1px 1px;border-bottom:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50)}:host .header .quick-actions{max-width:unset;border:unset}:host .header .quick-actions monkey-date-range-quick-actions{flex-flow:row wrap;padding:unset;justify-content:space-between;background:var(--mecx-color-gray-50)}:host .header.no-quick-action{border-top-left-radius:16px}:host .header .inputs{max-width:400px;display:flex;gap:16px}:host .header monkey-error{margin-top:2px}:host .body{padding:16px 24px}:host .body .calendars{display:inline-flex;width:100%;gap:48px}:host .actions{border-top:1px solid var(--mecx-color-gray-200);padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyErrorDirective, selector: "monkey-error" }, { kind: "directive", type: MonkeyLabelDirective, selector: "monkey-label" }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "id"] }, { kind: "component", type: MonkeyDateRangeMonthComponent, selector: "monkey-date-range-month", inputs: ["month", "year", "startDate", "endDate", "hidePrevious", "hideNext", "minDate", "maxDate", "id"], outputs: ["onNavigate", "onDate"] }, { kind: "component", type: MonkeyDateRangeQuickActionsComponent, selector: "monkey-date-range-quick-actions", inputs: ["id"], outputs: ["onChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyDateRangeComponent, decorators: [{
             type: Component,
@@ -3172,7 +3179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         'data-testid': 'monkey-date-range',
                         '[attr.id]': 'id',
                         '[id]': 'id'
-                    }, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  <div class=\"container-group\">\n    @if (!hideQuickAction) {\n      <div class=\"quick-actions\">\n        <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n        </monkey-date-range-quick-actions>\n      </div>\n    }\n\n    <div class=\"container\">\n      @if (!hideHeader) {\n        <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\n          @if (allowFastActionOnHeader) {\n            <div class=\"quick-actions\">\n              <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n              </monkey-date-range-quick-actions>\n            </div>\n          } @else {\n            <div class=\"inputs\">\n              <monkey-form-field hideAction enableClear size=\"sm\">\n                <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\n                <input\n                  type=\"date\"\n                  monkey-input\n                  id=\"startDate\"\n                  [(ngModel)]=\"handledStartDate\"\n                  (ngModelChange)=\"onDataChange($event, true)\"\n                  [min]=\"handledMinDate\"\n                  [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\n                  (change)=\"onChangeInputStartDate($event)\"\n                />\n              </monkey-form-field>\n              <monkey-form-field hideAction enableClear size=\"sm\">\n                <monkey-label>{{ i18n?.['END-DATE'] }}</monkey-label>\n                <input\n                  type=\"date\"\n                  monkey-input\n                  id=\"endDate\"\n                  [(ngModel)]=\"handledEndDate\"\n                  (ngModelChange)=\"onDataChange($event, false)\"\n                  [min]=\"handledStartDate ? handledStartDate : ''\"\n                  [max]=\"handledMaxDate\"\n                  (change)=\"onChangeInputEndDate($event)\"\n                />\n              </monkey-form-field>\n            </div>\n            @if (isInvalidInterval) {\n              <monkey-error>{{ i18n?.['INVALID'] }}</monkey-error>\n            }\n          }\n        </div>\n      }\n\n      <div class=\"body\">\n        <div class=\"calendars\">\n          <monkey-date-range-month\n            [month]=\"firstCalendar.month\"\n            [year]=\"firstCalendar.year\"\n            [startDate]=\"handledStartDate\"\n            [endDate]=\"handledEndDate\"\n            (onDate)=\"onHandleDate($event)\"\n            (onNavigate)=\"onHandleNavigate($event)\"\n            [hideNext]=\"!hideSecondCalendar\"\n            [minDate]=\"handledMinDate\"\n            [maxDate]=\"handledMaxDate\"\n          >\n          </monkey-date-range-month>\n\n          @if (!hideSecondCalendar) {\n            <monkey-date-range-month\n              [month]=\"secondCalendar.month\"\n              [year]=\"secondCalendar.year\"\n              [startDate]=\"handledStartDate\"\n              [endDate]=\"handledEndDate\"\n              (onDate)=\"onHandleDate($event)\"\n              (onNavigate)=\"onHandleNavigate($event)\"\n              hidePrevious\n              [minDate]=\"handledMinDate\"\n              [maxDate]=\"handledMaxDate\"\n            >\n            </monkey-date-range-month>\n          }\n        </div>\n      </div>\n\n      @if (!hideActions) {\n        <div class=\"actions\">\n          <monkey-button size=\"md\" type=\"secondary\" (click)=\"onCancel.next(null)\">\n            {{ i18n?.ACTIONS?.CANCEL }}\n          </monkey-button>\n          <monkey-button\n            size=\"md\"\n            (click)=\"onSubmit()\"\n            [disabled]=\"!this.handledStartDate || !this.handledEndDate\"\n          >\n            {{ i18n?.ACTIONS?.APPLY }}\n          </monkey-button>\n        </div>\n      }\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;border:2px solid var(--mecx-color-gray-200);border-radius:16px}:host .container-group{width:100%;display:inline-flex}:host .container-group .quick-actions{width:100%;max-width:172px;border-top-left-radius:16px;border-bottom-left-radius:16px;border-right:2px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}:host .container-group .container{width:100%;display:inline-flex;flex-direction:column}:host .header{padding:16px 24px;border-radius:1px 16px 1px 1px;border-bottom:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50)}:host .header .quick-actions{max-width:unset;border:unset}:host .header .quick-actions monkey-date-range-quick-actions{flex-flow:row wrap;padding:unset;justify-content:space-between;background:var(--mecx-color-gray-50)}:host .header.no-quick-action{border-top-left-radius:16px}:host .header .inputs{max-width:400px;display:flex;gap:16px}:host .header monkey-error{margin-top:2px}:host .body{padding:16px 24px}:host .body .calendars{display:inline-flex;width:100%;gap:48px}:host .actions{border-top:1px solid var(--mecx-color-gray-200);padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;gap:16px}\n"] }]
+                    }, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  <div class=\"container-date-range-group\">\n    @if (!hideQuickAction) {\n      <div class=\"quick-actions\">\n        <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n        </monkey-date-range-quick-actions>\n      </div>\n    }\n\n    <div class=\"container-date-range\">\n      @if (!hideHeader) {\n        <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\n          @if (allowFastActionOnHeader) {\n            <div class=\"quick-actions\">\n              <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n              </monkey-date-range-quick-actions>\n            </div>\n          } @else {\n            <div class=\"inputs\">\n              <monkey-form-field hideAction enableClear size=\"sm\">\n                <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\n                <input\n                  type=\"date\"\n                  monkey-input\n                  id=\"startDate\"\n                  [(ngModel)]=\"handledStartDate\"\n                  (ngModelChange)=\"onDataChange($event, true)\"\n                  [min]=\"handledMinDate\"\n                  [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\n                  (change)=\"onChangeInputStartDate($event)\"\n                />\n              </monkey-form-field>\n              <monkey-form-field hideAction enableClear size=\"sm\">\n                <monkey-label>{{ i18n?.['END-DATE'] }}</monkey-label>\n                <input\n                  type=\"date\"\n                  monkey-input\n                  id=\"endDate\"\n                  [(ngModel)]=\"handledEndDate\"\n                  (ngModelChange)=\"onDataChange($event, false)\"\n                  [min]=\"handledStartDate ? handledStartDate : ''\"\n                  [max]=\"handledMaxDate\"\n                  (change)=\"onChangeInputEndDate($event)\"\n                />\n              </monkey-form-field>\n            </div>\n            @if (isInvalidInterval) {\n              <monkey-error>{{ i18n?.['INVALID'] }}</monkey-error>\n            }\n          }\n        </div>\n      }\n\n      <div class=\"body\">\n        <div class=\"calendars\">\n          <monkey-date-range-month\n            [month]=\"firstCalendar.month\"\n            [year]=\"firstCalendar.year\"\n            [startDate]=\"handledStartDate\"\n            [endDate]=\"handledEndDate\"\n            (onDate)=\"onHandleDate($event)\"\n            (onNavigate)=\"onHandleNavigate($event)\"\n            [hideNext]=\"!hideSecondCalendar\"\n            [minDate]=\"handledMinDate\"\n            [maxDate]=\"handledMaxDate\"\n          >\n          </monkey-date-range-month>\n\n          @if (!hideSecondCalendar) {\n            <monkey-date-range-month\n              [month]=\"secondCalendar.month\"\n              [year]=\"secondCalendar.year\"\n              [startDate]=\"handledStartDate\"\n              [endDate]=\"handledEndDate\"\n              (onDate)=\"onHandleDate($event)\"\n              (onNavigate)=\"onHandleNavigate($event)\"\n              hidePrevious\n              [minDate]=\"handledMinDate\"\n              [maxDate]=\"handledMaxDate\"\n            >\n            </monkey-date-range-month>\n          }\n        </div>\n      </div>\n\n      @if (!hideActions) {\n        <div class=\"actions\">\n          <monkey-button size=\"md\" type=\"secondary\" (click)=\"onCancel.next(null)\">\n            {{ i18n?.ACTIONS?.CANCEL }}\n          </monkey-button>\n          <monkey-button\n            size=\"md\"\n            (click)=\"onSubmit()\"\n            [disabled]=\"!this.handledStartDate || !this.handledEndDate\"\n          >\n            {{ i18n?.ACTIONS?.APPLY }}\n          </monkey-button>\n        </div>\n      }\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;border:2px solid var(--mecx-color-gray-200);border-radius:16px}:host .container-date-range-group{width:100%;display:inline-flex}:host .container-date-range-group .quick-actions{width:100%;max-width:172px;border-top-left-radius:16px;border-bottom-left-radius:16px;border-right:2px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}:host .container-date-range-group .container-date-range{width:100%;display:inline-flex;flex-direction:column}:host .header{padding:16px 24px;border-radius:1px 16px 1px 1px;border-bottom:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50)}:host .header .quick-actions{max-width:unset;border:unset}:host .header .quick-actions monkey-date-range-quick-actions{flex-flow:row wrap;padding:unset;justify-content:space-between;background:var(--mecx-color-gray-50)}:host .header.no-quick-action{border-top-left-radius:16px}:host .header .inputs{max-width:400px;display:flex;gap:16px}:host .header monkey-error{margin-top:2px}:host .body{padding:16px 24px}:host .body .calendars{display:inline-flex;width:100%;gap:48px}:host .actions{border-top:1px solid var(--mecx-color-gray-200);padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;gap:16px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { startDate: [{
                 type: Input
             }], endDate: [{
@@ -3489,6 +3496,266 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * MIT Licence
  ************************* */
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyInputDateRangeComponent {
+    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 && value !== undefined) {
+            this._value = value;
+            this.handleValue(value);
+            this._onChange(value);
+            this._onTouched(value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(formField) {
+        this.formField = formField;
+        this.tabIndex = 0;
+        this.minDate = '';
+        this.maxDate = '';
+        this._disabled = false;
+        this._value = null;
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.idGenerator = inject(IdGenerator);
+        this.id = this.idGenerator.getId('monkey-input-date-range-');
+        this.focused = false;
+        this.type = 'input-date-range';
+        this.stateChanges = new Subject();
+        this._elementRef = inject(ElementRef);
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        this.showPopOver = false;
+        this.startDate = '';
+        this.endDate = '';
+        this.handledMinDate = '';
+        this.handledMaxDate = '';
+        this.closePopOver = () => {
+            this.showPopOver = false;
+            this.validateValue();
+        };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    get elementTarget() {
+        if (this.formField?.elementRef) {
+            return this.formField?.elementRef.nativeElement.querySelector('.mecx-form-field-body');
+        }
+        return this._elementRef.nativeElement;
+    }
+    ngAfterContentInit() { }
+    ngOnChanges(changes) { }
+    ngOnDestroy() { }
+    onContainerClick(event) {
+        event.preventDefault();
+        this.onOpenPopover();
+    }
+    _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;
+    }
+    handleValue(value) {
+        try {
+            const { startDate, endDate } = value || {
+                startDate: '',
+                endDate: ''
+            };
+            this.startDate = startDate;
+            this.endDate = endDate;
+        }
+        catch (e) {
+            // not to do
+        }
+    }
+    validateValue() {
+        const { startDate, endDate } = this.value;
+        if (!startDate || !endDate) {
+            this.ngControl?.control?.setErrors({
+                dateRange: true
+            });
+        }
+    }
+    writeValue(value) {
+        if (this._value !== value && value !== undefined) {
+            this._value = value;
+            this.handleValue(value);
+            this._onChange(value);
+            this._onTouched(value);
+        }
+    }
+    onOpenPopover() {
+        if (!this.disabled) {
+            this.showPopOver = true;
+        }
+    }
+    onHandleDate(event) {
+        try {
+            this.value = null;
+            const { startDate, endDate } = event;
+            this.value = event;
+            if (startDate && endDate) {
+                this.closePopOver();
+            }
+        }
+        catch (e) {
+            // not to do
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyInputDateRangeComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", type: MonkeyInputDateRangeComponent, isStandalone: true, selector: "monkey-input-date-range", inputs: { placeholder: "placeholder", title: "title", tabIndex: "tabIndex", minDate: "minDate", maxDate: "maxDate", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-input-date-range'", "class.mecx-input-date-range-disabled": "_disabled", "class.mecx-input-date-range-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-input-date-range" }, providers: [
+            // eslint-disable-next-line no-use-before-define
+            { provide: MonkeyFormFieldControl, useExisting: MonkeyInputDateRangeComponent }
+        ], usesOnChanges: true, ngImport: i0, template: `
+    <span #popoverTarget (click)="onOpenPopover()">
+      <ng-container *ngIf="startDate; else noDate">
+        {{ startDate | date }} - {{ endDate | date }}
+      </ng-container>
+      <ng-template #noDate>
+        {{ placeholder }}
+      </ng-template>
+    </span>
+
+    <ng-template
+      [monkeyPopover]="showPopOver"
+      [monkeyPopoverTarget]="elementTarget"
+      [monkeyPopoverClosed]="closePopOver"
+      monkeyPopoverDir="ltr"
+      [monkeyPopoverTitle]="title"
+    >
+      <monkey-date-range
+        hideHeader
+        hideActions
+        [startDate]="startDate"
+        [endDate]="endDate"
+        (onDate)="onHandleDate($event)"
+        [minDate]="minDate"
+        [maxDate]="maxDate"
+      >
+      </monkey-date-range>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host.mecx-input-date-range-disabled{pointer-events:none;color:var(--mecx-color-gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyInputDateRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-input-date-range', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MonkeyFormFieldModule,
+                        MonkeyDirectivesModule,
+                        MonkeyDateRangeComponent
+                    ], template: `
+    <span #popoverTarget (click)="onOpenPopover()">
+      <ng-container *ngIf="startDate; else noDate">
+        {{ startDate | date }} - {{ endDate | date }}
+      </ng-container>
+      <ng-template #noDate>
+        {{ placeholder }}
+      </ng-template>
+    </span>
+
+    <ng-template
+      [monkeyPopover]="showPopOver"
+      [monkeyPopoverTarget]="elementTarget"
+      [monkeyPopoverClosed]="closePopOver"
+      monkeyPopoverDir="ltr"
+      [monkeyPopoverTitle]="title"
+    >
+      <monkey-date-range
+        hideHeader
+        hideActions
+        [startDate]="startDate"
+        [endDate]="endDate"
+        (onDate)="onHandleDate($event)"
+        [minDate]="minDate"
+        [maxDate]="maxDate"
+      >
+      </monkey-date-range>
+    </ng-template>
+  `, providers: [
+                        // eslint-disable-next-line no-use-before-define
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeyInputDateRangeComponent }
+                    ], host: {
+                        '[attr.data-testid]': "'monkey-input-date-range'",
+                        class: 'mecx-input-date-range',
+                        '[class.mecx-input-date-range-disabled]': '_disabled',
+                        '[class.mecx-input-date-range-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-date-range-disabled{pointer-events:none;color:var(--mecx-color-gray-400)}\n"] }]
+        }], ctorParameters: () => [{ type: MonkeyFormFieldComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { placeholder: [{
+                type: Input,
+                args: [{ required: true }]
+            }], title: [{
+                type: Input,
+                args: [{ required: true }]
+            }], tabIndex: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], 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
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -3533,7 +3800,7 @@ class MonkeyOptionComponent {
       </span>
     }
     <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:var(--mecx-color-white);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)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox .mecx-option-checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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:var(--mecx-color-white);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)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
             type: Component,
@@ -3552,7 +3819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         '[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:var(--mecx-color-white);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)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox .mecx-option-checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"] }]
+                    }, 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:var(--mecx-color-white);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)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"] }]
         }], propDecorators: { _content: [{
                 type: ViewChild,
                 args: ['content', { static: true }]
@@ -3700,6 +3967,7 @@ class MonkeySelectComponent {
         this.focused = false;
         this.formField.control.disableToBeDirty = false;
         this.searchData = '';
+        this.changeDetectorRef.markForCheck();
     }
     closeOverlay() {
         if (this.overlayRef) {
@@ -4097,8 +4365,8 @@ class MonkeyInputPhoneComponent {
         this.idGenerator = inject(IdGenerator);
         this.countryCode = inject(MECX_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.id = this.idGenerator.getId('monkey-input-phone-');
+        this.inputId = this.idGenerator.getId('monkey-input-phone-input-');
         this.focused = false;
         this.type = 'input-phone';
         this.stateChanges = new Subject();
@@ -6793,5 +7061,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MECX_COUNTRY_CODE, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_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 };
+export { MECX_COUNTRY_CODE, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_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, MonkeyInputDateRangeComponent, 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