monkey-style-guide-v2 0.0.120 → 0.0.121

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

@@ -2,17 +2,17 @@ import { trigger, state, transition, style, animate, keyframes } from '@angular/
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, CurrencyPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, Directive, InjectionToken, LOCALE_ID, DestroyRef, signal, computed, effect, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, Optional, Inject, HostListener, NgModule, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, ContentChildren, ContentChild, ViewChild, Injector, forwardRef, ChangeDetectionStrategy, ViewChildren, DOCUMENT } from '@angular/core';
+import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, InjectionToken, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, DestroyRef, Optional, Inject, Directive, LOCALE_ID, signal, computed, effect, HostListener, ContentChildren, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, ContentChild, NgModule, ViewChild, Injector, forwardRef, ChangeDetectionStrategy, ViewChildren, DOCUMENT } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3 from '@angular/forms';
 import { Validators, NgControl, FormsModule, ReactiveFormsModule, FormControlDirective, NgModel, FormControlName, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { of, map, BehaviorSubject, firstValueFrom, filter, merge, Subject, debounceTime, distinctUntilChanged, switchMap, catchError, Subscription } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
+import { filter, of, map, BehaviorSubject, firstValueFrom, merge, Subject, debounceTime, distinctUntilChanged, switchMap, catchError, Subscription } from 'rxjs';
 import * as i1$1 from '@angular/cdk/overlay';
 import { Overlay, OverlayPositionBuilder, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i1$2 from '@angular/router';
 import { Router, NavigationStart, NavigationEnd } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
 import { format, parseISO, addYears, subYears, 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';
@@ -31,10 +31,10 @@ class IdGenerator {
         counters[prefix] = currentCount + 1;
         return `${prefix}${currentCount}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: IdGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: IdGenerator, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IdGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IdGenerator, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: IdGenerator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IdGenerator, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -85,8 +85,8 @@ class UtilIconComponent {
     constructor() {
         this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: UtilIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: UtilIconComponent, isStandalone: true, selector: "util-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UtilIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UtilIconComponent, isStandalone: true, selector: "util-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @switch (name()) {
       @case ('clear') {
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
@@ -342,7 +342,7 @@ class UtilIconComponent {
     }
   `, isInline: true, styles: [":host{display:flex;background-color:transparent}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: UtilIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UtilIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'util-icon', template: `
     @switch (name()) {
@@ -633,8 +633,8 @@ class MonkeyAccordionComponent {
             return;
         this.open = !this.open;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyAccordionComponent, isStandalone: true, selector: "monkey-accordion", inputs: { open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], title: "title", id: "id" }, host: { attributes: { "data-testid": "monkey-accordion" }, properties: { "class.disabled": "disabled", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"header\" (click)=\"onClick()\">\n  <div class=\"title\">\n    @if (titleRef) {\n      <ng-container *ngTemplateOutlet=\"titleRef\" />\n    } @else {\n      {{ titleStr }}\n    }\n  </div>\n  <util-icon class=\"icon\" name=\"arrowDown\" [class.rotated]=\"open\" />\n</div>\n<div class=\"content-wrapper\">\n  @if (open) {\n    <div [@content]>\n      <div class=\"content\">\n        <ng-content />\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;border-radius:16px;border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white);overflow:hidden}:host .header{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:24px;cursor:pointer}:host .header .title{color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px}:host .header .icon{transform:rotate(0);transition:transform .2s ease-in-out}:host .header .icon.rotated{transform:rotate(180deg)}:host.disabled .header{cursor:not-allowed;background:var(--mecx-color-gray-200)}:host .content-wrapper{overflow:hidden}:host .content-wrapper .content{border-top:1px solid var(--mecx-color-gray-200);padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyAccordionComponent, isStandalone: true, selector: "monkey-accordion", inputs: { open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], title: "title", id: "id" }, host: { attributes: { "data-testid": "monkey-accordion" }, properties: { "class.disabled": "disabled", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"header\" (click)=\"onClick()\">\n  <div class=\"title\">\n    @if (titleRef) {\n      <ng-container *ngTemplateOutlet=\"titleRef\" />\n    } @else {\n      {{ titleStr }}\n    }\n  </div>\n  <util-icon class=\"icon\" name=\"arrowDown\" [class.rotated]=\"open\" />\n</div>\n<div class=\"content-wrapper\">\n  @if (open) {\n    <div [@content]>\n      <div class=\"content\">\n        <ng-content />\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;border-radius:16px;border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white);overflow:hidden}:host .header{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:24px;cursor:pointer}:host .header .title{color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px}:host .header .icon{transform:rotate(0);transition:transform .2s ease-in-out}:host .header .icon.rotated{transform:rotate(180deg)}:host.disabled .header{cursor:not-allowed;background:var(--mecx-color-gray-200)}:host .content-wrapper{overflow:hidden}:host .content-wrapper .content{border-top:1px solid var(--mecx-color-gray-200);padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
             trigger('content', [
                 state('void', style({
                     height: '0px'
@@ -652,7 +652,7 @@ class MonkeyAccordionComponent {
             ])
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-accordion', imports: [CommonModule, UtilIconComponent], host: {
                         'data-testid': 'monkey-accordion',
@@ -700,16 +700,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * MIT Licence
  ************************* */
 class MonkeyActionBarComponent {
+    get classes() {
+        return this.position();
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
     constructor() {
         this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
         this.position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : []));
         this.open = input(...(ngDevMode ? [undefined, { debugName: "open" }] : []));
+        this._uid = inject(IdGenerator).getId('monkey-action-bar-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
     }
-    get classes() {
-        return this.position();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyActionBarComponent, isStandalone: true, selector: "monkey-action-bar", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-action-bar" }, properties: { "attr.id": "id", "id": "id", "class.open": "open()", "class": "this.classes" } }, ngImport: i0, template: `@if (open()) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyActionBarComponent, isStandalone: true, selector: "monkey-action-bar", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-action-bar" }, properties: { "attr.id": "id", "id": "id", "class.open": "open()", "class": "this.classes" } }, ngImport: i0, template: `@if (open()) {
     <span style="font-size: 13px" data-testid="label" *ngIf="label() as lb">
       {{ lb }}
     </span>
@@ -717,7 +726,7 @@ class MonkeyActionBarComponent {
     <ng-content></ng-content>
   }`, isInline: true, styles: ["monkey-action-bar{background-color:var(--mecx-color-white);border-radius:12px;position:fixed;bottom:60px;gap:24px;display:none;align-items:center;padding:4px 4px 4px 24px;border:2px solid var(--mecx-color-gray-200);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow),0 8px 8px 0 var(--mecx-color-box-shadow),0 16px 16px 8px var(--mecx-color-box-shadow);z-index:999}monkey-action-bar.center{left:50%;transform:translate(-50%)}monkey-action-bar.right{right:60px}monkey-action-bar.left{left:60px}monkey-action-bar.open{display:flex}@media (851px < width < 1315px){monkey-action-bar{left:60px!important;transform:translate(0)!important}}@media (width < 852px){monkey-action-bar{flex-direction:column;padding:16px}monkey-action-bar>*:before{content:initial!important;padding:16px!important}}@media (width < 450px){monkey-action-bar{flex-direction:column;left:24px!important;right:24px!important;bottom:24px!important;transform:translate(0)!important}monkey-action-bar>*:before{content:initial!important;padding:16px!important}}monkey-action-bar>*:not(:first-child){flex-shrink:0;display:inline-flex}monkey-action-bar>*:not(:first-child):before{content:\"\";display:flex;box-sizing:border-box;width:1px;background-color:var(--mecx-color-gray-200);margin-right:24px}\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: "20.3.14", ngImport: i0, type: MonkeyActionBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyActionBarComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule], selector: 'monkey-action-bar', template: `@if (open()) {
     <span style="font-size: 13px" data-testid="label" *ngIf="label() as lb">
@@ -731,10 +740,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         '[id]': 'id',
                         '[class.open]': 'open()'
                     }, styles: ["monkey-action-bar{background-color:var(--mecx-color-white);border-radius:12px;position:fixed;bottom:60px;gap:24px;display:none;align-items:center;padding:4px 4px 4px 24px;border:2px solid var(--mecx-color-gray-200);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow),0 8px 8px 0 var(--mecx-color-box-shadow),0 16px 16px 8px var(--mecx-color-box-shadow);z-index:999}monkey-action-bar.center{left:50%;transform:translate(-50%)}monkey-action-bar.right{right:60px}monkey-action-bar.left{left:60px}monkey-action-bar.open{display:flex}@media (851px < width < 1315px){monkey-action-bar{left:60px!important;transform:translate(0)!important}}@media (width < 852px){monkey-action-bar{flex-direction:column;padding:16px}monkey-action-bar>*:before{content:initial!important;padding:16px!important}}@media (width < 450px){monkey-action-bar{flex-direction:column;left:24px!important;right:24px!important;bottom:24px!important;transform:translate(0)!important}monkey-action-bar>*:before{content:initial!important;padding:16px!important}}monkey-action-bar>*:not(:first-child){flex-shrink:0;display:inline-flex}monkey-action-bar>*:not(:first-child):before{content:\"\";display:flex;box-sizing:border-box;width:1px;background-color:var(--mecx-color-gray-200);margin-right:24px}\n"] }]
-        }], propDecorators: { classes: [{
+        }], ctorParameters: () => [], propDecorators: { classes: [{
                 type: HostBinding,
                 args: ['class']
-            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }] } });
+            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], id: [{
+                type: Input
+            }] } });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
@@ -771,10 +782,10 @@ class MonkeyIconComponent {
             throw new Error('monkey-icon must have icon input');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyIconComponent, isStandalone: true, selector: "monkey-icon", inputs: { icon: "icon", size: "size", id: "id" }, host: { properties: { "class": "_icon+' '+size", "attr.id": "id", "id": "id" } }, ngImport: i0, template: '', isInline: true, styles: ["monkey-icon{display:inline-flex;align-items:center;justify-content:center}monkey-icon.sm{font-size:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyIconComponent, isStandalone: true, selector: "monkey-icon", inputs: { icon: "icon", size: "size", id: "id" }, host: { properties: { "class": "_icon+' '+size", "attr.id": "id", "id": "id" } }, ngImport: i0, template: '', isInline: true, styles: ["monkey-icon{display:inline-flex;align-items:center;justify-content:center}monkey-icon.sm{font-size:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-icon', imports: [CommonModule], template: '', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': `_icon+' '+size`,
@@ -827,10 +838,10 @@ class MonkeyAlertComponent {
         };
         return typeIcons[type];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyAlertComponent, isStandalone: true, selector: "monkey-alert", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onButtonClicked: "onButtonClicked" }, host: { attributes: { "data-testid": "monkey-alert" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n  @if (type()) {\n    <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n  }\n  <div class=\"monkey-alert__card__content\">\n    <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n    <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n    @if (buttonLabel()) {\n      <div>\n        <a\n          href=\"javascript:void(0)\"\n          class=\"mecx-link fw-medium fs-base\"\n          (click)=\"onButtonClicked.emit()\"\n        >\n          <span>{{ buttonLabel() }}</span>\n        </a>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .mecx-link{letter-spacing:.42px}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:var(--mecx-spaces-xs);padding:var(--mecx-spaces-cozy)}monkey-alert .monkey-alert__card.alert{background-color:var(--mecx-color-warning-100);border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:var(--mecx-color-success-100);border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column}monkey-alert .monkey-alert__card__title{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-semibold);letter-spacing:.14px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.14px;line-height:var(--mecx-lh-24);margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyAlertComponent, isStandalone: true, selector: "monkey-alert", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onButtonClicked: "onButtonClicked" }, host: { attributes: { "data-testid": "monkey-alert" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n  @if (type()) {\n    <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n  }\n  <div class=\"monkey-alert__card__content\">\n    <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n    <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n    @if (buttonLabel()) {\n      <div>\n        <a\n          href=\"javascript:void(0)\"\n          class=\"mecx-link fw-medium fs-base\"\n          (click)=\"onButtonClicked.emit()\"\n        >\n          <span>{{ buttonLabel() }}</span>\n        </a>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .mecx-link{letter-spacing:.42px}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:var(--mecx-spaces-xs);padding:var(--mecx-spaces-cozy)}monkey-alert .monkey-alert__card.alert{background-color:var(--mecx-color-warning-100);border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:var(--mecx-color-success-100);border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column}monkey-alert .monkey-alert__card__title{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-semibold);letter-spacing:.14px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.14px;line-height:var(--mecx-lh-24);margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyAlertComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, imports: [MonkeyIconComponent], selector: 'monkey-alert', host: {
                         'data-testid': 'monkey-alert',
@@ -847,79 +858,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * MIT Licence
  ************************* */
 
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyBadgeDirective {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-        this.badgePosition = 'right';
-        this.badgeSize = 'md';
-        this.badgeHidden = false;
-        this.monkeyBadge = '';
-        this.badgeBackground = null;
-        this.badgeColor = null;
-        this.badgeEl = null;
-        // not to do
-    }
-    ngOnChanges() {
-        const { badgeHidden, badgeEl, renderer, el } = this;
-        if (badgeHidden) {
-            this.removeBadge();
-            return;
-        }
-        if (!badgeEl) {
-            this.badgeEl = renderer.createElement('span');
-            renderer.setStyle(el.nativeElement, 'position', 'relative');
-            renderer.appendChild(el.nativeElement, this.badgeEl);
-        }
-        this.updateBadge();
-    }
-    updateBadge() {
-        const { badgeEl, renderer, monkeyBadge, badgeSize, badgeColor, badgePosition, badgeBackground } = this;
-        renderer.addClass(badgeEl, 'monkey-badge');
-        renderer.addClass(badgeEl, `monkey-badge-${badgeSize}`);
-        renderer.addClass(badgeEl, `monkey-badge-${badgePosition}`);
-        renderer.setAttribute(badgeEl, 'style', `
-                --badge-background: ${badgeBackground ?? 'unset'};
-                --badge-color: ${badgeColor ?? 'unset'}
-            `);
-        this.renderer.setProperty(this.badgeEl, 'textContent', monkeyBadge);
-    }
-    removeBadge() {
-        const { renderer, el, badgeEl } = this;
-        if (!el.nativeElement || !badgeEl)
-            return;
-        renderer.removeChild(el.nativeElement, badgeEl);
-        renderer.removeStyle(el.nativeElement, 'position');
-        this.badgeEl = null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyBadgeDirective, isStandalone: false, selector: "[monkeyBadge]", inputs: { badgePosition: "badgePosition", badgeSize: "badgeSize", badgeHidden: "badgeHidden", monkeyBadge: "monkeyBadge", badgeBackground: "badgeBackground", badgeColor: "badgeColor" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyBadgeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[monkeyBadge]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { badgePosition: [{
-                type: Input
-            }], badgeSize: [{
-                type: Input
-            }], badgeHidden: [{
-                type: Input
-            }], monkeyBadge: [{
-                type: Input
-            }], badgeBackground: [{
-                type: Input
-            }], badgeColor: [{
-                type: Input
-            }] } });
-
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -938,906 +876,913 @@ function injectTokenWithWarning(token, name) {
     return value;
 }
 
-class MonkeyEcxAddressService {
-    constructor() {
-        this._http = inject(HttpClient);
-        this._googleApiKey = injectTokenWithWarning(MECX_GOOGLE_API_KEY, 'MECX_GOOGLE_API_KEY');
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyPopoverContentComponent {
+    constructor(host) {
+        this.host = host;
+        this.onClose = new EventEmitter();
+        this.enableAutofocus = false;
+        // not to do
     }
-    mappingData(places) {
-        const getComponent = (components, type, field = 'longText') => {
-            const result = components.find((c) => {
-                return c.types.includes(type);
+    ngAfterViewInit() {
+        if (this.enableAutofocus) {
+            setTimeout(() => {
+                const focusable = this.host.nativeElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                focusable?.focus();
             });
-            return result?.[field] || '';
-        };
-        return places.map((_) => {
-            const { addressComponents } = _;
-            const address = getComponent(addressComponents, 'route');
-            const addressNumber = getComponent(addressComponents, 'street_number');
-            const neighborhood = getComponent(addressComponents, 'sublocality_level_1');
-            const city = getComponent(addressComponents, 'administrative_area_level_2');
-            const state = getComponent(addressComponents, 'administrative_area_level_1');
-            const country = getComponent(addressComponents, 'country', 'shortText');
-            const zipCode = getComponent(addressComponents, 'postal_code');
-            return {
-                formattedAddress: _.formattedAddress,
-                adrFormatAddress: _.adrFormatAddress,
-                address,
-                addressNumber,
-                neighborhood,
-                city,
-                state,
-                country,
-                zipCode
-            };
-        });
-    }
-    get(textQuery) {
-        if (!textQuery) {
-            return of([]);
         }
-        return this._http
-            .post('https://places.googleapis.com/v1/places:searchText', {
-            textQuery
-        }, {
-            headers: {
-                'X-Goog-Api-Key': this._googleApiKey,
-                'X-Goog-FieldMask': 'places.formattedAddress,places.addressComponents,places.displayName,places.adrFormatAddress'
-            }
-        })
-            .pipe(map((resp) => {
-            return this.mappingData(resp.places);
-        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyEcxAddressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyEcxAddressService, providedIn: 'root' }); }
+    isTemplate(value) {
+        return value instanceof TemplateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyPopoverContentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyPopoverContentComponent, isStandalone: true, selector: "monkey-popover-content", inputs: { title: "title", content: "content", actions: "actions", hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideClose: ["hideClose", "hideClose", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], enableAutofocus: "enableAutofocus" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
+    <div class="mecx-popover-container">
+      @if (!hideHeader) {
+        <div class="mecx-popover-header">
+          @if (title) {
+            <div>
+              <ng-container *ngIf="isTemplate(title); else stringTitle">
+                <ng-container *ngTemplateOutlet="title"></ng-container>
+              </ng-container>
+              <ng-template #stringTitle>
+                {{ title }}
+              </ng-template>
+            </div>
+          }
+
+          @if (!hideClose) {
+            <util-icon class="mecx-popover-close" name="clear" (click)="onClose.next(null)" />
+          }
+        </div>
+      }
+
+      <div class="mecx-popover-content" [class.add-radius]="hideHeader">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </div>
+
+      @if (!hideActions) {
+        <div class="mecx-popover-actions" *ngIf="actions">
+          <ng-container *ngIf="isTemplate(actions); else stringActions">
+            <ng-container *ngTemplateOutlet="actions"></ng-container>
+          </ng-container>
+          <ng-template #stringActions>
+            <span>{{ actions }}</span>
+          </ng-template>
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyEcxAddressService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyPopoverContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'monkey-popover-content',
+                    imports: [CommonModule, NgTemplateOutlet, UtilIconComponent],
+                    template: `
+    <div class="mecx-popover-container">
+      @if (!hideHeader) {
+        <div class="mecx-popover-header">
+          @if (title) {
+            <div>
+              <ng-container *ngIf="isTemplate(title); else stringTitle">
+                <ng-container *ngTemplateOutlet="title"></ng-container>
+              </ng-container>
+              <ng-template #stringTitle>
+                {{ title }}
+              </ng-template>
+            </div>
+          }
 
-/* eslint-disable no-console */
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyDictionaryService {
-    constructor() {
-        this._localeId = inject(LOCALE_ID);
-        this._destroyRef = inject(DestroyRef);
-        this._data$ = new BehaviorSubject({
-            'pt-BR': {
-                EDIT: 'Editar',
-                'NO-RESULTS': 'Nenhum resultado encontrado',
-                'NO-DATA': 'Sem dados',
-                'NO-DATA-ADDRESS': 'Nenhum endereço encontrado com esta pesquisa',
-                'NOT-PROVIDED': 'Não informado',
-                LOADING: 'Carregando...',
-                'DATE-RANGE': {
-                    'START-DATE': 'Data de início',
-                    'END-DATE': 'Data de término',
-                    INVALID: 'Intervalo de datas inválido',
-                    ACTIONS: {
-                        CANCEL: 'Cancelar',
-                        APPLY: 'Aplicar'
-                    },
-                    'WEEK-DAYS': ['Dom.', '2ª', '3ª', '4ª', '5ª', '6ª', 'Sab.'],
-                    MONTHS: {
-                        0: 'Janeiro',
-                        1: 'Fevereiro',
-                        2: 'Março',
-                        3: 'Abril',
-                        4: 'Maio',
-                        5: 'Junho',
-                        6: 'Julho',
-                        7: 'Agosto',
-                        8: 'Setembro',
-                        9: 'Outubro',
-                        10: 'Novembro',
-                        11: 'Dezembro'
-                    },
-                    'QUICK-ACTIONS': {
-                        CUSTOM: 'Customizado',
-                        LAST_30_DAYS: 'Ultimos 30 dias',
-                        LAST_60_DAYS: 'Ultimos 60 dias',
-                        LAST_90_DAYS: 'Ultimos 90 dias',
-                        LAST_6_MONTHS: 'Ultimos 6 meses',
-                        LAST_12_MONTHS: 'Ultimos 12 meses',
-                        NEXT_30_DAYS: 'Próximos 30 dias',
-                        NEXT_60_DAYS: 'Próximos 60 dias',
-                        NEXT_90_DAYS: 'Próximos 90 dias',
-                        NEXT_6_MONTHS: 'Próximos 6 meses',
-                        NEXT_12_MONTHS: 'Próximos 12 meses'
-                    }
-                }
-            },
-            'es-CL': {
-                EDIT: 'Editar',
-                'NO-RESULTS': 'No se encontraron resultados',
-                'NO-DATA': 'Sin datos',
-                'NO-DATA-ADDRESS': 'No se encontraron direcciones con esta búsqueda',
-                'NOT-PROVIDED': 'No informado',
-                LOADING: 'Cargando...',
-                'DATE-RANGE': {
-                    'START-DATE': 'Fecha de inicio',
-                    'END-DATE': 'Fecha de termino',
-                    INVALID: 'Rango de fechas no válido',
-                    ACTIONS: {
-                        CANCEL: 'Cancelar',
-                        APPLY: 'Aplicar'
-                    },
-                    'WEEK-DAYS': ['Dom.', 'Lun.', 'Mar.', 'Mié.', 'Jue.', 'Vie.', 'Sab.'],
-                    MONTHS: {
-                        0: 'Enero',
-                        1: 'Febrero',
-                        2: 'Marzo',
-                        3: 'Abril',
-                        4: 'Mayo',
-                        5: 'Junio',
-                        6: 'Julio',
-                        7: 'Agosto',
-                        8: 'Septiembre',
-                        9: 'Octubre',
-                        10: 'Noviembre',
-                        11: 'Diciembre'
-                    },
-                    'QUICK-ACTIONS': {
-                        CUSTOM: 'Personalizado',
-                        LAST_30_DAYS: 'Últimos 30 días',
-                        LAST_60_DAYS: 'Últimos 60 días',
-                        LAST_90_DAYS: 'Últimos 90 días',
-                        LAST_6_MONTHS: 'Últimos 6 meses',
-                        LAST_12_MONTHS: 'Últimos 12 meses',
-                        NEXT_30_DAYS: 'Próximos 30 días',
-                        NEXT_60_DAYS: 'Próximos 60 días',
-                        NEXT_90_DAYS: 'Próximos 90 días',
-                        NEXT_6_MONTHS: 'Próximos 6 meses',
-                        NEXT_12_MONTHS: 'Próximos 12 meses'
-                    }
-                }
-            },
-            'es-MX': {
-                EDIT: 'Editar',
-                'NO-RESULTS': 'No se encontraron resultados',
-                'NO-DATA': 'Sin datos',
-                'NO-DATA-ADDRESS': 'No se encontraron direcciones con esta búsqueda',
-                'NOT-PROVIDED': 'No informado',
-                LOADING: 'Cargando...',
-                'DATE-RANGE': {
-                    'START-DATE': 'Fecha de inicio',
-                    'END-DATE': 'Fecha de termino',
-                    INVALID: 'Rango de fechas no válido',
-                    ACTIONS: {
-                        CANCEL: 'Cancelar',
-                        APPLY: 'Aplicar'
-                    },
-                    'WEEK-DAYS': ['Dom.', 'Lun.', 'Mar.', 'Mié.', 'Jue.', 'Vie.', 'Sab.'],
-                    MONTHS: {
-                        0: 'Enero',
-                        1: 'Febrero',
-                        2: 'Marzo',
-                        3: 'Abril',
-                        4: 'Mayo',
-                        5: 'Junio',
-                        6: 'Julio',
-                        7: 'Agosto',
-                        8: 'Septiembre',
-                        9: 'Octubre',
-                        10: 'Noviembre',
-                        11: 'Diciembre'
-                    },
-                    'QUICK-ACTIONS': {
-                        CUSTOM: 'Personalizado',
-                        LAST_30_DAYS: 'Últimos 30 días',
-                        LAST_60_DAYS: 'Últimos 60 días',
-                        LAST_90_DAYS: 'Últimos 90 días',
-                        LAST_6_MONTHS: 'Últimos 6 meses',
-                        LAST_12_MONTHS: 'Últimos 12 meses',
-                        NEXT_30_DAYS: 'Próximos 30 días',
-                        NEXT_60_DAYS: 'Próximos 60 días',
-                        NEXT_90_DAYS: 'Próximos 90 días',
-                        NEXT_6_MONTHS: 'Próximos 6 meses',
-                        NEXT_12_MONTHS: 'Próximos 12 meses'
-                    }
-                }
-            },
-            'en-US': {
-                EDIT: 'Edit',
-                'NO-RESULTS': 'No results found',
-                'NO-DATA': 'No data',
-                'NO-DATA-ADDRESS': 'No address found with this search',
-                'NOT-PROVIDED': 'Not provided',
-                LOADING: 'Loading...',
-                'DATE-RANGE': {
-                    'START-DATE': 'Start date',
-                    'END-DATE': 'End Date',
-                    INVALID: 'Invalid date range',
-                    ACTIONS: {
-                        CANCEL: 'Cancel',
-                        APPLY: 'Apply'
-                    },
-                    'WEEK-DAYS': ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
-                    MONTHS: {
-                        0: 'January',
-                        1: 'February',
-                        2: 'March',
-                        3: 'April',
-                        4: 'May',
-                        5: 'June',
-                        6: 'July',
-                        7: 'August',
-                        8: 'September',
-                        9: 'October',
-                        10: 'November',
-                        11: 'December'
-                    },
-                    'QUICK-ACTIONS': {
-                        CUSTOM: 'Custom',
-                        LAST_30_DAYS: 'Last 30 days',
-                        LAST_60_DAYS: 'Last 60 days',
-                        LAST_90_DAYS: 'Last 90 days',
-                        LAST_6_MONTHS: 'Last 6 months',
-                        LAST_12_MONTHS: 'Last 12 months',
-                        NEXT_30_DAYS: 'Next 30 days',
-                        NEXT_60_DAYS: 'Next 60 days',
-                        NEXT_90_DAYS: 'Next 90 days',
-                        NEXT_6_MONTHS: 'Next 6 months',
-                        NEXT_12_MONTHS: 'Next 12 months'
-                    }
-                }
-            }
-        });
-        const tokenSubject = inject(MECX_I18N_WRAPPER, { optional: true });
-        tokenSubject?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((value) => {
-            this.handleWrapperValues(value);
-        });
-    }
-    handleWrapperValues(value) {
-        try {
-            const locale = this._localeId || 'pt-BR';
-            const wrappedData = JSON.parse(value);
-            const currentData = this._data$.value;
-            const updated = {
-                ...currentData,
-                [locale]: {
-                    ...currentData[locale],
-                    ...wrappedData
-                }
-            };
-            this._data$.next(updated);
+          @if (!hideClose) {
+            <util-icon class="mecx-popover-close" name="clear" (click)="onClose.next(null)" />
+          }
+        </div>
+      }
+
+      <div class="mecx-popover-content" [class.add-radius]="hideHeader">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </div>
+
+      @if (!hideActions) {
+        <div class="mecx-popover-actions" *ngIf="actions">
+          <ng-container *ngIf="isTemplate(actions); else stringActions">
+            <ng-container *ngTemplateOutlet="actions"></ng-container>
+          </ng-container>
+          <ng-template #stringActions>
+            <span>{{ actions }}</span>
+          </ng-template>
+        </div>
+      }
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], hideHeader: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideClose: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideActions: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], enableAutofocus: [{
+                type: Input
+            }] } });
+class MonkeyPopoverDirective {
+    set popover(show) {
+        if (this._show === show) {
+            return;
         }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.error(`MonkeyDictionaryService - handleWrapperValues -> ${e}`);
+        this._show = show;
+        if (show) {
+            setTimeout(() => {
+                this.createPopover();
+            }, 0);
+        }
+        else {
+            this.disposePopover();
         }
     }
-    get(key) {
-        const locale = this._localeId || 'pt-BR';
-        return this._data$.pipe(map((data) => {
-            return data[locale]?.[key] ?? null;
-        }));
+    get popover() {
+        return this._show;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDictionaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDictionaryService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDictionaryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyStepperService {
-    constructor() {
-        this._steppers = signal(new Map(), ...(ngDevMode ? [{ debugName: "_steppers" }] : []));
+    set target(value) {
+        this._target = value;
     }
-    currentStep(id) {
-        return computed(() => {
-            return this._steppers().get(id);
-        });
+    get target() {
+        return this._target;
     }
-    setCurrentStep(id, step) {
-        this._steppers.update((items) => {
-            return new Map(items).set(id, step);
-        });
+    constructor() {
+        this._tpl = inject(TemplateRef);
+        this._vcr = inject(ViewContainerRef);
+        this._el = inject(ElementRef);
+        this._zone = inject(NgZone);
+        this._overlay = inject(Overlay);
+        this._overlayPositionBuilder = inject(OverlayPositionBuilder);
+        this._router = inject(Router);
+        this._destroyRef = inject(DestroyRef);
+        this._show = false;
+        this.minwidth = false;
+        this.backdrop = true;
+        this.watch = false;
+        this.dir = 'ltr';
+        this.contextmenu = false;
+        this._router.events
+            .pipe(filter((event) => {
+            return event instanceof NavigationStart;
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this.closePopover();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class MonkeyToastRef {
-    constructor(componentRef) {
-        this.componentRef = componentRef;
-        // not to do
+    ngOnDestroy() {
+        this.disposePopover();
+        this._resizeObserver?.disconnect();
     }
-    close() {
-        this.componentRef.instance.close();
+    closePopover(event) {
+        if (this._show) {
+            this._show = false;
+            this.disposePopover();
+            this._zone.run(() => {
+                this.closed?.(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 MonkeyToastService {
-    constructor() {
-        this.overlay = inject(Overlay);
+    disposePopover() {
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = undefined;
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = undefined;
+        }
     }
-    getPositionStrategy(position) {
-        const globalPosition = this.overlay.position().global();
-        switch (position) {
-            case 'top-left':
-                return globalPosition.top('40px').start('40px');
-            case 'top-center':
-                return globalPosition.top('40px').centerHorizontally();
-            case 'top-right':
-                return globalPosition.top('40px').end('40px');
-            case 'bottom-left':
-                return globalPosition.bottom('40px').start('40px');
-            case 'bottom-center':
-                return globalPosition.bottom('40px').centerHorizontally();
+    getPositions(dir) {
+        const oppositeVertical = {
+            top: 'bottom',
+            bottom: 'top',
+            center: 'center'
+        };
+        const oppositeHorizontal = {
+            start: 'end',
+            end: 'start',
+            center: 'center'
+        };
+        const centerY = (pos) => {
+            return {
+                originX: 'center',
+                originY: pos,
+                overlayX: 'center',
+                overlayY: oppositeVertical[pos]
+            };
+        };
+        const centerX = (pos) => {
+            return {
+                originX: oppositeHorizontal[pos],
+                originY: 'center',
+                overlayX: pos,
+                overlayY: 'center'
+            };
+        };
+        const ltr = (axis) => {
+            return {
+                originX: 'start',
+                originY: axis,
+                overlayX: 'start',
+                overlayY: oppositeVertical[axis]
+            };
+        };
+        const rtl = (axis) => {
+            return {
+                originX: 'end',
+                originY: axis,
+                overlayX: 'end',
+                overlayY: oppositeVertical[axis]
+            };
+        };
+        const side = (axisX, axisY) => {
+            return {
+                originX: axisX,
+                originY: axisY,
+                overlayX: oppositeHorizontal[axisX],
+                overlayY: axisY
+            };
+        };
+        const cmp = dir ?? this._options?.dir ?? this.dir;
+        switch (cmp) {
+            case 'ct':
+                return [centerY('top'), centerY('bottom'), centerX('start'), centerX('end')];
+            case 'cr':
+                return [centerX('end'), centerX('start'), centerY('top'), centerY('bottom')];
+            case 'cc':
+                return [centerX('center')];
+            case 'ltr':
+                return [ltr('bottom'), ltr('top')];
+            case 'rtl':
+                return [rtl('bottom'), rtl('top')];
+            case 'tltr':
+                return [ltr('top'), ltr('bottom')];
+            case 'trtl':
+                return [rtl('top'), rtl('bottom')];
+            case 'rt':
+                return [side('end', 'top'), side('end', 'bottom'), ltr('top')];
+            case 'rb':
+                return [side('end', 'bottom'), side('end', 'top'), ltr('bottom'), rtl('bottom')];
+            case 'lt':
+                return [side('start', 'top'), side('start', 'bottom'), rtl('top')];
+            case 'lb':
+                return [side('start', 'bottom'), side('start', 'top'), rtl('bottom')];
             default:
-                return globalPosition.bottom('40px').end('40px');
+                return [];
         }
     }
-    show(toastConfig) {
-        if (this.lastToast) {
-            this.lastToast.close();
+    createPopover(origin, options) {
+        if (!this.target) {
+            // eslint-disable-next-line no-console
+            console.error('MonkeyPopoverDirective -> target element is not defined.');
+            return;
         }
-        const overlayRef = this.overlay.create({
-            hasBackdrop: false,
-            positionStrategy: this.getPositionStrategy(toastConfig.position)
-        });
-        const portal = new ComponentPortal(MonkeyToastComponent);
-        const componentRef = overlayRef.attach(portal);
-        this.lastToast = new MonkeyToastRef(componentRef);
-        componentRef.instance.id = getRandomString(6);
-        componentRef.instance.type = toastConfig.type ?? 'default';
-        componentRef.instance.icon = toastConfig.icon;
-        componentRef.instance.isClosable = toastConfig.isClosable ?? false;
-        componentRef.instance.message = toastConfig.message;
-        componentRef.instance.actionLabel = toastConfig.actionLabel;
-        componentRef.instance.actionIcon = toastConfig.actionIcon;
-        componentRef.instance.onActionClick.subscribe(() => {
-            if (toastConfig.action) {
-                toastConfig.action();
-                if (toastConfig.closeOnAction ?? true) {
-                    componentRef.instance.close();
-                }
-            }
+        const originEl = this.target instanceof HTMLElement ? this.target : this.target.element;
+        this._positionStrategy = this._overlayPositionBuilder
+            .flexibleConnectedTo(origin ?? originEl)
+            .withPush(true)
+            .withGrowAfterOpen(true)
+            .withPositions(this.getPositions(options?.dir));
+        this._overlayRef = this._overlay.create({
+            positionStrategy: this._positionStrategy,
+            disposeOnNavigation: true,
+            direction: 'ltr',
+            hasBackdrop: this.backdrop,
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            width: this._options?.minwidth || this.minwidth ? this.target.offsetWidth - 2 : undefined,
+            maxHeight: '95%',
+            height: this.height
         });
-        componentRef.instance.onClose.subscribe(() => {
-            overlayRef.detach();
+        this._overlayRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((event) => {
+            this.closePopover(event);
         });
-        if (!toastConfig.keepOpen) {
-            setTimeout(() => {
-                componentRef.instance.close();
-            }, toastConfig.duration ?? 4000);
+        const portal = new ComponentPortal(MonkeyPopoverContentComponent, this._vcr);
+        this._componentRef = this._overlayRef.attach(portal);
+        this._componentRef.instance.content = this._tpl;
+        this._componentRef.instance.title = this.title;
+        this._componentRef.instance.actions = this.actions;
+        this._componentRef.instance.hideClose = this.hideClose;
+        this._componentRef.instance.hideHeader = this.hideHeader;
+        this._componentRef.instance.hideActions = this.hideActions;
+        this._componentRef.instance.enableAutofocus = this.enableAutofocus;
+        if (!this.hideClose || !this.hideHeader) {
+            this._componentRef.instance.onClose
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(() => {
+                this.closePopover();
+            });
+        }
+        if (this.watch && 'ResizeObserver' in window) {
+            this._resizeObserver = new ResizeObserver(() => {
+                this._overlayRef?.updatePosition();
+            });
+            this._resizeObserver.observe(this._componentRef.location.nativeElement);
         }
-        return componentRef.instance;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToastService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: MonkeyPopoverDirective, isStandalone: true, selector: "[monkeyPopover]", inputs: { popover: ["monkeyPopover", "popover"], closed: ["monkeyPopoverClosed", "closed"], target: ["monkeyPopoverTarget", "target"], minwidth: ["monkeyPopoverMinwidth", "minwidth"], backdrop: ["monkeyPopoverBackdrop", "backdrop"], watch: ["monkeyPopoverWatch", "watch"], dir: ["monkeyPopoverDir", "dir"], contextmenu: ["monkeyPopoverContextmenu", "contextmenu"], height: ["monkeyPopoverHeight", "height"], title: ["monkeyPopoverTitle", "title"], actions: ["monkeyPopoverActions", "actions"], hideClose: ["monkeyPopoverHideClose", "hideClose", booleanAttribute], hideHeader: ["monkeyPopoverHideHeader", "hideHeader", booleanAttribute], hideActions: ["monkeyPopoverHideActions", "hideActions", booleanAttribute], enableAutofocus: ["monkeyPopoverEnableAutofocus", "enableAutofocus", booleanAttribute] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToastService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyPopoverDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root'
+                    selector: '[monkeyPopover]'
                 }]
-        }] });
-
-/** ************************
- * 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 MonkeyDisplayDirective {
-    constructor(el) {
-        this.el = el;
-        this.fallbackText = 'Not provided';
-        this.i18nDictionary = inject(MonkeyDictionaryService).get('NOT-PROVIDED');
-        this.displayValue = input.required(...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-        this.displayedText = computed(() => {
-            const value = this.displayValue();
-            if (value === null || value === undefined || value === '') {
-                return this.fallbackText;
-            }
-            return String(value);
-        }, ...(ngDevMode ? [{ debugName: "displayedText" }] : []));
-        effect(async () => {
-            this.el.nativeElement.innerHTML = this.displayedText();
-            this.fallbackText = await firstValueFrom(this.i18nDictionary);
+        }], ctorParameters: () => [], propDecorators: { _options: [{
+                type: Optional
+            }, {
+                type: Inject,
+                args: [MECX_POPOVER_OPTIONS]
+            }], popover: [{
+                type: Input,
+                args: ['monkeyPopover']
+            }], closed: [{
+                type: Input,
+                args: ['monkeyPopoverClosed']
+            }], target: [{
+                type: Input,
+                args: ['monkeyPopoverTarget']
+            }], minwidth: [{
+                type: Input,
+                args: ['monkeyPopoverMinwidth']
+            }], backdrop: [{
+                type: Input,
+                args: ['monkeyPopoverBackdrop']
+            }], watch: [{
+                type: Input,
+                args: ['monkeyPopoverWatch']
+            }], dir: [{
+                type: Input,
+                args: ['monkeyPopoverDir']
+            }], contextmenu: [{
+                type: Input,
+                args: ['monkeyPopoverContextmenu']
+            }], height: [{
+                type: Input,
+                args: ['monkeyPopoverHeight']
+            }], title: [{
+                type: Input,
+                args: ['monkeyPopoverTitle']
+            }], actions: [{
+                type: Input,
+                args: ['monkeyPopoverActions']
+            }], hideClose: [{
+                type: Input,
+                args: [{ alias: 'monkeyPopoverHideClose', transform: booleanAttribute }]
+            }], hideHeader: [{
+                type: Input,
+                args: [{ alias: 'monkeyPopoverHideHeader', transform: booleanAttribute }]
+            }], hideActions: [{
+                type: Input,
+                args: [{ alias: 'monkeyPopoverHideActions', transform: booleanAttribute }]
+            }], enableAutofocus: [{
+                type: Input,
+                args: [{ alias: 'monkeyPopoverEnableAutofocus', transform: booleanAttribute }]
+            }] } });
+
+class MonkeyEcxAddressService {
+    constructor() {
+        this._http = inject(HttpClient);
+        this._googleApiKey = injectTokenWithWarning(MECX_GOOGLE_API_KEY, 'MECX_GOOGLE_API_KEY');
+    }
+    mappingData(places) {
+        const getComponent = (components, type, field = 'longText') => {
+            const result = components.find((c) => {
+                return c.types.includes(type);
+            });
+            return result?.[field] || '';
+        };
+        return places.map((_) => {
+            const { addressComponents } = _;
+            const address = getComponent(addressComponents, 'route');
+            const addressNumber = getComponent(addressComponents, 'street_number');
+            const neighborhood = getComponent(addressComponents, 'sublocality_level_1');
+            const city = getComponent(addressComponents, 'administrative_area_level_2');
+            const state = getComponent(addressComponents, 'administrative_area_level_1');
+            const country = getComponent(addressComponents, 'country', 'shortText');
+            const zipCode = getComponent(addressComponents, 'postal_code');
+            return {
+                formattedAddress: _.formattedAddress,
+                adrFormatAddress: _.adrFormatAddress,
+                address,
+                addressNumber,
+                neighborhood,
+                city,
+                state,
+                country,
+                zipCode
+            };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDisplayDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: MonkeyDisplayDirective, isStandalone: false, selector: "monkey-display", inputs: { displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDisplayDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-display',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: true }] }] } });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyErrorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyErrorDirective, isStandalone: false, selector: "monkey-error", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyErrorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-error',
-                    standalone: false
-                }]
-        }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyHelperDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyHelperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyHelperDirective, isStandalone: false, selector: "monkey-helper", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyHelperDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-helper',
-                    standalone: false
-                }]
-        }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyInfoDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInfoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyInfoDirective, isStandalone: false, selector: "monkey-info", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInfoDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-info',
-                    standalone: false
-                }]
-        }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyLabelDirective, isStandalone: false, selector: "monkey-label", ngImport: i0 }); }
+    get(textQuery) {
+        if (!textQuery) {
+            return of([]);
+        }
+        return this._http
+            .post('https://places.googleapis.com/v1/places:searchText', {
+            textQuery
+        }, {
+            headers: {
+                'X-Goog-Api-Key': this._googleApiKey,
+                'X-Goog-FieldMask': 'places.formattedAddress,places.addressComponents,places.displayName,places.adrFormatAddress'
+            }
+        })
+            .pipe(map((resp) => {
+            return this.mappingData(resp.places);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyEcxAddressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyEcxAddressService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyLabelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-label',
-                    standalone: false
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyEcxAddressService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
+/* eslint-disable no-console */
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyPopoverContentComponent {
-    constructor(host) {
-        this.host = host;
-        this.onClose = new EventEmitter();
-        this.enableAutofocus = false;
-        // not to do
-    }
-    ngAfterViewInit() {
-        if (this.enableAutofocus) {
-            setTimeout(() => {
-                const focusable = this.host.nativeElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-                focusable?.focus();
-            });
-        }
-    }
-    isTemplate(value) {
-        return value instanceof TemplateRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPopoverContentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyPopoverContentComponent, isStandalone: true, selector: "monkey-popover-content", inputs: { title: "title", content: "content", actions: "actions", hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideClose: ["hideClose", "hideClose", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], enableAutofocus: "enableAutofocus" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
-    <div class="mecx-popover-container">
-      @if (!hideHeader) {
-        <div class="mecx-popover-header">
-          @if (title) {
-            <div>
-              <ng-container *ngIf="isTemplate(title); else stringTitle">
-                <ng-container *ngTemplateOutlet="title"></ng-container>
-              </ng-container>
-              <ng-template #stringTitle>
-                {{ title }}
-              </ng-template>
-            </div>
-          }
-
-          @if (!hideClose) {
-            <util-icon class="mecx-popover-close" name="clear" (click)="onClose.next(null)" />
-          }
-        </div>
-      }
-
-      <div class="mecx-popover-content" [class.add-radius]="hideHeader">
-        <ng-container *ngTemplateOutlet="content"></ng-container>
-      </div>
-
-      @if (!hideActions) {
-        <div class="mecx-popover-actions" *ngIf="actions">
-          <ng-container *ngIf="isTemplate(actions); else stringActions">
-            <ng-container *ngTemplateOutlet="actions"></ng-container>
-          </ng-container>
-          <ng-template #stringActions>
-            <span>{{ actions }}</span>
-          </ng-template>
-        </div>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPopoverContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'monkey-popover-content',
-                    imports: [CommonModule, NgTemplateOutlet, UtilIconComponent],
-                    template: `
-    <div class="mecx-popover-container">
-      @if (!hideHeader) {
-        <div class="mecx-popover-header">
-          @if (title) {
-            <div>
-              <ng-container *ngIf="isTemplate(title); else stringTitle">
-                <ng-container *ngTemplateOutlet="title"></ng-container>
-              </ng-container>
-              <ng-template #stringTitle>
-                {{ title }}
-              </ng-template>
-            </div>
-          }
-
-          @if (!hideClose) {
-            <util-icon class="mecx-popover-close" name="clear" (click)="onClose.next(null)" />
-          }
-        </div>
-      }
-
-      <div class="mecx-popover-content" [class.add-radius]="hideHeader">
-        <ng-container *ngTemplateOutlet="content"></ng-container>
-      </div>
-
-      @if (!hideActions) {
-        <div class="mecx-popover-actions" *ngIf="actions">
-          <ng-container *ngIf="isTemplate(actions); else stringActions">
-            <ng-container *ngTemplateOutlet="actions"></ng-container>
-          </ng-container>
-          <ng-template #stringActions>
-            <span>{{ actions }}</span>
-          </ng-template>
-        </div>
-      }
-    </div>
-  `
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], onClose: [{
-                type: Output
-            }], hideHeader: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hideClose: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hideActions: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], enableAutofocus: [{
-                type: Input
-            }] } });
-class MonkeyPopoverDirective {
-    set popover(show) {
-        if (this._show === show) {
-            return;
-        }
-        this._show = show;
-        if (show) {
-            setTimeout(() => {
-                this.createPopover();
-            }, 0);
-        }
-        else {
-            this.disposePopover();
-        }
-    }
-    get popover() {
-        return this._show;
-    }
-    set target(value) {
-        this._target = value;
-    }
-    get target() {
-        return this._target;
-    }
+class MonkeyDictionaryService {
     constructor() {
-        this._tpl = inject(TemplateRef);
-        this._vcr = inject(ViewContainerRef);
-        this._el = inject(ElementRef);
-        this._zone = inject(NgZone);
-        this._overlay = inject(Overlay);
-        this._overlayPositionBuilder = inject(OverlayPositionBuilder);
-        this._router = inject(Router);
+        this._localeId = inject(LOCALE_ID);
         this._destroyRef = inject(DestroyRef);
-        this._show = false;
-        this.minwidth = false;
-        this.backdrop = true;
-        this.watch = false;
-        this.dir = 'ltr';
-        this.contextmenu = false;
-        this._router.events
-            .pipe(filter((event) => {
-            return event instanceof NavigationStart;
-        }), takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => {
-            this.closePopover();
+        this._data$ = new BehaviorSubject({
+            'pt-BR': {
+                EDIT: 'Editar',
+                'NO-RESULTS': 'Nenhum resultado encontrado',
+                'NO-DATA': 'Sem dados',
+                'NO-DATA-ADDRESS': 'Nenhum endereço encontrado com esta pesquisa',
+                'NOT-PROVIDED': 'Não informado',
+                LOADING: 'Carregando...',
+                'DATE-RANGE': {
+                    'START-DATE': 'Data de início',
+                    'END-DATE': 'Data de término',
+                    INVALID: 'Intervalo de datas inválido',
+                    ACTIONS: {
+                        CANCEL: 'Cancelar',
+                        APPLY: 'Aplicar'
+                    },
+                    'WEEK-DAYS': ['Dom.', '2ª', '3ª', '4ª', '5ª', '6ª', 'Sab.'],
+                    MONTHS: {
+                        0: 'Janeiro',
+                        1: 'Fevereiro',
+                        2: 'Março',
+                        3: 'Abril',
+                        4: 'Maio',
+                        5: 'Junho',
+                        6: 'Julho',
+                        7: 'Agosto',
+                        8: 'Setembro',
+                        9: 'Outubro',
+                        10: 'Novembro',
+                        11: 'Dezembro'
+                    },
+                    'QUICK-ACTIONS': {
+                        CUSTOM: 'Customizado',
+                        LAST_30_DAYS: 'Ultimos 30 dias',
+                        LAST_60_DAYS: 'Ultimos 60 dias',
+                        LAST_90_DAYS: 'Ultimos 90 dias',
+                        LAST_6_MONTHS: 'Ultimos 6 meses',
+                        LAST_12_MONTHS: 'Ultimos 12 meses',
+                        NEXT_30_DAYS: 'Próximos 30 dias',
+                        NEXT_60_DAYS: 'Próximos 60 dias',
+                        NEXT_90_DAYS: 'Próximos 90 dias',
+                        NEXT_6_MONTHS: 'Próximos 6 meses',
+                        NEXT_12_MONTHS: 'Próximos 12 meses'
+                    }
+                }
+            },
+            'es-CL': {
+                EDIT: 'Editar',
+                'NO-RESULTS': 'No se encontraron resultados',
+                'NO-DATA': 'Sin datos',
+                'NO-DATA-ADDRESS': 'No se encontraron direcciones con esta búsqueda',
+                'NOT-PROVIDED': 'No informado',
+                LOADING: 'Cargando...',
+                'DATE-RANGE': {
+                    'START-DATE': 'Fecha de inicio',
+                    'END-DATE': 'Fecha de termino',
+                    INVALID: 'Rango de fechas no válido',
+                    ACTIONS: {
+                        CANCEL: 'Cancelar',
+                        APPLY: 'Aplicar'
+                    },
+                    'WEEK-DAYS': ['Dom.', 'Lun.', 'Mar.', 'Mié.', 'Jue.', 'Vie.', 'Sab.'],
+                    MONTHS: {
+                        0: 'Enero',
+                        1: 'Febrero',
+                        2: 'Marzo',
+                        3: 'Abril',
+                        4: 'Mayo',
+                        5: 'Junio',
+                        6: 'Julio',
+                        7: 'Agosto',
+                        8: 'Septiembre',
+                        9: 'Octubre',
+                        10: 'Noviembre',
+                        11: 'Diciembre'
+                    },
+                    'QUICK-ACTIONS': {
+                        CUSTOM: 'Personalizado',
+                        LAST_30_DAYS: 'Últimos 30 días',
+                        LAST_60_DAYS: 'Últimos 60 días',
+                        LAST_90_DAYS: 'Últimos 90 días',
+                        LAST_6_MONTHS: 'Últimos 6 meses',
+                        LAST_12_MONTHS: 'Últimos 12 meses',
+                        NEXT_30_DAYS: 'Próximos 30 días',
+                        NEXT_60_DAYS: 'Próximos 60 días',
+                        NEXT_90_DAYS: 'Próximos 90 días',
+                        NEXT_6_MONTHS: 'Próximos 6 meses',
+                        NEXT_12_MONTHS: 'Próximos 12 meses'
+                    }
+                }
+            },
+            'es-MX': {
+                EDIT: 'Editar',
+                'NO-RESULTS': 'No se encontraron resultados',
+                'NO-DATA': 'Sin datos',
+                'NO-DATA-ADDRESS': 'No se encontraron direcciones con esta búsqueda',
+                'NOT-PROVIDED': 'No informado',
+                LOADING: 'Cargando...',
+                'DATE-RANGE': {
+                    'START-DATE': 'Fecha de inicio',
+                    'END-DATE': 'Fecha de termino',
+                    INVALID: 'Rango de fechas no válido',
+                    ACTIONS: {
+                        CANCEL: 'Cancelar',
+                        APPLY: 'Aplicar'
+                    },
+                    'WEEK-DAYS': ['Dom.', 'Lun.', 'Mar.', 'Mié.', 'Jue.', 'Vie.', 'Sab.'],
+                    MONTHS: {
+                        0: 'Enero',
+                        1: 'Febrero',
+                        2: 'Marzo',
+                        3: 'Abril',
+                        4: 'Mayo',
+                        5: 'Junio',
+                        6: 'Julio',
+                        7: 'Agosto',
+                        8: 'Septiembre',
+                        9: 'Octubre',
+                        10: 'Noviembre',
+                        11: 'Diciembre'
+                    },
+                    'QUICK-ACTIONS': {
+                        CUSTOM: 'Personalizado',
+                        LAST_30_DAYS: 'Últimos 30 días',
+                        LAST_60_DAYS: 'Últimos 60 días',
+                        LAST_90_DAYS: 'Últimos 90 días',
+                        LAST_6_MONTHS: 'Últimos 6 meses',
+                        LAST_12_MONTHS: 'Últimos 12 meses',
+                        NEXT_30_DAYS: 'Próximos 30 días',
+                        NEXT_60_DAYS: 'Próximos 60 días',
+                        NEXT_90_DAYS: 'Próximos 90 días',
+                        NEXT_6_MONTHS: 'Próximos 6 meses',
+                        NEXT_12_MONTHS: 'Próximos 12 meses'
+                    }
+                }
+            },
+            'en-US': {
+                EDIT: 'Edit',
+                'NO-RESULTS': 'No results found',
+                'NO-DATA': 'No data',
+                'NO-DATA-ADDRESS': 'No address found with this search',
+                'NOT-PROVIDED': 'Not provided',
+                LOADING: 'Loading...',
+                'DATE-RANGE': {
+                    'START-DATE': 'Start date',
+                    'END-DATE': 'End Date',
+                    INVALID: 'Invalid date range',
+                    ACTIONS: {
+                        CANCEL: 'Cancel',
+                        APPLY: 'Apply'
+                    },
+                    'WEEK-DAYS': ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
+                    MONTHS: {
+                        0: 'January',
+                        1: 'February',
+                        2: 'March',
+                        3: 'April',
+                        4: 'May',
+                        5: 'June',
+                        6: 'July',
+                        7: 'August',
+                        8: 'September',
+                        9: 'October',
+                        10: 'November',
+                        11: 'December'
+                    },
+                    'QUICK-ACTIONS': {
+                        CUSTOM: 'Custom',
+                        LAST_30_DAYS: 'Last 30 days',
+                        LAST_60_DAYS: 'Last 60 days',
+                        LAST_90_DAYS: 'Last 90 days',
+                        LAST_6_MONTHS: 'Last 6 months',
+                        LAST_12_MONTHS: 'Last 12 months',
+                        NEXT_30_DAYS: 'Next 30 days',
+                        NEXT_60_DAYS: 'Next 60 days',
+                        NEXT_90_DAYS: 'Next 90 days',
+                        NEXT_6_MONTHS: 'Next 6 months',
+                        NEXT_12_MONTHS: 'Next 12 months'
+                    }
+                }
+            }
+        });
+        const tokenSubject = inject(MECX_I18N_WRAPPER, { optional: true });
+        tokenSubject?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((value) => {
+            this.handleWrapperValues(value);
         });
     }
-    ngOnDestroy() {
-        this.disposePopover();
-        this._resizeObserver?.disconnect();
-    }
-    closePopover(event) {
-        if (this._show) {
-            this._show = false;
-            this.disposePopover();
-            this._zone.run(() => {
-                this.closed?.(event);
-            });
-        }
-    }
-    disposePopover() {
-        this._resizeObserver?.disconnect();
-        this._resizeObserver = undefined;
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = undefined;
-        }
-    }
-    getPositions(dir) {
-        const oppositeVertical = {
-            top: 'bottom',
-            bottom: 'top',
-            center: 'center'
-        };
-        const oppositeHorizontal = {
-            start: 'end',
-            end: 'start',
-            center: 'center'
-        };
-        const centerY = (pos) => {
-            return {
-                originX: 'center',
-                originY: pos,
-                overlayX: 'center',
-                overlayY: oppositeVertical[pos]
-            };
-        };
-        const centerX = (pos) => {
-            return {
-                originX: oppositeHorizontal[pos],
-                originY: 'center',
-                overlayX: pos,
-                overlayY: 'center'
-            };
-        };
-        const ltr = (axis) => {
-            return {
-                originX: 'start',
-                originY: axis,
-                overlayX: 'start',
-                overlayY: oppositeVertical[axis]
-            };
-        };
-        const rtl = (axis) => {
-            return {
-                originX: 'end',
-                originY: axis,
-                overlayX: 'end',
-                overlayY: oppositeVertical[axis]
-            };
-        };
-        const side = (axisX, axisY) => {
-            return {
-                originX: axisX,
-                originY: axisY,
-                overlayX: oppositeHorizontal[axisX],
-                overlayY: axisY
+    handleWrapperValues(value) {
+        try {
+            const locale = this._localeId || 'pt-BR';
+            const wrappedData = JSON.parse(value);
+            const currentData = this._data$.value;
+            const updated = {
+                ...currentData,
+                [locale]: {
+                    ...currentData[locale],
+                    ...wrappedData
+                }
             };
-        };
-        const cmp = dir ?? this._options?.dir ?? this.dir;
-        switch (cmp) {
-            case 'ct':
-                return [centerY('top'), centerY('bottom'), centerX('start'), centerX('end')];
-            case 'cr':
-                return [centerX('end'), centerX('start'), centerY('top'), centerY('bottom')];
-            case 'cc':
-                return [centerX('center')];
-            case 'ltr':
-                return [ltr('bottom'), ltr('top')];
-            case 'rtl':
-                return [rtl('bottom'), rtl('top')];
-            case 'tltr':
-                return [ltr('top'), ltr('bottom')];
-            case 'trtl':
-                return [rtl('top'), rtl('bottom')];
-            case 'rt':
-                return [side('end', 'top'), side('end', 'bottom'), ltr('top')];
-            case 'rb':
-                return [side('end', 'bottom'), side('end', 'top'), ltr('bottom'), rtl('bottom')];
-            case 'lt':
-                return [side('start', 'top'), side('start', 'bottom'), rtl('top')];
-            case 'lb':
-                return [side('start', 'bottom'), side('start', 'top'), rtl('bottom')];
-            default:
-                return [];
+            this._data$.next(updated);
         }
-    }
-    createPopover(origin, options) {
-        if (!this.target) {
+        catch (e) {
             // eslint-disable-next-line no-console
-            console.error('MonkeyPopoverDirective -> target element is not defined.');
-            return;
+            console.error(`MonkeyDictionaryService - handleWrapperValues -> ${e}`);
         }
-        const originEl = this.target instanceof HTMLElement ? this.target : this.target.element;
-        this._positionStrategy = this._overlayPositionBuilder
-            .flexibleConnectedTo(origin ?? originEl)
-            .withPush(true)
-            .withGrowAfterOpen(true)
-            .withPositions(this.getPositions(options?.dir));
-        this._overlayRef = this._overlay.create({
-            positionStrategy: this._positionStrategy,
-            disposeOnNavigation: true,
-            direction: 'ltr',
-            hasBackdrop: this.backdrop,
-            scrollStrategy: this._overlay.scrollStrategies.reposition(),
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            width: this._options?.minwidth || this.minwidth ? this.target.offsetWidth - 2 : undefined,
-            maxHeight: '95%',
-            height: this.height
+    }
+    get(key) {
+        const locale = this._localeId || 'pt-BR';
+        return this._data$.pipe(map((data) => {
+            return data[locale]?.[key] ?? null;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDictionaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDictionaryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDictionaryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyStepperService {
+    constructor() {
+        this._steppers = signal(new Map(), ...(ngDevMode ? [{ debugName: "_steppers" }] : []));
+    }
+    currentStep(id) {
+        return computed(() => {
+            return this._steppers().get(id);
         });
-        this._overlayRef
-            .backdropClick()
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((event) => {
-            this.closePopover(event);
+    }
+    setCurrentStep(id, step) {
+        this._steppers.update((items) => {
+            return new Map(items).set(id, step);
         });
-        const portal = new ComponentPortal(MonkeyPopoverContentComponent, this._vcr);
-        this._componentRef = this._overlayRef.attach(portal);
-        this._componentRef.instance.content = this._tpl;
-        this._componentRef.instance.title = this.title;
-        this._componentRef.instance.actions = this.actions;
-        this._componentRef.instance.hideClose = this.hideClose;
-        this._componentRef.instance.hideHeader = this.hideHeader;
-        this._componentRef.instance.hideActions = this.hideActions;
-        this._componentRef.instance.enableAutofocus = this.enableAutofocus;
-        if (!this.hideClose || !this.hideHeader) {
-            this._componentRef.instance.onClose
-                .pipe(takeUntilDestroyed(this._destroyRef))
-                .subscribe(() => {
-                this.closePopover();
-            });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStepperService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStepperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class MonkeyToastRef {
+    constructor(componentRef) {
+        this.componentRef = componentRef;
+        // not to do
+    }
+    close() {
+        this.componentRef.instance.close();
+    }
+}
+
+/** ************************
+ * 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 MonkeyToastService {
+    constructor() {
+        this.overlay = inject(Overlay);
+    }
+    getPositionStrategy(position) {
+        const globalPosition = this.overlay.position().global();
+        switch (position) {
+            case 'top-left':
+                return globalPosition.top('40px').start('40px');
+            case 'top-center':
+                return globalPosition.top('40px').centerHorizontally();
+            case 'top-right':
+                return globalPosition.top('40px').end('40px');
+            case 'bottom-left':
+                return globalPosition.bottom('40px').start('40px');
+            case 'bottom-center':
+                return globalPosition.bottom('40px').centerHorizontally();
+            default:
+                return globalPosition.bottom('40px').end('40px');
         }
-        if (this.watch && 'ResizeObserver' in window) {
-            this._resizeObserver = new ResizeObserver(() => {
-                this._overlayRef?.updatePosition();
-            });
-            this._resizeObserver.observe(this._componentRef.location.nativeElement);
+    }
+    show(toastConfig) {
+        if (this.lastToast) {
+            this.lastToast.close();
+        }
+        const overlayRef = this.overlay.create({
+            hasBackdrop: false,
+            positionStrategy: this.getPositionStrategy(toastConfig.position)
+        });
+        const portal = new ComponentPortal(MonkeyToastComponent);
+        const componentRef = overlayRef.attach(portal);
+        this.lastToast = new MonkeyToastRef(componentRef);
+        componentRef.instance.id = getRandomString(6);
+        componentRef.instance.type = toastConfig.type ?? 'default';
+        componentRef.instance.icon = toastConfig.icon;
+        componentRef.instance.isClosable = toastConfig.isClosable ?? false;
+        componentRef.instance.message = toastConfig.message;
+        componentRef.instance.actionLabel = toastConfig.actionLabel;
+        componentRef.instance.actionIcon = toastConfig.actionIcon;
+        componentRef.instance.onActionClick.subscribe(() => {
+            if (toastConfig.action) {
+                toastConfig.action();
+                if (toastConfig.closeOnAction ?? true) {
+                    componentRef.instance.close();
+                }
+            }
+        });
+        componentRef.instance.onClose.subscribe(() => {
+            overlayRef.detach();
+        });
+        if (!toastConfig.keepOpen) {
+            setTimeout(() => {
+                componentRef.instance.close();
+            }, toastConfig.duration ?? 4000);
         }
+        return componentRef.instance;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyToastService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/** ************************
+ * 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 MonkeyFormFieldControl {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyFormFieldControl, isStandalone: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyFormFieldControl, decorators: [{
+            type: Directive
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyDisplayDirective {
+    constructor(el) {
+        this.el = el;
+        this.fallbackText = 'Not provided';
+        this.i18nDictionary = inject(MonkeyDictionaryService).get('NOT-PROVIDED');
+        this.displayValue = input.required(...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+        this.displayedText = computed(() => {
+            const value = this.displayValue();
+            if (value === null || value === undefined || value === '') {
+                return this.fallbackText;
+            }
+            return String(value);
+        }, ...(ngDevMode ? [{ debugName: "displayedText" }] : []));
+        effect(async () => {
+            this.el.nativeElement.innerHTML = this.displayedText();
+            this.fallbackText = await firstValueFrom(this.i18nDictionary);
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.14", type: MonkeyPopoverDirective, isStandalone: false, selector: "[monkeyPopover]", inputs: { popover: ["monkeyPopover", "popover"], closed: ["monkeyPopoverClosed", "closed"], target: ["monkeyPopoverTarget", "target"], minwidth: ["monkeyPopoverMinwidth", "minwidth"], backdrop: ["monkeyPopoverBackdrop", "backdrop"], watch: ["monkeyPopoverWatch", "watch"], dir: ["monkeyPopoverDir", "dir"], contextmenu: ["monkeyPopoverContextmenu", "contextmenu"], height: ["monkeyPopoverHeight", "height"], title: ["monkeyPopoverTitle", "title"], actions: ["monkeyPopoverActions", "actions"], hideClose: ["monkeyPopoverHideClose", "hideClose", booleanAttribute], hideHeader: ["monkeyPopoverHideHeader", "hideHeader", booleanAttribute], hideActions: ["monkeyPopoverHideActions", "hideActions", booleanAttribute], enableAutofocus: ["monkeyPopoverEnableAutofocus", "enableAutofocus", booleanAttribute] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDisplayDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: MonkeyDisplayDirective, isStandalone: true, selector: "monkey-display", inputs: { displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPopoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDisplayDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[monkeyPopover]',
-                    standalone: false
+                    selector: 'monkey-display'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: true }] }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyErrorDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyErrorDirective, isStandalone: true, selector: "monkey-error", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyErrorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-error'
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyHelperDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyHelperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyHelperDirective, isStandalone: true, selector: "monkey-helper", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyHelperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-helper'
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyInfoDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInfoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyInfoDirective, isStandalone: true, selector: "monkey-info", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInfoDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-info'
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyLabelDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyLabelDirective, isStandalone: true, selector: "monkey-label", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-label'
                 }]
-        }], ctorParameters: () => [], propDecorators: { _options: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [MECX_POPOVER_OPTIONS]
-            }], popover: [{
-                type: Input,
-                args: ['monkeyPopover']
-            }], closed: [{
-                type: Input,
-                args: ['monkeyPopoverClosed']
-            }], target: [{
-                type: Input,
-                args: ['monkeyPopoverTarget']
-            }], minwidth: [{
-                type: Input,
-                args: ['monkeyPopoverMinwidth']
-            }], backdrop: [{
-                type: Input,
-                args: ['monkeyPopoverBackdrop']
-            }], watch: [{
-                type: Input,
-                args: ['monkeyPopoverWatch']
-            }], dir: [{
-                type: Input,
-                args: ['monkeyPopoverDir']
-            }], contextmenu: [{
-                type: Input,
-                args: ['monkeyPopoverContextmenu']
-            }], height: [{
-                type: Input,
-                args: ['monkeyPopoverHeight']
-            }], title: [{
-                type: Input,
-                args: ['monkeyPopoverTitle']
-            }], actions: [{
-                type: Input,
-                args: ['monkeyPopoverActions']
-            }], hideClose: [{
-                type: Input,
-                args: [{ alias: 'monkeyPopoverHideClose', transform: booleanAttribute }]
-            }], hideHeader: [{
-                type: Input,
-                args: [{ alias: 'monkeyPopoverHideHeader', transform: booleanAttribute }]
-            }], hideActions: [{
-                type: Input,
-                args: [{ alias: 'monkeyPopoverHideActions', transform: booleanAttribute }]
-            }], enableAutofocus: [{
-                type: Input,
-                args: [{ alias: 'monkeyPopoverEnableAutofocus', transform: booleanAttribute }]
-            }] } });
+        }] });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
@@ -1845,14 +1790,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * MIT Licence
  ************************* */
 class MonkeyPrefixDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyPrefixDirective, isStandalone: false, selector: "monkey-prefix", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyPrefixDirective, isStandalone: true, selector: "monkey-prefix", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyPrefixDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'monkey-prefix',
-                    standalone: false
+                    selector: 'monkey-prefix'
                 }]
         }] });
 
@@ -1878,17 +1822,16 @@ class MonkeySuffixDirective {
             this.action(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeySuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeySuffixDirective, isStandalone: false, selector: "monkey-suffix", inputs: { _hasAction: ["hasAction", "_hasAction"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.has-action": "hasAction" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeySuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeySuffixDirective, isStandalone: true, selector: "monkey-suffix", inputs: { _hasAction: ["hasAction", "_hasAction"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.has-action": "hasAction" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeySuffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeySuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'monkey-suffix',
                     host: {
                         '[class.has-action]': 'hasAction'
-                    },
-                    standalone: false
+                    }
                 }]
         }], propDecorators: { _hasAction: [{
                 type: Input,
@@ -1898,80 +1841,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyDirectivesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDirectivesModule, declarations: [MonkeyErrorDirective,
-            MonkeyHelperDirective,
-            MonkeyInfoDirective,
-            MonkeyLabelDirective,
-            MonkeyDisplayDirective,
-            MonkeyPrefixDirective,
-            MonkeySuffixDirective,
-            MonkeyBadgeDirective,
-            MonkeyPopoverDirective], imports: [MonkeyPopoverContentComponent], exports: [MonkeyErrorDirective,
-            MonkeyHelperDirective,
-            MonkeyInfoDirective,
-            MonkeyLabelDirective,
-            MonkeyDisplayDirective,
-            MonkeyPrefixDirective,
-            MonkeySuffixDirective,
-            MonkeyBadgeDirective,
-            MonkeyPopoverDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDirectivesModule, imports: [MonkeyPopoverContentComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDirectivesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [MonkeyPopoverContentComponent],
-                    declarations: [
-                        MonkeyErrorDirective,
-                        MonkeyHelperDirective,
-                        MonkeyInfoDirective,
-                        MonkeyLabelDirective,
-                        MonkeyDisplayDirective,
-                        MonkeyPrefixDirective,
-                        MonkeySuffixDirective,
-                        MonkeyBadgeDirective,
-                        MonkeyPopoverDirective
-                    ],
-                    exports: [
-                        MonkeyErrorDirective,
-                        MonkeyHelperDirective,
-                        MonkeyInfoDirective,
-                        MonkeyLabelDirective,
-                        MonkeyDisplayDirective,
-                        MonkeyPrefixDirective,
-                        MonkeySuffixDirective,
-                        MonkeyBadgeDirective,
-                        MonkeyPopoverDirective
-                    ]
-                }]
-        }] });
-
-/** ************************
- * 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 MonkeyFormFieldControl {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyFormFieldControl, isStandalone: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldControl, decorators: [{
-            type: Directive
-        }] });
-
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -2036,6 +1905,27 @@ class MonkeyFormFieldComponent {
         this.size = 'md';
         this.displayOnly = input(false, ...(ngDevMode ? [{ debugName: "displayOnly" }] : []));
         this.onDisplayOnlyChange = output();
+        this._displayChild = ContentChildren(MonkeyDisplayDirective, {
+            descendants: true
+        });
+        this._labelChildren = ContentChildren(MonkeyLabelDirective, {
+            descendants: true
+        });
+        this._helperChildren = ContentChildren(MonkeyHelperDirective, {
+            descendants: true
+        });
+        this._prefixChildren = ContentChildren(MonkeyPrefixDirective, {
+            descendants: true
+        });
+        this._suffixChildren = ContentChildren(MonkeySuffixDirective, {
+            descendants: true
+        });
+        this._infoChildren = ContentChildren(MonkeyInfoDirective, {
+            descendants: true
+        });
+        this._errorChildren = ContentChildren(MonkeyErrorDirective, {
+            descendants: true
+        });
         this.elementRef = inject(ElementRef);
         this._changeDetectorRef = inject(ChangeDetectorRef);
         this._idGenerator = inject(IdGenerator);
@@ -2090,7 +1980,7 @@ class MonkeyFormFieldComponent {
     checkPrefixAndSuffix() {
         this.hasPrefix = !!this._prefixChildren?.length;
         this.hasSuffix = !!this._suffixChildren?.length;
-        const suffix = this._suffixChildren.get(0);
+        const suffix = this._suffixChildren?.get?.(0);
         if (suffix) {
             suffix.action = (event) => {
                 event.preventDefault();
@@ -2100,10 +1990,12 @@ class MonkeyFormFieldComponent {
     }
     initializePrefixAndSuffix() {
         this.checkPrefixAndSuffix();
-        merge(this._prefixChildren.changes, this._suffixChildren.changes).subscribe(() => {
-            this.checkPrefixAndSuffix();
-            this._changeDetectorRef.markForCheck();
-        });
+        if (this._prefixChildren?.changes || this._suffixChildren?.changes) {
+            merge(this._prefixChildren?.changes, this._suffixChildren?.changes).subscribe(() => {
+                this.checkPrefixAndSuffix();
+                this._changeDetectorRef.markForCheck();
+            });
+        }
     }
     checkInfoError() {
         this.hasInfo = !!this._infoChildren?.length;
@@ -2111,10 +2003,12 @@ class MonkeyFormFieldComponent {
     }
     initializeInfoError() {
         this.checkInfoError();
-        merge(this._infoChildren.changes, this._errorChildren.changes).subscribe(() => {
-            this.checkInfoError();
-            this._changeDetectorRef.markForCheck();
-        });
+        if (this._infoChildren?.changes || this._errorChildren?.changes) {
+            merge(this._infoChildren?.changes, this._errorChildren?.changes).subscribe(() => {
+                this.checkInfoError();
+                this._changeDetectorRef.markForCheck();
+            });
+        }
     }
     initializeComponents() {
         this.hasLabel = !!this._labelChildren?.length;
@@ -2220,10 +2114,10 @@ class MonkeyFormFieldComponent {
             this.control.onContainerClick(event);
         }, 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, hideAction: { classPropertyName: "hideAction", publicName: "hideAction", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, enableClear: { classPropertyName: "enableClear", publicName: "enableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, displayOnly: { classPropertyName: "displayOnly", publicName: "displayOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDisplayOnlyChange: "onDisplayOnlyChange" }, 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: "_displayChild", first: true, predicate: MonkeyDisplayDirective, 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 (internalDisplayOnly()) {\n  <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\n    <div class=\"mecx-form-field-display-only-header\">\n      <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\n    </div>\n    <div class=\"mecx-form-field-display-only-body\">\n      <ng-content select=\"monkey-display\"></ng-content>\n    </div>\n    <div class=\"mecx-form-field-display-only-action\">\n      {{ editDictionary | async }} <util-icon name=\"edit\" />\n    </div>\n  </div>\n} @else {\n  @if (showHeader) {\n    <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n      <label [id]=\"labelId\" [attr.for]=\"control.id\">\n        <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\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}\n\n<ng-template #labelTpl>\n  <ng-content select=\"monkey-label\"></ng-content>\n</ng-template>\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{width:100%;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{border-color:var(--mecx-color-gray-900)}.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}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media (max-width: 767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:#fff;padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, hideAction: { classPropertyName: "hideAction", publicName: "hideAction", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, enableClear: { classPropertyName: "enableClear", publicName: "enableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, displayOnly: { classPropertyName: "displayOnly", publicName: "displayOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDisplayOnlyChange: "onDisplayOnlyChange" }, 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 }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (internalDisplayOnly()) {\n  <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\n    <div class=\"mecx-form-field-display-only-header\">\n      <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\n    </div>\n    <div class=\"mecx-form-field-display-only-body\">\n      <ng-content select=\"monkey-display\"></ng-content>\n    </div>\n    <div class=\"mecx-form-field-display-only-action\">\n      {{ editDictionary | async }} <util-icon name=\"edit\" />\n    </div>\n  </div>\n} @else {\n  @if (showHeader) {\n    <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n      <label [id]=\"labelId\" [attr.for]=\"control.id\">\n        <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\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}\n\n<ng-template #labelTpl>\n  <ng-content select=\"monkey-label\"></ng-content>\n</ng-template>\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-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-body{width:100%;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{border-color:var(--mecx-color-gray-900)}.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-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}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media (max-width: 767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:var(--mecx-color-white);padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-form-field', exportAs: 'monkeyFormField', host: {
                         class: 'mecx-form-field',
@@ -2234,7 +2128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         '[attr.id]': 'id',
                         '[id]': 'id',
                         '[class]': 'size'
-                    }, standalone: false, template: "@if (internalDisplayOnly()) {\n  <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\n    <div class=\"mecx-form-field-display-only-header\">\n      <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\n    </div>\n    <div class=\"mecx-form-field-display-only-body\">\n      <ng-content select=\"monkey-display\"></ng-content>\n    </div>\n    <div class=\"mecx-form-field-display-only-action\">\n      {{ editDictionary | async }} <util-icon name=\"edit\" />\n    </div>\n  </div>\n} @else {\n  @if (showHeader) {\n    <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n      <label [id]=\"labelId\" [attr.for]=\"control.id\">\n        <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\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}\n\n<ng-template #labelTpl>\n  <ng-content select=\"monkey-label\"></ng-content>\n</ng-template>\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{width:100%;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{border-color:var(--mecx-color-gray-900)}.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}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media (max-width: 767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:#fff;padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
+                    }, standalone: false, template: "@if (internalDisplayOnly()) {\n  <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\n    <div class=\"mecx-form-field-display-only-header\">\n      <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\n    </div>\n    <div class=\"mecx-form-field-display-only-body\">\n      <ng-content select=\"monkey-display\"></ng-content>\n    </div>\n    <div class=\"mecx-form-field-display-only-action\">\n      {{ editDictionary | async }} <util-icon name=\"edit\" />\n    </div>\n  </div>\n} @else {\n  @if (showHeader) {\n    <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n      <label [id]=\"labelId\" [attr.for]=\"control.id\">\n        <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\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}\n\n<ng-template #labelTpl>\n  <ng-content select=\"monkey-label\"></ng-content>\n</ng-template>\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-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-body{width:100%;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{border-color:var(--mecx-color-gray-900)}.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-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}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media (max-width: 767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:var(--mecx-color-white);padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input
             }], hideAction: [{
@@ -2248,27 +2142,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             }], displayOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayOnly", required: false }] }], onDisplayOnlyChange: [{ type: i0.Output, args: ["onDisplayOnlyChange"] }], _formFieldControl: [{
                 type: ContentChild,
                 args: [MonkeyFormFieldControl]
-            }], _displayChild: [{
-                type: ContentChild,
-                args: [MonkeyDisplayDirective]
-            }], _labelChildren: [{
-                type: ContentChildren,
-                args: [MonkeyLabelDirective, { descendants: true }]
-            }], _helperChildren: [{
-                type: ContentChildren,
-                args: [MonkeyHelperDirective, { descendants: true }]
-            }], _prefixChildren: [{
-                type: ContentChildren,
-                args: [MonkeyPrefixDirective, { descendants: true }]
-            }], _suffixChildren: [{
-                type: ContentChildren,
-                args: [MonkeySuffixDirective, { descendants: true }]
-            }], _infoChildren: [{
-                type: ContentChildren,
-                args: [MonkeyInfoDirective, { descendants: true }]
-            }], _errorChildren: [{
-                type: ContentChildren,
-                args: [MonkeyErrorDirective, { descendants: true }]
             }] } });
 
 /** ************************
@@ -2277,11 +2150,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * MIT Licence
  ************************* */
 class MonkeyFormFieldModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule, declarations: [MonkeyFormFieldComponent], imports: [CommonModule, UtilIconComponent], exports: [MonkeyFormFieldComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MonkeyFormFieldModule, declarations: [MonkeyFormFieldComponent], imports: [CommonModule, UtilIconComponent], exports: [MonkeyFormFieldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyFormFieldModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyFormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, UtilIconComponent],
@@ -2332,8 +2205,8 @@ class MonkeyOptionComponent {
             this.handleAction(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null } }, 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null } }, 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: `
     @if (type === 'checkbox') {
       <span class="mecx-option-checkbox">
         <util-icon class="icon" name="check" />
@@ -2342,7 +2215,7 @@ class MonkeyOptionComponent {
     <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-gray-900);background-color:var(--mecx-color-gray-300)}monkey-option.select.mecx-option-selected svg path{fill:var(--mecx-color-gray-900)}.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-visible{outline:unset;outline-offset:1px}monkey-option.radio:focus-visible: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: "20.3.14", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-option', standalone: true, imports: [CommonModule, UtilIconComponent], template: `
     @if (type === 'checkbox') {
@@ -2464,7 +2337,7 @@ class MonkeyAutocompleteComponent {
         return this._elementRef?.nativeElement;
     }
     updateWidth() {
-        this.initialDisplayWidth = this.elementTarget?.offsetWidth - 12;
+        this.initialDisplayWidth = (this.elementTarget?.offsetWidth || 0) - 12;
     }
     ngAfterContentInit() {
         this._searchEvent
@@ -2558,8 +2431,8 @@ class MonkeyAutocompleteComponent {
     isSelected(option) {
         return option?.value === this.value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAutocompleteComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyAutocompleteComponent, isStandalone: true, selector: "monkey-autocomplete", inputs: { placeholder: "placeholder", debounce: "debounce", tabIndex: "tabIndex", fetchOptions: "fetchOptions", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur($event)" }, properties: { "attr.data-testid": "'monkey-autocomplete'", "class.mecx-autocomplete-disabled": "_disabled", "class.mecx-autocomplete-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-autocomplete" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyAutocompleteComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyAutocompleteComponent, isStandalone: true, selector: "monkey-autocomplete", inputs: { placeholder: "placeholder", debounce: "debounce", tabIndex: "tabIndex", fetchOptions: "fetchOptions", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur($event)" }, properties: { "attr.data-testid": "'monkey-autocomplete'", "class.mecx-autocomplete-disabled": "_disabled", "class.mecx-autocomplete-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-autocomplete" }, providers: [
             // eslint-disable-next-line no-use-before-define
             { provide: MonkeyFormFieldControl, useExisting: MonkeyAutocompleteComponent }
         ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }], viewQueries: [{ propertyName: "containerWrapper", first: true, predicate: ["containerWrapper"], descendants: true }], ngImport: i0, template: `
@@ -2577,68 +2450,63 @@ class MonkeyAutocompleteComponent {
       [(ngModel)]="searchData"
     />
 
-    @if (elementTarget) {
-      <ng-template
-        [monkeyPopover]="showPopOver"
-        [monkeyPopoverTarget]="elementTarget"
-        [monkeyPopoverClosed]="closePopOver"
-        monkeyPopoverDir="ltr"
-        [monkeyPopoverBackdrop]="false"
-        [monkeyPopoverHideHeader]="true"
-        [monkeyPopoverWatch]="true"
+    <ng-template
+      [monkeyPopover]="showPopOver"
+      [monkeyPopoverTarget]="elementTarget"
+      [monkeyPopoverClosed]="closePopOver"
+      monkeyPopoverDir="ltr"
+      [monkeyPopoverBackdrop]="false"
+      [monkeyPopoverHideHeader]="true"
+      [monkeyPopoverWatch]="true"
+    >
+      <div
+        #containerWrapper
+        class="mecx-autocomplete-wrapper"
+        [style.width.px]="initialDisplayWidth"
       >
-        <div
-          #containerWrapper
-          class="mecx-autocomplete-wrapper"
-          [style.width.px]="initialDisplayWidth"
-        >
-          <div *ngIf="options.length > 0" class="mecx-autocomplete-options">
-            <div
-              class="mecx-autocomplete-option"
-              *ngFor="let option of options"
-              (click)="onSelect(option)"
-              [class.mecx-autocomplete-selected]="isSelected(option)"
+        <div *ngIf="options.length > 0" class="mecx-autocomplete-options">
+          <div
+            class="mecx-autocomplete-option"
+            *ngFor="let option of options"
+            (click)="onSelect(option)"
+            [class.mecx-autocomplete-selected]="isSelected(option)"
+          >
+            <ng-container
+              *ngTemplateOutlet="optionTemplate || defaultTemplate; context: { $implicit: option }"
             >
-              <ng-container
-                *ngTemplateOutlet="
-                  optionTemplate || defaultTemplate;
-                  context: { $implicit: option }
-                "
-              >
-              </ng-container>
-            </div>
+            </ng-container>
           </div>
-          @if (loading) {
-            <div class="mecx-autocomplete-loading">
-              <util-icon name="loading" />
-              {{ loadingDictionary | async }}
-            </div>
-          }
-          @if (!loading && !options.length) {
-            <div class="mecx-autocomplete-no-data">
-              <util-icon class="mecx-autocomplete-no-data-icon" name="searchFail" />
-              {{ noDataDictionary | async }}
-            </div>
-          }
         </div>
+        @if (loading) {
+          <div class="mecx-autocomplete-loading">
+            <util-icon name="loading" />
+            {{ loadingDictionary | async }}
+          </div>
+        }
+        @if (!loading && !options.length) {
+          <div class="mecx-autocomplete-no-data">
+            <util-icon class="mecx-autocomplete-no-data-icon" name="searchFail" />
+            {{ noDataDictionary | async }}
+          </div>
+        }
+      </div>
 
-        <ng-template #defaultTemplate let-option>
-          <monkey-option>
-            {{ option.description }}
-          </monkey-option>
-        </ng-template>
+      <ng-template #defaultTemplate let-option>
+        <monkey-option>
+          {{ option.description }}
+        </monkey-option>
       </ng-template>
-    }
-  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    </ng-template>
+  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-autocomplete', imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         MonkeyFormFieldModule,
-                        MonkeyDirectivesModule,
+                        MonkeyPopoverDirective,
                         MonkeyOptionComponent,
                         UtilIconComponent
                     ], template: `
@@ -2656,58 +2524,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
       [(ngModel)]="searchData"
     />
 
-    @if (elementTarget) {
-      <ng-template
-        [monkeyPopover]="showPopOver"
-        [monkeyPopoverTarget]="elementTarget"
-        [monkeyPopoverClosed]="closePopOver"
-        monkeyPopoverDir="ltr"
-        [monkeyPopoverBackdrop]="false"
-        [monkeyPopoverHideHeader]="true"
-        [monkeyPopoverWatch]="true"
+    <ng-template
+      [monkeyPopover]="showPopOver"
+      [monkeyPopoverTarget]="elementTarget"
+      [monkeyPopoverClosed]="closePopOver"
+      monkeyPopoverDir="ltr"
+      [monkeyPopoverBackdrop]="false"
+      [monkeyPopoverHideHeader]="true"
+      [monkeyPopoverWatch]="true"
+    >
+      <div
+        #containerWrapper
+        class="mecx-autocomplete-wrapper"
+        [style.width.px]="initialDisplayWidth"
       >
-        <div
-          #containerWrapper
-          class="mecx-autocomplete-wrapper"
-          [style.width.px]="initialDisplayWidth"
-        >
-          <div *ngIf="options.length > 0" class="mecx-autocomplete-options">
-            <div
-              class="mecx-autocomplete-option"
-              *ngFor="let option of options"
-              (click)="onSelect(option)"
-              [class.mecx-autocomplete-selected]="isSelected(option)"
+        <div *ngIf="options.length > 0" class="mecx-autocomplete-options">
+          <div
+            class="mecx-autocomplete-option"
+            *ngFor="let option of options"
+            (click)="onSelect(option)"
+            [class.mecx-autocomplete-selected]="isSelected(option)"
+          >
+            <ng-container
+              *ngTemplateOutlet="optionTemplate || defaultTemplate; context: { $implicit: option }"
             >
-              <ng-container
-                *ngTemplateOutlet="
-                  optionTemplate || defaultTemplate;
-                  context: { $implicit: option }
-                "
-              >
-              </ng-container>
-            </div>
+            </ng-container>
           </div>
-          @if (loading) {
-            <div class="mecx-autocomplete-loading">
-              <util-icon name="loading" />
-              {{ loadingDictionary | async }}
-            </div>
-          }
-          @if (!loading && !options.length) {
-            <div class="mecx-autocomplete-no-data">
-              <util-icon class="mecx-autocomplete-no-data-icon" name="searchFail" />
-              {{ noDataDictionary | async }}
-            </div>
-          }
         </div>
+        @if (loading) {
+          <div class="mecx-autocomplete-loading">
+            <util-icon name="loading" />
+            {{ loadingDictionary | async }}
+          </div>
+        }
+        @if (!loading && !options.length) {
+          <div class="mecx-autocomplete-no-data">
+            <util-icon class="mecx-autocomplete-no-data-icon" name="searchFail" />
+            {{ noDataDictionary | async }}
+          </div>
+        }
+      </div>
 
-        <ng-template #defaultTemplate let-option>
-          <monkey-option>
-            {{ option.description }}
-          </monkey-option>
-        </ng-template>
+      <ng-template #defaultTemplate let-option>
+        <monkey-option>
+          {{ option.description }}
+        </monkey-option>
       </ng-template>
-    }
+    </ng-template>
   `, providers: [
                         // eslint-disable-next-line no-use-before-define
                         { provide: MonkeyFormFieldControl, useExisting: MonkeyAutocompleteComponent }
@@ -2841,7 +2704,7 @@ class MonkeyAutocompleteAddressComponent {
         return this._elementRef.nativeElement;
     }
     updateWidth() {
-        this.initialDisplayWidth = this.elementTarget?.offsetWidth - 12;
+        this.initialDisplayWidth = (this.elementTarget?.offsetWidth || 0) - 12;
     }
     ngAfterContentInit() {
         this._searchEvent
@@ -2929,8 +2792,8 @@ class MonkeyAutocompleteAddressComponent {
     isSelected(option) {
         return option === this.value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAutocompleteAddressComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyAutocompleteAddressComponent, isStandalone: true, selector: "monkey-autocomplete-address", inputs: { placeholder: "placeholder", debounce: "debounce", tabIndex: "tabIndex", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur($event)" }, properties: { "attr.data-testid": "'monkey-autocomplete-address'", "class.mecx-autocomplete-address-disabled": "_disabled", "class.mecx-autocomplete-address-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-autocomplete-address" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyAutocompleteAddressComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyAutocompleteAddressComponent, isStandalone: true, selector: "monkey-autocomplete-address", inputs: { placeholder: "placeholder", debounce: "debounce", tabIndex: "tabIndex", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur($event)" }, properties: { "attr.data-testid": "'monkey-autocomplete-address'", "class.mecx-autocomplete-address-disabled": "_disabled", "class.mecx-autocomplete-address-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-autocomplete-address" }, providers: [
             // eslint-disable-next-line no-use-before-define
             { provide: MonkeyFormFieldControl, useExisting: MonkeyAutocompleteAddressComponent }
         ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }], viewQueries: [{ propertyName: "containerWrapper", first: true, predicate: ["containerWrapper"], descendants: true }], ngImport: i0, template: `
@@ -2992,16 +2855,16 @@ class MonkeyAutocompleteAddressComponent {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAutocompleteAddressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyAutocompleteAddressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-autocomplete-address', imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         MonkeyFormFieldModule,
-                        MonkeyDirectivesModule,
+                        MonkeyPopoverDirective,
                         MonkeyOptionComponent,
                         UtilIconComponent
                     ], template: `
@@ -3151,10 +3014,10 @@ class MonkeyAvatarComponent {
             this.avatar = getInitial(value.name);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyAvatarComponent, isStandalone: true, selector: "monkey-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-avatar" }, properties: { "attr.id": "_id", "id": "_id", "class": "this.classes" } }, ngImport: i0, template: "@switch (avatarType) {\n  @case ('name') {\n    <p [class]=\"size()\">{{ avatar }}</p>\n  }\n\n  @case ('icon') {\n    <monkey-icon [icon]=\"avatar\" [size]=\"size()\" />\n  }\n\n  @case ('image') {\n    <img loading=\"lazy\" [alt]=\"'Avatar ' + avatarType\" [class]=\"size()\" [src]=\"avatar\" />\n  }\n}\n", styles: ["monkey-avatar{align-items:center;background:var(--mecx-color-gray-100);border-radius:4px;display:flex;flex-shrink:0;flex-direction:column;justify-content:center}monkey-avatar.xs{height:24px;width:24px}monkey-avatar.sm{height:32px;width:32px}monkey-avatar.md{border-radius:8px;height:40px;width:40px}monkey-avatar.lg{border-radius:12px;height:48px;width:48px}monkey-avatar p{font-style:normal;font-weight:400;letter-spacing:.26px;line-height:16px}monkey-avatar p.xs{font-size:16px}monkey-avatar p.sm{font-size:18px}monkey-avatar p.md{font-size:20px}monkey-avatar p.lg{font-size:22px}monkey-avatar img{border-radius:4px;height:auto}monkey-avatar img.xs{width:24px}monkey-avatar img.sm{width:32px}monkey-avatar img.md{border-radius:8px;width:40px}monkey-avatar img.lg{border-radius:12px;width:48px}\n"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyAvatarComponent, isStandalone: true, selector: "monkey-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-avatar" }, properties: { "attr.id": "_id", "id": "_id", "class": "this.classes" } }, ngImport: i0, template: "@switch (avatarType) {\n  @case ('name') {\n    <p [class]=\"size()\">{{ avatar }}</p>\n  }\n\n  @case ('icon') {\n    <monkey-icon [icon]=\"avatar\" [size]=\"size()\" />\n  }\n\n  @case ('image') {\n    <img loading=\"lazy\" [alt]=\"'Avatar ' + avatarType\" [class]=\"size()\" [src]=\"avatar\" />\n  }\n}\n", styles: ["monkey-avatar{align-items:center;background:var(--mecx-color-gray-100);border-radius:4px;display:flex;flex-shrink:0;flex-direction:column;justify-content:center}monkey-avatar.xs{height:24px;width:24px}monkey-avatar.sm{height:32px;width:32px}monkey-avatar.md{border-radius:8px;height:40px;width:40px}monkey-avatar.lg{border-radius:12px;height:48px;width:48px}monkey-avatar p{font-style:normal;font-weight:400;letter-spacing:.26px;line-height:16px}monkey-avatar p.xs{font-size:16px}monkey-avatar p.sm{font-size:18px}monkey-avatar p.md{font-size:20px}monkey-avatar p.lg{font-size:22px}monkey-avatar img{border-radius:4px;height:auto}monkey-avatar img.xs{width:24px}monkey-avatar img.sm{width:32px}monkey-avatar img.md{border-radius:8px;width:40px}monkey-avatar img.lg{border-radius:12px;width:48px}\n"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyAvatarComponent, decorators: [{
             type: Component,
             args: [{ imports: [MonkeyIconComponent], encapsulation: ViewEncapsulation.None, selector: 'monkey-avatar', host: {
                         'data-testid': 'monkey-avatar',
@@ -3208,10 +3071,10 @@ class MonkeyBadgeComponent {
             };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyBadgeComponent, isStandalone: true, selector: "monkey-badge", inputs: { type: "type", typeColors: "typeColors", size: "size", largePadding: ["largePadding", "largePadding", booleanAttribute], icon: "icon", text: "text" }, host: { attributes: { "data-testid": "monkey-badge" }, properties: { "attr.id": "id", "style": "this.hostVariables", "class": "this.size", "class.large-padding": "this.largePadding" } }, ngImport: i0, template: "@if (text) {\n  @if (icon) {\n    <monkey-icon class=\"icon\" [icon]=\"icon\"></monkey-icon>\n  }\n  <span>\n    {{ text }}\n  </span>\n} @else {\n  <ng-content></ng-content>\n}\n", styles: [":host{gap:4px;display:inline-flex;font-weight:500;border-radius:8px;align-items:center;font-style:normal;letter-spacing:.24px;color:var(--monkey-badge-color, var(--mecx-color-gray-900));background-color:var(--monkey-badge-background, var(--mecx-color-gray-50))}:host.large-padding{padding:12px 16px}:host.sm{font-size:12px;line-height:16px;padding:4px 8px}:host.sm .icon{font-size:16px}:host.md{font-size:16px;line-height:20px;padding:8px 12px}:host.md .icon{font-size:20px}:host.lg{font-size:20px;line-height:24px;padding:12px 16px}:host.lg .icon{font-size:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyBadgeComponent, isStandalone: true, selector: "monkey-badge", inputs: { type: "type", typeColors: "typeColors", size: "size", largePadding: ["largePadding", "largePadding", booleanAttribute], icon: "icon", text: "text" }, host: { attributes: { "data-testid": "monkey-badge" }, properties: { "attr.id": "id", "style": "this.hostVariables", "class": "this.size", "class.large-padding": "this.largePadding" } }, ngImport: i0, template: "@if (text) {\n  @if (icon) {\n    <monkey-icon class=\"icon\" [icon]=\"icon\"></monkey-icon>\n  }\n  <span>\n    {{ text }}\n  </span>\n} @else {\n  <ng-content></ng-content>\n}\n", styles: [":host{gap:4px;display:inline-flex;font-weight:500;border-radius:8px;align-items:center;font-style:normal;letter-spacing:.24px;color:var(--monkey-badge-color, var(--mecx-color-gray-900));background-color:var(--monkey-badge-background, var(--mecx-color-gray-50))}:host.large-padding{padding:12px 16px}:host.sm{font-size:12px;line-height:16px;padding:4px 8px}:host.sm .icon{font-size:16px}:host.md{font-size:16px;line-height:20px;padding:8px 12px}:host.md .icon{font-size:20px}:host.lg{font-size:20px;line-height:24px;padding:12px 16px}:host.lg .icon{font-size:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-badge', imports: [CommonModule, MonkeyIconComponent], host: {
                         'data-testid': 'monkey-badge',
@@ -3274,10 +3137,10 @@ class MonkeyBreadcrumbComponent {
             this._router.navigate([item.path]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyBreadcrumbComponent, isStandalone: true, selector: "monkey-breadcrumb", inputs: { first: "first", last: "last", colapsed: ["colapsed", "colapsed", booleanAttribute], id: "id" }, host: { attributes: { "data-testid": "monkey-breadcrumb" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"breadcrumbs\">\n  <a class=\"first\" (click)=\"handleNavigate(first)\">\n    {{ first.label | titlecase }}\n  </a>\n  <span>/</span>\n  @if(colapsed){\n  <span>...</span>\n  <span>/</span>\n  }\n  <a class=\"last\" (click)=\"handleNavigate(last)\">\n    {{ last.label | titlecase }}\n  </a>\n</div>\n", styles: ["monkey-breadcrumb .last{color:var(--mecx-color-theme-main);text-decoration:none}monkey-breadcrumb .last:hover{text-decoration:underline}monkey-breadcrumb .first{color:var(--mecx-color-gray-900);text-decoration:none}monkey-breadcrumb .first:hover{text-decoration:underline}monkey-breadcrumb .breadcrumbs{display:flex;gap:var(--mecx-spaces-xs);align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyBreadcrumbComponent, isStandalone: true, selector: "monkey-breadcrumb", inputs: { first: "first", last: "last", colapsed: ["colapsed", "colapsed", booleanAttribute], id: "id" }, host: { attributes: { "data-testid": "monkey-breadcrumb" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"breadcrumbs\">\n  <a class=\"first\" (click)=\"handleNavigate(first)\">\n    {{ first.label | titlecase }}\n  </a>\n  <span>/</span>\n  @if(colapsed){\n  <span>...</span>\n  <span>/</span>\n  }\n  <a class=\"last\" (click)=\"handleNavigate(last)\">\n    {{ last.label | titlecase }}\n  </a>\n</div>\n", styles: ["monkey-breadcrumb .last{color:var(--mecx-color-theme-main);text-decoration:none}monkey-breadcrumb .last:hover{text-decoration:underline}monkey-breadcrumb .first{color:var(--mecx-color-gray-900);text-decoration:none}monkey-breadcrumb .first:hover{text-decoration:underline}monkey-breadcrumb .breadcrumbs{display:flex;gap:var(--mecx-spaces-xs);align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-breadcrumb', imports: [CommonModule], encapsulation: ViewEncapsulation.None, host: {
                         'data-testid': 'monkey-breadcrumb',
@@ -3334,10 +3197,10 @@ class MonkeyButtonComponent {
     get element() {
         return this.elementRef.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", color: "color", size: "size", type: "type", loading: "loading", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\n  <div class=\"content\">\n    <ng-content *ngIf=\"!loading\" select=\"[first]\"></ng-content>\n    <span><ng-content></ng-content></span>\n    <ng-content *ngIf=\"!loading\" select=\"[last]\"></ng-content>\n    @if (loading) {\n      <util-icon class=\"mecx-button-loading\" name=\"loading\" />\n    }\n  </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button.has-progress button:disabled{position:relative;overflow:hidden;border:2px solid var(--mecx-color-gray-400)}monkey-button.has-progress :is(.mecx-button){transition:none!important}monkey-button.has-progress :is(.mecx-button) :is(.content){transition:none!important}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button .mecx-button-loading{display:flex;background:transparent}monkey-button .mecx-button .mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-700)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-700)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.9)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { 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: "20.3.15", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", color: "color", size: "size", type: "type", loading: "loading", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\n  <div class=\"content\">\n    <ng-content *ngIf=\"!loading\" select=\"[first]\"></ng-content>\n    <span><ng-content></ng-content></span>\n    <ng-content *ngIf=\"!loading\" select=\"[last]\"></ng-content>\n    @if (loading) {\n      <util-icon class=\"mecx-button-loading\" name=\"loading\" />\n    }\n  </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button.has-progress button:disabled{position:relative;overflow:hidden;border:2px solid var(--mecx-color-gray-400)}monkey-button.has-progress :is(.mecx-button){transition:none!important}monkey-button.has-progress :is(.mecx-button) :is(.content){transition:none!important}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button .mecx-button-loading{display:flex;background:transparent}monkey-button .mecx-button .mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-700)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-700)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.9)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { 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: "20.3.14", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, imports: [UtilIconComponent, CommonModule], selector: 'monkey-button', standalone: true, host: {
                         'data-testid': 'monkey-button',
@@ -3471,8 +3334,8 @@ class MonkeyCheckboxComponent {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyCheckboxComponent, isStandalone: true, selector: "monkey-checkbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], required: ["required", "required", booleanAttribute], showFooter: ["showFooter", "showFooter", booleanAttribute], size: "size", value: "value" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "input-checkbox" }, properties: { "class.mecx-disabled": "disabled", "class.mecx-checkbox-checked": "value", "class.mecx-checkbox-focused": "isFocused", "class.mecx-checkbox-indeterminate": "indeterminate", "class.mecx-checkbox-invalid": "showInvalid", "class.sm": "size.includes(\"sm\")", "class.md": "size.includes(\"md\")", "class.lg": "size.includes(\"lg\")" }, classAttribute: "mecx-checkbox" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyCheckboxComponent, isStandalone: true, selector: "monkey-checkbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], required: ["required", "required", booleanAttribute], showFooter: ["showFooter", "showFooter", booleanAttribute], size: "size", value: "value" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "input-checkbox" }, properties: { "class.mecx-disabled": "disabled", "class.mecx-checkbox-checked": "value", "class.mecx-checkbox-focused": "isFocused", "class.mecx-checkbox-indeterminate": "indeterminate", "class.mecx-checkbox-invalid": "showInvalid", "class.sm": "size.includes(\"sm\")", "class.md": "size.includes(\"md\")", "class.lg": "size.includes(\"lg\")" }, classAttribute: "mecx-checkbox" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => {
@@ -3504,7 +3367,7 @@ class MonkeyCheckboxComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-checkbox', imports: [ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('iconAnimation', [
@@ -3709,8 +3572,8 @@ class MonkeyInputCurrencyDirective {
     focusOutChanged() {
         this.ngControl?.control?.markAsTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputCurrencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.14", type: MonkeyInputCurrencyDirective, isStandalone: false, selector: "input[monkey-input-currency]", inputs: { name: "name", disabled: ["disabled", "disabled", booleanAttribute], id: "id", required: "required", type: "type" }, host: { listeners: { "focus": "focusChanged(true)", "focusout": "focusOutChanged()", "blur": "focusChanged(false)" }, properties: { "class.mecx-input-disabled": "disabled", "id": "id", "disabled": "disabled", "required": "required", "attr.name": "name || null", "attr.disabled": "disabled || null", "attr.aria-invalid": "(empty && required) ? null : errorState", "attr.aria-required": "required", "attr.id": "id" }, classAttribute: "mecx-input" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputCurrencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: MonkeyInputCurrencyDirective, isStandalone: false, selector: "input[monkey-input-currency]", inputs: { name: "name", disabled: ["disabled", "disabled", booleanAttribute], id: "id", required: "required", type: "type" }, host: { listeners: { "focus": "focusChanged(true)", "focusout": "focusOutChanged()", "blur": "focusChanged(false)" }, properties: { "class.mecx-input-disabled": "disabled", "id": "id", "disabled": "disabled", "required": "required", "attr.name": "name || null", "attr.disabled": "disabled || null", "attr.aria-invalid": "(empty && required) ? null : errorState", "attr.aria-required": "required", "attr.id": "id" }, classAttribute: "mecx-input" }, providers: [
             {
                 provide: MonkeyFormFieldControl,
                 // eslint-disable-next-line no-use-before-define
@@ -3718,7 +3581,7 @@ class MonkeyInputCurrencyDirective {
             }
         ], exportAs: ["monkeyInput"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputCurrencyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputCurrencyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[monkey-input-currency]',
@@ -3901,8 +3764,8 @@ class MonkeyInputDirective {
     focusOutChanged() {
         this.ngControl?.control?.markAsTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.14", type: MonkeyInputDirective, isStandalone: false, selector: "input[monkey-input],textarea[monkey-input]", inputs: { name: "name", disabled: ["disabled", "disabled", booleanAttribute], id: "id", required: "required", type: "type", min: "min", max: "max", percent: "percent" }, host: { attributes: { "data-testid": "monkey-input" }, listeners: { "focus": "focusChanged(true)", "focusout": "focusOutChanged()", "blur": "focusChanged(false)" }, properties: { "class.mecx-input-disabled": "disabled", "id": "id", "disabled": "disabled", "required": "required", "attr.name": "name || null", "attr.disabled": "disabled || null", "attr.aria-invalid": "(empty && required) ? null : errorState", "attr.aria-required": "required", "attr.id": "id" }, classAttribute: "mecx-input" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: MonkeyInputDirective, isStandalone: false, selector: "input[monkey-input],textarea[monkey-input]", inputs: { name: "name", disabled: ["disabled", "disabled", booleanAttribute], id: "id", required: "required", type: "type", min: "min", max: "max", percent: "percent" }, host: { attributes: { "data-testid": "monkey-input" }, listeners: { "focus": "focusChanged(true)", "focusout": "focusOutChanged()", "blur": "focusChanged(false)" }, properties: { "class.mecx-input-disabled": "disabled", "id": "id", "disabled": "disabled", "required": "required", "attr.name": "name || null", "attr.disabled": "disabled || null", "attr.aria-invalid": "(empty && required) ? null : errorState", "attr.aria-required": "required", "attr.id": "id" }, classAttribute: "mecx-input" }, providers: [
             {
                 provide: MonkeyFormFieldControl,
                 // eslint-disable-next-line no-use-before-define
@@ -3910,7 +3773,7 @@ class MonkeyInputDirective {
             }
         ], exportAs: ["monkeyInput"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[monkey-input],textarea[monkey-input]',
@@ -3965,11 +3828,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * MIT Licence
  ************************* */
 class MonkeyInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputModule, declarations: [MonkeyInputDirective, MonkeyInputCurrencyDirective], exports: [MonkeyInputDirective, MonkeyInputCurrencyDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputModule, providers: [CurrencyPipe] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputModule, declarations: [MonkeyInputDirective, MonkeyInputCurrencyDirective], exports: [MonkeyInputDirective, MonkeyInputCurrencyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputModule, providers: [CurrencyPipe] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [CurrencyPipe],
@@ -4012,10 +3875,10 @@ class MonkeyIconButtonComponent {
             event.stopImmediatePropagation();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyIconButtonComponent, isStandalone: true, selector: "monkey-icon-button", inputs: { type: "type", size: "size", disabled: "disabled", icon: "icon", loading: "loading", id: "id" }, host: { attributes: { "data-testid": "monkey-icon-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled || loading\">\n  <div class=\"content\">\n    @if (loading) {\n      <util-icon class=\"mecx-icon-loading\" name=\"loading\" />\n    }\n    <monkey-icon *ngIf=\"!loading\" name=\"icon\" [icon]=\"icon\" [size]=\"size\" first></monkey-icon>\n  </div>\n</button>\n", styles: ["monkey-icon-button{display:inline-block;margin:0 2px}monkey-icon-button .mecx-icon-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-icon-button .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:var(--mecx-spaces-small);transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-icon-button .mecx-icon-button .content span{width:100%}monkey-icon-button .mecx-icon-button .content .mk-i{display:flex}monkey-icon-button .mecx-icon-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-icon-button .mecx-icon-button.secondary:disabled{border-width:1px}monkey-icon-button .mecx-icon-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-icon-button .mecx-icon-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-icon-button .mecx-icon-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.tertiary{background:unset}monkey-icon-button .mecx-icon-button.tertiary span{text-decoration:underline}monkey-icon-button .mecx-icon-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-icon-button .mecx-icon-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.sm{width:32px;height:32px}monkey-icon-button .mecx-icon-button.sm .mk-i{font-size:16px}monkey-icon-button .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button .mecx-icon-button.md .mk-i{font-size:18px}monkey-icon-button .mecx-icon-button.lg{width:48px;height:48px}monkey-icon-button .mecx-icon-button.lg .mk-i{font-size:24px}monkey-icon-button .mecx-icon-button.full-width{width:100%}monkey-icon-button .mecx-icon-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-icon-button .mecx-icon-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-icon-button .mecx-icon-button:active:not(:disabled) .content{transform:scale(.8)}.mecx-icon-loading{display:flex}.mecx-icon-loading svg path{fill:var(--mecx-color-theme-main)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyIconButtonComponent, isStandalone: true, selector: "monkey-icon-button", inputs: { type: "type", size: "size", disabled: "disabled", icon: "icon", loading: "loading", id: "id" }, host: { attributes: { "data-testid": "monkey-icon-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled || loading\">\n  <div class=\"content\">\n    @if (loading) {\n      <util-icon class=\"mecx-icon-loading\" name=\"loading\" />\n    }\n    <monkey-icon *ngIf=\"!loading\" name=\"icon\" [icon]=\"icon\" [size]=\"size\" first></monkey-icon>\n  </div>\n</button>\n", styles: ["monkey-icon-button{display:inline-block;margin:0 2px}monkey-icon-button .mecx-icon-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-icon-button .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:var(--mecx-spaces-small);transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-icon-button .mecx-icon-button .content span{width:100%}monkey-icon-button .mecx-icon-button .content .mk-i{display:flex}monkey-icon-button .mecx-icon-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-icon-button .mecx-icon-button.secondary:disabled{border-width:1px}monkey-icon-button .mecx-icon-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-icon-button .mecx-icon-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-icon-button .mecx-icon-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.tertiary{background:unset}monkey-icon-button .mecx-icon-button.tertiary span{text-decoration:underline}monkey-icon-button .mecx-icon-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-icon-button .mecx-icon-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.sm{width:32px;height:32px}monkey-icon-button .mecx-icon-button.sm .mk-i{font-size:16px}monkey-icon-button .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button .mecx-icon-button.md .mk-i{font-size:18px}monkey-icon-button .mecx-icon-button.lg{width:48px;height:48px}monkey-icon-button .mecx-icon-button.lg .mk-i{font-size:24px}monkey-icon-button .mecx-icon-button.full-width{width:100%}monkey-icon-button .mecx-icon-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-icon-button .mecx-icon-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-icon-button .mecx-icon-button:active:not(:disabled) .content{transform:scale(.8)}.mecx-icon-loading{display:flex}.mecx-icon-loading svg path{fill:var(--mecx-color-theme-main)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyIconButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyIconButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-icon-button', imports: [CommonModule, MonkeyIconComponent, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
                         'data-testid': 'monkey-icon-button',
@@ -4247,10 +4110,10 @@ class MonkeyDateRangeMonthComponent {
             endDate: this._handledEndDate
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDateRangeMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyDateRangeMonthComponent, isStandalone: true, selector: "monkey-date-range-month", inputs: { month: "month", year: "year", startDate: "startDate", endDate: "endDate", hidePrevious: ["hidePrevious", "hidePrevious", booleanAttribute], hideNext: ["hideNext", "hideNext", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onNavigate: "onNavigate", onDate: "onDate" }, host: { attributes: { "data-testid": "month" }, properties: { "attr.id": "id", "id": "id" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  <div class=\"header\">\n    @if (!hidePrevious) {\n      <monkey-icon-button\n        size=\"sm\"\n        icon=\"arrow-left\"\n        type=\"secondary\"\n        class=\"previous\"\n        [disabled]=\"daysInMonth.blockPrev\"\n        (click)=\"onNavigate.next('previous')\"\n      >\n      </monkey-icon-button>\n    }\n\n    {{ i18n?.['MONTHS']?.[month] }} {{ year }}\n\n    @if (!hideNext) {\n      <monkey-icon-button\n        size=\"sm\"\n        icon=\"arrow-right\"\n        type=\"secondary\"\n        class=\"next\"\n        [disabled]=\"daysInMonth.blockNext\"\n        (click)=\"onNavigate.next('next')\"\n      >\n      </monkey-icon-button>\n    }\n  </div>\n\n  <div class=\"week-labels\">\n    @for (day of i18n?.['WEEK-DAYS']; track day) {\n      <span class=\"day\">{{ day }}</span>\n    }\n  </div>\n\n  <div class=\"dates\">\n    @for (day of daysInMonth.days; track $index) {\n      <div\n        class=\"day\"\n        [class.disabled]=\"day!.isDisabled\"\n        [class.in-range]=\"isInRange(day!)\"\n        [class.selected]=\"isSelected(day!)\"\n        [class.first]=\"isFirst(day!)\"\n        [class.last]=\"isLast(day!)\"\n        [class.in-range-temporary]=\"isInRangeTemporary(day!)\"\n        [class.temporary-last]=\"isInLastTemporary(day!)\"\n        (click)=\"onSelectDate($event, day!)\"\n        (mouseenter)=\"temporaryEndDate = day!\"\n        (mouseleave)=\"temporaryEndDate = null\"\n      >\n        {{ day!.date | date: 'd' }}\n        @if (day?.isToday) {\n          <span class=\"today\"></span>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", styles: [":host{width:100%}:host .header{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px}:host .header monkey-icon-button{max-width:32px;background:transparent}:host .header monkey-icon-button.previous{position:absolute;left:0}:host .header monkey-icon-button.next{position:absolute;right:0}:host .week-labels{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:700;font-size:.9rem;margin-bottom:4px;gap:12px 0}:host .week-labels .day{height:24px;border:none;background:transparent;text-align:center;display:flex;align-items:center;justify-content:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px}:host .dates{display:grid;grid-template-columns:repeat(7,1fr);gap:12px 0}:host .dates .day{height:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;position:relative;border:1px solid transparent;-webkit-user-select:none;user-select:none}:host .dates .day .today{position:absolute;width:60%;bottom:1px;font-size:36px;letter-spacing:1.48!important}:host .dates .day .today:not(.selected){border-bottom:2px solid var(--mecx-color-theme-main)}:host .dates .day.disabled{color:var(--mecx-color-gray-400);font-weight:400;cursor:not-allowed}:host .dates .day.selected{background-color:var(--mecx-color-theme-main)!important;color:var(--mecx-color-white)!important}:host .dates .day.in-range{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.in-range-temporary{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.first,:host .dates .day.last{background-color:var(--mecx-color-theme-main);color:var(--mecx-color-white)}:host .dates .day.first{border-top-left-radius:8px;border-bottom-left-radius:8px}:host .dates .day.last,:host .dates .day.temporary-last{border-top-right-radius:8px;border-bottom-right-radius:8px}:host .dates .day:hover:not(.disabled,.in-range):before{content:\"\";border:1px solid var(--mecx-color-theme-main);border-radius:8px;height:100%;width:100%;position:absolute}:host .dates .day:hover:not(.disabled,.in-range).selected{background:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDateRangeMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyDateRangeMonthComponent, isStandalone: true, selector: "monkey-date-range-month", inputs: { month: "month", year: "year", startDate: "startDate", endDate: "endDate", hidePrevious: ["hidePrevious", "hidePrevious", booleanAttribute], hideNext: ["hideNext", "hideNext", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onNavigate: "onNavigate", onDate: "onDate" }, host: { attributes: { "data-testid": "month" }, properties: { "attr.id": "id", "id": "id" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  <div class=\"header\">\n    @if (!hidePrevious) {\n      <monkey-icon-button\n        size=\"sm\"\n        icon=\"arrow-left\"\n        type=\"secondary\"\n        class=\"previous\"\n        [disabled]=\"daysInMonth.blockPrev\"\n        (click)=\"onNavigate.next('previous')\"\n      >\n      </monkey-icon-button>\n    }\n\n    {{ i18n?.['MONTHS']?.[month] }} {{ year }}\n\n    @if (!hideNext) {\n      <monkey-icon-button\n        size=\"sm\"\n        icon=\"arrow-right\"\n        type=\"secondary\"\n        class=\"next\"\n        [disabled]=\"daysInMonth.blockNext\"\n        (click)=\"onNavigate.next('next')\"\n      >\n      </monkey-icon-button>\n    }\n  </div>\n\n  <div class=\"week-labels\">\n    @for (day of i18n?.['WEEK-DAYS']; track day) {\n      <span class=\"day\">{{ day }}</span>\n    }\n  </div>\n\n  <div class=\"dates\">\n    @for (day of daysInMonth.days; track $index) {\n      <div\n        class=\"day\"\n        [class.disabled]=\"day!.isDisabled\"\n        [class.in-range]=\"isInRange(day!)\"\n        [class.selected]=\"isSelected(day!)\"\n        [class.first]=\"isFirst(day!)\"\n        [class.last]=\"isLast(day!)\"\n        [class.in-range-temporary]=\"isInRangeTemporary(day!)\"\n        [class.temporary-last]=\"isInLastTemporary(day!)\"\n        (click)=\"onSelectDate($event, day!)\"\n        (mouseenter)=\"temporaryEndDate = day!\"\n        (mouseleave)=\"temporaryEndDate = null\"\n      >\n        {{ day!.date | date: 'd' }}\n        @if (day?.isToday) {\n          <span class=\"today\"></span>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", styles: [":host{width:100%}:host .header{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px}:host .header monkey-icon-button{max-width:32px;background:transparent}:host .header monkey-icon-button.previous{position:absolute;left:0}:host .header monkey-icon-button.next{position:absolute;right:0}:host .week-labels{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:700;font-size:.9rem;margin-bottom:4px;gap:12px 0}:host .week-labels .day{height:24px;border:none;background:transparent;text-align:center;display:flex;align-items:center;justify-content:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px}:host .dates{display:grid;grid-template-columns:repeat(7,1fr);gap:12px 0}:host .dates .day{height:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;position:relative;border:1px solid transparent;-webkit-user-select:none;user-select:none}:host .dates .day .today{position:absolute;width:60%;bottom:1px;font-size:36px;letter-spacing:1.48!important}:host .dates .day .today:not(.selected){border-bottom:2px solid var(--mecx-color-theme-main)}:host .dates .day.disabled{color:var(--mecx-color-gray-400);font-weight:400;cursor:not-allowed}:host .dates .day.selected{background-color:var(--mecx-color-theme-main)!important;color:var(--mecx-color-white)!important}:host .dates .day.in-range{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.in-range-temporary{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.first,:host .dates .day.last{background-color:var(--mecx-color-theme-main);color:var(--mecx-color-white)}:host .dates .day.first{border-top-left-radius:8px;border-bottom-left-radius:8px}:host .dates .day.last,:host .dates .day.temporary-last{border-top-right-radius:8px;border-bottom-right-radius:8px}:host .dates .day:hover:not(.disabled,.in-range):before{content:\"\";border:1px solid var(--mecx-color-theme-main);border-radius:8px;height:100%;width:100%;position:absolute}:host .dates .day:hover:not(.disabled,.in-range).selected{background:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDateRangeMonthComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDateRangeMonthComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-date-range-month', imports: [CommonModule, MonkeyIconButtonComponent], host: {
                         'data-testid': 'month',
@@ -4316,10 +4179,10 @@ class MonkeyDateRangeQuickActionsComponent {
         this.selectedAction = key;
         this.onChange.next(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDateRangeQuickActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyDateRangeQuickActionsComponent, isStandalone: true, selector: "monkey-date-range-quick-actions", inputs: { id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "quick-actions" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  @for (item of actions; track item.key) {\n    <div\n      class=\"item\"\n      [class.selected]=\"item.key === selectedAction\"\n      (click)=\"onHandleAction(item)\"\n      [attr.tabindex]=\"$index\"\n    >\n      {{ i18n?.['QUICK-ACTIONS']?.[item.key] }}\n    </div>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:24px 8px 12px 12px;gap:4px}:host .item{color:var(--mecx-color-gray-900);font-size:13px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.26px;padding:4px 12px;cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none;border-radius:4px}:host .item.selected{border-radius:4px;background:var(--mecx-color-gray-100)}:host .item:hover{border-radius:4px;background:var(--mecx-color-gray-100)}:host .item:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDateRangeQuickActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyDateRangeQuickActionsComponent, isStandalone: true, selector: "monkey-date-range-quick-actions", inputs: { id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "quick-actions" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  @for (item of actions; track item.key) {\n    <div\n      class=\"item\"\n      [class.selected]=\"item.key === selectedAction\"\n      (click)=\"onHandleAction(item)\"\n      [attr.tabindex]=\"$index\"\n    >\n      {{ i18n?.['QUICK-ACTIONS']?.[item.key] }}\n    </div>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:24px 8px 12px 12px;gap:4px}:host .item{color:var(--mecx-color-gray-900);font-size:13px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.26px;padding:4px 12px;cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none;border-radius:4px}:host .item.selected{border-radius:4px;background:var(--mecx-color-gray-100)}:host .item:hover{border-radius:4px;background:var(--mecx-color-gray-100)}:host .item:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDateRangeQuickActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDateRangeQuickActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-date-range-quick-actions', imports: [CommonModule], host: {
                         'data-testid': 'quick-actions',
@@ -4511,17 +4374,18 @@ class MonkeyDateRangeComponent {
         this.firstCalendar = calendars.firstCalendar;
         this.secondCalendar = calendars.secondCalendar;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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", "displayOnly"], outputs: ["onDisplayOnlyChange"], 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", "loading", "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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "directive", type: MonkeyLabelDirective, selector: "monkey-label" }, { kind: "directive", type: MonkeyErrorDirective, selector: "monkey-error" }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-date-range', imports: [
                         CommonModule,
                         FormsModule,
                         MonkeyInputModule,
                         MonkeyFormFieldModule,
-                        MonkeyDirectivesModule,
+                        MonkeyLabelDirective,
+                        MonkeyErrorDirective,
                         MonkeyButtonComponent,
                         MonkeyDateRangeMonthComponent,
                         MonkeyDateRangeQuickActionsComponent
@@ -4594,10 +4458,10 @@ class MonkeyDividerComponent {
         // eslint-disable-next-line no-self-assign
         this.id = this.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: MonkeyDividerComponent, isStandalone: true, selector: "monkey-divider", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-divider" }, properties: { "attr.id": "id", "id": "id", "class": "this.classes" } }, ngImport: i0, template: '', isInline: true, styles: ["monkey-divider{display:flex;box-sizing:border-box;width:100%;background-color:var(--mecx-color-gray-200)}monkey-divider.lg{height:4px}monkey-divider.lg.vertical{width:4px!important}monkey-divider.md{height:2px}monkey-divider.md.vertical{width:2px!important}monkey-divider.sm{height:1px}monkey-divider.sm.vertical{width:1px!important}monkey-divider.vertical{height:100%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: MonkeyDividerComponent, isStandalone: true, selector: "monkey-divider", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-divider" }, properties: { "attr.id": "id", "id": "id", "class": "this.classes" } }, ngImport: i0, template: '', isInline: true, styles: ["monkey-divider{display:flex;box-sizing:border-box;width:100%;background-color:var(--mecx-color-gray-200)}monkey-divider.lg{height:4px}monkey-divider.lg.vertical{width:4px!important}monkey-divider.md{height:2px}monkey-divider.md.vertical{width:2px!important}monkey-divider.sm{height:1px}monkey-divider.sm.vertical{width:1px!important}monkey-divider.vertical{height:100%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDividerComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-divider', standalone: true, template: '', host: {
                         'data-testid': 'monkey-divider',
@@ -4652,8 +4516,8 @@ class MonkeyDownloadButtonComponent {
     onDownload() {
         this.onChange.emit({ component: this });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDownloadButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyDownloadButtonComponent, isStandalone: true, selector: "monkey-download-button", inputs: { progress: "progress", disabled: "disabled", color: "color", size: "size", type: "type", loading: "loading", tabIndex: "tabIndex", id: "id" }, outputs: { onChange: "onChange" }, host: { properties: { "attr.data-testid": "'monkey-download-button'", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-download-button" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDownloadButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyDownloadButtonComponent, isStandalone: true, selector: "monkey-download-button", inputs: { progress: "progress", disabled: "disabled", color: "color", size: "size", type: "type", loading: "loading", tabIndex: "tabIndex", id: "id" }, outputs: { onChange: "onChange" }, host: { properties: { "attr.data-testid": "'monkey-download-button'", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-download-button" }, ngImport: i0, template: `
     <monkey-button
       [type]="type"
       [color]="color"
@@ -4679,7 +4543,7 @@ class MonkeyDownloadButtonComponent {
     </monkey-button>
   `, isInline: true, styles: [":host{display:inline-flex}:host .content-download{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}:host .content-download-progress{position:absolute;left:0;top:0;height:100%;color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main);z-index:1;font-weight:500;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:var(--mecx-button-progress);transition:width .01s ease-in-out;text-align:right}:host .content-download-progress:before,:host .content-download-progress:after{content:\"\";position:absolute;width:200px;height:200px;top:50%;right:-8px;background:var(--mecx-color-theme-main);border-radius:45% 47% 43% 46%;transform:translateY(-50%) rotate(0);animation:rotate 7s linear infinite;z-index:-1}:host .content-download-progress:after{content:\"\";border-radius:47% 42% 46% 44%;background:var(--mecx-color-theme-300);transform:translateY(-50%) rotate(0);animation:rotate 9s linear -4s infinite;z-index:-2;width:140px;height:150px}@keyframes rotate{50%{transform:translateY(-50%) rotate(180deg)}to{transform:translateY(-50%) rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDownloadButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyDownloadButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-download-button', imports: [CommonModule, MonkeyButtonComponent], template: `
     <monkey-button
@@ -4758,8 +4622,8 @@ class MonkeyFilterBarComponent {
         this.elementTarget = el.element;
         this.showPopOver = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-filter-bar'", "class.mecx-filter-bar-disabled": "_disabled", "class.mecx-filter-bar-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-filter-bar" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-filter-bar'", "class.mecx-filter-bar-disabled": "_disabled", "class.mecx-filter-bar-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-filter-bar" }, usesOnChanges: true, ngImport: i0, template: `
     <monkey-form-field>
       <input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
     </monkey-form-field>
@@ -4784,16 +4648,15 @@ class MonkeyFilterBarComponent {
       <monkey-option> Data de Emissão </monkey-option>
       <monkey-option> Data de Vencimento </monkey-option>
     </ng-template>
-  `, isInline: true, styles: [":host{width:100%;display:inline-flex;min-width:0;gap:12px}:host .mecx-form-field{width:100%;max-width:400px}:host .btn-filter{width:100%;max-width:160px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { 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", "monkeyPopoverEnableAutofocus"] }, { 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: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }] }); }
+  `, isInline: true, styles: [":host{width:100%;display:inline-flex;min-width:0;gap:12px}:host .mecx-form-field{width:100%;max-width:400px}:host .btn-filter{width:100%;max-width:160px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { 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: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-filter-bar', imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         MonkeyFormFieldModule,
-                        MonkeyDirectivesModule,
                         MonkeyFormFieldModule,
                         MonkeyInputModule,
                         MonkeyButtonComponent,
@@ -5037,13 +4900,13 @@ class MonkeyInputCodeComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputCodeComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyInputCodeComponent, isStandalone: true, selector: "monkey-input-code", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-input-code" }, properties: { "attr.id": "id", "id": "id" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputCodeComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyInputCodeComponent, isStandalone: true, selector: "monkey-input-code", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-input-code" }, properties: { "attr.id": "id", "id": "id" } }, providers: [
             // eslint-disable-next-line no-use-before-define
             { provide: MonkeyFormFieldControl, useExisting: MonkeyInputCodeComponent }
         ], viewQueries: [{ propertyName: "inputs", predicate: ["codeInput"], descendants: true }], ngImport: i0, template: "<div class=\"monkey-input-code\">\n  @for (idx of inputIndices(); track $index; let i = $index) {\n    <input\n      #codeInput\n      class=\"focus\"\n      autocomplete=\"one-time-code\"\n      [attr.type]=\"inputType()\"\n      [disabled]=\"_disabled\"\n      [attr.maxlength]=\"1\"\n      [class.invalid]=\"isInvalid()\"\n      [(ngModel)]=\"inputIndices()[i]\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event, i)\"\n      (keydown)=\"onKeyDown($event, i)\"\n      (paste)=\"onPaste($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n</div>\n", styles: [".monkey-input-code{display:flex;gap:12px}.monkey-input-code input{box-sizing:border-box;border-radius:4px;border:2px solid var(--mecx-color-gray-400);color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;letter-spacing:.14px;line-height:24px;text-align:center}.monkey-input-code input:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:2px}.monkey-input-code input.invalid{border:2px solid var(--mecx-color-error-700)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputCodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputCodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-input-code', imports: [CommonModule, FormsModule], host: {
                         'data-testid': 'monkey-input-code',
@@ -5217,8 +5080,8 @@ class MonkeyInputDateRangeComponent {
             // not to do
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputDateRangeComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputDateRangeComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.15", 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: `
@@ -5249,16 +5112,16 @@ class MonkeyInputDateRangeComponent {
       >
       </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: "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", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+  `, 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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputDateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-input-date-range', imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         MonkeyFormFieldModule,
-                        MonkeyDirectivesModule,
+                        MonkeyPopoverDirective,
                         MonkeyDateRangeComponent
                     ], template: `
     <span #popoverTarget (click)="onOpenPopover()">
@@ -5704,8 +5567,8 @@ class MonkeySelectComponent {
             // not to do
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", 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: "20.3.14", type: MonkeySelectComponent, isStandalone: true, selector: "monkey-select", inputs: { tabIndex: "tabIndex", placeholder: "placeholder", loading: ["loading", "loading", booleanAttribute], showSearch: ["showSearch", "showSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder", type: "type", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, 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: "20.3.15", 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: "20.3.15", type: MonkeySelectComponent, isStandalone: true, selector: "monkey-select", inputs: { tabIndex: "tabIndex", placeholder: "placeholder", loading: ["loading", "loading", booleanAttribute], showSearch: ["showSearch", "showSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder", type: "type", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
@@ -5728,7 +5591,7 @@ class MonkeySelectComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeySelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-select', imports: [CommonModule, ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         // eslint-disable-next-line no-use-before-define
@@ -6009,8 +5872,8 @@ class MonkeyInputPhoneComponent {
             return 20;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputPhoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputPhoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: `
@@ -6044,7 +5907,7 @@ class MonkeyInputPhoneComponent {
     />
   `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host monkey-select{width:164px;border-right:2px solid var(--mecx-color-gray-400)}:host.mecx-input-phone-disabled monkey-select{border-right:2px solid var(--mecx-color-gray-200)}: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: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.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", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputPhoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputPhoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-input-phone', imports: [
                         CommonModule,
@@ -6270,8 +6133,8 @@ class MonkeyInputUploadComponent {
             };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInputUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: `
@@ -6292,7 +6155,7 @@ class MonkeyInputUploadComponent {
     }
   `, 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:4px;background-color:var(--mecx-color-gray-300);width:100%}:host .progress .progress-bar{background-color:var(--mecx-color-theme-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: "20.3.14", ngImport: i0, type: MonkeyInputUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyInputUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-input-upload', imports: [], template: `
     <div class="mecx-input-upload-value" [class.has-value]="value">
@@ -6367,10 +6230,10 @@ class MonkeyModalActionsDirective {
         this.mkAlign = 'end';
         this.id = inject(IdGenerator).getId('monkey-modal-actions-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyModalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyModalActionsDirective, isStandalone: false, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: { mkAlign: "mkAlign" }, host: { properties: { "class": "'mecx-modal-actions align-'+mkAlign", "attr.id": "id || null" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyModalActionsDirective, isStandalone: false, 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: "20.3.14", ngImport: i0, type: MonkeyModalActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'monkey-modal-actions, [monkey-modal-actions]',
@@ -6393,10 +6256,10 @@ class MonkeyModalContentDirective {
     constructor() {
         this.id = inject(IdGenerator).getId('monkey-modal-content-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyModalContentDirective, isStandalone: false, selector: "monkey-modal-content, [monkey-modal-content]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-content" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyModalContentDirective, isStandalone: false, 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: "20.3.14", ngImport: i0, type: MonkeyModalContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'monkey-modal-content, [monkey-modal-content]',
@@ -6417,10 +6280,10 @@ class MonkeyModalSubtitleDirective {
     constructor() {
         this.id = inject(IdGenerator).getId('monkey-modal-subtitle-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyModalSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyModalSubtitleDirective, isStandalone: false, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-subtitle" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyModalSubtitleDirective, isStandalone: false, 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: "20.3.14", ngImport: i0, type: MonkeyModalSubtitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'monkey-modal-subtitle, [monkey-modal-subtitle]',
@@ -6441,10 +6304,10 @@ class MonkeyModalTitleDirective {
     constructor() {
         this.id = inject(IdGenerator).getId('monkey-modal-title-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyModalTitleDirective, isStandalone: false, selector: "monkey-modal-title, [monkey-modal-title]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-title" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyModalTitleDirective, isStandalone: false, 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: "20.3.14", ngImport: i0, type: MonkeyModalTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'monkey-modal-title, [monkey-modal-title]',
@@ -6563,8 +6426,8 @@ class MonkeyModalComponent {
             this.modalRef?.close();
         }, 150);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", 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: "20.3.14", type: MonkeyModalComponent, isStandalone: false, selector: "monkey-modal", host: { attributes: { "tabindex": "-1" }, properties: { "attr.id": "modalRef?.id || null" }, classAttribute: "mecx-modal" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", type: MonkeyModalComponent, isStandalone: false, 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">
@@ -6597,7 +6460,7 @@ class MonkeyModalComponent {
     <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", "loading", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-modal', template: `
     <div class="mecx-modal-header">
@@ -6681,8 +6544,8 @@ class MonkeyModalDefaultComponent {
     onClose() {
         this.modalRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", 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: "20.3.14", type: MonkeyModalDefaultComponent, isStandalone: false, selector: "monkey-modal-default", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", type: MonkeyModalDefaultComponent, isStandalone: false, 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>
@@ -6694,7 +6557,7 @@ class MonkeyModalDefaultComponent {
     </monkey-modal>
   `, isInline: true, dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "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: "20.3.14", ngImport: i0, type: MonkeyModalDefaultComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalDefaultComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'monkey-modal-default',
@@ -6736,8 +6599,8 @@ class MonkeyModalConfirmationComponent {
     onClose() {
         this.modalRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", 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: "20.3.14", type: MonkeyModalConfirmationComponent, isStandalone: false, selector: "monkey-modal-confirmation", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", type: MonkeyModalConfirmationComponent, isStandalone: false, selector: "monkey-modal-confirmation", ngImport: i0, template: `
     <monkey-modal class="modal-confirmation">
       <monkey-modal-content>
         @if (config.icon) {
@@ -6755,7 +6618,7 @@ class MonkeyModalConfirmationComponent {
     </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", "color", "size", "type", "loading", "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: "20.3.14", ngImport: i0, type: MonkeyModalConfirmationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalConfirmationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-modal-confirmation', encapsulation: ViewEncapsulation.None, template: `
     <monkey-modal class="modal-confirmation">
@@ -6788,8 +6651,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * MIT Licence
  ************************* */
 class MonkeyModalModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MonkeyModalModule, declarations: [MonkeyModalComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalModule, declarations: [MonkeyModalComponent,
             MonkeyModalDefaultComponent,
             MonkeyModalConfirmationComponent,
             MonkeyModalTitleDirective,
@@ -6800,9 +6663,9 @@ class MonkeyModalModule {
             MonkeyModalSubtitleDirective,
             MonkeyModalContentDirective,
             MonkeyModalActionsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyModalModule, imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalModule, imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent],
@@ -6957,10 +6820,10 @@ class MonkeyModalService {
         });
         this.openDialogs.splice(0, this.openDialogs.length);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -7101,13 +6964,13 @@ class MonkeyRadioButtonComponent {
         this.disabled = isDisabled;
         this.initializeOptions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", 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: "20.3.14", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", 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 monkey-option{transition:none!important}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: "20.3.14", ngImport: i0, type: MonkeyRadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyRadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-radiobutton', imports: [CommonModule, ReactiveFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         // eslint-disable-next-line no-use-before-define
@@ -7191,10 +7054,10 @@ class MonkeySecurityLevelComponent {
         // eslint-disable-next-line no-self-assign
         this.id = this.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeySecurityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", 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: "20.3.15", ngImport: i0, type: MonkeySecurityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", 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: "20.3.14", ngImport: i0, type: MonkeySecurityLevelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeySecurityLevelComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule], selector: 'monkey-security-level', host: {
                         'data-testid': 'monkey-security-level',
@@ -7237,10 +7100,10 @@ class MonkeyStatusComponent {
         // eslint-disable-next-line no-self-assign
         this.id = this.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: MonkeyStatusComponent, isStandalone: true, selector: "monkey-status", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-status" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:var(--mecx-color-success-main)}:host.warning .status{background-color:var(--mecx-color-warning-main)}:host.error .status{background-color:var(--mecx-color-error-700)}:host.question .status{background-color:var(--mecx-color-question-main)}:host.info .status{background-color:var(--mecx-color-info)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: MonkeyStatusComponent, isStandalone: true, selector: "monkey-status", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-status" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:var(--mecx-color-success-main)}:host.warning .status{background-color:var(--mecx-color-warning-main)}:host.error .status{background-color:var(--mecx-color-error-700)}:host.question .status{background-color:var(--mecx-color-question-main)}:host.info .status{background-color:var(--mecx-color-info)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-status', imports: [CommonModule], host: {
                         'data-testid': 'monkey-status',
@@ -7283,8 +7146,8 @@ class MonkeyStepComponent {
             this.hasSubSteps = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyStepComponent, isStandalone: false, selector: "monkey-step", inputs: { label: "label", step: "step", icon: "icon" }, host: { attributes: { "data-testid": "monkey-step" }, properties: { "attr.id": "id", "id": "id" } }, queries: [{ propertyName: "subSteps", predicate: MonkeyStepComponent }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyStepComponent, isStandalone: false, selector: "monkey-step", inputs: { label: "label", step: "step", icon: "icon" }, host: { attributes: { "data-testid": "monkey-step" }, properties: { "attr.id": "id", "id": "id" } }, queries: [{ propertyName: "subSteps", predicate: MonkeyStepComponent }], ngImport: i0, template: `
     <div
       class="item"
       [class.active]="isActive"
@@ -7319,7 +7182,7 @@ class MonkeyStepComponent {
     }
   `, isInline: true, styles: [":host{display:block}:host .item{display:flex;gap:var(--mecx-spaces-xs);align-items:center}:host .step .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid 1px var(--mecx-color-gray-700);box-sizing:border-box;width:18px;height:18px}:host .step .number.icon{border:none}:host .label{display:flex;align-items:center;gap:var(--mecx-spaces-xs);justify-content:space-between;width:100%}@media (max-width: 575.98px){:host .label{text-align:center}}:host .substeps{display:flex;flex-direction:column;gap:var(--mecx-spaces-xs);margin-top:var(--mecx-spaces-small);margin-left:18px}:host .substeps .number{display:none}:host .active{color:var(--mecx-color-gray-900)}:host .active .number{border-color:var(--mecx-color-theme-main);color:var(--mecx-color-theme-main)}:host .current{color:var(--mecx-color-theme-main)}:host .current .number{border-color:var(--mecx-color-theme-main)}:host .current-icon{display:flex;align-items:center;color:var(--mecx-color-theme-main)}:host .current-icon monkey-icon{color:var(--mecx-color-theme-main)}:host .complete .number{border-color:var(--mecx-color-success-main);background:var(--mecx-color-success-main);color:var(--mecx-color-white)}:host .complete .number monkey-icon{color:var(--mecx-color-white)}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-step', standalone: false, template: `
     <div
@@ -7425,10 +7288,10 @@ class MonkeyStepperComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyStepperComponent, isStandalone: false, selector: "monkey-stepper", inputs: { direction: "direction", id: "id", currentStep: "currentStep" }, host: { attributes: { "data-testid": "monkey-stepper" }, properties: { "attr.id": "monkeyId", "id": "monkeyId", "class.horizontal": "direction === 'horizontal'" } }, queries: [{ propertyName: "steps", predicate: MonkeyStepComponent }], usesOnChanges: true, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["monkey-stepper{display:inline-flex;flex-direction:column;width:100%;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-12);line-height:var(--mecx-lh-16);letter-spacing:.24px;font-weight:var(--mecx-fw-medium);gap:var(--mecx-spaces-small)}monkey-stepper:not(.horizontal)>monkey-step:not(:last-child) .item.complete:not(.substep){margin-bottom:12px;position:relative}monkey-stepper:not(.horizontal)>monkey-step:not(:last-child) .item.complete:not(.substep):after{content:\"\";background:var(--mecx-color-success-main);display:block;position:absolute;width:1px;height:13px;border-radius:10px;left:8px;top:23px}monkey-stepper.horizontal{flex-direction:row;gap:0}monkey-stepper.horizontal>monkey-step{flex:1}monkey-stepper.horizontal>monkey-step:first-child .step:before,monkey-stepper.horizontal>monkey-step:last-child .step:after{background-color:transparent!important}monkey-stepper.horizontal>monkey-step .substeps{display:none!important}monkey-stepper.horizontal>monkey-step .item{flex-direction:column;margin:0}monkey-stepper.horizontal>monkey-step .item .label{justify-content:center;text-align:center}@media (max-width: 575.98px){monkey-stepper.horizontal>monkey-step .item .label{display:none}}monkey-stepper.horizontal>monkey-step .item .current-icon{display:none}monkey-stepper.horizontal>monkey-step .item .step{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}monkey-stepper.horizontal>monkey-step .item .step:before{display:block;content:\"\";width:100%;height:1px;background-color:var(--mecx-color-gray-700)}monkey-stepper.horizontal>monkey-step .item .step:after{display:block;content:\"\";width:100%;height:1px;background-color:var(--mecx-color-gray-700)}monkey-stepper.horizontal>monkey-step .item.complete .step:after,monkey-stepper.horizontal>monkey-step .item.complete .step:before{background-color:var(--mecx-color-success-main)}monkey-stepper.horizontal>monkey-step .item.current .step:after,monkey-stepper.horizontal>monkey-step .item.current .step:before{background-color:var(--mecx-color-theme-main)}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyStepperComponent, isStandalone: false, selector: "monkey-stepper", inputs: { direction: "direction", id: "id", currentStep: "currentStep" }, host: { attributes: { "data-testid": "monkey-stepper" }, properties: { "attr.id": "monkeyId", "id": "monkeyId", "class.horizontal": "direction === 'horizontal'" } }, queries: [{ propertyName: "steps", predicate: MonkeyStepComponent }], usesOnChanges: true, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["monkey-stepper{display:inline-flex;flex-direction:column;width:100%;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-12);line-height:var(--mecx-lh-16);letter-spacing:.24px;font-weight:var(--mecx-fw-medium);gap:var(--mecx-spaces-small)}monkey-stepper:not(.horizontal)>monkey-step:not(:last-child) .item.complete:not(.substep){margin-bottom:12px;position:relative}monkey-stepper:not(.horizontal)>monkey-step:not(:last-child) .item.complete:not(.substep):after{content:\"\";background:var(--mecx-color-success-main);display:block;position:absolute;width:1px;height:13px;border-radius:10px;left:8px;top:23px}monkey-stepper.horizontal{flex-direction:row;gap:0}monkey-stepper.horizontal>monkey-step{flex:1}monkey-stepper.horizontal>monkey-step:first-child .step:before,monkey-stepper.horizontal>monkey-step:last-child .step:after{background-color:transparent!important}monkey-stepper.horizontal>monkey-step .substeps{display:none!important}monkey-stepper.horizontal>monkey-step .item{flex-direction:column;margin:0}monkey-stepper.horizontal>monkey-step .item .label{justify-content:center;text-align:center}@media (max-width: 575.98px){monkey-stepper.horizontal>monkey-step .item .label{display:none}}monkey-stepper.horizontal>monkey-step .item .current-icon{display:none}monkey-stepper.horizontal>monkey-step .item .step{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}monkey-stepper.horizontal>monkey-step .item .step:before{display:block;content:\"\";width:100%;height:1px;background-color:var(--mecx-color-gray-700)}monkey-stepper.horizontal>monkey-step .item .step:after{display:block;content:\"\";width:100%;height:1px;background-color:var(--mecx-color-gray-700)}monkey-stepper.horizontal>monkey-step .item.complete .step:after,monkey-stepper.horizontal>monkey-step .item.complete .step:before{background-color:var(--mecx-color-success-main)}monkey-stepper.horizontal>monkey-step .item.current .step:after,monkey-stepper.horizontal>monkey-step .item.current .step:before{background-color:var(--mecx-color-theme-main)}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-stepper', standalone: false, template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'data-testid': 'monkey-stepper',
@@ -7453,11 +7316,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * MIT Licence
  ************************* */
 class MonkeyStepperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperModule, declarations: [MonkeyStepperComponent, MonkeyStepComponent], imports: [UtilIconComponent, MonkeyIconComponent], exports: [MonkeyStepperComponent, MonkeyStepComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperModule, imports: [MonkeyIconComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStepperModule, declarations: [MonkeyStepperComponent, MonkeyStepComponent], imports: [UtilIconComponent, MonkeyIconComponent], exports: [MonkeyStepperComponent, MonkeyStepComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStepperModule, imports: [MonkeyIconComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MonkeyStepperComponent, MonkeyStepComponent],
@@ -7486,10 +7349,10 @@ class MonkeyPaginationActionComponent {
         // eslint-disable-next-line no-self-assign
         this.id = this.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPaginationActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyPaginationActionComponent, isStandalone: true, selector: "monkey-pagination-action", inputs: { disabled: "disabled", first: "first", last: "last", next: "next", prev: "prev", id: "id" }, outputs: { onAction: "onAction" }, host: { attributes: { "data-testid": "monkey-pagination-action" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationAction"], ngImport: i0, template: "<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('prev')\"\n  [disabled]=\"disabled || !prev\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n\n<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('next')\"\n  [disabled]=\"disabled || !next\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyPaginationActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyPaginationActionComponent, isStandalone: true, selector: "monkey-pagination-action", inputs: { disabled: "disabled", first: "first", last: "last", next: "next", prev: "prev", id: "id" }, outputs: { onAction: "onAction" }, host: { attributes: { "data-testid": "monkey-pagination-action" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationAction"], ngImport: i0, template: "<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('prev')\"\n  [disabled]=\"disabled || !prev\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n\n<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('next')\"\n  [disabled]=\"disabled || !next\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPaginationActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyPaginationActionComponent, decorators: [{
             type: Component,
             args: [{ imports: [CommonModule, MonkeyButtonComponent], encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-action', exportAs: 'monkeyPaginationAction', host: {
                         'data-testid': 'monkey-pagination-action',
@@ -7531,10 +7394,10 @@ class MonkeyPaginationLabelComponent {
         // eslint-disable-next-line no-self-assign
         this.id = this.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPaginationLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyPaginationLabelComponent, isStandalone: true, selector: "monkey-pagination-label", inputs: { id: "id" }, host: { attributes: { "data-testid": "monkey-pagination-label" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationLabel"], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["monkey-pagination-label{font-size:12px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyPaginationLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyPaginationLabelComponent, isStandalone: true, selector: "monkey-pagination-label", inputs: { id: "id" }, host: { attributes: { "data-testid": "monkey-pagination-label" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationLabel"], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["monkey-pagination-label{font-size:12px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPaginationLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyPaginationLabelComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-label', exportAs: 'monkeyPaginationLabel', host: {
                         'data-testid': 'monkey-pagination-label',
@@ -7564,10 +7427,10 @@ class MonkeyPaginationSizeComponent {
         // eslint-disable-next-line no-self-assign
         this.id = this.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPaginationSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyPaginationSizeComponent, isStandalone: true, selector: "monkey-pagination-size", inputs: { size: "size", disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pagination-size" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationSize"], ngImport: i0, template: "<ng-content></ng-content>\n<monkey-form-field hideClear size=\"sm\">\n  <monkey-select\n    placeholder=\"''\"\n    [ngModel]=\"size\"\n    (onChange)=\"onChange.next($event)\"\n    [disabled]=\"disabled\"\n    [showSearch]=\"false\"\n  >\n    @for (item of sizes; track item) {\n      <monkey-option [value]=\"item\">{{ item }}</monkey-option>\n    }\n  </monkey-select>\n</monkey-form-field>\n", styles: ["monkey-pagination-size{display:flex;align-items:center;gap:8px}monkey-pagination-size .mecx-form-field-body{height:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyPaginationSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyPaginationSizeComponent, isStandalone: true, selector: "monkey-pagination-size", inputs: { size: "size", disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pagination-size" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationSize"], ngImport: i0, template: "<ng-content></ng-content>\n<monkey-form-field hideClear size=\"sm\">\n  <monkey-select\n    placeholder=\"''\"\n    [ngModel]=\"size\"\n    (onChange)=\"onChange.next($event)\"\n    [disabled]=\"disabled\"\n    [showSearch]=\"false\"\n  >\n    @for (item of sizes; track item) {\n      <monkey-option [value]=\"item\">{{ item }}</monkey-option>\n    }\n  </monkey-select>\n</monkey-form-field>\n", styles: ["monkey-pagination-size{display:flex;align-items:center;gap:8px}monkey-pagination-size .mecx-form-field-body{height:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPaginationSizeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyPaginationSizeComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CommonModule,
@@ -7680,10 +7543,10 @@ class MonkeyTableComponent {
             this.stateChanges.emit({ loading });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyTableComponent, isStandalone: false, selector: "monkey-table, table[monkey-table]", inputs: { scroll: "scroll", loading: "loading", loadingRef: "loadingRef" }, outputs: { sortChange: "sortChange" }, host: { properties: { "class.disabled": "this.loading" } }, queries: [{ propertyName: "_paginationActionChildren", predicate: MonkeyPaginationActionComponent, descendants: true }, { propertyName: "_paginationSizeChildren", predicate: MonkeyPaginationSizeComponent, descendants: true }], viewQueries: [{ propertyName: "_headerEl", first: true, predicate: ["header"], descendants: true, static: true }, { propertyName: "_tableHeaderEl", first: true, predicate: ["tableHeader"], descendants: true, static: true }, { propertyName: "_tableContentEl", first: true, predicate: ["tableContent"], descendants: true, static: true }, { propertyName: "_tableLoadingEl", first: true, predicate: ["tableLoading"], descendants: true, static: true }, { propertyName: "_tableScrollEl", first: true, predicate: ["tableScroll"], descendants: true, static: true }], exportAs: ["monkeyTable"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mecx-table-container\">\n  <div class=\"mecx-table-wrapper\">\n    <div class=\"mecx-table-header\" #header>\n      <table #tableHeader>\n        <ng-content select=\"thead\"></ng-content>\n      </table>\n    </div>\n    <div class=\"mecx-inner-scroll\" #tableScroll>\n      <table #tableContent>\n        <ng-content select=\"tbody\"></ng-content>\n      </table>\n\n      @if (loadingRef && loading) {\n        <table #tableLoading>\n          <ng-container *ngTemplateOutlet=\"loadingRef\"></ng-container>\n        </table>\n      }\n    </div>\n  </div>\n  <div class=\"mecx-table-footer\">\n    <ng-content select=\"monkey-pagination-size\"></ng-content>\n    <div class=\"mecx-table-actions\">\n      <ng-content select=\"monkey-pagination-label\"></ng-content>\n      <ng-content select=\"monkey-pagination-action\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["monkey-table{position:relative;display:block;table-layout:fixed;border:2px solid var(--mecx-color-gray-400);border-radius:16px}.mecx-table-container{scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-table-wrapper{display:block}.mecx-table-header{overflow-x:hidden;overflow-y:scroll;white-space:nowrap;border-bottom:2px solid var(--mecx-color-gray-300);background:var(--mecx-color-gray-50);border-top-left-radius:16px;border-top-right-radius:16px}.mecx-table-header table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;height:48px}.mecx-table-header table thead{display:table-header-group;vertical-align:middle;unicode-bidi:isolate}.mecx-table-header table th{text-align:left;vertical-align:middle;padding:8px 12px;color:var(--mecx-color-gray-700);font-size:16px;font-weight:700;font-style:normal;white-space:nowrap;will-change:transform;backface-visibility:hidden;line-height:24px}.mecx-table-header table th svg{opacity:0;transform:opacity 2s ease-in-out}.mecx-table-header table th:hover svg{opacity:1}.mecx-table-header table .mecx-column-checked svg{opacity:1}.mecx-table-header .mecx-column-stick{position:sticky;background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-table-header .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-table-header .mecx-column-checked{position:sticky;left:0;border-right:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-inner-scroll{scroll-behavior:smooth}.mecx-inner-scroll table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;border-spacing:0px}.mecx-inner-scroll table td{text-align:left;border-bottom:2px solid var(--mecx-color-gray-100);padding:8px 12px;vertical-align:middle}.mecx-inner-scroll .mecx-column-stick{position:sticky;right:0;z-index:1;background:#fff}.mecx-inner-scroll .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-inner-scroll .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-inner-scroll .mecx-column-checked{position:sticky;left:0;z-index:1;border-right:1px solid var(--mecx-color-gray-200);background:#fff}.mecx-inner-scroll .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-table-footer{border-top:1px solid var(--mecx-color-gray-200);padding:8px 12px;display:flex;align-items:center;justify-content:space-between}.mecx-table-footer .mecx-table-actions{display:flex;gap:8px;align-items:center}.mecx-column-sortable-disabled,.mecx-column-checked-disabled{pointer-events:none}.mecx-column-expansible{border-left:none!important;border-right:none!important}@keyframes rotate-right{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes rotate-left{0%{transform:rotate(90deg)}to{transform:rotate(0)}}.mecx-column-expansible .rotate-animation-right{animation:rotate-right .3s ease-in-out}.mecx-column-expansible .rotate-animation-left{animation:rotate-left .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyTableComponent, isStandalone: false, selector: "monkey-table, table[monkey-table]", inputs: { scroll: "scroll", loading: "loading", loadingRef: "loadingRef" }, outputs: { sortChange: "sortChange" }, host: { properties: { "class.disabled": "this.loading" } }, queries: [{ propertyName: "_paginationActionChildren", predicate: MonkeyPaginationActionComponent, descendants: true }, { propertyName: "_paginationSizeChildren", predicate: MonkeyPaginationSizeComponent, descendants: true }], viewQueries: [{ propertyName: "_headerEl", first: true, predicate: ["header"], descendants: true, static: true }, { propertyName: "_tableHeaderEl", first: true, predicate: ["tableHeader"], descendants: true, static: true }, { propertyName: "_tableContentEl", first: true, predicate: ["tableContent"], descendants: true, static: true }, { propertyName: "_tableLoadingEl", first: true, predicate: ["tableLoading"], descendants: true, static: true }, { propertyName: "_tableScrollEl", first: true, predicate: ["tableScroll"], descendants: true, static: true }], exportAs: ["monkeyTable"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mecx-table-container\">\n  <div class=\"mecx-table-wrapper\">\n    <div class=\"mecx-table-header\" #header>\n      <table #tableHeader>\n        <ng-content select=\"thead\"></ng-content>\n      </table>\n    </div>\n    <div class=\"mecx-inner-scroll\" #tableScroll>\n      <table #tableContent>\n        <ng-content select=\"tbody\"></ng-content>\n      </table>\n\n      @if (loadingRef && loading) {\n        <table #tableLoading>\n          <ng-container *ngTemplateOutlet=\"loadingRef\"></ng-container>\n        </table>\n      }\n    </div>\n  </div>\n  <div class=\"mecx-table-footer\">\n    <ng-content select=\"monkey-pagination-size\"></ng-content>\n    <div class=\"mecx-table-actions\">\n      <ng-content select=\"monkey-pagination-label\"></ng-content>\n      <ng-content select=\"monkey-pagination-action\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["monkey-table{position:relative;display:block;table-layout:fixed;border:2px solid var(--mecx-color-gray-400);border-radius:16px}.mecx-table-container{scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-table-wrapper{display:block}.mecx-table-header{overflow-x:hidden;overflow-y:scroll;white-space:nowrap;border-bottom:2px solid var(--mecx-color-gray-300);background:var(--mecx-color-gray-50);border-top-left-radius:16px;border-top-right-radius:16px}.mecx-table-header table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;height:48px}.mecx-table-header table thead{display:table-header-group;vertical-align:middle;unicode-bidi:isolate}.mecx-table-header table th{text-align:left;vertical-align:middle;padding:8px 12px;color:var(--mecx-color-gray-700);font-size:16px;font-weight:700;font-style:normal;white-space:nowrap;will-change:transform;backface-visibility:hidden;line-height:24px}.mecx-table-header table th svg{opacity:0;transform:opacity 2s ease-in-out}.mecx-table-header table th:hover svg{opacity:1}.mecx-table-header table .mecx-column-checked svg{opacity:1}.mecx-table-header .mecx-column-stick{position:sticky;background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-table-header .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-table-header .mecx-column-checked{position:sticky;left:0;border-right:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-inner-scroll{scroll-behavior:smooth}.mecx-inner-scroll table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;border-spacing:0px}.mecx-inner-scroll table td{text-align:left;border-bottom:2px solid var(--mecx-color-gray-100);padding:8px 12px;vertical-align:middle}.mecx-inner-scroll .mecx-column-stick{position:sticky;right:0;z-index:1;background:#fff}.mecx-inner-scroll .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-inner-scroll .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-inner-scroll .mecx-column-checked{position:sticky;left:0;z-index:1;border-right:1px solid var(--mecx-color-gray-200);background:#fff}.mecx-inner-scroll .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-table-footer{border-top:1px solid var(--mecx-color-gray-200);padding:8px 12px;display:flex;align-items:center;justify-content:space-between}.mecx-table-footer .mecx-table-actions{display:flex;gap:8px;align-items:center}.mecx-column-sortable-disabled,.mecx-column-checked-disabled{pointer-events:none}.mecx-column-expansible{border-left:none!important;border-right:none!important}@keyframes rotate-right{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes rotate-left{0%{transform:rotate(90deg)}to{transform:rotate(0)}}.mecx-column-expansible .rotate-animation-right{animation:rotate-right .3s ease-in-out}.mecx-column-expansible .rotate-animation-left{animation:rotate-left .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTableComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-table, table[monkey-table]', exportAs: 'monkeyTable', standalone: false, template: "<div class=\"mecx-table-container\">\n  <div class=\"mecx-table-wrapper\">\n    <div class=\"mecx-table-header\" #header>\n      <table #tableHeader>\n        <ng-content select=\"thead\"></ng-content>\n      </table>\n    </div>\n    <div class=\"mecx-inner-scroll\" #tableScroll>\n      <table #tableContent>\n        <ng-content select=\"tbody\"></ng-content>\n      </table>\n\n      @if (loadingRef && loading) {\n        <table #tableLoading>\n          <ng-container *ngTemplateOutlet=\"loadingRef\"></ng-container>\n        </table>\n      }\n    </div>\n  </div>\n  <div class=\"mecx-table-footer\">\n    <ng-content select=\"monkey-pagination-size\"></ng-content>\n    <div class=\"mecx-table-actions\">\n      <ng-content select=\"monkey-pagination-label\"></ng-content>\n      <ng-content select=\"monkey-pagination-action\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["monkey-table{position:relative;display:block;table-layout:fixed;border:2px solid var(--mecx-color-gray-400);border-radius:16px}.mecx-table-container{scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-table-wrapper{display:block}.mecx-table-header{overflow-x:hidden;overflow-y:scroll;white-space:nowrap;border-bottom:2px solid var(--mecx-color-gray-300);background:var(--mecx-color-gray-50);border-top-left-radius:16px;border-top-right-radius:16px}.mecx-table-header table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;height:48px}.mecx-table-header table thead{display:table-header-group;vertical-align:middle;unicode-bidi:isolate}.mecx-table-header table th{text-align:left;vertical-align:middle;padding:8px 12px;color:var(--mecx-color-gray-700);font-size:16px;font-weight:700;font-style:normal;white-space:nowrap;will-change:transform;backface-visibility:hidden;line-height:24px}.mecx-table-header table th svg{opacity:0;transform:opacity 2s ease-in-out}.mecx-table-header table th:hover svg{opacity:1}.mecx-table-header table .mecx-column-checked svg{opacity:1}.mecx-table-header .mecx-column-stick{position:sticky;background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-table-header .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-table-header .mecx-column-checked{position:sticky;left:0;border-right:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-inner-scroll{scroll-behavior:smooth}.mecx-inner-scroll table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;border-spacing:0px}.mecx-inner-scroll table td{text-align:left;border-bottom:2px solid var(--mecx-color-gray-100);padding:8px 12px;vertical-align:middle}.mecx-inner-scroll .mecx-column-stick{position:sticky;right:0;z-index:1;background:#fff}.mecx-inner-scroll .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-inner-scroll .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-inner-scroll .mecx-column-checked{position:sticky;left:0;z-index:1;border-right:1px solid var(--mecx-color-gray-200);background:#fff}.mecx-inner-scroll .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-table-footer{border-top:1px solid var(--mecx-color-gray-200);padding:8px 12px;display:flex;align-items:center;justify-content:space-between}.mecx-table-footer .mecx-table-actions{display:flex;gap:8px;align-items:center}.mecx-column-sortable-disabled,.mecx-column-checked-disabled{pointer-events:none}.mecx-column-expansible{border-left:none!important;border-right:none!important}@keyframes rotate-right{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes rotate-left{0%{transform:rotate(90deg)}to{transform:rotate(0)}}.mecx-column-expansible .rotate-animation-right{animation:rotate-right .3s ease-in-out}.mecx-column-expansible .rotate-animation-left{animation:rotate-left .3s ease-in-out}\n"] }]
         }], propDecorators: { scroll: [{
@@ -7795,10 +7658,10 @@ class MonkeyColumnChecked {
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyColumnChecked, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyColumnChecked, isStandalone: false, selector: "[mkChecked]", inputs: { checked: ["mkChecked", "checked"], disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.mecx-column-checked-disabled": "this.disabled" }, classAttribute: "mecx-column-checked" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyColumnChecked, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyColumnChecked, isStandalone: false, selector: "[mkChecked]", inputs: { checked: ["mkChecked", "checked"], disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.mecx-column-checked-disabled": "this.disabled" }, classAttribute: "mecx-column-checked" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyColumnChecked, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyColumnChecked, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mkChecked]',
@@ -7927,10 +7790,10 @@ class MonkeyColumnExpansible {
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyColumnExpansible, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyColumnExpansible, isStandalone: false, selector: "[mkExpansible]", outputs: { expansionChange: "expansionChange" }, host: { listeners: { "click": "onClick()" }, properties: { "class.mecx-column-expansible-disabled": "this.disabled" }, classAttribute: "mecx-column-expansible" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyColumnExpansible, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyColumnExpansible, isStandalone: false, selector: "[mkExpansible]", outputs: { expansionChange: "expansionChange" }, host: { listeners: { "click": "onClick()" }, properties: { "class.mecx-column-expansible-disabled": "this.disabled" }, classAttribute: "mecx-column-expansible" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyColumnExpansible, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyColumnExpansible, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mkExpansible]',
@@ -8019,10 +7882,10 @@ class MonkeyColumnSortable {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyColumnSortable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyColumnSortable, isStandalone: false, selector: "[mkSortable]", inputs: { name: ["mkSortable", "name"] }, host: { listeners: { "click": "onClick()" }, properties: { "class.mecx-column-sortable-disabled": "this.disabled" }, classAttribute: "mecx-column-sortable" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyColumnSortable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyColumnSortable, isStandalone: false, selector: "[mkSortable]", inputs: { name: ["mkSortable", "name"] }, host: { listeners: { "click": "onClick()" }, properties: { "class.mecx-column-sortable-disabled": "this.disabled" }, classAttribute: "mecx-column-sortable" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyColumnSortable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyColumnSortable, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mkSortable]',
@@ -8056,10 +7919,10 @@ class MonkeyColumnStick {
     constructor() {
         this.position = 'right';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyColumnStick, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyColumnStick, isStandalone: false, selector: "[mkStick]", inputs: { position: ["mkStick", "position"] }, host: { properties: { "class": "\"mecx-column-stick-\"+position" }, classAttribute: "mecx-column-stick" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyColumnStick, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyColumnStick, isStandalone: false, selector: "[mkStick]", inputs: { position: ["mkStick", "position"] }, host: { properties: { "class": "\"mecx-column-stick-\"+position" }, classAttribute: "mecx-column-stick" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyColumnStick, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyColumnStick, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mkStick]',
@@ -8080,8 +7943,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * MIT Licence
  ************************* */
 class MonkeyTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTableModule, declarations: [MonkeyTableComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTableModule, declarations: [MonkeyTableComponent,
             MonkeyColumnStick,
             MonkeyColumnChecked,
             MonkeyColumnSortable,
@@ -8094,12 +7957,12 @@ class MonkeyTableModule {
             MonkeyColumnChecked,
             MonkeyColumnSortable,
             MonkeyColumnExpansible] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTableModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTableModule, imports: [CommonModule,
             MonkeyButtonComponent,
             MonkeyPaginationSizeComponent,
             MonkeyPaginationActionComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -8179,10 +8042,10 @@ class MonkeyTabLinkDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTabLinkDirective, deps: [{ token: Router, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.14", type: MonkeyTabLinkDirective, isStandalone: false, selector: "[monkey-tab-link]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.disabled": "this.isDisabled", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTabLinkDirective, deps: [{ token: Router, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: MonkeyTabLinkDirective, isStandalone: false, selector: "[monkey-tab-link]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.disabled": "this.isDisabled", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTabLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTabLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[monkey-tab-link]',
@@ -8221,14 +8084,14 @@ class MonkeyTabComponent {
             this.onClick.emit(this.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.14", type: MonkeyTabComponent, isStandalone: false, selector: "monkey-tab", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { onClick: "onClick" }, host: { properties: { "class.selected": "this.isSelected" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.15", type: MonkeyTabComponent, isStandalone: false, selector: "monkey-tab", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { onClick: "onClick" }, host: { properties: { "class.selected": "this.isSelected" } }, ngImport: i0, template: `
     <button type="button" [disabled]="disabled" (click)="handleClick()">
       <ng-content />
     </button>
   `, isInline: true, styles: [":host{display:block}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-tab', standalone: false, template: `
     <button type="button" [disabled]="disabled" (click)="handleClick()">
@@ -8333,8 +8196,8 @@ class MonkeyTabsComponent {
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyTabsComponent, isStandalone: false, selector: "monkey-tabs", inputs: { selected: "selected", fullWidth: ["fullWidth", "fullWidth", booleanAttribute], position: "position" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-tabs" }, properties: { "attr.id": "monkeyId", "id": "monkeyId" } }, queries: [{ propertyName: "tabs", predicate: MonkeyTabComponent }], viewQueries: [{ propertyName: "tabsHeader", first: true, predicate: ["tabsHeader"], descendants: true }, { propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyTabsComponent, isStandalone: false, selector: "monkey-tabs", inputs: { selected: "selected", fullWidth: ["fullWidth", "fullWidth", booleanAttribute], position: "position" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-tabs" }, properties: { "attr.id": "monkeyId", "id": "monkeyId" } }, queries: [{ propertyName: "tabs", predicate: MonkeyTabComponent }], viewQueries: [{ propertyName: "tabsHeader", first: true, predicate: ["tabsHeader"], descendants: true }, { propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     @if (hasScroll) {
       <button
         class="scroll-arrow scroll-arrow-left"
@@ -8369,7 +8232,7 @@ class MonkeyTabsComponent {
     }
   `, isInline: true, styles: ["monkey-tabs{display:flex;align-items:center;position:relative;width:100%;overflow:hidden}monkey-tabs .monkey-tabs-header{flex:1;overflow:hidden}monkey-tabs a[monkey-tab-link]{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 16px;height:32px;font-weight:400;background:transparent;cursor:pointer;font-size:14px;line-height:16px;border-bottom:2px solid var(--mecx-color-gray-400);color:var(--mecx-color-gray-900);white-space:nowrap;box-sizing:border-box;transition:all .2s ease;text-decoration:none}monkey-tabs a[monkey-tab-link].active:not(.disabled){color:var(--mecx-color-theme-main);border-bottom-color:var(--mecx-color-theme-main)}monkey-tabs a[monkey-tab-link]:hover:not(.disabled){background-color:var(--mecx-color-gray-100)}monkey-tabs a[monkey-tab-link].disabled{color:var(--mecx-color-gray-400);pointer-events:none}monkey-tabs monkey-tab{flex-shrink:0;min-width:max-content}monkey-tabs monkey-tab button{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 16px;height:32px;font-weight:400;background:transparent;cursor:pointer;font-size:14px;line-height:16px;border-bottom:2px solid var(--mecx-color-gray-400);color:var(--mecx-color-gray-900);white-space:nowrap;box-sizing:border-box;transition:all .2s ease}monkey-tabs monkey-tab button:disabled{cursor:default;color:var(--mecx-color-gray-400)}monkey-tabs monkey-tab.selected button{color:var(--mecx-color-theme-main);border-bottom-color:var(--mecx-color-theme-main)}monkey-tabs .monkey-tabs-content{display:flex;transition:transform .3s ease;min-width:max-content}monkey-tabs .monkey-tabs-content.full-width monkey-tab,monkey-tabs .monkey-tabs-content.full-width a[monkey-tab-link]{flex:1}monkey-tabs .monkey-tabs-content.full-width monkey-tab button,monkey-tabs .monkey-tabs-content.full-width a[monkey-tab-link] button{width:100%}monkey-tabs .monkey-tabs-content monkey-tab button:hover:not(:disabled){background-color:var(--mecx-color-gray-100)}monkey-tabs .monkey-tabs-content.start{justify-content:flex-start}monkey-tabs .monkey-tabs-content.center{justify-content:center}monkey-tabs .monkey-tabs-content.end{justify-content:flex-end}monkey-tabs .scroll-arrow{width:32px;height:32px;background:transparent;border:none;font-size:18px;color:var(--mecx-color-gray-400);display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;cursor:default;border-bottom:2px solid var(--mecx-color-gray-400);position:relative}monkey-tabs .scroll-arrow:before{transition:all .2s ease;opacity:0;content:\"\";display:block;height:32px;width:16px;position:absolute;top:0;background:transparent;z-index:1}monkey-tabs .scroll-arrow.scroll-arrow-left.enabled:before{background:linear-gradient(90deg,#0000001a,#0000);opacity:1;right:-16px}monkey-tabs .scroll-arrow.scroll-arrow-right.enabled:before{background:linear-gradient(-90deg,#0000001a,#0000);opacity:1;left:-16px}monkey-tabs .scroll-arrow.enabled{color:var(--mecx-color-gray-900)}monkey-tabs .scroll-arrow.enabled:hover{background-color:var(--mecx-color-gray-100);cursor:pointer}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-tabs', standalone: false, encapsulation: ViewEncapsulation.None, template: `
     @if (hasScroll) {
@@ -8435,11 +8298,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * MIT Licence
  ************************* */
 class MonkeyTabsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTabsModule, declarations: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective], exports: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTabsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTabsModule, declarations: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective], exports: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTabsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective],
@@ -8482,10 +8345,10 @@ class MonkeyToastComponent {
             this.onClose.emit(this.id);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToastComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyToastComponent, isStandalone: true, selector: "monkey-toast", inputs: { message: "message", icon: "icon", type: "type", isClosable: ["isClosable", "isClosable", booleanAttribute], actionLabel: "actionLabel", actionIcon: "actionIcon", id: "id" }, outputs: { onActionClick: "onActionClick", onClose: "onClose" }, host: { attributes: { "data-testid": "monkey-toast" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.id": "id", "id": "id", "class": "this.class", "animation": "this.animationState" } }, ngImport: i0, template: "<div class=\"monkey-toast-content\">\n  @if (icon) {\n    <monkey-icon [icon]=\"icon\" size=\"lg\"></monkey-icon>\n  }\n  <div>\n    <div class=\"monkey-toast-message\">\n      {{ message }}\n    </div>\n    @if (actionLabel) {\n      <div class=\"monkey-toast-action\">\n        <monkey-button\n          class=\"monkey-toast-btn-action\"\n          type=\"tertiary\"\n          size=\"sm\"\n          (click)=\"onActionClick.emit(id)\"\n        >\n          {{ actionLabel }}\n          @if (actionIcon) {\n            <monkey-icon [icon]=\"actionIcon\" size=\"xs\" first></monkey-icon>\n          }\n        </monkey-button>\n      </div>\n    }\n  </div>\n</div>\n@if (isClosable) {\n  <div class=\"monkey-toast-divider\"></div>\n  <div class=\"monkey-toast-close\" (click)=\"close()\">\n    <util-icon name=\"clear\" />\n  </div>\n}\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:var(--mecx-spaces-medium);padding:var(--mecx-spaces-medium);box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-lh-24);font-size:var(--mecx-fs-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white)}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;cursor:pointer}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-700)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyToastComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyToastComponent, isStandalone: true, selector: "monkey-toast", inputs: { message: "message", icon: "icon", type: "type", isClosable: ["isClosable", "isClosable", booleanAttribute], actionLabel: "actionLabel", actionIcon: "actionIcon", id: "id" }, outputs: { onActionClick: "onActionClick", onClose: "onClose" }, host: { attributes: { "data-testid": "monkey-toast" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.id": "id", "id": "id", "class": "this.class", "animation": "this.animationState" } }, ngImport: i0, template: "<div class=\"monkey-toast-content\">\n  @if (icon) {\n    <monkey-icon [icon]=\"icon\" size=\"lg\"></monkey-icon>\n  }\n  <div>\n    <div class=\"monkey-toast-message\">\n      {{ message }}\n    </div>\n    @if (actionLabel) {\n      <div class=\"monkey-toast-action\">\n        <monkey-button\n          class=\"monkey-toast-btn-action\"\n          type=\"tertiary\"\n          size=\"sm\"\n          (click)=\"onActionClick.emit(id)\"\n        >\n          {{ actionLabel }}\n          @if (actionIcon) {\n            <monkey-icon [icon]=\"actionIcon\" size=\"xs\" first></monkey-icon>\n          }\n        </monkey-button>\n      </div>\n    }\n  </div>\n</div>\n@if (isClosable) {\n  <div class=\"monkey-toast-divider\"></div>\n  <div class=\"monkey-toast-close\" (click)=\"close()\">\n    <util-icon name=\"clear\" />\n  </div>\n}\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:var(--mecx-spaces-medium);padding:var(--mecx-spaces-medium);box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-lh-24);font-size:var(--mecx-fs-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white)}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;cursor:pointer}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-700)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-toast', imports: [MonkeyButtonComponent, MonkeyIconComponent, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
                         'data-testid': 'monkey-toast',
@@ -8564,10 +8427,10 @@ class MonkeyToggleComponent {
             this._checked = !this._checked;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyToggleComponent, isStandalone: true, selector: "monkey-toggle", inputs: { disabled: "disabled", size: "size", value: "value", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-toggle" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "class.disabled": "this.disabled", "class": "this.size" } }, ngImport: i0, template: "<input type=\"checkbox\" [checked]=\"_checked\" />\n<div class=\"slider\" [ngClass]=\"{ checked: _checked }\"></div>\n", styles: [":host{position:relative;display:inline-block}:host input{display:none}:host.disabled{box-shadow:none;pointer-events:none;opacity:.2}:host.lg{width:88px;height:48px}:host.lg input:checked+.checked:before{left:calc(100% - 42px)}:host.lg .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.lg .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:40px;width:40px}:host.lg .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.lg .slider.checked:before{background-color:#00875a}:host.md{width:72px;height:40px}:host.md input:checked+.checked:before{left:calc(100% - 34px)}:host.md .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.md .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:32px;width:32px}:host.md .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.md .slider.checked:before{background-color:#00875a}:host.sm{width:56px;height:32px}:host.sm input:checked+.checked:before{left:calc(100% - 26px)}:host.sm .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.sm .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:24px;width:24px}:host.sm .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.sm .slider.checked:before{background-color:#00875a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyToggleComponent, isStandalone: true, selector: "monkey-toggle", inputs: { disabled: "disabled", size: "size", value: "value", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-toggle" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "class.disabled": "this.disabled", "class": "this.size" } }, ngImport: i0, template: "<input type=\"checkbox\" [checked]=\"_checked\" />\n<div class=\"slider\" [ngClass]=\"{ checked: _checked }\"></div>\n", styles: [":host{position:relative;display:inline-block}:host input{display:none}:host.disabled{box-shadow:none;pointer-events:none;opacity:.2}:host.lg{width:88px;height:48px}:host.lg input:checked+.checked:before{left:calc(100% - 42px)}:host.lg .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.lg .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:40px;width:40px}:host.lg .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.lg .slider.checked:before{background-color:#00875a}:host.md{width:72px;height:40px}:host.md input:checked+.checked:before{left:calc(100% - 34px)}:host.md .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.md .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:32px;width:32px}:host.md .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.md .slider.checked:before{background-color:#00875a}:host.sm{width:56px;height:32px}:host.sm input:checked+.checked:before{left:calc(100% - 26px)}:host.sm .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.sm .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:24px;width:24px}:host.sm .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.sm .slider.checked:before{background-color:#00875a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-toggle', imports: [CommonModule], host: {
                         'data-testid': 'monkey-toggle',
@@ -8611,10 +8474,10 @@ class MonkeyToggleLineButtonComponent {
         this.disabled = false;
         this.onChange = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToggleLineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyToggleLineButtonComponent, isStandalone: true, selector: "monkey-toggle-line-button", inputs: { disabled: "disabled" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<input\n  type=\"radio\"\n  [name]=\"name\"\n  [id]=\"value + '-' + name\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (change)=\"onChange.emit(this.value)\"\n/>\n<label [for]=\"value + '-' + name\">\n  <ng-content></ng-content>\n</label>\n", styles: ["monkey-toggle-line-button{display:flex;width:100%}monkey-toggle-line-button input{display:none}monkey-toggle-line-button label{display:flex;box-sizing:border-box;gap:8px;background:unset;height:100%;width:100%;align-items:center;justify-content:center;letter-spacing:.03em;text-align:center;color:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);transition:all .2s ease-in-out}monkey-toggle-line-button label monkey-icon{transition:all .2s ease-in-out}monkey-toggle-line-button input:disabled+label{color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label monkey-icon{color:var(--mecx-color-gray-400)!important}monkey-toggle-line-button input:checked+label[for*=true]{background-color:var(--mecx-color-success-main);color:#fff}monkey-toggle-line-button input:checked+label[for*=true] monkey-icon{color:#fff}monkey-toggle-line-button input:checked+label[for*=false]{background-color:var(--mecx-color-error-700);color:#fff}monkey-toggle-line-button input:checked+label[for*=false] monkey-icon{color:#fff}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyToggleLineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyToggleLineButtonComponent, isStandalone: true, selector: "monkey-toggle-line-button", inputs: { disabled: "disabled" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<input\n  type=\"radio\"\n  [name]=\"name\"\n  [id]=\"value + '-' + name\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (change)=\"onChange.emit(this.value)\"\n/>\n<label [for]=\"value + '-' + name\">\n  <ng-content></ng-content>\n</label>\n", styles: ["monkey-toggle-line-button{display:flex;width:100%}monkey-toggle-line-button input{display:none}monkey-toggle-line-button label{display:flex;box-sizing:border-box;gap:8px;background:unset;height:100%;width:100%;align-items:center;justify-content:center;letter-spacing:.03em;text-align:center;color:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);transition:all .2s ease-in-out}monkey-toggle-line-button label monkey-icon{transition:all .2s ease-in-out}monkey-toggle-line-button input:disabled+label{color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label monkey-icon{color:var(--mecx-color-gray-400)!important}monkey-toggle-line-button input:checked+label[for*=true]{background-color:var(--mecx-color-success-main);color:#fff}monkey-toggle-line-button input:checked+label[for*=true] monkey-icon{color:#fff}monkey-toggle-line-button input:checked+label[for*=false]{background-color:var(--mecx-color-error-700);color:#fff}monkey-toggle-line-button input:checked+label[for*=false] monkey-icon{color:#fff}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToggleLineButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyToggleLineButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-toggle-line-button', standalone: true, encapsulation: ViewEncapsulation.None, template: "<input\n  type=\"radio\"\n  [name]=\"name\"\n  [id]=\"value + '-' + name\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (change)=\"onChange.emit(this.value)\"\n/>\n<label [for]=\"value + '-' + name\">\n  <ng-content></ng-content>\n</label>\n", styles: ["monkey-toggle-line-button{display:flex;width:100%}monkey-toggle-line-button input{display:none}monkey-toggle-line-button label{display:flex;box-sizing:border-box;gap:8px;background:unset;height:100%;width:100%;align-items:center;justify-content:center;letter-spacing:.03em;text-align:center;color:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);transition:all .2s ease-in-out}monkey-toggle-line-button label monkey-icon{transition:all .2s ease-in-out}monkey-toggle-line-button input:disabled+label{color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label monkey-icon{color:var(--mecx-color-gray-400)!important}monkey-toggle-line-button input:checked+label[for*=true]{background-color:var(--mecx-color-success-main);color:#fff}monkey-toggle-line-button input:checked+label[for*=true] monkey-icon{color:#fff}monkey-toggle-line-button input:checked+label[for*=false]{background-color:var(--mecx-color-error-700);color:#fff}monkey-toggle-line-button input:checked+label[for*=false] monkey-icon{color:#fff}\n"] }]
         }], propDecorators: { disabled: [{
@@ -8677,10 +8540,10 @@ class MonkeyToggleLineComponent {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToggleLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.14", type: MonkeyToggleLineComponent, isStandalone: true, selector: "monkey-toggle-line", inputs: { value: "value", name: "name", size: "size", disabled: ["disabled", "disabled", booleanAttribute], id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-toggle-line" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, queries: [{ propertyName: "radioButtons", predicate: MonkeyToggleLineButtonComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["monkey-toggle-line{display:inline-flex;min-width:250px}monkey-toggle-line :first-child label{border-radius:8px 0 0 8px;border-right:none!important}monkey-toggle-line :first-child label monkey-icon{color:var(--mecx-color-error-700)}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label monkey-icon{color:var(--mecx-color-success-main)}monkey-toggle-line.lg{min-height:48px}monkey-toggle-line.lg label{font-size:16px}monkey-toggle-line.md{min-height:40px}monkey-toggle-line.md label{font-size:14px}monkey-toggle-line.sm{min-height:32px}monkey-toggle-line.sm label{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyToggleLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.15", type: MonkeyToggleLineComponent, isStandalone: true, selector: "monkey-toggle-line", inputs: { value: "value", name: "name", size: "size", disabled: ["disabled", "disabled", booleanAttribute], id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-toggle-line" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, queries: [{ propertyName: "radioButtons", predicate: MonkeyToggleLineButtonComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["monkey-toggle-line{display:inline-flex;min-width:250px}monkey-toggle-line :first-child label{border-radius:8px 0 0 8px;border-right:none!important}monkey-toggle-line :first-child label monkey-icon{color:var(--mecx-color-error-700)}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label monkey-icon{color:var(--mecx-color-success-main)}monkey-toggle-line.lg{min-height:48px}monkey-toggle-line.lg label{font-size:16px}monkey-toggle-line.md{min-height:40px}monkey-toggle-line.md label{font-size:14px}monkey-toggle-line.sm{min-height:32px}monkey-toggle-line.sm label{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToggleLineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyToggleLineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-toggle-line', imports: [CommonModule], encapsulation: ViewEncapsulation.None, host: {
                         'data-testid': 'monkey-toggle-line',
@@ -8741,10 +8604,10 @@ class MonkeyTooltipComponent {
             this.afterClose.emit(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTooltipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyTooltipComponent, isStandalone: true, selector: "monkey-tooltip", inputs: { text: "text", template: "template", left: "left", top: "top", id: "id" }, outputs: { afterClose: "afterClose" }, host: { attributes: { "data-testid": "monkey-tooltip" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "style.left.px": "left", "style.top.px": "top", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "@if (template) {\n  <ng-container *ngTemplateOutlet=\"template\"> </ng-container>\n}\n@if (text) {\n  {{ text }}\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);flex-wrap:wrap;text-align:center;color:var(--mecx-color-white);font-size:14px;letter-spacing:.42px;line-height:16px;position:absolute;pointer-events:none;cursor:none;word-break:normal;overflow-wrap:anywhere;min-width:50px;max-width:200px;box-sizing:border-box;overflow:hidden;animation:fade-in .3s}:host.closed{animation:fade-out .1s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTooltipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MonkeyTooltipComponent, isStandalone: true, selector: "monkey-tooltip", inputs: { text: "text", template: "template", left: "left", top: "top", id: "id" }, outputs: { afterClose: "afterClose" }, host: { attributes: { "data-testid": "monkey-tooltip" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "style.left.px": "left", "style.top.px": "top", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "@if (template) {\n  <ng-container *ngTemplateOutlet=\"template\"> </ng-container>\n}\n@if (text) {\n  {{ text }}\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);flex-wrap:wrap;text-align:center;color:var(--mecx-color-white);font-size:14px;letter-spacing:.42px;line-height:16px;position:absolute;pointer-events:none;cursor:none;word-break:normal;overflow-wrap:anywhere;min-width:50px;max-width:200px;box-sizing:border-box;overflow:hidden;animation:fade-in .3s}:host.closed{animation:fade-out .1s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-tooltip', imports: [NgTemplateOutlet], host: {
                         'data-testid': 'monkey-tooltip',
@@ -8926,10 +8789,10 @@ class MonkeyTooltipDirective {
     onScroll() {
         this.hide();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTooltipDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.14", type: MonkeyTooltipDirective, isStandalone: true, selector: "[monkeyTooltip]", inputs: { tooltipText: ["monkeyTooltip", "tooltipText"], tooltipPosition: "tooltipPosition", enabled: ["enabled", "enabled", booleanAttribute] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "click": "hide()", "window:scroll": "onScroll()", "window:resize": "onScroll()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTooltipDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: MonkeyTooltipDirective, isStandalone: true, selector: "[monkeyTooltip]", inputs: { tooltipText: ["monkeyTooltip", "tooltipText"], tooltipPosition: "tooltipPosition", enabled: ["enabled", "enabled", booleanAttribute] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "click": "hide()", "window:scroll": "onScroll()", "window:resize": "onScroll()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[monkeyTooltip]',
@@ -8994,8 +8857,8 @@ class MonkeyUserProfileButtonComponent {
         event.preventDefault();
         this.open = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyUserProfileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyUserProfileButtonComponent, isStandalone: true, selector: "monkey-user-profile-button", inputs: { size: "size", name: "name", iconName: "iconName", id: "id" }, host: { attributes: { "data-testid": "monkey-user-profile-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "class.open": "open", "class": "this.size" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyUserProfileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyUserProfileButtonComponent, isStandalone: true, selector: "monkey-user-profile-button", inputs: { size: "size", name: "name", iconName: "iconName", id: "id" }, host: { attributes: { "data-testid": "monkey-user-profile-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "class.open": "open", "class": "this.size" } }, ngImport: i0, template: `
     <monkey-avatar [size]="size" [src]="iconName ? { iconName } : { name }" />
     <div class="lh-24 text-truncate flex-grow-1 fs-xxs text-gray-900">
       {{ name }}
@@ -9013,11 +8876,11 @@ class MonkeyUserProfileButtonComponent {
         <ng-content />
       </div>
     </ng-template>
-  `, isInline: true, styles: ["monkey-user-profile-button{padding:4px;background:var(--mecx-color-gray-100);border-radius:8px;max-width:140px;cursor:pointer;display:inline-flex;gap:4px;align-items:center}monkey-user-profile-button.open .arrow{transform:rotate(180deg)}monkey-user-profile-button monkey-avatar{background-color:var(--mecx-color-white)}monkey-user-profile-button.sm{max-width:150px}monkey-user-profile-button.md{border-radius:12px;max-width:160px}monkey-user-profile-button.lg{border-radius:16px;max-width:170px}monkey-user-profile-button .menu{min-width:150px}monkey-user-profile-button monkey-button span{text-decoration:none}\n"], dependencies: [{ kind: "component", type: MonkeyAvatarComponent, selector: "monkey-avatar", inputs: ["size", "src", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { 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", "monkeyPopoverEnableAutofocus"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["monkey-user-profile-button{padding:4px;background:var(--mecx-color-gray-100);border-radius:8px;max-width:140px;cursor:pointer;display:inline-flex;gap:4px;align-items:center}monkey-user-profile-button.open .arrow{transform:rotate(180deg)}monkey-user-profile-button monkey-avatar{background-color:var(--mecx-color-white)}monkey-user-profile-button.sm{max-width:150px}monkey-user-profile-button.md{border-radius:12px;max-width:160px}monkey-user-profile-button.lg{border-radius:16px;max-width:170px}monkey-user-profile-button .menu{min-width:150px}monkey-user-profile-button monkey-button span{text-decoration:none}\n"], dependencies: [{ kind: "component", type: MonkeyAvatarComponent, selector: "monkey-avatar", inputs: ["size", "src", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyUserProfileButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyUserProfileButtonComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, imports: [MonkeyAvatarComponent, UtilIconComponent, MonkeyDirectivesModule], selector: 'monkey-user-profile-button', template: `
+            args: [{ encapsulation: ViewEncapsulation.None, imports: [MonkeyAvatarComponent, UtilIconComponent, MonkeyPopoverDirective], selector: 'monkey-user-profile-button', template: `
     <monkey-avatar [size]="size" [src]="iconName ? { iconName } : { name }" />
     <div class="lh-24 text-truncate flex-grow-1 fs-xxs text-gray-900">
       {{ name }}
@@ -9070,6 +8933,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * MIT Licence
  ************************* */
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyBadgeDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.badgePosition = 'right';
+        this.badgeSize = 'md';
+        this.badgeHidden = false;
+        this.monkeyBadge = '';
+        this.badgeBackground = null;
+        this.badgeColor = null;
+        this.badgeEl = null;
+        // not to do
+    }
+    ngOnChanges() {
+        const { badgeHidden, badgeEl, renderer, el } = this;
+        if (badgeHidden) {
+            this.removeBadge();
+            return;
+        }
+        if (!badgeEl) {
+            this.badgeEl = renderer.createElement('span');
+            renderer.setStyle(el.nativeElement, 'position', 'relative');
+            renderer.appendChild(el.nativeElement, this.badgeEl);
+        }
+        this.updateBadge();
+    }
+    updateBadge() {
+        const { badgeEl, renderer, monkeyBadge, badgeSize, badgeColor, badgePosition, badgeBackground } = this;
+        renderer.addClass(badgeEl, 'monkey-badge');
+        renderer.addClass(badgeEl, `monkey-badge-${badgeSize}`);
+        renderer.addClass(badgeEl, `monkey-badge-${badgePosition}`);
+        renderer.setAttribute(badgeEl, 'style', `
+                --badge-background: ${badgeBackground ?? 'unset'};
+                --badge-color: ${badgeColor ?? 'unset'}
+            `);
+        this.renderer.setProperty(this.badgeEl, 'textContent', monkeyBadge);
+    }
+    removeBadge() {
+        const { renderer, el, badgeEl } = this;
+        if (!el.nativeElement || !badgeEl)
+            return;
+        renderer.removeChild(el.nativeElement, badgeEl);
+        renderer.removeStyle(el.nativeElement, 'position');
+        this.badgeEl = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MonkeyBadgeDirective, isStandalone: true, selector: "[monkeyBadge]", inputs: { badgePosition: "badgePosition", badgeSize: "badgeSize", badgeHidden: "badgeHidden", monkeyBadge: "monkeyBadge", badgeBackground: "badgeBackground", badgeColor: "badgeColor" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MonkeyBadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[monkeyBadge]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { badgePosition: [{
+                type: Input
+            }], badgeSize: [{
+                type: Input
+            }], badgeHidden: [{
+                type: Input
+            }], monkeyBadge: [{
+                type: Input
+            }], badgeBackground: [{
+                type: Input
+            }], badgeColor: [{
+                type: Input
+            }] } });
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -9080,5 +9015,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDirectivesModule, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, 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, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, getCurrencySymbol, injectTokenWithWarning };
+export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, 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, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, getCurrencySymbol, injectTokenWithWarning };
 //# sourceMappingURL=monkey-style-guide-v2.mjs.map