monkey-style-guide-v2 0.0.116 → 0.0.117

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

@@ -2,17 +2,17 @@ import { trigger, state, transition, style, animate, keyframes } from '@angular/
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, CurrencyPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, Directive, InjectionToken, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, DestroyRef, Optional, Inject, HostListener, NgModule, LOCALE_ID, signal, computed, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, effect, ContentChildren, ContentChild, ViewChild, Injector, forwardRef, ChangeDetectionStrategy, ViewChildren, DOCUMENT } from '@angular/core';
+import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, Directive, InjectionToken, LOCALE_ID, DestroyRef, signal, computed, effect, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, Optional, Inject, HostListener, NgModule, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, ContentChildren, ContentChild, ViewChild, Injector, forwardRef, ChangeDetectionStrategy, ViewChildren, DOCUMENT } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3 from '@angular/forms';
 import { Validators, NgControl, FormsModule, ReactiveFormsModule, FormControlDirective, NgModel, FormControlName, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { filter, of, map, BehaviorSubject, merge, Subject, debounceTime, distinctUntilChanged, switchMap, catchError, Subscription } from 'rxjs';
+import { of, map, BehaviorSubject, firstValueFrom, filter, merge, Subject, debounceTime, distinctUntilChanged, switchMap, catchError, Subscription } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
 import * as i1$1 from '@angular/cdk/overlay';
 import { Overlay, OverlayPositionBuilder, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i1$2 from '@angular/router';
 import { Router, NavigationStart, NavigationEnd } from '@angular/router';
-import { HttpClient } from '@angular/common/http';
 import { format, parseISO, addYears, subYears, subMonths, addMonths, getMonth, getYear, startOfWeek, startOfMonth, endOfWeek, endOfMonth, isSameMonth, isBefore, isAfter, isToday, addDays, isWithinInterval, subDays } from 'date-fns';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { getSupportedInputTypes } from '@angular/cdk/platform';
@@ -920,91 +920,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Input
             }] } });
 
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyDisplayDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyDisplayDirective, isStandalone: false, selector: "monkey-display", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDisplayDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-display',
-                    standalone: false
-                }]
-        }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyErrorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyErrorDirective, isStandalone: false, selector: "monkey-error", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyErrorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-error',
-                    standalone: false
-                }]
-        }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyHelperDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyHelperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyHelperDirective, isStandalone: false, selector: "monkey-helper", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyHelperDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-helper',
-                    standalone: false
-                }]
-        }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyInfoDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInfoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyInfoDirective, isStandalone: false, selector: "monkey-info", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInfoDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-info',
-                    standalone: false
-                }]
-        }] });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyLabelDirective, isStandalone: false, selector: "monkey-label", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyLabelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-label',
-                    standalone: false
-                }]
-        }] });
-
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -1023,404 +938,467 @@ function injectTokenWithWarning(token, name) {
     return value;
 }
 
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyPopoverContentComponent {
-    constructor(host) {
-        this.host = host;
-        this.onClose = new EventEmitter();
-        this.enableAutofocus = false;
-        // not to do
+class MonkeyEcxAddressService {
+    constructor() {
+        this._http = inject(HttpClient);
+        this._googleApiKey = injectTokenWithWarning(MECX_GOOGLE_API_KEY, 'MECX_GOOGLE_API_KEY');
     }
-    ngAfterViewInit() {
-        if (this.enableAutofocus) {
-            setTimeout(() => {
-                const focusable = this.host.nativeElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-                focusable?.focus();
+    mappingData(places) {
+        const getComponent = (components, type, field = 'longText') => {
+            const result = components.find((c) => {
+                return c.types.includes(type);
             });
-        }
+            return result?.[field] || '';
+        };
+        return places.map((_) => {
+            const { addressComponents } = _;
+            const address = getComponent(addressComponents, 'route');
+            const addressNumber = getComponent(addressComponents, 'street_number');
+            const neighborhood = getComponent(addressComponents, 'sublocality_level_1');
+            const city = getComponent(addressComponents, 'administrative_area_level_2');
+            const state = getComponent(addressComponents, 'administrative_area_level_1');
+            const country = getComponent(addressComponents, 'country', 'shortText');
+            const zipCode = getComponent(addressComponents, 'postal_code');
+            return {
+                formattedAddress: _.formattedAddress,
+                adrFormatAddress: _.adrFormatAddress,
+                address,
+                addressNumber,
+                neighborhood,
+                city,
+                state,
+                country,
+                zipCode
+            };
+        });
     }
-    isTemplate(value) {
-        return value instanceof TemplateRef;
+    get(textQuery) {
+        if (!textQuery) {
+            return of([]);
+        }
+        return this._http
+            .post('https://places.googleapis.com/v1/places:searchText', {
+            textQuery
+        }, {
+            headers: {
+                'X-Goog-Api-Key': this._googleApiKey,
+                'X-Goog-FieldMask': 'places.formattedAddress,places.addressComponents,places.displayName,places.adrFormatAddress'
+            }
+        })
+            .pipe(map((resp) => {
+            return this.mappingData(resp.places);
+        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPopoverContentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyPopoverContentComponent, isStandalone: true, selector: "monkey-popover-content", inputs: { title: "title", content: "content", actions: "actions", hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideClose: ["hideClose", "hideClose", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], enableAutofocus: "enableAutofocus" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
-    <div class="mecx-popover-container">
-      @if (!hideHeader) {
-        <div class="mecx-popover-header">
-          @if (title) {
-            <div>
-              <ng-container *ngIf="isTemplate(title); else stringTitle">
-                <ng-container *ngTemplateOutlet="title"></ng-container>
-              </ng-container>
-              <ng-template #stringTitle>
-                {{ title }}
-              </ng-template>
-            </div>
-          }
-
-          @if (!hideClose) {
-            <util-icon class="mecx-popover-close" name="clear" (click)="onClose.next(null)" />
-          }
-        </div>
-      }
-
-      <div class="mecx-popover-content" [class.add-radius]="hideHeader">
-        <ng-container *ngTemplateOutlet="content"></ng-container>
-      </div>
-
-      @if (!hideActions) {
-        <div class="mecx-popover-actions" *ngIf="actions">
-          <ng-container *ngIf="isTemplate(actions); else stringActions">
-            <ng-container *ngTemplateOutlet="actions"></ng-container>
-          </ng-container>
-          <ng-template #stringActions>
-            <span>{{ actions }}</span>
-          </ng-template>
-        </div>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyEcxAddressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyEcxAddressService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPopoverContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'monkey-popover-content',
-                    imports: [CommonModule, NgTemplateOutlet, UtilIconComponent],
-                    template: `
-    <div class="mecx-popover-container">
-      @if (!hideHeader) {
-        <div class="mecx-popover-header">
-          @if (title) {
-            <div>
-              <ng-container *ngIf="isTemplate(title); else stringTitle">
-                <ng-container *ngTemplateOutlet="title"></ng-container>
-              </ng-container>
-              <ng-template #stringTitle>
-                {{ title }}
-              </ng-template>
-            </div>
-          }
-
-          @if (!hideClose) {
-            <util-icon class="mecx-popover-close" name="clear" (click)="onClose.next(null)" />
-          }
-        </div>
-      }
-
-      <div class="mecx-popover-content" [class.add-radius]="hideHeader">
-        <ng-container *ngTemplateOutlet="content"></ng-container>
-      </div>
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyEcxAddressService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-      @if (!hideActions) {
-        <div class="mecx-popover-actions" *ngIf="actions">
-          <ng-container *ngIf="isTemplate(actions); else stringActions">
-            <ng-container *ngTemplateOutlet="actions"></ng-container>
-          </ng-container>
-          <ng-template #stringActions>
-            <span>{{ actions }}</span>
-          </ng-template>
-        </div>
-      }
-    </div>
-  `
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], onClose: [{
-                type: Output
-            }], hideHeader: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hideClose: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hideActions: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], enableAutofocus: [{
-                type: Input
-            }] } });
-class MonkeyPopoverDirective {
-    set popover(show) {
-        if (this._show === show) {
-            return;
-        }
-        this._show = show;
-        if (show) {
-            setTimeout(() => {
-                this.createPopover();
-            }, 0);
+/* eslint-disable no-console */
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyDictionaryService {
+    constructor() {
+        this._localeId = inject(LOCALE_ID);
+        this._destroyRef = inject(DestroyRef);
+        this._data$ = new BehaviorSubject({
+            'pt-BR': {
+                EDIT: 'Editar',
+                'NO-RESULTS': 'Nenhum resultado encontrado',
+                'NO-DATA': 'Sem dados',
+                'NO-DATA-ADDRESS': 'Nenhum endereço encontrado com esta pesquisa',
+                'NOT-PROVIDED': 'Não informado',
+                LOADING: 'Carregando...',
+                'DATE-RANGE': {
+                    'START-DATE': 'Data de início',
+                    'END-DATE': 'Data de término',
+                    INVALID: 'Intervalo de datas inválido',
+                    ACTIONS: {
+                        CANCEL: 'Cancelar',
+                        APPLY: 'Aplicar'
+                    },
+                    'WEEK-DAYS': ['Dom.', '2ª', '3ª', '4ª', '5ª', '6ª', 'Sab.'],
+                    MONTHS: {
+                        0: 'Janeiro',
+                        1: 'Fevereiro',
+                        2: 'Março',
+                        3: 'Abril',
+                        4: 'Maio',
+                        5: 'Junho',
+                        6: 'Julho',
+                        7: 'Agosto',
+                        8: 'Setembro',
+                        9: 'Outubro',
+                        10: 'Novembro',
+                        11: 'Dezembro'
+                    },
+                    'QUICK-ACTIONS': {
+                        CUSTOM: 'Customizado',
+                        LAST_30_DAYS: 'Ultimos 30 dias',
+                        LAST_60_DAYS: 'Ultimos 60 dias',
+                        LAST_90_DAYS: 'Ultimos 90 dias',
+                        LAST_6_MONTHS: 'Ultimos 6 meses',
+                        LAST_12_MONTHS: 'Ultimos 12 meses',
+                        NEXT_30_DAYS: 'Próximos 30 dias',
+                        NEXT_60_DAYS: 'Próximos 60 dias',
+                        NEXT_90_DAYS: 'Próximos 90 dias',
+                        NEXT_6_MONTHS: 'Próximos 6 meses',
+                        NEXT_12_MONTHS: 'Próximos 12 meses'
+                    }
+                }
+            },
+            'es-CL': {
+                EDIT: 'Editar',
+                'NO-RESULTS': 'No se encontraron resultados',
+                'NO-DATA': 'Sin datos',
+                'NO-DATA-ADDRESS': 'No se encontraron direcciones con esta búsqueda',
+                'NOT-PROVIDED': 'No informado',
+                LOADING: 'Cargando...',
+                'DATE-RANGE': {
+                    'START-DATE': 'Fecha de inicio',
+                    'END-DATE': 'Fecha de termino',
+                    INVALID: 'Rango de fechas no válido',
+                    ACTIONS: {
+                        CANCEL: 'Cancelar',
+                        APPLY: 'Aplicar'
+                    },
+                    'WEEK-DAYS': ['Dom.', 'Lun.', 'Mar.', 'Mié.', 'Jue.', 'Vie.', 'Sab.'],
+                    MONTHS: {
+                        0: 'Enero',
+                        1: 'Febrero',
+                        2: 'Marzo',
+                        3: 'Abril',
+                        4: 'Mayo',
+                        5: 'Junio',
+                        6: 'Julio',
+                        7: 'Agosto',
+                        8: 'Septiembre',
+                        9: 'Octubre',
+                        10: 'Noviembre',
+                        11: 'Diciembre'
+                    },
+                    'QUICK-ACTIONS': {
+                        CUSTOM: 'Personalizado',
+                        LAST_30_DAYS: 'Últimos 30 días',
+                        LAST_60_DAYS: 'Últimos 60 días',
+                        LAST_90_DAYS: 'Últimos 90 días',
+                        LAST_6_MONTHS: 'Últimos 6 meses',
+                        LAST_12_MONTHS: 'Últimos 12 meses',
+                        NEXT_30_DAYS: 'Próximos 30 días',
+                        NEXT_60_DAYS: 'Próximos 60 días',
+                        NEXT_90_DAYS: 'Próximos 90 días',
+                        NEXT_6_MONTHS: 'Próximos 6 meses',
+                        NEXT_12_MONTHS: 'Próximos 12 meses'
+                    }
+                }
+            },
+            'es-MX': {
+                EDIT: 'Editar',
+                'NO-RESULTS': 'No se encontraron resultados',
+                'NO-DATA': 'Sin datos',
+                'NO-DATA-ADDRESS': 'No se encontraron direcciones con esta búsqueda',
+                'NOT-PROVIDED': 'No informado',
+                LOADING: 'Cargando...',
+                'DATE-RANGE': {
+                    'START-DATE': 'Fecha de inicio',
+                    'END-DATE': 'Fecha de termino',
+                    INVALID: 'Rango de fechas no válido',
+                    ACTIONS: {
+                        CANCEL: 'Cancelar',
+                        APPLY: 'Aplicar'
+                    },
+                    'WEEK-DAYS': ['Dom.', 'Lun.', 'Mar.', 'Mié.', 'Jue.', 'Vie.', 'Sab.'],
+                    MONTHS: {
+                        0: 'Enero',
+                        1: 'Febrero',
+                        2: 'Marzo',
+                        3: 'Abril',
+                        4: 'Mayo',
+                        5: 'Junio',
+                        6: 'Julio',
+                        7: 'Agosto',
+                        8: 'Septiembre',
+                        9: 'Octubre',
+                        10: 'Noviembre',
+                        11: 'Diciembre'
+                    },
+                    'QUICK-ACTIONS': {
+                        CUSTOM: 'Personalizado',
+                        LAST_30_DAYS: 'Últimos 30 días',
+                        LAST_60_DAYS: 'Últimos 60 días',
+                        LAST_90_DAYS: 'Últimos 90 días',
+                        LAST_6_MONTHS: 'Últimos 6 meses',
+                        LAST_12_MONTHS: 'Últimos 12 meses',
+                        NEXT_30_DAYS: 'Próximos 30 días',
+                        NEXT_60_DAYS: 'Próximos 60 días',
+                        NEXT_90_DAYS: 'Próximos 90 días',
+                        NEXT_6_MONTHS: 'Próximos 6 meses',
+                        NEXT_12_MONTHS: 'Próximos 12 meses'
+                    }
+                }
+            },
+            'en-US': {
+                EDIT: 'Edit',
+                'NO-RESULTS': 'No results found',
+                'NO-DATA': 'No data',
+                'NO-DATA-ADDRESS': 'No address found with this search',
+                'NOT-PROVIDED': 'Not provided',
+                LOADING: 'Loading...',
+                'DATE-RANGE': {
+                    'START-DATE': 'Start date',
+                    'END-DATE': 'End Date',
+                    INVALID: 'Invalid date range',
+                    ACTIONS: {
+                        CANCEL: 'Cancel',
+                        APPLY: 'Apply'
+                    },
+                    'WEEK-DAYS': ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
+                    MONTHS: {
+                        0: 'January',
+                        1: 'February',
+                        2: 'March',
+                        3: 'April',
+                        4: 'May',
+                        5: 'June',
+                        6: 'July',
+                        7: 'August',
+                        8: 'September',
+                        9: 'October',
+                        10: 'November',
+                        11: 'December'
+                    },
+                    'QUICK-ACTIONS': {
+                        CUSTOM: 'Custom',
+                        LAST_30_DAYS: 'Last 30 days',
+                        LAST_60_DAYS: 'Last 60 days',
+                        LAST_90_DAYS: 'Last 90 days',
+                        LAST_6_MONTHS: 'Last 6 months',
+                        LAST_12_MONTHS: 'Last 12 months',
+                        NEXT_30_DAYS: 'Next 30 days',
+                        NEXT_60_DAYS: 'Next 60 days',
+                        NEXT_90_DAYS: 'Next 90 days',
+                        NEXT_6_MONTHS: 'Next 6 months',
+                        NEXT_12_MONTHS: 'Next 12 months'
+                    }
+                }
+            }
+        });
+        const tokenSubject = inject(MECX_I18N_WRAPPER, { optional: true });
+        tokenSubject?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((value) => {
+            this.handleWrapperValues(value);
+        });
+    }
+    handleWrapperValues(value) {
+        try {
+            const locale = this._localeId || 'pt-BR';
+            const wrappedData = JSON.parse(value);
+            const currentData = this._data$.value;
+            const updated = {
+                ...currentData,
+                [locale]: {
+                    ...currentData[locale],
+                    ...wrappedData
+                }
+            };
+            this._data$.next(updated);
         }
-        else {
-            this.disposePopover();
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.error(`MonkeyDictionaryService - handleWrapperValues -> ${e}`);
         }
     }
-    get popover() {
-        return this._show;
-    }
-    set target(value) {
-        this._target = value;
-    }
-    get target() {
-        return this._target;
+    get(key) {
+        const locale = this._localeId || 'pt-BR';
+        return this._data$.pipe(map((data) => {
+            return data[locale]?.[key] ?? null;
+        }));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDictionaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDictionaryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDictionaryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyStepperService {
     constructor() {
-        this._tpl = inject(TemplateRef);
-        this._vcr = inject(ViewContainerRef);
-        this._el = inject(ElementRef);
-        this._zone = inject(NgZone);
-        this._overlay = inject(Overlay);
-        this._overlayPositionBuilder = inject(OverlayPositionBuilder);
-        this._router = inject(Router);
-        this._destroyRef = inject(DestroyRef);
-        this._show = false;
-        this.minwidth = false;
-        this.backdrop = true;
-        this.watch = false;
-        this.dir = 'ltr';
-        this.contextmenu = false;
-        this._router.events
-            .pipe(filter((event) => {
-            return event instanceof NavigationStart;
-        }), takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => {
-            this.closePopover();
+        this._steppers = signal(new Map(), ...(ngDevMode ? [{ debugName: "_steppers" }] : []));
+    }
+    currentStep(id) {
+        return computed(() => {
+            return this._steppers().get(id);
         });
     }
-    ngOnDestroy() {
-        this.disposePopover();
-        this._resizeObserver?.disconnect();
+    setCurrentStep(id, step) {
+        this._steppers.update((items) => {
+            return new Map(items).set(id, step);
+        });
     }
-    closePopover(event) {
-        if (this._show) {
-            this._show = false;
-            this.disposePopover();
-            this._zone.run(() => {
-                this.closed?.(event);
-            });
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class MonkeyToastRef {
+    constructor(componentRef) {
+        this.componentRef = componentRef;
+        // not to do
     }
-    disposePopover() {
-        this._resizeObserver?.disconnect();
-        this._resizeObserver = undefined;
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = undefined;
-        }
+    close() {
+        this.componentRef.instance.close();
     }
-    getPositions(dir) {
-        const oppositeVertical = {
-            top: 'bottom',
-            bottom: 'top',
-            center: 'center'
-        };
-        const oppositeHorizontal = {
-            start: 'end',
-            end: 'start',
-            center: 'center'
-        };
-        const centerY = (pos) => {
-            return {
-                originX: 'center',
-                originY: pos,
-                overlayX: 'center',
-                overlayY: oppositeVertical[pos]
-            };
-        };
-        const centerX = (pos) => {
-            return {
-                originX: oppositeHorizontal[pos],
-                originY: 'center',
-                overlayX: pos,
-                overlayY: 'center'
-            };
-        };
-        const ltr = (axis) => {
-            return {
-                originX: 'start',
-                originY: axis,
-                overlayX: 'start',
-                overlayY: oppositeVertical[axis]
-            };
-        };
-        const rtl = (axis) => {
-            return {
-                originX: 'end',
-                originY: axis,
-                overlayX: 'end',
-                overlayY: oppositeVertical[axis]
-            };
-        };
-        const side = (axisX, axisY) => {
-            return {
-                originX: axisX,
-                originY: axisY,
-                overlayX: oppositeHorizontal[axisX],
-                overlayY: axisY
-            };
-        };
-        const cmp = dir ?? this._options?.dir ?? this.dir;
-        switch (cmp) {
-            case 'ct':
-                return [centerY('top'), centerY('bottom'), centerX('start'), centerX('end')];
-            case 'cr':
-                return [centerX('end'), centerX('start'), centerY('top'), centerY('bottom')];
-            case 'cc':
-                return [centerX('center')];
-            case 'ltr':
-                return [ltr('bottom'), ltr('top')];
-            case 'rtl':
-                return [rtl('bottom'), rtl('top')];
-            case 'tltr':
-                return [ltr('top'), ltr('bottom')];
-            case 'trtl':
-                return [rtl('top'), rtl('bottom')];
-            case 'rt':
-                return [side('end', 'top'), side('end', 'bottom'), ltr('top')];
-            case 'rb':
-                return [side('end', 'bottom'), side('end', 'top'), ltr('bottom'), rtl('bottom')];
-            case 'lt':
-                return [side('start', 'top'), side('start', 'bottom'), rtl('top')];
-            case 'lb':
-                return [side('start', 'bottom'), side('start', 'top'), rtl('bottom')];
+}
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyToastService {
+    constructor() {
+        this.overlay = inject(Overlay);
+    }
+    getPositionStrategy(position) {
+        const globalPosition = this.overlay.position().global();
+        switch (position) {
+            case 'top-left':
+                return globalPosition.top('40px').start('40px');
+            case 'top-center':
+                return globalPosition.top('40px').centerHorizontally();
+            case 'top-right':
+                return globalPosition.top('40px').end('40px');
+            case 'bottom-left':
+                return globalPosition.bottom('40px').start('40px');
+            case 'bottom-center':
+                return globalPosition.bottom('40px').centerHorizontally();
             default:
-                return [];
+                return globalPosition.bottom('40px').end('40px');
         }
     }
-    createPopover(origin, options) {
-        if (!this.target) {
-            // eslint-disable-next-line no-console
-            console.error('MonkeyPopoverDirective -> target element is not defined.');
-            return;
+    show(toastConfig) {
+        if (this.lastToast) {
+            this.lastToast.close();
         }
-        const originEl = this.target instanceof HTMLElement ? this.target : this.target.element;
-        this._positionStrategy = this._overlayPositionBuilder
-            .flexibleConnectedTo(origin ?? originEl)
-            .withPush(true)
-            .withGrowAfterOpen(true)
-            .withPositions(this.getPositions(options?.dir));
-        this._overlayRef = this._overlay.create({
-            positionStrategy: this._positionStrategy,
-            disposeOnNavigation: true,
-            direction: 'ltr',
-            hasBackdrop: this.backdrop,
-            scrollStrategy: this._overlay.scrollStrategies.reposition(),
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            width: this._options?.minwidth || this.minwidth ? this.target.offsetWidth - 2 : undefined,
-            maxHeight: '95%',
-            height: this.height
+        const overlayRef = this.overlay.create({
+            hasBackdrop: false,
+            positionStrategy: this.getPositionStrategy(toastConfig.position)
         });
-        this._overlayRef
-            .backdropClick()
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((event) => {
-            this.closePopover(event);
+        const portal = new ComponentPortal(MonkeyToastComponent);
+        const componentRef = overlayRef.attach(portal);
+        this.lastToast = new MonkeyToastRef(componentRef);
+        componentRef.instance.id = getRandomString(6);
+        componentRef.instance.type = toastConfig.type ?? 'default';
+        componentRef.instance.icon = toastConfig.icon;
+        componentRef.instance.isClosable = toastConfig.isClosable ?? false;
+        componentRef.instance.message = toastConfig.message;
+        componentRef.instance.actionLabel = toastConfig.actionLabel;
+        componentRef.instance.actionIcon = toastConfig.actionIcon;
+        componentRef.instance.onActionClick.subscribe(() => {
+            if (toastConfig.action) {
+                toastConfig.action();
+                if (toastConfig.closeOnAction ?? true) {
+                    componentRef.instance.close();
+                }
+            }
         });
-        const portal = new ComponentPortal(MonkeyPopoverContentComponent, this._vcr);
-        this._componentRef = this._overlayRef.attach(portal);
-        this._componentRef.instance.content = this._tpl;
-        this._componentRef.instance.title = this.title;
-        this._componentRef.instance.actions = this.actions;
-        this._componentRef.instance.hideClose = this.hideClose;
-        this._componentRef.instance.hideHeader = this.hideHeader;
-        this._componentRef.instance.hideActions = this.hideActions;
-        this._componentRef.instance.enableAutofocus = this.enableAutofocus;
-        if (!this.hideClose || !this.hideHeader) {
-            this._componentRef.instance.onClose
-                .pipe(takeUntilDestroyed(this._destroyRef))
-                .subscribe(() => {
-                this.closePopover();
-            });
-        }
-        if (this.watch && 'ResizeObserver' in window) {
-            this._resizeObserver = new ResizeObserver(() => {
-                this._overlayRef?.updatePosition();
-            });
-            this._resizeObserver.observe(this._componentRef.location.nativeElement);
+        componentRef.instance.onClose.subscribe(() => {
+            overlayRef.detach();
+        });
+        if (!toastConfig.keepOpen) {
+            setTimeout(() => {
+                componentRef.instance.close();
+            }, toastConfig.duration ?? 4000);
         }
+        return componentRef.instance;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.14", type: MonkeyPopoverDirective, isStandalone: false, selector: "[monkeyPopover]", inputs: { popover: ["monkeyPopover", "popover"], closed: ["monkeyPopoverClosed", "closed"], target: ["monkeyPopoverTarget", "target"], minwidth: ["monkeyPopoverMinwidth", "minwidth"], backdrop: ["monkeyPopoverBackdrop", "backdrop"], watch: ["monkeyPopoverWatch", "watch"], dir: ["monkeyPopoverDir", "dir"], contextmenu: ["monkeyPopoverContextmenu", "contextmenu"], height: ["monkeyPopoverHeight", "height"], title: ["monkeyPopoverTitle", "title"], actions: ["monkeyPopoverActions", "actions"], hideClose: ["monkeyPopoverHideClose", "hideClose", booleanAttribute], hideHeader: ["monkeyPopoverHideHeader", "hideHeader", booleanAttribute], hideActions: ["monkeyPopoverHideActions", "hideActions", booleanAttribute], enableAutofocus: ["monkeyPopoverEnableAutofocus", "enableAutofocus", booleanAttribute] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToastService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPopoverDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToastService, decorators: [{
+            type: Injectable,
             args: [{
-                    selector: '[monkeyPopover]',
+                    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 MonkeyDisplayDirective {
+    constructor(el) {
+        this.el = el;
+        this.fallbackText = 'Not provided';
+        this.i18nDictionary = inject(MonkeyDictionaryService).get('NOT-PROVIDED');
+        this.displayValue = input.required(...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+        this.displayedText = computed(() => {
+            const value = this.displayValue();
+            if (value === null || value === undefined || value === '') {
+                return this.fallbackText;
+            }
+            return String(value);
+        }, ...(ngDevMode ? [{ debugName: "displayedText" }] : []));
+        effect(async () => {
+            this.el.nativeElement.textContent = this.displayedText();
+            this.fallbackText = await firstValueFrom(this.i18nDictionary);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDisplayDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: MonkeyDisplayDirective, isStandalone: false, selector: "monkey-display", inputs: { displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDisplayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-display',
                     standalone: false
                 }]
-        }], ctorParameters: () => [], propDecorators: { _options: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [MECX_POPOVER_OPTIONS]
-            }], popover: [{
-                type: Input,
-                args: ['monkeyPopover']
-            }], closed: [{
-                type: Input,
-                args: ['monkeyPopoverClosed']
-            }], target: [{
-                type: Input,
-                args: ['monkeyPopoverTarget']
-            }], minwidth: [{
-                type: Input,
-                args: ['monkeyPopoverMinwidth']
-            }], backdrop: [{
-                type: Input,
-                args: ['monkeyPopoverBackdrop']
-            }], watch: [{
-                type: Input,
-                args: ['monkeyPopoverWatch']
-            }], dir: [{
-                type: Input,
-                args: ['monkeyPopoverDir']
-            }], contextmenu: [{
-                type: Input,
-                args: ['monkeyPopoverContextmenu']
-            }], height: [{
-                type: Input,
-                args: ['monkeyPopoverHeight']
-            }], title: [{
-                type: Input,
-                args: ['monkeyPopoverTitle']
-            }], actions: [{
-                type: Input,
-                args: ['monkeyPopoverActions']
-            }], hideClose: [{
-                type: Input,
-                args: [{ alias: 'monkeyPopoverHideClose', transform: booleanAttribute }]
-            }], hideHeader: [{
-                type: Input,
-                args: [{ alias: 'monkeyPopoverHideHeader', transform: booleanAttribute }]
-            }], hideActions: [{
-                type: Input,
-                args: [{ alias: 'monkeyPopoverHideActions', transform: booleanAttribute }]
-            }], enableAutofocus: [{
-                type: Input,
-                args: [{ alias: 'monkeyPopoverEnableAutofocus', transform: booleanAttribute }]
-            }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: true }] }] } });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyPrefixDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyPrefixDirective, isStandalone: false, selector: "monkey-prefix", ngImport: i0 }); }
+class MonkeyErrorDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyErrorDirective, isStandalone: false, selector: "monkey-error", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyErrorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'monkey-prefix',
+                    selector: 'monkey-error',
                     standalone: false
                 }]
         }] });
@@ -1430,95 +1408,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeySuffixDirective {
-    constructor() {
-        this.hasAction = false;
-        this.action = null;
-    }
-    set _hasAction(value) {
-        this.hasAction = true;
-    }
-    onClick(event) {
-        if (!this.action) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        else {
-            this.action(event);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeySuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeySuffixDirective, isStandalone: false, selector: "monkey-suffix", inputs: { _hasAction: ["hasAction", "_hasAction"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.has-action": "hasAction" } }, ngImport: i0 }); }
+class MonkeyHelperDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyHelperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyHelperDirective, isStandalone: false, selector: "monkey-helper", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeySuffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyHelperDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'monkey-suffix',
-                    host: {
-                        '[class.has-action]': 'hasAction'
-                    },
+                    selector: 'monkey-helper',
                     standalone: false
                 }]
-        }], propDecorators: { _hasAction: [{
-                type: Input,
-                args: ['hasAction']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+        }] });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyDirectivesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDirectivesModule, declarations: [MonkeyErrorDirective,
-            MonkeyHelperDirective,
-            MonkeyInfoDirective,
-            MonkeyLabelDirective,
-            MonkeyDisplayDirective,
-            MonkeyPrefixDirective,
-            MonkeySuffixDirective,
-            MonkeyBadgeDirective,
-            MonkeyPopoverDirective], imports: [MonkeyPopoverContentComponent], exports: [MonkeyErrorDirective,
-            MonkeyHelperDirective,
-            MonkeyInfoDirective,
-            MonkeyLabelDirective,
-            MonkeyDisplayDirective,
-            MonkeyPrefixDirective,
-            MonkeySuffixDirective,
-            MonkeyBadgeDirective,
-            MonkeyPopoverDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDirectivesModule, imports: [MonkeyPopoverContentComponent] }); }
+class MonkeyInfoDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInfoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyInfoDirective, isStandalone: false, selector: "monkey-info", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDirectivesModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyInfoDirective, decorators: [{
+            type: Directive,
             args: [{
-                    imports: [MonkeyPopoverContentComponent],
-                    declarations: [
-                        MonkeyErrorDirective,
-                        MonkeyHelperDirective,
-                        MonkeyInfoDirective,
-                        MonkeyLabelDirective,
-                        MonkeyDisplayDirective,
-                        MonkeyPrefixDirective,
-                        MonkeySuffixDirective,
-                        MonkeyBadgeDirective,
-                        MonkeyPopoverDirective
-                    ],
-                    exports: [
-                        MonkeyErrorDirective,
-                        MonkeyHelperDirective,
-                        MonkeyInfoDirective,
-                        MonkeyLabelDirective,
-                        MonkeyDisplayDirective,
-                        MonkeyPrefixDirective,
-                        MonkeySuffixDirective,
-                        MonkeyBadgeDirective,
-                        MonkeyPopoverDirective
-                    ]
+                    selector: 'monkey-info',
+                    standalone: false
                 }]
         }] });
 
@@ -1527,412 +1442,514 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-
-class MonkeyEcxAddressService {
-    constructor() {
-        this._http = inject(HttpClient);
-        this._googleApiKey = injectTokenWithWarning(MECX_GOOGLE_API_KEY, 'MECX_GOOGLE_API_KEY');
-    }
-    mappingData(places) {
-        const getComponent = (components, type, field = 'longText') => {
-            const result = components.find((c) => {
-                return c.types.includes(type);
-            });
-            return result?.[field] || '';
-        };
-        return places.map((_) => {
-            const { addressComponents } = _;
-            const address = getComponent(addressComponents, 'route');
-            const addressNumber = getComponent(addressComponents, 'street_number');
-            const neighborhood = getComponent(addressComponents, 'sublocality_level_1');
-            const city = getComponent(addressComponents, 'administrative_area_level_2');
-            const state = getComponent(addressComponents, 'administrative_area_level_1');
-            const country = getComponent(addressComponents, 'country', 'shortText');
-            const zipCode = getComponent(addressComponents, 'postal_code');
-            return {
-                formattedAddress: _.formattedAddress,
-                adrFormatAddress: _.adrFormatAddress,
-                address,
-                addressNumber,
-                neighborhood,
-                city,
-                state,
-                country,
-                zipCode
-            };
-        });
-    }
-    get(textQuery) {
-        if (!textQuery) {
-            return of([]);
-        }
-        return this._http
-            .post('https://places.googleapis.com/v1/places:searchText', {
-            textQuery
-        }, {
-            headers: {
-                'X-Goog-Api-Key': this._googleApiKey,
-                'X-Goog-FieldMask': 'places.formattedAddress,places.addressComponents,places.displayName,places.adrFormatAddress'
-            }
-        })
-            .pipe(map((resp) => {
-            return this.mappingData(resp.places);
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyEcxAddressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyEcxAddressService, providedIn: 'root' }); }
+class MonkeyLabelDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyLabelDirective, isStandalone: false, selector: "monkey-label", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyEcxAddressService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-label',
+                    standalone: false
+                }]
         }] });
 
-/* eslint-disable no-console */
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyDictionaryService {
-    constructor() {
-        this._localeId = inject(LOCALE_ID);
-        this._destroyRef = inject(DestroyRef);
-        this._data$ = new BehaviorSubject({
-            'pt-BR': {
-                EDIT: 'Editar',
-                'NO-RESULTS': 'Nenhum resultado encontrado',
-                'NO-DATA': 'Sem dados',
-                'NO-DATA-ADDRESS': 'Nenhum endereço encontrado com esta pesquisa',
-                'NOT-PROVIDED': 'Não informado',
-                LOADING: 'Carregando...',
-                'DATE-RANGE': {
-                    'START-DATE': 'Data de início',
-                    'END-DATE': 'Data de término',
-                    INVALID: 'Intervalo de datas inválido',
-                    ACTIONS: {
-                        CANCEL: 'Cancelar',
-                        APPLY: 'Aplicar'
-                    },
-                    'WEEK-DAYS': ['Dom.', '2ª', '3ª', '4ª', '5ª', '6ª', 'Sab.'],
-                    MONTHS: {
-                        0: 'Janeiro',
-                        1: 'Fevereiro',
-                        2: 'Março',
-                        3: 'Abril',
-                        4: 'Maio',
-                        5: 'Junho',
-                        6: 'Julho',
-                        7: 'Agosto',
-                        8: 'Setembro',
-                        9: 'Outubro',
-                        10: 'Novembro',
-                        11: 'Dezembro'
-                    },
-                    'QUICK-ACTIONS': {
-                        CUSTOM: 'Customizado',
-                        LAST_30_DAYS: 'Ultimos 30 dias',
-                        LAST_60_DAYS: 'Ultimos 60 dias',
-                        LAST_90_DAYS: 'Ultimos 90 dias',
-                        LAST_6_MONTHS: 'Ultimos 6 meses',
-                        LAST_12_MONTHS: 'Ultimos 12 meses',
-                        NEXT_30_DAYS: 'Próximos 30 dias',
-                        NEXT_60_DAYS: 'Próximos 60 dias',
-                        NEXT_90_DAYS: 'Próximos 90 dias',
-                        NEXT_6_MONTHS: 'Próximos 6 meses',
-                        NEXT_12_MONTHS: 'Próximos 12 meses'
-                    }
-                }
-            },
-            'es-CL': {
-                EDIT: 'Editar',
-                'NO-RESULTS': 'No se encontraron resultados',
-                'NO-DATA': 'Sin datos',
-                'NO-DATA-ADDRESS': 'No se encontraron direcciones con esta búsqueda',
-                'NOT-PROVIDED': 'No informado',
-                LOADING: 'Cargando...',
-                'DATE-RANGE': {
-                    'START-DATE': 'Fecha de inicio',
-                    'END-DATE': 'Fecha de termino',
-                    INVALID: 'Rango de fechas no válido',
-                    ACTIONS: {
-                        CANCEL: 'Cancelar',
-                        APPLY: 'Aplicar'
-                    },
-                    'WEEK-DAYS': ['Dom.', 'Lun.', 'Mar.', 'Mié.', 'Jue.', 'Vie.', 'Sab.'],
-                    MONTHS: {
-                        0: 'Enero',
-                        1: 'Febrero',
-                        2: 'Marzo',
-                        3: 'Abril',
-                        4: 'Mayo',
-                        5: 'Junio',
-                        6: 'Julio',
-                        7: 'Agosto',
-                        8: 'Septiembre',
-                        9: 'Octubre',
-                        10: 'Noviembre',
-                        11: 'Diciembre'
-                    },
-                    'QUICK-ACTIONS': {
-                        CUSTOM: 'Personalizado',
-                        LAST_30_DAYS: 'Últimos 30 días',
-                        LAST_60_DAYS: 'Últimos 60 días',
-                        LAST_90_DAYS: 'Últimos 90 días',
-                        LAST_6_MONTHS: 'Últimos 6 meses',
-                        LAST_12_MONTHS: 'Últimos 12 meses',
-                        NEXT_30_DAYS: 'Próximos 30 días',
-                        NEXT_60_DAYS: 'Próximos 60 días',
-                        NEXT_90_DAYS: 'Próximos 90 días',
-                        NEXT_6_MONTHS: 'Próximos 6 meses',
-                        NEXT_12_MONTHS: 'Próximos 12 meses'
-                    }
-                }
-            },
-            'es-MX': {
-                EDIT: 'Editar',
-                'NO-RESULTS': 'No se encontraron resultados',
-                'NO-DATA': 'Sin datos',
-                'NO-DATA-ADDRESS': 'No se encontraron direcciones con esta búsqueda',
-                'NOT-PROVIDED': 'No informado',
-                LOADING: 'Cargando...',
-                'DATE-RANGE': {
-                    'START-DATE': 'Fecha de inicio',
-                    'END-DATE': 'Fecha de termino',
-                    INVALID: 'Rango de fechas no válido',
-                    ACTIONS: {
-                        CANCEL: 'Cancelar',
-                        APPLY: 'Aplicar'
-                    },
-                    'WEEK-DAYS': ['Dom.', 'Lun.', 'Mar.', 'Mié.', 'Jue.', 'Vie.', 'Sab.'],
-                    MONTHS: {
-                        0: 'Enero',
-                        1: 'Febrero',
-                        2: 'Marzo',
-                        3: 'Abril',
-                        4: 'Mayo',
-                        5: 'Junio',
-                        6: 'Julio',
-                        7: 'Agosto',
-                        8: 'Septiembre',
-                        9: 'Octubre',
-                        10: 'Noviembre',
-                        11: 'Diciembre'
-                    },
-                    'QUICK-ACTIONS': {
-                        CUSTOM: 'Personalizado',
-                        LAST_30_DAYS: 'Últimos 30 días',
-                        LAST_60_DAYS: 'Últimos 60 días',
-                        LAST_90_DAYS: 'Últimos 90 días',
-                        LAST_6_MONTHS: 'Últimos 6 meses',
-                        LAST_12_MONTHS: 'Últimos 12 meses',
-                        NEXT_30_DAYS: 'Próximos 30 días',
-                        NEXT_60_DAYS: 'Próximos 60 días',
-                        NEXT_90_DAYS: 'Próximos 90 días',
-                        NEXT_6_MONTHS: 'Próximos 6 meses',
-                        NEXT_12_MONTHS: 'Próximos 12 meses'
-                    }
-                }
-            },
-            'en-US': {
-                EDIT: 'Edit',
-                'NO-RESULTS': 'No results found',
-                'NO-DATA': 'No data',
-                'NO-DATA-ADDRESS': 'No address found with this search',
-                'NOT-PROVIDED': 'Not provided',
-                LOADING: 'Loading...',
-                'DATE-RANGE': {
-                    'START-DATE': 'Start date',
-                    'END-DATE': 'End Date',
-                    INVALID: 'Invalid date range',
-                    ACTIONS: {
-                        CANCEL: 'Cancel',
-                        APPLY: 'Apply'
-                    },
-                    'WEEK-DAYS': ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
-                    MONTHS: {
-                        0: 'January',
-                        1: 'February',
-                        2: 'March',
-                        3: 'April',
-                        4: 'May',
-                        5: 'June',
-                        6: 'July',
-                        7: 'August',
-                        8: 'September',
-                        9: 'October',
-                        10: 'November',
-                        11: 'December'
-                    },
-                    'QUICK-ACTIONS': {
-                        CUSTOM: 'Custom',
-                        LAST_30_DAYS: 'Last 30 days',
-                        LAST_60_DAYS: 'Last 60 days',
-                        LAST_90_DAYS: 'Last 90 days',
-                        LAST_6_MONTHS: 'Last 6 months',
-                        LAST_12_MONTHS: 'Last 12 months',
-                        NEXT_30_DAYS: 'Next 30 days',
-                        NEXT_60_DAYS: 'Next 60 days',
-                        NEXT_90_DAYS: 'Next 90 days',
-                        NEXT_6_MONTHS: 'Next 6 months',
-                        NEXT_12_MONTHS: 'Next 12 months'
-                    }
-                }
-            }
-        });
-        const tokenSubject = inject(MECX_I18N_WRAPPER, { optional: true });
-        tokenSubject?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((value) => {
-            this.handleWrapperValues(value);
+class MonkeyPopoverContentComponent {
+    constructor(host) {
+        this.host = host;
+        this.onClose = new EventEmitter();
+        this.enableAutofocus = false;
+        // not to do
+    }
+    ngAfterViewInit() {
+        if (this.enableAutofocus) {
+            setTimeout(() => {
+                const focusable = this.host.nativeElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                focusable?.focus();
+            });
+        }
+    }
+    isTemplate(value) {
+        return value instanceof TemplateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPopoverContentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyPopoverContentComponent, isStandalone: true, selector: "monkey-popover-content", inputs: { title: "title", content: "content", actions: "actions", hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideClose: ["hideClose", "hideClose", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], enableAutofocus: "enableAutofocus" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
+    <div class="mecx-popover-container">
+      @if (!hideHeader) {
+        <div class="mecx-popover-header">
+          @if (title) {
+            <div>
+              <ng-container *ngIf="isTemplate(title); else stringTitle">
+                <ng-container *ngTemplateOutlet="title"></ng-container>
+              </ng-container>
+              <ng-template #stringTitle>
+                {{ title }}
+              </ng-template>
+            </div>
+          }
+
+          @if (!hideClose) {
+            <util-icon class="mecx-popover-close" name="clear" (click)="onClose.next(null)" />
+          }
+        </div>
+      }
+
+      <div class="mecx-popover-content" [class.add-radius]="hideHeader">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </div>
+
+      @if (!hideActions) {
+        <div class="mecx-popover-actions" *ngIf="actions">
+          <ng-container *ngIf="isTemplate(actions); else stringActions">
+            <ng-container *ngTemplateOutlet="actions"></ng-container>
+          </ng-container>
+          <ng-template #stringActions>
+            <span>{{ actions }}</span>
+          </ng-template>
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPopoverContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'monkey-popover-content',
+                    imports: [CommonModule, NgTemplateOutlet, UtilIconComponent],
+                    template: `
+    <div class="mecx-popover-container">
+      @if (!hideHeader) {
+        <div class="mecx-popover-header">
+          @if (title) {
+            <div>
+              <ng-container *ngIf="isTemplate(title); else stringTitle">
+                <ng-container *ngTemplateOutlet="title"></ng-container>
+              </ng-container>
+              <ng-template #stringTitle>
+                {{ title }}
+              </ng-template>
+            </div>
+          }
+
+          @if (!hideClose) {
+            <util-icon class="mecx-popover-close" name="clear" (click)="onClose.next(null)" />
+          }
+        </div>
+      }
+
+      <div class="mecx-popover-content" [class.add-radius]="hideHeader">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </div>
+
+      @if (!hideActions) {
+        <div class="mecx-popover-actions" *ngIf="actions">
+          <ng-container *ngIf="isTemplate(actions); else stringActions">
+            <ng-container *ngTemplateOutlet="actions"></ng-container>
+          </ng-container>
+          <ng-template #stringActions>
+            <span>{{ actions }}</span>
+          </ng-template>
+        </div>
+      }
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], hideHeader: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideClose: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideActions: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], enableAutofocus: [{
+                type: Input
+            }] } });
+class MonkeyPopoverDirective {
+    set popover(show) {
+        if (this._show === show) {
+            return;
+        }
+        this._show = show;
+        if (show) {
+            setTimeout(() => {
+                this.createPopover();
+            }, 0);
+        }
+        else {
+            this.disposePopover();
+        }
+    }
+    get popover() {
+        return this._show;
+    }
+    set target(value) {
+        this._target = value;
+    }
+    get target() {
+        return this._target;
+    }
+    constructor() {
+        this._tpl = inject(TemplateRef);
+        this._vcr = inject(ViewContainerRef);
+        this._el = inject(ElementRef);
+        this._zone = inject(NgZone);
+        this._overlay = inject(Overlay);
+        this._overlayPositionBuilder = inject(OverlayPositionBuilder);
+        this._router = inject(Router);
+        this._destroyRef = inject(DestroyRef);
+        this._show = false;
+        this.minwidth = false;
+        this.backdrop = true;
+        this.watch = false;
+        this.dir = 'ltr';
+        this.contextmenu = false;
+        this._router.events
+            .pipe(filter((event) => {
+            return event instanceof NavigationStart;
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this.closePopover();
         });
     }
-    handleWrapperValues(value) {
-        try {
-            const locale = this._localeId || 'pt-BR';
-            const wrappedData = JSON.parse(value);
-            const currentData = this._data$.value;
-            const updated = {
-                ...currentData,
-                [locale]: {
-                    ...currentData[locale],
-                    ...wrappedData
-                }
+    ngOnDestroy() {
+        this.disposePopover();
+        this._resizeObserver?.disconnect();
+    }
+    closePopover(event) {
+        if (this._show) {
+            this._show = false;
+            this.disposePopover();
+            this._zone.run(() => {
+                this.closed?.(event);
+            });
+        }
+    }
+    disposePopover() {
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = undefined;
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = undefined;
+        }
+    }
+    getPositions(dir) {
+        const oppositeVertical = {
+            top: 'bottom',
+            bottom: 'top',
+            center: 'center'
+        };
+        const oppositeHorizontal = {
+            start: 'end',
+            end: 'start',
+            center: 'center'
+        };
+        const centerY = (pos) => {
+            return {
+                originX: 'center',
+                originY: pos,
+                overlayX: 'center',
+                overlayY: oppositeVertical[pos]
             };
-            this._data$.next(updated);
+        };
+        const centerX = (pos) => {
+            return {
+                originX: oppositeHorizontal[pos],
+                originY: 'center',
+                overlayX: pos,
+                overlayY: 'center'
+            };
+        };
+        const ltr = (axis) => {
+            return {
+                originX: 'start',
+                originY: axis,
+                overlayX: 'start',
+                overlayY: oppositeVertical[axis]
+            };
+        };
+        const rtl = (axis) => {
+            return {
+                originX: 'end',
+                originY: axis,
+                overlayX: 'end',
+                overlayY: oppositeVertical[axis]
+            };
+        };
+        const side = (axisX, axisY) => {
+            return {
+                originX: axisX,
+                originY: axisY,
+                overlayX: oppositeHorizontal[axisX],
+                overlayY: axisY
+            };
+        };
+        const cmp = dir ?? this._options?.dir ?? this.dir;
+        switch (cmp) {
+            case 'ct':
+                return [centerY('top'), centerY('bottom'), centerX('start'), centerX('end')];
+            case 'cr':
+                return [centerX('end'), centerX('start'), centerY('top'), centerY('bottom')];
+            case 'cc':
+                return [centerX('center')];
+            case 'ltr':
+                return [ltr('bottom'), ltr('top')];
+            case 'rtl':
+                return [rtl('bottom'), rtl('top')];
+            case 'tltr':
+                return [ltr('top'), ltr('bottom')];
+            case 'trtl':
+                return [rtl('top'), rtl('bottom')];
+            case 'rt':
+                return [side('end', 'top'), side('end', 'bottom'), ltr('top')];
+            case 'rb':
+                return [side('end', 'bottom'), side('end', 'top'), ltr('bottom'), rtl('bottom')];
+            case 'lt':
+                return [side('start', 'top'), side('start', 'bottom'), rtl('top')];
+            case 'lb':
+                return [side('start', 'bottom'), side('start', 'top'), rtl('bottom')];
+            default:
+                return [];
+        }
+    }
+    createPopover(origin, options) {
+        if (!this.target) {
+            // eslint-disable-next-line no-console
+            console.error('MonkeyPopoverDirective -> target element is not defined.');
+            return;
+        }
+        const originEl = this.target instanceof HTMLElement ? this.target : this.target.element;
+        this._positionStrategy = this._overlayPositionBuilder
+            .flexibleConnectedTo(origin ?? originEl)
+            .withPush(true)
+            .withGrowAfterOpen(true)
+            .withPositions(this.getPositions(options?.dir));
+        this._overlayRef = this._overlay.create({
+            positionStrategy: this._positionStrategy,
+            disposeOnNavigation: true,
+            direction: 'ltr',
+            hasBackdrop: this.backdrop,
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            width: this._options?.minwidth || this.minwidth ? this.target.offsetWidth - 2 : undefined,
+            maxHeight: '95%',
+            height: this.height
+        });
+        this._overlayRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((event) => {
+            this.closePopover(event);
+        });
+        const portal = new ComponentPortal(MonkeyPopoverContentComponent, this._vcr);
+        this._componentRef = this._overlayRef.attach(portal);
+        this._componentRef.instance.content = this._tpl;
+        this._componentRef.instance.title = this.title;
+        this._componentRef.instance.actions = this.actions;
+        this._componentRef.instance.hideClose = this.hideClose;
+        this._componentRef.instance.hideHeader = this.hideHeader;
+        this._componentRef.instance.hideActions = this.hideActions;
+        this._componentRef.instance.enableAutofocus = this.enableAutofocus;
+        if (!this.hideClose || !this.hideHeader) {
+            this._componentRef.instance.onClose
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(() => {
+                this.closePopover();
+            });
         }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.error(`MonkeyDictionaryService - handleWrapperValues -> ${e}`);
+        if (this.watch && 'ResizeObserver' in window) {
+            this._resizeObserver = new ResizeObserver(() => {
+                this._overlayRef?.updatePosition();
+            });
+            this._resizeObserver.observe(this._componentRef.location.nativeElement);
         }
     }
-    get(key) {
-        const locale = this._localeId || 'pt-BR';
-        return this._data$.pipe(map((data) => {
-            return data[locale]?.[key] ?? null;
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDictionaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDictionaryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.14", type: MonkeyPopoverDirective, isStandalone: false, selector: "[monkeyPopover]", inputs: { popover: ["monkeyPopover", "popover"], closed: ["monkeyPopoverClosed", "closed"], target: ["monkeyPopoverTarget", "target"], minwidth: ["monkeyPopoverMinwidth", "minwidth"], backdrop: ["monkeyPopoverBackdrop", "backdrop"], watch: ["monkeyPopoverWatch", "watch"], dir: ["monkeyPopoverDir", "dir"], contextmenu: ["monkeyPopoverContextmenu", "contextmenu"], height: ["monkeyPopoverHeight", "height"], title: ["monkeyPopoverTitle", "title"], actions: ["monkeyPopoverActions", "actions"], hideClose: ["monkeyPopoverHideClose", "hideClose", booleanAttribute], hideHeader: ["monkeyPopoverHideHeader", "hideHeader", booleanAttribute], hideActions: ["monkeyPopoverHideActions", "hideActions", booleanAttribute], enableAutofocus: ["monkeyPopoverEnableAutofocus", "enableAutofocus", booleanAttribute] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDictionaryService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPopoverDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root'
+                    selector: '[monkeyPopover]',
+                    standalone: false
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { _options: [{
+                type: Optional
+            }, {
+                type: Inject,
+                args: [MECX_POPOVER_OPTIONS]
+            }], popover: [{
+                type: Input,
+                args: ['monkeyPopover']
+            }], closed: [{
+                type: Input,
+                args: ['monkeyPopoverClosed']
+            }], target: [{
+                type: Input,
+                args: ['monkeyPopoverTarget']
+            }], minwidth: [{
+                type: Input,
+                args: ['monkeyPopoverMinwidth']
+            }], backdrop: [{
+                type: Input,
+                args: ['monkeyPopoverBackdrop']
+            }], watch: [{
+                type: Input,
+                args: ['monkeyPopoverWatch']
+            }], dir: [{
+                type: Input,
+                args: ['monkeyPopoverDir']
+            }], contextmenu: [{
+                type: Input,
+                args: ['monkeyPopoverContextmenu']
+            }], height: [{
+                type: Input,
+                args: ['monkeyPopoverHeight']
+            }], title: [{
+                type: Input,
+                args: ['monkeyPopoverTitle']
+            }], actions: [{
+                type: Input,
+                args: ['monkeyPopoverActions']
+            }], hideClose: [{
+                type: Input,
+                args: [{ alias: 'monkeyPopoverHideClose', transform: booleanAttribute }]
+            }], hideHeader: [{
+                type: Input,
+                args: [{ alias: 'monkeyPopoverHideHeader', transform: booleanAttribute }]
+            }], hideActions: [{
+                type: Input,
+                args: [{ alias: 'monkeyPopoverHideActions', transform: booleanAttribute }]
+            }], enableAutofocus: [{
+                type: Input,
+                args: [{ alias: 'monkeyPopoverEnableAutofocus', transform: booleanAttribute }]
+            }] } });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyStepperService {
-    constructor() {
-        this._steppers = signal(new Map(), ...(ngDevMode ? [{ debugName: "_steppers" }] : []));
-    }
-    currentStep(id) {
-        return computed(() => {
-            return this._steppers().get(id);
-        });
-    }
-    setCurrentStep(id, step) {
-        this._steppers.update((items) => {
-            return new Map(items).set(id, step);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperService, providedIn: 'root' }); }
+class MonkeyPrefixDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyPrefixDirective, isStandalone: false, selector: "monkey-prefix", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyStepperService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPrefixDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root'
+                    selector: 'monkey-prefix',
+                    standalone: false
                 }]
         }] });
 
-class MonkeyToastRef {
-    constructor(componentRef) {
-        this.componentRef = componentRef;
-        // not to do
-    }
-    close() {
-        this.componentRef.instance.close();
-    }
-}
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyToastService {
+class MonkeySuffixDirective {
     constructor() {
-        this.overlay = inject(Overlay);
+        this.hasAction = false;
+        this.action = null;
     }
-    getPositionStrategy(position) {
-        const globalPosition = this.overlay.position().global();
-        switch (position) {
-            case 'top-left':
-                return globalPosition.top('40px').start('40px');
-            case 'top-center':
-                return globalPosition.top('40px').centerHorizontally();
-            case 'top-right':
-                return globalPosition.top('40px').end('40px');
-            case 'bottom-left':
-                return globalPosition.bottom('40px').start('40px');
-            case 'bottom-center':
-                return globalPosition.bottom('40px').centerHorizontally();
-            default:
-                return globalPosition.bottom('40px').end('40px');
-        }
+    set _hasAction(value) {
+        this.hasAction = true;
     }
-    show(toastConfig) {
-        if (this.lastToast) {
-            this.lastToast.close();
+    onClick(event) {
+        if (!this.action) {
+            event.preventDefault();
+            event.stopPropagation();
         }
-        const overlayRef = this.overlay.create({
-            hasBackdrop: false,
-            positionStrategy: this.getPositionStrategy(toastConfig.position)
-        });
-        const portal = new ComponentPortal(MonkeyToastComponent);
-        const componentRef = overlayRef.attach(portal);
-        this.lastToast = new MonkeyToastRef(componentRef);
-        componentRef.instance.id = getRandomString(6);
-        componentRef.instance.type = toastConfig.type ?? 'default';
-        componentRef.instance.icon = toastConfig.icon;
-        componentRef.instance.isClosable = toastConfig.isClosable ?? false;
-        componentRef.instance.message = toastConfig.message;
-        componentRef.instance.actionLabel = toastConfig.actionLabel;
-        componentRef.instance.actionIcon = toastConfig.actionIcon;
-        componentRef.instance.onActionClick.subscribe(() => {
-            if (toastConfig.action) {
-                toastConfig.action();
-                if (toastConfig.closeOnAction ?? true) {
-                    componentRef.instance.close();
-                }
-            }
-        });
-        componentRef.instance.onClose.subscribe(() => {
-            overlayRef.detach();
-        });
-        if (!toastConfig.keepOpen) {
-            setTimeout(() => {
-                componentRef.instance.close();
-            }, toastConfig.duration ?? 4000);
+        else {
+            this.action(event);
         }
-        return componentRef.instance;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToastService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeySuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeySuffixDirective, isStandalone: false, selector: "monkey-suffix", inputs: { _hasAction: ["hasAction", "_hasAction"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.has-action": "hasAction" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyToastService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeySuffixDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root'
+                    selector: 'monkey-suffix',
+                    host: {
+                        '[class.has-action]': 'hasAction'
+                    },
+                    standalone: false
+                }]
+        }], propDecorators: { _hasAction: [{
+                type: Input,
+                args: ['hasAction']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyDirectivesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDirectivesModule, declarations: [MonkeyErrorDirective,
+            MonkeyHelperDirective,
+            MonkeyInfoDirective,
+            MonkeyLabelDirective,
+            MonkeyDisplayDirective,
+            MonkeyPrefixDirective,
+            MonkeySuffixDirective,
+            MonkeyBadgeDirective,
+            MonkeyPopoverDirective], imports: [MonkeyPopoverContentComponent], exports: [MonkeyErrorDirective,
+            MonkeyHelperDirective,
+            MonkeyInfoDirective,
+            MonkeyLabelDirective,
+            MonkeyDisplayDirective,
+            MonkeyPrefixDirective,
+            MonkeySuffixDirective,
+            MonkeyBadgeDirective,
+            MonkeyPopoverDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDirectivesModule, imports: [MonkeyPopoverContentComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDirectivesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [MonkeyPopoverContentComponent],
+                    declarations: [
+                        MonkeyErrorDirective,
+                        MonkeyHelperDirective,
+                        MonkeyInfoDirective,
+                        MonkeyLabelDirective,
+                        MonkeyDisplayDirective,
+                        MonkeyPrefixDirective,
+                        MonkeySuffixDirective,
+                        MonkeyBadgeDirective,
+                        MonkeyPopoverDirective
+                    ],
+                    exports: [
+                        MonkeyErrorDirective,
+                        MonkeyHelperDirective,
+                        MonkeyInfoDirective,
+                        MonkeyLabelDirective,
+                        MonkeyDisplayDirective,
+                        MonkeyPrefixDirective,
+                        MonkeySuffixDirective,
+                        MonkeyBadgeDirective,
+                        MonkeyPopoverDirective
+                    ]
                 }]
         }] });