monkey-style-guide-v2 0.0.40 → 0.0.42

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

@@ -168,7 +168,7 @@ class UtilIconComponent {
             d="M9.808 2.528 C 9.752 2.542,9.671 2.574,9.628 2.599 C 9.585 2.625,8.414 3.781,7.025 5.168 L 4.500 7.690 3.475 6.667 C 2.865 6.059,2.414 5.624,2.360 5.594 C 2.137 5.467,1.822 5.478,1.603 5.620 C 1.226 5.863,1.141 6.369,1.419 6.715 C 1.558 6.887,4.068 9.375,4.140 9.411 C 4.366 9.525,4.634 9.525,4.860 9.411 C 4.931 9.376,10.438 3.892,10.581 3.715 C 10.688 3.582,10.742 3.425,10.742 3.250 C 10.742 2.758,10.293 2.410,9.808 2.528 "
             stroke="none"
             fill-rule="evenodd"
-            fill="var(--mecx-color-theme-contrast-500)"
+            fill="var(--mecx-color-theme-contrast-500"
           ></path>
         </svg>
       }
@@ -179,7 +179,7 @@ class UtilIconComponent {
             d="M1.333 0.268 C 1.300 0.274,1.225 0.303,1.167 0.332 C 1.054 0.388,0.939 0.490,0.866 0.599 C 0.776 0.732,0.732 0.936,0.757 1.098 C 0.786 1.283,0.848 1.405,0.977 1.532 C 1.071 1.624,1.148 1.673,1.253 1.710 L 1.340 1.740 4.000 1.740 L 6.660 1.740 6.747 1.710 C 6.943 1.642,7.128 1.462,7.200 1.270 C 7.265 1.095,7.265 0.904,7.200 0.730 C 7.118 0.510,6.880 0.308,6.655 0.267 C 6.565 0.250,1.420 0.251,1.333 0.268"
             stroke="none"
             fill-rule="evenodd"
-            fill="var(--mecx-color-theme-contrast-500)"
+            fill="var(--mecx-color-theme-contrast-500"
           ></path>
         </svg>
       }
@@ -262,7 +262,7 @@ class UtilIconComponent {
         </svg>
       }
     }
-  `, isInline: true, styles: [":host{display:flex}\n"] }); }
+  `, isInline: true, styles: [":host{display:flex;background-color:transparent}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UtilIconComponent, decorators: [{
             type: Component,
@@ -350,7 +350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             d="M9.808 2.528 C 9.752 2.542,9.671 2.574,9.628 2.599 C 9.585 2.625,8.414 3.781,7.025 5.168 L 4.500 7.690 3.475 6.667 C 2.865 6.059,2.414 5.624,2.360 5.594 C 2.137 5.467,1.822 5.478,1.603 5.620 C 1.226 5.863,1.141 6.369,1.419 6.715 C 1.558 6.887,4.068 9.375,4.140 9.411 C 4.366 9.525,4.634 9.525,4.860 9.411 C 4.931 9.376,10.438 3.892,10.581 3.715 C 10.688 3.582,10.742 3.425,10.742 3.250 C 10.742 2.758,10.293 2.410,9.808 2.528 "
             stroke="none"
             fill-rule="evenodd"
-            fill="var(--mecx-color-theme-contrast-500)"
+            fill="var(--mecx-color-theme-contrast-500"
           ></path>
         </svg>
       }
@@ -361,7 +361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             d="M1.333 0.268 C 1.300 0.274,1.225 0.303,1.167 0.332 C 1.054 0.388,0.939 0.490,0.866 0.599 C 0.776 0.732,0.732 0.936,0.757 1.098 C 0.786 1.283,0.848 1.405,0.977 1.532 C 1.071 1.624,1.148 1.673,1.253 1.710 L 1.340 1.740 4.000 1.740 L 6.660 1.740 6.747 1.710 C 6.943 1.642,7.128 1.462,7.200 1.270 C 7.265 1.095,7.265 0.904,7.200 0.730 C 7.118 0.510,6.880 0.308,6.655 0.267 C 6.565 0.250,1.420 0.251,1.333 0.268"
             stroke="none"
             fill-rule="evenodd"
-            fill="var(--mecx-color-theme-contrast-500)"
+            fill="var(--mecx-color-theme-contrast-500"
           ></path>
         </svg>
       }
@@ -444,7 +444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         </svg>
       }
     }
-  `, styles: [":host{display:flex}\n"] }]
+  `, styles: [":host{display:flex;background-color:transparent}\n"] }]
         }] });
 
 /** ************************
@@ -699,6 +699,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * MIT Licence
  ************************* */
 class MonkeyAvatarComponent {
+    get classes() {
+        return this.size();
+    }
     constructor() {
         this._id = inject(IdGenerator).getId('monkey-avatar-');
         this.size = input('xs');
@@ -733,16 +736,19 @@ class MonkeyAvatarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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" } }, ngImport: i0, template: "<div class=\"monkey-avatar\" [class]=\"size()\">\n  @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</div>\n", styles: [".monkey-avatar{align-items:center;background:#f1f2f3;border-radius:4px;display:flex;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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyAvatarComponent, decorators: [{
             type: Component,
-            args: [{ imports: [MonkeyIconComponent], selector: 'monkey-avatar', host: {
+            args: [{ imports: [MonkeyIconComponent], encapsulation: ViewEncapsulation.None, selector: 'monkey-avatar', host: {
                         'data-testid': 'monkey-avatar',
                         '[attr.id]': '_id',
                         '[id]': '_id'
-                    }, template: "<div class=\"monkey-avatar\" [class]=\"size()\">\n  @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</div>\n", styles: [".monkey-avatar{align-items:center;background:#f1f2f3;border-radius:4px;display:flex;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"] }]
-        }], ctorParameters: () => [] });
+                    }, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
@@ -1108,7 +1114,7 @@ class MonkeyPopoverContentComponent {
     }
     ngAfterViewInit() {
         setTimeout(() => {
-            const focusable = this.host.nativeElement.querySelector('button, input, select, textarea');
+            const focusable = this.host.nativeElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
             focusable?.focus();
         });
     }
@@ -1707,7 +1713,7 @@ class MonkeyCheckboxComponent {
                 useExisting: MonkeyCheckboxComponent,
                 multi: true
             }
-        ], queries: [{ propertyName: "infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "helperChildren", predicate: MonkeyHelperDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (hasHeader) {\n  <div class=\"header\">\n    <ng-content select=\"monkey-label\" />\n    <ng-content select=\"monkey-helper\" />\n  </div>\n}\n<label [attr.for]=\"inputId\">\n  <input\n    type=\"checkbox\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"onChangeEvent($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus($event)\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n  />\n  <span class=\"checkbox\">\n    @if (indeterminate) {\n      <util-icon class=\"icon\" name=\"minus\" />\n    } @else if (value) {\n      <util-icon class=\"icon\" name=\"check\" />\n    }\n  </span>\n  <span class=\"checkbox-label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n@if (showFooter) {\n  @switch (getFooterMessages()) {\n    @case ('error') {\n      <ng-content select=\"monkey-error\" />\n    }\n    @case ('info') {\n      <ng-content select=\"monkey-info\" />\n    }\n  }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .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}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox util-icon{background:transparent}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
+        ], queries: [{ propertyName: "infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "helperChildren", predicate: MonkeyHelperDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (hasHeader) {\n  <div class=\"header\">\n    <ng-content select=\"monkey-label\" />\n    <ng-content select=\"monkey-helper\" />\n  </div>\n}\n<label [attr.for]=\"inputId\">\n  <input\n    type=\"checkbox\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"onChangeEvent($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus($event)\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n  />\n  <span class=\"checkbox\">\n    @if (indeterminate) {\n      <util-icon class=\"icon\" name=\"minus\" />\n    } @else if (value) {\n      <util-icon class=\"icon\" name=\"check\" />\n    }\n  </span>\n  <span class=\"checkbox-label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n@if (showFooter) {\n  @switch (getFooterMessages()) {\n    @case ('error') {\n      <ng-content select=\"monkey-error\" />\n    }\n    @case ('info') {\n      <ng-content select=\"monkey-info\" />\n    }\n  }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .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}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
             trigger('iconAnimation', [
                 transition(':enter', [
                     animate('250ms ease-in-out', keyframes([
@@ -1767,7 +1773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         '[class.sm]': 'size.includes("sm")',
                         '[class.md]': 'size.includes("md")',
                         '[class.lg]': 'size.includes("lg")'
-                    }, template: "@if (hasHeader) {\n  <div class=\"header\">\n    <ng-content select=\"monkey-label\" />\n    <ng-content select=\"monkey-helper\" />\n  </div>\n}\n<label [attr.for]=\"inputId\">\n  <input\n    type=\"checkbox\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"onChangeEvent($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus($event)\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n  />\n  <span class=\"checkbox\">\n    @if (indeterminate) {\n      <util-icon class=\"icon\" name=\"minus\" />\n    } @else if (value) {\n      <util-icon class=\"icon\" name=\"check\" />\n    }\n  </span>\n  <span class=\"checkbox-label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n@if (showFooter) {\n  @switch (getFooterMessages()) {\n    @case ('error') {\n      <ng-content select=\"monkey-error\" />\n    }\n    @case ('info') {\n      <ng-content select=\"monkey-info\" />\n    }\n  }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .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}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox util-icon{background:transparent}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"] }]
+                    }, template: "@if (hasHeader) {\n  <div class=\"header\">\n    <ng-content select=\"monkey-label\" />\n    <ng-content select=\"monkey-helper\" />\n  </div>\n}\n<label [attr.for]=\"inputId\">\n  <input\n    type=\"checkbox\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"onChangeEvent($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus($event)\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n  />\n  <span class=\"checkbox\">\n    @if (indeterminate) {\n      <util-icon class=\"icon\" name=\"minus\" />\n    } @else if (value) {\n      <util-icon class=\"icon\" name=\"check\" />\n    }\n  </span>\n  <span class=\"checkbox-label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n@if (showFooter) {\n  @switch (getFooterMessages()) {\n    @case ('error') {\n      <ng-content select=\"monkey-error\" />\n    }\n    @case ('info') {\n      <ng-content select=\"monkey-info\" />\n    }\n  }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .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}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"] }]
         }], propDecorators: { infoChildren: [{
                 type: ContentChildren,
                 args: [MonkeyInfoDirective, { descendants: true }]
@@ -2260,7 +2266,7 @@ class MonkeyFormFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: "id", hideAction: ["hideAction", "hideAction", booleanAttribute], enableClear: ["enableClear", "enableClear", booleanAttribute], size: "size" }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "class.mecx-form-field-borderless": "hideBorder", "attr.id": "id", "id": "id", "class": "size" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true }, { propertyName: "_labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "_helperChildren", predicate: MonkeyHelperDirective, descendants: true }, { propertyName: "_prefixChildren", predicate: MonkeyPrefixDirective, descendants: true }, { propertyName: "_suffixChildren", predicate: MonkeySuffixDirective, descendants: true }, { propertyName: "_infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "_errorChildren", predicate: MonkeyErrorDirective, descendants: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (showHeader) {\n  <div class=\"mecx-form-field-header\">\n    <label [id]=\"labelId\" [attr.for]=\"control.id\">\n      <ng-content select=\"monkey-label\"></ng-content>\n    </label>\n    <ng-content select=\"monkey-helper\"></ng-content>\n  </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n  @if (hasPrefix) {\n    <ng-content select=\"monkey-prefix\"></ng-content>\n  }\n  @if (getSymbols(); as symbols) {\n    <div class=\"mecx-form-field-prefix-symbol\">\n      {{ symbols }}\n    </div>\n  }\n\n  <ng-content></ng-content>\n\n  @if (showClear) {\n    <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n  }\n  @if (showCalendar) {\n    <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n  }\n  @if (showLoading) {\n    <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n  }\n\n  @if (hasSuffix) {\n    <ng-content select=\"monkey-suffix\"></ng-content>\n  }\n</div>\n\n<div class=\"mecx-form-field-footer\">\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", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{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;min-height:16px}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: "id", hideAction: ["hideAction", "hideAction", booleanAttribute], enableClear: ["enableClear", "enableClear", booleanAttribute], size: "size" }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "class.mecx-form-field-borderless": "hideBorder", "attr.id": "id", "id": "id", "class": "size" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true }, { propertyName: "_labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "_helperChildren", predicate: MonkeyHelperDirective, descendants: true }, { propertyName: "_prefixChildren", predicate: MonkeyPrefixDirective, descendants: true }, { propertyName: "_suffixChildren", predicate: MonkeySuffixDirective, descendants: true }, { propertyName: "_infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "_errorChildren", predicate: MonkeyErrorDirective, descendants: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (showHeader) {\n  <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n    <label [id]=\"labelId\" [attr.for]=\"control.id\">\n      <ng-content select=\"monkey-label\"></ng-content>\n    </label>\n    <ng-content select=\"monkey-helper\"></ng-content>\n  </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n  @if (hasPrefix) {\n    <ng-content select=\"monkey-prefix\"></ng-content>\n  }\n  @if (getSymbols(); as symbols) {\n    <div class=\"mecx-form-field-prefix-symbol\">\n      {{ symbols }}\n    </div>\n  }\n\n  <ng-content></ng-content>\n\n  @if (showClear) {\n    <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n  }\n  @if (showCalendar) {\n    <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n  }\n  @if (showLoading) {\n    <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n  }\n\n  @if (hasSuffix) {\n    <ng-content select=\"monkey-suffix\"></ng-content>\n  }\n</div>\n\n@if (showFooter) {\n  <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n    @switch (getFooterMessages()) {\n      @case ('error') {\n        <ng-content select=\"monkey-error\"></ng-content>\n      }\n      @case ('info') {\n        <div class=\"mecx-form-field-info\">\n          <ng-content select=\"monkey-info\"></ng-content>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{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}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
             type: Component,
@@ -2273,7 +2279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         '[attr.id]': 'id',
                         '[id]': 'id',
                         '[class]': 'size'
-                    }, standalone: false, template: "@if (showHeader) {\n  <div class=\"mecx-form-field-header\">\n    <label [id]=\"labelId\" [attr.for]=\"control.id\">\n      <ng-content select=\"monkey-label\"></ng-content>\n    </label>\n    <ng-content select=\"monkey-helper\"></ng-content>\n  </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n  @if (hasPrefix) {\n    <ng-content select=\"monkey-prefix\"></ng-content>\n  }\n  @if (getSymbols(); as symbols) {\n    <div class=\"mecx-form-field-prefix-symbol\">\n      {{ symbols }}\n    </div>\n  }\n\n  <ng-content></ng-content>\n\n  @if (showClear) {\n    <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n  }\n  @if (showCalendar) {\n    <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n  }\n  @if (showLoading) {\n    <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n  }\n\n  @if (hasSuffix) {\n    <ng-content select=\"monkey-suffix\"></ng-content>\n  }\n</div>\n\n<div class=\"mecx-form-field-footer\">\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", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{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;min-height:16px}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"] }]
+                    }, standalone: false, template: "@if (showHeader) {\n  <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n    <label [id]=\"labelId\" [attr.for]=\"control.id\">\n      <ng-content select=\"monkey-label\"></ng-content>\n    </label>\n    <ng-content select=\"monkey-helper\"></ng-content>\n  </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n  @if (hasPrefix) {\n    <ng-content select=\"monkey-prefix\"></ng-content>\n  }\n  @if (getSymbols(); as symbols) {\n    <div class=\"mecx-form-field-prefix-symbol\">\n      {{ symbols }}\n    </div>\n  }\n\n  <ng-content></ng-content>\n\n  @if (showClear) {\n    <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n  }\n  @if (showCalendar) {\n    <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n  }\n  @if (showLoading) {\n    <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n  }\n\n  @if (hasSuffix) {\n    <ng-content select=\"monkey-suffix\"></ng-content>\n  }\n</div>\n\n@if (showFooter) {\n  <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n    @switch (getFooterMessages()) {\n      @case ('error') {\n        <ng-content select=\"monkey-error\"></ng-content>\n      }\n      @case ('info') {\n        <div class=\"mecx-form-field-info\">\n          <ng-content select=\"monkey-info\"></ng-content>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input
             }], hideAction: [{
@@ -3380,7 +3386,6 @@ class MonkeyOptionComponent {
         this.selected = false;
         this.tabIndex = 0;
         this.id = this.idGenerator.getId('mecx-option-');
-        this.elementRef = inject(ElementRef);
     }
     get displayContent() {
         return (this._content?.nativeElement.textContent || '').trim();
@@ -3403,9 +3408,6 @@ class MonkeyOptionComponent {
             this.handleAction(event);
         }
     }
-    get element() {
-        return this.elementRef.nativeElement;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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: `
     @if (type === 'checkbox') {
@@ -3461,10 +3463,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyRadioButtonComponent {
-    get classes() {
-        return `${this.position} ${this.size}`;
+class MonkeyFilterBarComponent {
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this.showPopOver = false;
+        this.elementTarget = null;
+        this.closePopOver = () => {
+            this.showPopOver = false;
+        };
+    }
+    ngAfterContentInit() { }
+    ngOnChanges(changes) { }
+    ngOnDestroy() { }
+    onShowPopOver(el) {
+        this.elementTarget = el.element;
+        this.showPopOver = true;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.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: `
+    <monkey-form-field>
+      <input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
+    </monkey-form-field>
+    <monkey-button
+      #popoverTarget
+      class="btn-filter"
+      type="secondary"
+      (click)="onShowPopOver(popoverTarget)"
+    >
+      <util-icon class="icon" name="addPlus" first />
+      Adicionar Filtro
+    </monkey-button>
+
+    <ng-template
+      [monkeyPopover]="showPopOver"
+      [monkeyPopoverTarget]="elementTarget"
+      [monkeyPopoverClosed]="closePopOver"
+      monkeyPopoverDir="ltr"
+      [monkeyPopoverHideHeader]="true"
+    >
+      <monkey-option> Status </monkey-option>
+      <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"], 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"] }, { 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: "19.2.14", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-filter-bar', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MonkeyFormFieldModule,
+                        MonkeyDirectivesModule,
+                        MonkeyFormFieldModule,
+                        MonkeyInputModule,
+                        MonkeyButtonComponent,
+                        UtilIconComponent,
+                        MonkeyOptionComponent
+                    ], template: `
+    <monkey-form-field>
+      <input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
+    </monkey-form-field>
+    <monkey-button
+      #popoverTarget
+      class="btn-filter"
+      type="secondary"
+      (click)="onShowPopOver(popoverTarget)"
+    >
+      <util-icon class="icon" name="addPlus" first />
+      Adicionar Filtro
+    </monkey-button>
+
+    <ng-template
+      [monkeyPopover]="showPopOver"
+      [monkeyPopoverTarget]="elementTarget"
+      [monkeyPopoverClosed]="closePopOver"
+      monkeyPopoverDir="ltr"
+      [monkeyPopoverHideHeader]="true"
+    >
+      <monkey-option> Status </monkey-option>
+      <monkey-option> Data de Emissão </monkey-option>
+      <monkey-option> Data de Vencimento </monkey-option>
+    </ng-template>
+  `, host: {
+                        '[attr.data-testid]': "'monkey-filter-bar'",
+                        class: 'mecx-filter-bar',
+                        '[class.mecx-filter-bar-disabled]': '_disabled',
+                        '[class.mecx-filter-bar-focused]': 'focused',
+                        '[attr.id]': 'id',
+                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
+                        '(focus)': '_onFocus()',
+                        '(blur)': '_onBlur()'
+                    }, 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"] }]
+        }] });
+
+/** ************************
+ * 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 MonkeyInputCodeComponent {
     get disabled() {
         if (this.ngControl && this.ngControl.disabled !== null) {
             return this.ngControl.disabled;
@@ -3478,93 +3582,53 @@ class MonkeyRadioButtonComponent {
             this.stateChanges.next();
         }
     }
-    get required() {
-        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
-    }
-    set required(value) {
-        this._required = value;
-        this.stateChanges.next();
-    }
     set value(value) {
-        if (this._value !== value) {
+        if (this._value !== value && value !== undefined) {
             this._value = value;
             this._onChange(value);
+            this._onTouched();
         }
     }
     get value() {
         return this._value;
     }
-    constructor(changeDetectorRef, formField) {
-        this.changeDetectorRef = changeDetectorRef;
+    constructor(formField) {
         this.formField = formField;
-        this.tabIndex = 0;
-        this.onChange = new EventEmitter();
-        this.onSearch = new EventEmitter();
-        this.position = 'horizontal';
-        this.size = 'lg';
+        this.stateChanges = new Subject();
+        this.type = 'input-code';
+        this.currency = false;
+        this.percent = false;
+        this.id = inject(IdGenerator).getId('monkey-input-code-');
+        this._onChange = () => { };
+        this._onTouched = () => { };
         this._value = null;
-        this._destroyRef = inject(DestroyRef);
-        this.idGenerator = inject(IdGenerator);
         this.ngControl = inject(NgControl, { self: true, optional: true });
-        this._elementRef = inject(ElementRef);
         this.focused = false;
+        this.length = input(6);
+        this.inputType = input('numeric');
+        this.inputIndices = computed(() => {
+            return Array.from({ length: this.length() }, (_, i) => {
+                return '';
+            });
+        });
         this._disabled = false;
-        this.id = this.idGenerator.getId('monkey-radiobutton-');
-        this.stateChanges = new Subject();
-        this.type = 'radio-button';
-        this._onChange = () => { };
-        this._onTouched = () => { };
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
+        if (this.formField) {
+            this.formField.hideAction = true;
+        }
     }
-    changeSelected() {
-        setTimeout(() => {
-            if (this.options) {
-                this.options.forEach((opt) => {
-                    opt.selected = opt.value() === this.value;
-                });
-            }
-            this.changeDetectorRef.markForCheck();
-        });
-    }
-    initializeOptions() {
-        setTimeout(() => {
-            this.options?.forEach((option) => {
-                option.type = 'radio';
-                if (!option.action) {
-                    option.action = this.selectOption.bind(this, option);
-                }
-            });
-            this.changeDetectorRef.markForCheck();
-        }, 0);
-    }
-    ngAfterContentInit() {
-        this.initializeOptions();
-        this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
-            this.initializeOptions();
-            this.changeSelected();
-        });
-    }
-    selectOption(option) {
-        if (!option.disabled && !this.disabled) {
-            this.value = option.value();
-            this._onChange(this.value);
-            this.onChange.emit(this.value);
-            this.options.forEach((opt) => {
-                opt.selected = opt.value() === this.value;
+    ngAfterViewInit() {
+        if (this.formField) {
+            const input = this.formField.elementRef.nativeElement.querySelector('.mecx-form-field-body');
+            const height = input.offsetHeight > 40 ? input.offsetHeight : 40;
+            this.inputs.forEach((inputEl) => {
+                inputEl.nativeElement.style.height = `${height}px`;
+                inputEl.nativeElement.style.width = `${height}px`;
             });
         }
     }
-    writeValue(value) {
-        this.value = value;
-        this.changeSelected();
-    }
-    onContainerClick(event) {
-        if (this.disabled)
-            return;
-        this._elementRef.nativeElement.focus();
-    }
     _onFocus() {
         if (!this.disabled) {
             this.focused = true;
@@ -3572,624 +3636,23 @@ class MonkeyRadioButtonComponent {
             this.stateChanges.next();
         }
     }
-    _onBlur() {
-        this.focused = false;
-        this.stateChanges.next();
+    propagateCode() {
+        const code = this.inputIndices().join('');
+        this.writeValue(code);
     }
-    registerOnChange(fn) {
-        this._onChange = fn;
+    focusNextInput(input) {
+        const next = input.nextElementSibling;
+        next?.focus();
     }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
+    focusPreviousInput(input) {
+        const previous = input.previousElementSibling;
+        previous?.focus();
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.initializeOptions();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.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: [
-            // eslint-disable-next-line no-use-before-define
-            { provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
-        ], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], ngImport: i0, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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
-                        { provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
-                    ], host: {
-                        'data-testid': 'monkey-radiobutton',
-                        class: 'mecx-radiobutton',
-                        '[class.mecx-disabled]': 'disabled',
-                        '[class.mecx-radiobutton-focused]': 'focused',
-                        '[attr.id]': 'id',
-                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
-                        '(focus)': '_onFocus()',
-                        '(blur)': '_onBlur()'
-                    }, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MonkeyFormFieldComponent, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { options: [{
-                type: ContentChildren,
-                args: [MonkeyOptionComponent]
-            }], tabIndex: [{
-                type: Input
-            }], onChange: [{
-                type: Output
-            }], onSearch: [{
-                type: Output
-            }], position: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], classes: [{
-                type: HostBinding,
-                args: ['class']
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], value: [{
-                type: Input
-            }] } });
-
-/** ************************
- * 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 MonkeyFilterBarCurrencyComponent {
-    constructor() {
-        this.option = 'FROM';
-        this.value = 0;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyFilterBarCurrencyComponent, isStandalone: true, selector: "monkey-filter-bar-currency", host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-filter-bar-currency'", "class.mecx-filter-bar-currency-disabled": "_disabled", "class.mecx-filter-bar-currency-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-filter-bar-currency" }, ngImport: i0, template: `
-    <monkey-radiobutton [(ngModel)]="option">
-      <monkey-option [value]="item" *ngFor="let item of ['FROM', 'UNTIL']">
-        {{ item }}
-      </monkey-option>
-    </monkey-radiobutton>
-    <monkey-form-field>
-      <input type="text" monkey-input-currency [(ngModel)]="value" />
-      <monkey-info>
-        Helper text Helper text Helper text Helper text Helper text Helper text
-      </monkey-info>
-      <monkey-suffix>
-        <i class="mk-i mk-i-calendar"></i>
-      </monkey-suffix>
-    </monkey-form-field>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:flex-start;padding:12px;max-width:240px}:host monkey-radiobutton{display:flex;flex-direction:column}:host monkey-radiobutton monkey-option{padding:0 24px 6px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["tabIndex", "position", "size", "disabled", "required", "value"], outputs: ["onChange", "onSearch"] }, { 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"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputCurrencyDirective, selector: "input[monkey-input-currency]", inputs: ["name", "disabled", "id", "required", "type"], exportAs: ["monkeyInput"] }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyInfoDirective, selector: "monkey-info" }, { kind: "directive", type: MonkeySuffixDirective, selector: "monkey-suffix", inputs: ["hasAction"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarCurrencyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-filter-bar-currency', imports: [
-                        CommonModule,
-                        FormsModule,
-                        MonkeyRadioButtonComponent,
-                        MonkeyOptionComponent,
-                        MonkeyFormFieldModule,
-                        MonkeyInputModule,
-                        MonkeyDirectivesModule
-                    ], template: `
-    <monkey-radiobutton [(ngModel)]="option">
-      <monkey-option [value]="item" *ngFor="let item of ['FROM', 'UNTIL']">
-        {{ item }}
-      </monkey-option>
-    </monkey-radiobutton>
-    <monkey-form-field>
-      <input type="text" monkey-input-currency [(ngModel)]="value" />
-      <monkey-info>
-        Helper text Helper text Helper text Helper text Helper text Helper text
-      </monkey-info>
-      <monkey-suffix>
-        <i class="mk-i mk-i-calendar"></i>
-      </monkey-suffix>
-    </monkey-form-field>
-  `, host: {
-                        '[attr.data-testid]': "'monkey-filter-bar-currency'",
-                        class: 'mecx-filter-bar-currency',
-                        '[class.mecx-filter-bar-currency-disabled]': '_disabled',
-                        '[class.mecx-filter-bar-currency-focused]': 'focused',
-                        '[attr.id]': 'id',
-                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
-                        '(focus)': '_onFocus()',
-                        '(blur)': '_onBlur()'
-                    }, styles: [":host{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:flex-start;padding:12px;max-width:240px}:host monkey-radiobutton{display:flex;flex-direction:column}:host monkey-radiobutton monkey-option{padding:0 24px 6px 0}\n"] }]
-        }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyFilterBarDateComponent {
-    constructor() {
-        this.internalTarget = null;
-        this.onClose = new EventEmitter();
-        this.showPopOver = false;
-        this.closePopOver = () => {
-            this.showPopOver = false;
-        };
-    }
-    onShowPopOver(el) {
-        let { target } = el;
-        if (target.tagName.toLowerCase() === 'div') {
-            target = target.offsetParent;
-        }
-        this.internalTarget = target;
-        this.showPopOver = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyFilterBarDateComponent, isStandalone: true, selector: "monkey-filter-bar-date", inputs: { internalTarget: "internalTarget" }, outputs: { onClose: "onClose" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-filter-bar-date'", "class.mecx-filter-bar-date-disabled": "_disabled", "class.mecx-filter-bar-date-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-filter-bar-date" }, ngImport: i0, template: `
-    <monkey-option class="option"> 1 semana atrás </monkey-option>
-    <monkey-option class="option"> 1 mês atras </monkey-option>
-    <monkey-option class="option"> 3 mêses atras </monkey-option>
-    <monkey-option class="option" (click)="onShowPopOver($event)"> Personalizado </monkey-option>
-
-    <ng-template
-      [monkeyPopover]="showPopOver"
-      [monkeyPopoverTarget]="internalTarget"
-      [monkeyPopoverClosed]="closePopOver"
-      monkeyPopoverDir="ltr"
-      [monkeyPopoverHideHeader]="true"
-      [hideQuickAction]="true"
-    >
-      <monkey-date-range minDate="2024-12-20" maxDate="2025-06-20" hideActions> </monkey-date-range>
-    </ng-template>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarDateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-filter-bar-date', imports: [
-                        CommonModule,
-                        FormsModule,
-                        MonkeyDirectivesModule,
-                        MonkeyOptionComponent,
-                        MonkeyDateRangeComponent
-                    ], template: `
-    <monkey-option class="option"> 1 semana atrás </monkey-option>
-    <monkey-option class="option"> 1 mês atras </monkey-option>
-    <monkey-option class="option"> 3 mêses atras </monkey-option>
-    <monkey-option class="option" (click)="onShowPopOver($event)"> Personalizado </monkey-option>
-
-    <ng-template
-      [monkeyPopover]="showPopOver"
-      [monkeyPopoverTarget]="internalTarget"
-      [monkeyPopoverClosed]="closePopOver"
-      monkeyPopoverDir="ltr"
-      [monkeyPopoverHideHeader]="true"
-      [hideQuickAction]="true"
-    >
-      <monkey-date-range minDate="2024-12-20" maxDate="2025-06-20" hideActions> </monkey-date-range>
-    </ng-template>
-  `, host: {
-                        '[attr.data-testid]': "'monkey-filter-bar-date'",
-                        class: 'mecx-filter-bar-date',
-                        '[class.mecx-filter-bar-date-disabled]': '_disabled',
-                        '[class.mecx-filter-bar-date-focused]': 'focused',
-                        '[attr.id]': 'id',
-                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
-                        '(focus)': '_onFocus()',
-                        '(blur)': '_onBlur()'
-                    }, styles: [":host{display:flex;flex-direction:column}\n"] }]
-        }], propDecorators: { internalTarget: [{
-                type: Input
-            }], onClose: [{
-                type: Output
-            }] } });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyFilterBarInputComponent {
-    constructor() {
-        this.value = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyFilterBarInputComponent, isStandalone: true, selector: "monkey-filter-bar-input", host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-filter-bar-input'", "class.mecx-filter-bar-input-disabled": "_disabled", "class.mecx-filter-bar-input-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-filter-bar-input" }, ngImport: i0, template: `
-    <monkey-form-field>
-      <input type="text" monkey-input [(ngModel)]="value" />
-      <monkey-info>
-        Helper text Helper text Helper text Helper text Helper text Helper text
-      </monkey-info>
-    </monkey-form-field>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:flex-start;padding:12px;max-width:240px}:host monkey-radiobutton{display:flex;flex-direction:column}:host monkey-radiobutton monkey-option{padding:0 24px 6px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], 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: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyInfoDirective, selector: "monkey-info" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-filter-bar-input', imports: [
-                        CommonModule,
-                        FormsModule,
-                        MonkeyRadioButtonComponent,
-                        MonkeyOptionComponent,
-                        MonkeyFormFieldModule,
-                        MonkeyInputModule,
-                        MonkeyDirectivesModule
-                    ], template: `
-    <monkey-form-field>
-      <input type="text" monkey-input [(ngModel)]="value" />
-      <monkey-info>
-        Helper text Helper text Helper text Helper text Helper text Helper text
-      </monkey-info>
-    </monkey-form-field>
-  `, host: {
-                        '[attr.data-testid]': "'monkey-filter-bar-input'",
-                        class: 'mecx-filter-bar-input',
-                        '[class.mecx-filter-bar-input-disabled]': '_disabled',
-                        '[class.mecx-filter-bar-input-focused]': 'focused',
-                        '[attr.id]': 'id',
-                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
-                        '(focus)': '_onFocus()',
-                        '(blur)': '_onBlur()'
-                    }, styles: [":host{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:flex-start;padding:12px;max-width:240px}:host monkey-radiobutton{display:flex;flex-direction:column}:host monkey-radiobutton monkey-option{padding:0 24px 6px 0}\n"] }]
-        }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyStatusComponent {
-    get class() {
-        return `${this.type()} ${this.size()}`;
-    }
-    get id() {
-        return this._id;
-    }
-    set id(value) {
-        this._id = value || this._uid;
-    }
-    constructor() {
-        this.type = input.required();
-        this.size = input('md');
-        this.label = input();
-        this._uid = inject(IdGenerator).getId('monkey-status-');
-        // eslint-disable-next-line no-self-assign
-        this.id = this.id;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-status', imports: [CommonModule], host: {
-                        'data-testid': 'monkey-status',
-                        '[attr.id]': 'id',
-                        '[id]': 'id'
-                    }, 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"] }]
-        }], ctorParameters: () => [], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], id: [{
-                type: Input
-            }] } });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyFilterBarStatusComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyFilterBarStatusComponent, isStandalone: true, selector: "monkey-filter-bar-status", host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-filter-bar-status'", "class.mecx-filter-bar-status-disabled": "_disabled", "class.mecx-filter-bar-status-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-filter-bar-status" }, ngImport: i0, template: `
-    <monkey-checkbox>Disponível</monkey-checkbox>
-    <monkey-checkbox>Antecipado</monkey-checkbox>
-    <monkey-checkbox>Em Aprovação</monkey-checkbox>
-    <monkey-checkbox>Recusado</monkey-checkbox>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:flex-start;padding:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["disabled", "indeterminate", "required", "showFooter", "size", "value"], outputs: ["onChange"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarStatusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-filter-bar-status', imports: [CommonModule, FormsModule, MonkeyStatusComponent, MonkeyCheckboxComponent], template: `
-    <monkey-checkbox>Disponível</monkey-checkbox>
-    <monkey-checkbox>Antecipado</monkey-checkbox>
-    <monkey-checkbox>Em Aprovação</monkey-checkbox>
-    <monkey-checkbox>Recusado</monkey-checkbox>
-  `, host: {
-                        '[attr.data-testid]': "'monkey-filter-bar-status'",
-                        class: 'mecx-filter-bar-status',
-                        '[class.mecx-filter-bar-status-disabled]': '_disabled',
-                        '[class.mecx-filter-bar-status-focused]': 'focused',
-                        '[attr.id]': 'id',
-                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
-                        '(focus)': '_onFocus()',
-                        '(blur)': '_onBlur()'
-                    }, styles: [":host{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:flex-start;padding:12px}\n"] }]
-        }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-/*
-type: 'input' | 'date' | 'checkbox' | 'currency';
-*/
-class MonkeyFilterBarComponent {
-    constructor() {
-        this._elementRef = inject(ElementRef);
-        this.showPopOver = false;
-        this.elementTarget = null;
-        this.showPopOverInternal = false;
-        this.elementTargetInternal = null;
-        this.closePopOver = () => {
-            this.showPopOver = false;
-        };
-        this.closePopOverInternal = () => {
-            this.showPopOverInternal = false;
-        };
-    }
-    ngAfterContentInit() { }
-    ngOnChanges(changes) { }
-    ngOnDestroy() { }
-    onShowPopOver(el) {
-        this.elementTarget = el.element;
-        this.showPopOver = true;
-    }
-    onShowPopOverInternal(el) {
-        let { target } = el;
-        if (target.tagName.toLowerCase() === 'div') {
-            target = target.offsetParent;
-        }
-        this.elementTargetInternal = target;
-        this.showPopOverInternal = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.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: `
-    <monkey-form-field>
-      <input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
-    </monkey-form-field>
-    <monkey-button
-      #popoverTarget
-      class="btn-filter"
-      type="secondary"
-      (click)="onShowPopOver(popoverTarget)"
-    >
-      <util-icon class="icon" name="addPlus" first />
-      Adicionar Filtro
-    </monkey-button>
-
-    <ng-template
-      [monkeyPopover]="showPopOver"
-      [monkeyPopoverTarget]="elementTarget"
-      [monkeyPopoverClosed]="closePopOver"
-      monkeyPopoverDir="ltr"
-      [monkeyPopoverHideHeader]="true"
-    >
-      <monkey-option class="option" (click)="onShowPopOverInternal($event)"> Status </monkey-option>
-      <monkey-option class="option" (click)="onShowPopOverInternal($event)"> Valor </monkey-option>
-      <monkey-option class="option" (click)="onShowPopOverInternal($event)">
-        Identificador
-      </monkey-option>
-      <monkey-option class="option" (click)="onShowPopOverInternal($event)">
-        Data de Criação
-      </monkey-option>
-      <monkey-option class="option" (click)="onShowPopOverInternal($event)">
-        Data de Vencimento 12 12
-      </monkey-option>
-    </ng-template>
-
-    <ng-template
-      [monkeyPopover]="showPopOverInternal"
-      [monkeyPopoverTarget]="elementTargetInternal"
-      [monkeyPopoverClosed]="closePopOverInternal"
-      monkeyPopoverDir="rt"
-      [monkeyPopoverTitle]="'Status'"
-      [monkeyPopoverActions]="popoverAction"
-    >
-      <!--<monkey-filter-bar-status></monkey-filter-bar-status>-->
-      <!--<monkey-filter-bar-currency></monkey-filter-bar-currency>-->
-      <monkey-filter-bar-input></monkey-filter-bar-input>
-
-      <!--<monkey-date-range hideSecondCalendar hideActions> </monkey-date-range>-->
-    </ng-template>
-
-    <ng-template #popoverAction>
-      <monkey-button type="secondary" size="sm" class="btn" (click)="closePopOver()">
-        Limpar
-      </monkey-button>
-      <monkey-button type="primary" size="sm" class="btn"> Aplicar </monkey-button>
-    </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"], 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"] }, { 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"] }, { kind: "component", type: MonkeyFilterBarInputComponent, selector: "monkey-filter-bar-input" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-filter-bar', imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MonkeyFormFieldModule,
-                        MonkeyDirectivesModule,
-                        MonkeyFormFieldModule,
-                        MonkeyInputModule,
-                        MonkeyButtonComponent,
-                        UtilIconComponent,
-                        MonkeyOptionComponent,
-                        MonkeyFilterBarStatusComponent,
-                        MonkeyFilterBarDateComponent,
-                        MonkeyFilterBarCurrencyComponent,
-                        MonkeyFilterBarInputComponent,
-                        MonkeyDateRangeComponent
-                    ], template: `
-    <monkey-form-field>
-      <input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
-    </monkey-form-field>
-    <monkey-button
-      #popoverTarget
-      class="btn-filter"
-      type="secondary"
-      (click)="onShowPopOver(popoverTarget)"
-    >
-      <util-icon class="icon" name="addPlus" first />
-      Adicionar Filtro
-    </monkey-button>
-
-    <ng-template
-      [monkeyPopover]="showPopOver"
-      [monkeyPopoverTarget]="elementTarget"
-      [monkeyPopoverClosed]="closePopOver"
-      monkeyPopoverDir="ltr"
-      [monkeyPopoverHideHeader]="true"
-    >
-      <monkey-option class="option" (click)="onShowPopOverInternal($event)"> Status </monkey-option>
-      <monkey-option class="option" (click)="onShowPopOverInternal($event)"> Valor </monkey-option>
-      <monkey-option class="option" (click)="onShowPopOverInternal($event)">
-        Identificador
-      </monkey-option>
-      <monkey-option class="option" (click)="onShowPopOverInternal($event)">
-        Data de Criação
-      </monkey-option>
-      <monkey-option class="option" (click)="onShowPopOverInternal($event)">
-        Data de Vencimento 12 12
-      </monkey-option>
-    </ng-template>
-
-    <ng-template
-      [monkeyPopover]="showPopOverInternal"
-      [monkeyPopoverTarget]="elementTargetInternal"
-      [monkeyPopoverClosed]="closePopOverInternal"
-      monkeyPopoverDir="rt"
-      [monkeyPopoverTitle]="'Status'"
-      [monkeyPopoverActions]="popoverAction"
-    >
-      <!--<monkey-filter-bar-status></monkey-filter-bar-status>-->
-      <!--<monkey-filter-bar-currency></monkey-filter-bar-currency>-->
-      <monkey-filter-bar-input></monkey-filter-bar-input>
-
-      <!--<monkey-date-range hideSecondCalendar hideActions> </monkey-date-range>-->
-    </ng-template>
-
-    <ng-template #popoverAction>
-      <monkey-button type="secondary" size="sm" class="btn" (click)="closePopOver()">
-        Limpar
-      </monkey-button>
-      <monkey-button type="primary" size="sm" class="btn"> Aplicar </monkey-button>
-    </ng-template>
-  `, host: {
-                        '[attr.data-testid]': "'monkey-filter-bar'",
-                        class: 'mecx-filter-bar',
-                        '[class.mecx-filter-bar-disabled]': '_disabled',
-                        '[class.mecx-filter-bar-focused]': 'focused',
-                        '[attr.id]': 'id',
-                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
-                        '(focus)': '_onFocus()',
-                        '(blur)': '_onBlur()'
-                    }, 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"] }]
-        }] });
-
-/** ************************
- * 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 MonkeyInputCodeComponent {
-    get disabled() {
-        if (this.ngControl && this.ngControl.disabled !== null) {
-            return this.ngControl.disabled;
-        }
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-        if (this.focused) {
-            this.focused = false;
-            this.stateChanges.next();
-        }
-    }
-    set value(value) {
-        if (this._value !== value && value !== undefined) {
-            this._value = value;
-            this._onChange(value);
-            this._onTouched();
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    constructor(formField) {
-        this.formField = formField;
-        this.stateChanges = new Subject();
-        this.type = 'input-code';
-        this.currency = false;
-        this.percent = false;
-        this.id = inject(IdGenerator).getId('monkey-input-code-');
-        this._onChange = () => { };
-        this._onTouched = () => { };
-        this._value = null;
-        this.ngControl = inject(NgControl, { self: true, optional: true });
-        this.focused = false;
-        this.length = input(6);
-        this.inputType = input('numeric');
-        this.inputIndices = computed(() => {
-            return Array.from({ length: this.length() }, (_, i) => {
-                return '';
-            });
-        });
-        this._disabled = false;
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-        if (this.formField) {
-            this.formField.hideAction = true;
-        }
-    }
-    ngAfterViewInit() {
-        if (this.formField) {
-            const input = this.formField.elementRef.nativeElement.querySelector('.mecx-form-field-body');
-            const height = input.offsetHeight > 40 ? input.offsetHeight : 40;
-            this.inputs.forEach((inputEl) => {
-                inputEl.nativeElement.style.height = `${height}px`;
-                inputEl.nativeElement.style.width = `${height}px`;
-            });
-        }
-    }
-    _onFocus() {
-        if (!this.disabled) {
-            this.focused = true;
-            this._onTouched();
-            this.stateChanges.next();
-        }
-    }
-    propagateCode() {
-        const code = this.inputIndices().join('');
-        this.writeValue(code);
-    }
-    focusNextInput(input) {
-        const next = input.nextElementSibling;
-        next?.focus();
-    }
-    focusPreviousInput(input) {
-        const previous = input.previousElementSibling;
-        previous?.focus();
-    }
-    setFullInputValue(value) {
-        const chars = value?.slice(0, this.length()).split('') || '';
-        chars.forEach((digit, index) => {
-            this.inputIndices()[index] = digit;
-        });
+    setFullInputValue(value) {
+        const chars = value?.slice(0, this.length()).split('') || '';
+        chars.forEach((digit, index) => {
+            this.inputIndices()[index] = digit;
+        });
     }
     isInvalid() {
         return this.formField.showInvalid;
@@ -6157,68 +5620,253 @@ class MonkeyModalService {
             maxHeight: config.maxHeight,
             disposeOnNavigation: config.closeOnNavigation
         });
-        if (config.backdropClass) {
-            state.backdropClass = config.backdropClass;
-        }
-        if (config.maxWidth) {
-            state.width = '100%';
-        }
-        if (config.maxHeight) {
-            state.height = '100%';
+        if (config.backdropClass) {
+            state.backdropClass = config.backdropClass;
+        }
+        if (config.maxWidth) {
+            state.width = '100%';
+        }
+        if (config.maxHeight) {
+            state.height = '100%';
+        }
+        return state;
+    }
+    createInjector(config, dialogRef, overlayRef, fallbackInjector) {
+        const providers = [
+            { provide: OverlayRef, useValue: overlayRef },
+            { provide: MonkeyModalRef, useValue: dialogRef },
+            { provide: MECX_MODAL_DATA, useValue: config.data }
+        ];
+        if (config.providers) {
+            providers.push(...config.providers);
+        }
+        return Injector.create({ parent: fallbackInjector, providers });
+    }
+    open(component, config) {
+        const defaultConfig = new MonkeyModalConfig();
+        config = { ...defaultConfig, ...config };
+        config.id = this._idGenerator.getId('monkey-modal-');
+        const overlayConfig = this.getOverlayConfig(config);
+        const overlayRef = this._overlay.create(overlayConfig);
+        const modalRef = new MonkeyModalRef(overlayRef, config);
+        const injector = this.createInjector(config, modalRef, overlayRef, this._injector);
+        const componentPortal = new ComponentPortal(component, null, injector);
+        const componentRef = overlayRef.attach(componentPortal);
+        const componentElement = componentRef.location.nativeElement;
+        componentElement.style.width = '100%';
+        componentElement.style.height = '100%';
+        modalRef.componentElement = componentElement;
+        modalRef.componentInstance = componentRef.instance;
+        this.openDialogs.push(modalRef);
+        return modalRef;
+    }
+    openDefault(params, config) {
+        config.providers = [{ provide: MECX_MODAL_DEFAULT_CONFIG, useValue: params }];
+        config.icon = config.icon ? config.icon : 'help';
+        return this.open(MonkeyModalDefaultComponent, config);
+    }
+    openConfirmation(params, config) {
+        config.providers = [{ provide: MECX_MODAL_CONFIRMATION_CONFIG, useValue: params }];
+        return this.open(MonkeyModalConfirmationComponent, config);
+    }
+    closeAll() {
+        reverseForEach(this.openDialogs, (dialog) => {
+            return dialog.close();
+        });
+        this.openDialogs.splice(0, this.openDialogs.length);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyModalService, 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 MonkeyRadioButtonComponent {
+    get classes() {
+        return `${this.position} ${this.size}`;
+    }
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
+    }
+    get required() {
+        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
+    }
+    set required(value) {
+        this._required = value;
+        this.stateChanges.next();
+    }
+    set value(value) {
+        if (this._value !== value) {
+            this._value = value;
+            this._onChange(value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(changeDetectorRef, formField) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.formField = formField;
+        this.tabIndex = 0;
+        this.onChange = new EventEmitter();
+        this.onSearch = new EventEmitter();
+        this.position = 'horizontal';
+        this.size = 'lg';
+        this._value = null;
+        this._destroyRef = inject(DestroyRef);
+        this.idGenerator = inject(IdGenerator);
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this._elementRef = inject(ElementRef);
+        this.focused = false;
+        this._disabled = false;
+        this.id = this.idGenerator.getId('monkey-radiobutton-');
+        this.stateChanges = new Subject();
+        this.type = 'radio-button';
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    changeSelected() {
+        setTimeout(() => {
+            if (this.options) {
+                this.options.forEach((opt) => {
+                    opt.selected = opt.value() === this.value;
+                });
+            }
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    initializeOptions() {
+        setTimeout(() => {
+            this.options?.forEach((option) => {
+                option.type = 'radio';
+                if (!option.action) {
+                    option.action = this.selectOption.bind(this, option);
+                }
+            });
+            this.changeDetectorRef.markForCheck();
+        }, 0);
+    }
+    ngAfterContentInit() {
+        this.initializeOptions();
+        this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            this.initializeOptions();
+            this.changeSelected();
+        });
+    }
+    selectOption(option) {
+        if (!option.disabled && !this.disabled) {
+            this.value = option.value();
+            this._onChange(this.value);
+            this.onChange.emit(this.value);
+            this.options.forEach((opt) => {
+                opt.selected = opt.value() === this.value;
+            });
         }
-        return state;
     }
-    createInjector(config, dialogRef, overlayRef, fallbackInjector) {
-        const providers = [
-            { provide: OverlayRef, useValue: overlayRef },
-            { provide: MonkeyModalRef, useValue: dialogRef },
-            { provide: MECX_MODAL_DATA, useValue: config.data }
-        ];
-        if (config.providers) {
-            providers.push(...config.providers);
+    writeValue(value) {
+        this.value = value;
+        this.changeSelected();
+    }
+    onContainerClick(event) {
+        if (this.disabled)
+            return;
+        this._elementRef.nativeElement.focus();
+    }
+    _onFocus() {
+        if (!this.disabled) {
+            this.focused = true;
+            this._onTouched();
+            this.stateChanges.next();
         }
-        return Injector.create({ parent: fallbackInjector, providers });
     }
-    open(component, config) {
-        const defaultConfig = new MonkeyModalConfig();
-        config = { ...defaultConfig, ...config };
-        config.id = this._idGenerator.getId('monkey-modal-');
-        const overlayConfig = this.getOverlayConfig(config);
-        const overlayRef = this._overlay.create(overlayConfig);
-        const modalRef = new MonkeyModalRef(overlayRef, config);
-        const injector = this.createInjector(config, modalRef, overlayRef, this._injector);
-        const componentPortal = new ComponentPortal(component, null, injector);
-        const componentRef = overlayRef.attach(componentPortal);
-        const componentElement = componentRef.location.nativeElement;
-        componentElement.style.width = '100%';
-        componentElement.style.height = '100%';
-        modalRef.componentElement = componentElement;
-        modalRef.componentInstance = componentRef.instance;
-        this.openDialogs.push(modalRef);
-        return modalRef;
+    _onBlur() {
+        this.focused = false;
+        this.stateChanges.next();
     }
-    openDefault(params, config) {
-        config.providers = [{ provide: MECX_MODAL_DEFAULT_CONFIG, useValue: params }];
-        config.icon = config.icon ? config.icon : 'help';
-        return this.open(MonkeyModalDefaultComponent, config);
+    registerOnChange(fn) {
+        this._onChange = fn;
     }
-    openConfirmation(params, config) {
-        config.providers = [{ provide: MECX_MODAL_CONFIRMATION_CONFIG, useValue: params }];
-        return this.open(MonkeyModalConfirmationComponent, config);
+    registerOnTouched(fn) {
+        this._onTouched = fn;
     }
-    closeAll() {
-        reverseForEach(this.openDialogs, (dialog) => {
-            return dialog.close();
-        });
-        this.openDialogs.splice(0, this.openDialogs.length);
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.initializeOptions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.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: [
+            // eslint-disable-next-line no-use-before-define
+            { provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
+        ], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], ngImport: i0, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyModalService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
+                    ], host: {
+                        'data-testid': 'monkey-radiobutton',
+                        class: 'mecx-radiobutton',
+                        '[class.mecx-disabled]': 'disabled',
+                        '[class.mecx-radiobutton-focused]': 'focused',
+                        '[attr.id]': 'id',
+                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
+                        '(focus)': '_onFocus()',
+                        '(blur)': '_onBlur()'
+                    }, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MonkeyFormFieldComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { options: [{
+                type: ContentChildren,
+                args: [MonkeyOptionComponent]
+            }], tabIndex: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], onSearch: [{
+                type: Output
+            }], position: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }] } });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
@@ -6284,6 +5932,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * MIT Licence
  ************************* */
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyStatusComponent {
+    get class() {
+        return `${this.type()} ${this.size()}`;
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.type = input.required();
+        this.size = input('md');
+        this.label = input();
+        this._uid = inject(IdGenerator).getId('monkey-status-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-status', imports: [CommonModule], host: {
+                        'data-testid': 'monkey-status',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -7989,6 +7683,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyUserProfileButtonComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this._uid = inject(IdGenerator).getId('monkey-user-profile-button-');
+        this.elementRef = inject(ElementRef);
+        this.size = 'xs';
+        this.iconName = '';
+        this.open = false;
+        this.handleClose = () => {
+            this.open = false;
+        };
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    onClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.open = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyUserProfileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.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: `
+    <monkey-avatar [size]="size" [src]="iconName ? { iconName } : { name }" />
+    <div class="lh-24 text-truncate flex-grow-1 fs-xxs text-gray-900">
+      {{ name }}
+    </div>
+    <util-icon class="arrow" name="arrowDown" />
+
+    <ng-template
+      [monkeyPopover]="open"
+      [monkeyPopoverTarget]="elementRef.nativeElement"
+      [monkeyPopoverClosed]="handleClose"
+      monkeyPopoverDir="rtl"
+      [monkeyPopoverHideHeader]="true"
+    >
+      <div class="context-menu" (click)="open = false">
+        <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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyUserProfileButtonComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, imports: [MonkeyAvatarComponent, UtilIconComponent, MonkeyDirectivesModule], 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 }}
+    </div>
+    <util-icon class="arrow" name="arrowDown" />
+
+    <ng-template
+      [monkeyPopover]="open"
+      [monkeyPopoverTarget]="elementRef.nativeElement"
+      [monkeyPopoverClosed]="handleClose"
+      monkeyPopoverDir="rtl"
+      [monkeyPopoverHideHeader]="true"
+    >
+      <div class="context-menu" (click)="open = false">
+        <ng-content />
+      </div>
+    </ng-template>
+  `, host: {
+                        'data-testid': 'monkey-user-profile-button',
+                        '[attr.id]': 'id',
+                        '[id]': 'id',
+                        '[class.open]': 'open'
+                    }, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{
+                type: HostBinding,
+                args: ['class']
+            }, {
+                type: Input
+            }], name: [{
+                type: Input,
+                args: [{ required: true }]
+            }], iconName: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$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
@@ -8128,5 +7921,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MECX_COUNTRY_CODE, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyErrorDirective, 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, getCurrencySymbol };
+export { MECX_COUNTRY_CODE, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyErrorDirective, 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 };
 //# sourceMappingURL=monkey-style-guide-v2.mjs.map