monkey-style-guide 21.2.8 → 21.2.9

package/fesm2022/monkey-style-guide.mjs

@@ -2,7 +2,7 @@ import { trigger, state, style, transition, animate, keyframes } from '@angular/
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, CurrencyPipe, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, InjectionToken, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, DestroyRef, Optional, Inject, Directive, LOCALE_ID, signal, computed, effect, HostListener, ContentChildren, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, ContentChild, NgModule, ViewChild, ChangeDetectionStrategy, Injector, forwardRef, ViewChildren, viewChild, model, contentChild, contentChildren, untracked, DOCUMENT } from '@angular/core';
+import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, InjectionToken, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, DestroyRef, Optional, Inject, Directive, LOCALE_ID, signal, computed, HostListener, effect, ContentChildren, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, ContentChild, NgModule, ViewChild, ChangeDetectionStrategy, Injector, forwardRef, viewChild, model, afterNextRender, ViewChildren, contentChild, contentChildren, untracked, DOCUMENT } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/forms';
 import { Validators, NgControl, FormsModule, ReactiveFormsModule, FormControlDirective, NgModel, FormControlName, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
@@ -1653,6 +1653,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 }]
         }] });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyButtonComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.color = 'default';
+        this.size = 'md';
+        this.type = 'primary';
+        this.elementRef = inject(ElementRef);
+        this._uid = inject(IdGenerator).getId('monkey-button-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    onClick(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", color: "color", size: "size", type: "type", loading: "loading", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "attr.tabindex": "null" } }, ngImport: i0, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\r\n  <div class=\"content\">\r\n    @if (!loading) {\r\n      <ng-content select=\"[first]\"></ng-content>\r\n    }\r\n    <span><ng-content></ng-content></span>\r\n    @if (!loading) {\r\n      <ng-content select=\"[last]\"></ng-content>\r\n    }\r\n    @if (loading) {\r\n      <util-icon class=\"mecx-button-loading\" name=\"loading\" />\r\n    }\r\n  </div>\r\n</button>\r\n", styles: ["monkey-button{display:inline-block}monkey-button.has-progress button:disabled{position:relative;overflow:hidden;border:2px solid var(--mecx-color-gray-400)}monkey-button.has-progress :is(.mecx-button){transition:none!important}monkey-button.has-progress :is(.mecx-button) :is(.content){transition:none!important}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button .mecx-button-loading{display:flex;background:transparent}monkey-button .mecx-button .mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary.black{background:var(--mecx-color-gray-900);color:var(--mecx-color-white)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-700)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-700)}monkey-button .mecx-button.primary:hover:not(:disabled).black{background:var(--mecx-color-gray-700)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.9)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, imports: [UtilIconComponent], selector: 'monkey-button', standalone: true, host: {
+                        'data-testid': 'monkey-button',
+                        '[attr.id]': 'id',
+                        '[id]': 'id',
+                        '[attr.tabindex]': 'null'
+                    }, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\r\n  <div class=\"content\">\r\n    @if (!loading) {\r\n      <ng-content select=\"[first]\"></ng-content>\r\n    }\r\n    <span><ng-content></ng-content></span>\r\n    @if (!loading) {\r\n      <ng-content select=\"[last]\"></ng-content>\r\n    }\r\n    @if (loading) {\r\n      <util-icon class=\"mecx-button-loading\" name=\"loading\" />\r\n    }\r\n  </div>\r\n</button>\r\n", styles: ["monkey-button{display:inline-block}monkey-button.has-progress button:disabled{position:relative;overflow:hidden;border:2px solid var(--mecx-color-gray-400)}monkey-button.has-progress :is(.mecx-button){transition:none!important}monkey-button.has-progress :is(.mecx-button) :is(.content){transition:none!important}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button .mecx-button-loading{display:flex;background:transparent}monkey-button .mecx-button .mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary.black{background:var(--mecx-color-gray-900);color:var(--mecx-color-white)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-700)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-700)}monkey-button .mecx-button.primary:hover:not(:disabled).black{background:var(--mecx-color-gray-700)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.9)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], loading: [{
+                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
+ * MIT Licence
+ ************************* */
+class MonkeyToastComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    get class() {
+        return this.type;
+    }
+    constructor(host) {
+        this.host = host;
+        this.icon = 'close-circle';
+        this.type = 'default';
+        this.isClosable = false;
+        this.onActionClick = new EventEmitter();
+        this.onClose = new EventEmitter();
+        this._uid = inject(IdGenerator).getId('monkey-toast-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    close() {
+        this.host.nativeElement.classList.add('closed');
+    }
+    onAnimationEnd(event) {
+        if (event.animationName.includes('fade-out')) {
+            this.onClose.emit(this.id);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyToastComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyToastComponent, isStandalone: true, selector: "monkey-toast", inputs: { message: "message", icon: "icon", type: "type", isClosable: ["isClosable", "isClosable", booleanAttribute], actionLabel: "actionLabel", actionIcon: "actionIcon", id: "id" }, outputs: { onActionClick: "onActionClick", onClose: "onClose" }, host: { attributes: { "data-testid": "monkey-toast" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"monkey-toast-content\">\r\n  @if (icon) {\r\n    <i class=\"mk-i mk-i-{{icon}} lg\"></i>\r\n  }\r\n  <div>\r\n    <div class=\"monkey-toast-message\">\r\n      {{ message }}\r\n    </div>\r\n    @if (actionLabel) {\r\n      <div class=\"monkey-toast-action\">\r\n        <monkey-button\r\n          class=\"monkey-toast-btn-action\"\r\n          type=\"tertiary\"\r\n          size=\"sm\"\r\n          (click)=\"onActionClick.emit(id)\"\r\n        >\r\n          {{ actionLabel }}\r\n          @if (actionIcon) {\r\n            <i class=\"mk-i mk-i-{{actionIcon}} xs\" first></i>\r\n          }\r\n        </monkey-button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n@if (isClosable) {\r\n  <div class=\"monkey-toast-divider\"></div>\r\n  <div class=\"monkey-toast-close\" (click)=\"close()\">\r\n    <util-icon name=\"clear\" />\r\n  </div>\r\n}\r\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:var(--mecx-spaces-medium);padding:var(--mecx-spaces-medium);box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-lh-24);font-size:var(--mecx-fs-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white)}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;cursor:pointer}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-700)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-toast', imports: [MonkeyButtonComponent, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-toast',
+                        '(animationend)': 'onAnimationEnd($event)',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<div class=\"monkey-toast-content\">\r\n  @if (icon) {\r\n    <i class=\"mk-i mk-i-{{icon}} lg\"></i>\r\n  }\r\n  <div>\r\n    <div class=\"monkey-toast-message\">\r\n      {{ message }}\r\n    </div>\r\n    @if (actionLabel) {\r\n      <div class=\"monkey-toast-action\">\r\n        <monkey-button\r\n          class=\"monkey-toast-btn-action\"\r\n          type=\"tertiary\"\r\n          size=\"sm\"\r\n          (click)=\"onActionClick.emit(id)\"\r\n        >\r\n          {{ actionLabel }}\r\n          @if (actionIcon) {\r\n            <i class=\"mk-i mk-i-{{actionIcon}} xs\" first></i>\r\n          }\r\n        </monkey-button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n@if (isClosable) {\r\n  <div class=\"monkey-toast-divider\"></div>\r\n  <div class=\"monkey-toast-close\" (click)=\"close()\">\r\n    <util-icon name=\"clear\" />\r\n  </div>\r\n}\r\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:var(--mecx-spaces-medium);padding:var(--mecx-spaces-medium);box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-lh-24);font-size:var(--mecx-fs-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white)}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;cursor:pointer}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-700)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { message: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], isClosable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], actionLabel: [{
+                type: Input
+            }], actionIcon: [{
+                type: Input
+            }], onActionClick: [{
+                type: Output
+            }], onClose: [{
+                type: Output
+            }], id: [{
+                type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 class MonkeyToastRef {
     constructor(componentRef) {
         this.componentRef = componentRef;
@@ -3272,71 +3412,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * MIT Licence
  ************************* */
 
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyButtonComponent {
-    get id() {
-        return this._id;
-    }
-    set id(value) {
-        this._id = value || this._uid;
-    }
-    constructor() {
-        this.color = 'default';
-        this.size = 'md';
-        this.type = 'primary';
-        this.elementRef = inject(ElementRef);
-        this._uid = inject(IdGenerator).getId('monkey-button-');
-        // eslint-disable-next-line no-self-assign
-        this.id = this.id;
-    }
-    onClick(event) {
-        if (this.disabled) {
-            event.stopPropagation();
-            event.preventDefault();
-            event.stopImmediatePropagation();
-        }
-    }
-    get element() {
-        return this.elementRef.nativeElement;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", color: "color", size: "size", type: "type", loading: "loading", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "attr.tabindex": "null" } }, ngImport: i0, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\r\n  <div class=\"content\">\r\n    @if (!loading) {\r\n      <ng-content select=\"[first]\"></ng-content>\r\n    }\r\n    <span><ng-content></ng-content></span>\r\n    @if (!loading) {\r\n      <ng-content select=\"[last]\"></ng-content>\r\n    }\r\n    @if (loading) {\r\n      <util-icon class=\"mecx-button-loading\" name=\"loading\" />\r\n    }\r\n  </div>\r\n</button>\r\n", styles: ["monkey-button{display:inline-block}monkey-button.has-progress button:disabled{position:relative;overflow:hidden;border:2px solid var(--mecx-color-gray-400)}monkey-button.has-progress :is(.mecx-button){transition:none!important}monkey-button.has-progress :is(.mecx-button) :is(.content){transition:none!important}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button .mecx-button-loading{display:flex;background:transparent}monkey-button .mecx-button .mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary.black{background:var(--mecx-color-gray-900);color:var(--mecx-color-white)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-700)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-700)}monkey-button .mecx-button.primary:hover:not(:disabled).black{background:var(--mecx-color-gray-700)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.9)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
-            type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, imports: [UtilIconComponent], selector: 'monkey-button', standalone: true, host: {
-                        'data-testid': 'monkey-button',
-                        '[attr.id]': 'id',
-                        '[id]': 'id',
-                        '[attr.tabindex]': 'null'
-                    }, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\r\n  <div class=\"content\">\r\n    @if (!loading) {\r\n      <ng-content select=\"[first]\"></ng-content>\r\n    }\r\n    <span><ng-content></ng-content></span>\r\n    @if (!loading) {\r\n      <ng-content select=\"[last]\"></ng-content>\r\n    }\r\n    @if (loading) {\r\n      <util-icon class=\"mecx-button-loading\" name=\"loading\" />\r\n    }\r\n  </div>\r\n</button>\r\n", styles: ["monkey-button{display:inline-block}monkey-button.has-progress button:disabled{position:relative;overflow:hidden;border:2px solid var(--mecx-color-gray-400)}monkey-button.has-progress :is(.mecx-button){transition:none!important}monkey-button.has-progress :is(.mecx-button) :is(.content){transition:none!important}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button .mecx-button-loading{display:flex;background:transparent}monkey-button .mecx-button .mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary.black{background:var(--mecx-color-gray-900);color:var(--mecx-color-white)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-700)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-700)}monkey-button .mecx-button.primary:hover:not(:disabled).black{background:var(--mecx-color-gray-700)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.9)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], loading: [{
-                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
@@ -6551,57 +6626,1779 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * 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, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
-        this.inputType = input('numeric', ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
-        this.inputIndices = computed(() => {
-            return Array.from({ length: this.length() }, (_, i) => {
-                return '';
-            });
-        }, ...(ngDevMode ? [{ debugName: "inputIndices" }] : /* istanbul ignore next */ []));
-        this._disabled = false;
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-        if (this.formField) {
-            this.formField.hideAction = true;
-        }
-    }
+/**
+ * Shortest the thumb may get, in px — matches the `--mecx-spaces-medium`
+ * floor in the stylesheet. A very long list would otherwise give a 2px thumb,
+ * too small to grab.
+ */
+const MIN_THUMB = 24;
+/**
+ * A DRAWN scrollbar, not the native one styled — a native scrollbar can't
+ * live outside the element that scrolls (e.g. below a table's rows, next to
+ * its footer), and cross-browser track styling (radius, border) is
+ * inconsistent enough that matching a design exactly isn't reliable with
+ * `::-webkit-scrollbar`/`scrollbar-color` alone.
+ *
+ * It does NOT replace real scrolling: `target` keeps its own
+ * `overflow: auto`, so keyboard, wheel and trackpad scrolling all keep
+ * working — this is a draggable mirror drawn on top. That's also why it's
+ * `aria-hidden`: a screen reader user scrolls the real region, and a second
+ * widget announcing the same position would only add noise.
+ */
+class MonkeyScrollbarComponent {
+    constructor() {
+        this._zone = inject(NgZone);
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** The element that actually scrolls. */
+        this.target = input.required(...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+        this.trackEl = viewChild.required('track');
+        /** Scrollable length of the content, in px. */
+        this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        /** Visible length of the viewport, in px. */
+        this.visible = signal(0, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        /** How far the target is scrolled, in px. */
+        this.scrolled = signal(0, ...(ngDevMode ? [{ debugName: "scrolled" }] : /* istanbul ignore next */ []));
+        /** Length of the track the thumb slides along, in px. */
+        this.trackLength = signal(0, ...(ngDevMode ? [{ debugName: "trackLength" }] : /* istanbul ignore next */ []));
+        this.scrollable = computed(() => this.total() - this.visible() > 1, ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+        this.thumbSize = computed(() => {
+            const total = this.total();
+            return `${total > 0 ? Math.min(1, this.visible() / total) * 100 : 100}%`;
+        }, ...(ngDevMode ? [{ debugName: "thumbSize" }] : /* istanbul ignore next */ []));
+        /**
+         * A px distance, applied as a `translate`, not as `left`/`top`: moving the
+         * thumb then costs a composited transform instead of a layout pass on every
+         * scroll frame. It has to be px rather than a percentage of the thumb
+         * because the thumb has a minimum length — once that kicks in, a
+         * percentage of its own (clamped) size no longer maps to track distance.
+         */
+        this.thumbOffset = computed(() => {
+            const total = this.total();
+            const visible = this.visible();
+            const track = this.trackLength();
+            if (total <= 0 || track <= 0)
+                return '0px';
+            const thumb = Math.max(MIN_THUMB, (visible / total) * track);
+            const free = Math.max(0, track - thumb);
+            const progress = Math.min(1, Math.max(0, this.scrolled() / Math.max(1, total - visible)));
+            return `${free * progress}px`;
+        }, ...(ngDevMode ? [{ debugName: "thumbOffset" }] : /* istanbul ignore next */ []));
+        /** Pending animation frame, 0 when none is queued. */
+        this.frame = 0;
+        /** Whether the cached lengths need re-reading on the next frame. */
+        this.sizeStale = true;
+        this.onScroll = () => this.schedule();
+        /** Drag state. `null` = nobody is dragging. */
+        this.drag = null;
+        effect((onCleanup) => {
+            const target = this.target();
+            this.attach(target);
+            onCleanup(() => this.detach());
+        });
+    }
+    ngOnDestroy() {
+        this.detach();
+    }
+    attach(target) {
+        this.detach();
+        this.observedTarget = target;
+        // Outside the Angular zone: a zone-patched 'scroll' listener costs a full
+        // global change-detection pass per event. The signals `measure()` writes
+        // still schedule change detection by themselves.
+        this._zone.runOutsideAngular(() => {
+            target.addEventListener('scroll', this.onScroll, { passive: true });
+            // The target AND its content: the bar should disappear when the content
+            // shrinks, not only when the container itself is resized — a column
+            // removed from the table doesn't resize the scrolling wrapper, only how
+            // far it needs to scroll. The track too, so the thumb's px offset stays
+            // right when the bar itself changes width.
+            this.resizeObserver = new ResizeObserver(() => this.schedule(true));
+            this.resizeObserver.observe(target);
+            this.resizeObserver.observe(this.trackEl().nativeElement);
+            Array.from(target.children).forEach((child) => this.resizeObserver?.observe(child));
+        });
+        this.sizeStale = true;
+        this.measure();
+    }
+    detach() {
+        this.observedTarget?.removeEventListener('scroll', this.onScroll);
+        this.observedTarget = undefined;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        if (this.frame)
+            cancelAnimationFrame(this.frame);
+        this.frame = 0;
+    }
+    /**
+     * Scroll events fire far more often than the screen refreshes, and each
+     * measurement reads layout. Coalescing to one read per frame is what keeps
+     * a long table from thrashing layout while it scrolls.
+     */
+    schedule(resized = false) {
+        if (resized)
+            this.sizeStale = true;
+        if (this.frame)
+            return;
+        this.frame = this._zone.runOutsideAngular(() => {
+            return requestAnimationFrame(() => {
+                this.frame = 0;
+                this.measure();
+            });
+        });
+    }
+    measure() {
+        const target = this.observedTarget;
+        if (!target)
+            return;
+        const horizontal = this.orientation() === 'horizontal';
+        // Only the scroll offset changes while scrolling; the lengths can't, so
+        // re-reading them per frame would force layout for nothing.
+        if (this.sizeStale) {
+            this.sizeStale = false;
+            const track = this.trackEl().nativeElement;
+            this.total.set(horizontal ? target.scrollWidth : target.scrollHeight);
+            this.visible.set(horizontal ? target.clientWidth : target.clientHeight);
+            this.trackLength.set(horizontal ? track.clientWidth : track.clientHeight);
+        }
+        this.scrolled.set(horizontal ? target.scrollLeft : target.scrollTop);
+    }
+    onPointerDown(event) {
+        const target = this.observedTarget;
+        if (!target || !this.scrollable())
+            return;
+        const horizontal = this.orientation() === 'horizontal';
+        event.preventDefault();
+        event.target.setPointerCapture(event.pointerId);
+        this.drag = {
+            start: horizontal ? event.clientX : event.clientY,
+            initialScroll: horizontal ? target.scrollLeft : target.scrollTop
+        };
+    }
+    onPointerMove(event) {
+        const target = this.observedTarget;
+        if (!this.drag || !target)
+            return;
+        const horizontal = this.orientation() === 'horizontal';
+        const track = this.trackEl().nativeElement.getBoundingClientRect();
+        const trackLength = horizontal ? track.width : track.height;
+        if (trackLength <= 0)
+            return;
+        // One thumb pixel is worth (total / track) content pixels — without this
+        // conversion, dragging moves at the wrong speed and the thumb drifts
+        // away from the pointer.
+        const total = horizontal ? target.scrollWidth : target.scrollHeight;
+        const moved = (horizontal ? event.clientX : event.clientY) - this.drag.start;
+        const destination = this.drag.initialScroll + moved * (total / trackLength);
+        if (horizontal)
+            target.scrollLeft = destination;
+        else
+            target.scrollTop = destination;
+    }
+    onPointerUp(event) {
+        if (!this.drag)
+            return;
+        this.drag = null;
+        event.target.releasePointerCapture?.(event.pointerId);
+    }
+    /** Clicking the track outside the thumb jumps the content there, centered on the click. */
+    onTrackPointerDown(event) {
+        const target = this.observedTarget;
+        if (!target || !this.scrollable() || this.drag)
+            return;
+        const horizontal = this.orientation() === 'horizontal';
+        const track = this.trackEl().nativeElement.getBoundingClientRect();
+        const length = horizontal ? track.width : track.height;
+        if (length <= 0)
+            return;
+        const point = horizontal ? event.clientX - track.left : event.clientY - track.top;
+        const total = horizontal ? target.scrollWidth : target.scrollHeight;
+        const visible = horizontal ? target.clientWidth : target.clientHeight;
+        const destination = (point / length) * total - visible / 2;
+        if (horizontal)
+            target.scrollLeft = destination;
+        else
+            target.scrollTop = destination;
+    }
+    /**
+     * Manual re-measure. Public on purpose: the automatic triggers (scroll,
+     * ResizeObserver on the target and its children) cover what the browser
+     * reports on its own — this is the escape hatch for what it doesn't, e.g.
+     * a target swapped out from under the component.
+     */
+    remeasure() {
+        this.sizeStale = true;
+        this.measure();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: MonkeyScrollbarComponent, isStandalone: true, selector: "monkey-scrollbar", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class.mecx-scrollbar--horizontal": "orientation() === 'horizontal'", "class.mecx-scrollbar--vertical": "orientation() === 'vertical'", "class.mecx-scrollbar--small": "size() === 'small'", "class.mecx-scrollbar--medium": "size() === 'medium'", "class.mecx-scrollbar--inert": "!scrollable()" }, classAttribute: "mecx-scrollbar" }, viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #track class=\"mecx-scrollbar-track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <div\n    class=\"mecx-scrollbar-thumb\"\n    [style.--mecx-scrollbar-thumb-size]=\"thumbSize()\"\n    [style.--mecx-scrollbar-thumb-offset]=\"thumbOffset()\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPointerUp($event)\"\n    (pointercancel)=\"onPointerUp($event)\"\n  ></div>\n</div>\n", styles: [".mecx-scrollbar{box-sizing:border-box;display:block;flex-shrink:0;background:var(--mecx-color-gray-100);border:1px solid var(--mecx-color-gray-500);border-radius:800px}.mecx-scrollbar--inert{display:none}.mecx-scrollbar-track{position:relative}.mecx-scrollbar-thumb{position:absolute;background:var(--mecx-color-gray-900);border-radius:800px;cursor:grab;touch-action:none;will-change:transform}.mecx-scrollbar-thumb:active{cursor:grabbing}.mecx-scrollbar--medium{--mecx-scrollbar-gap: 4px}.mecx-scrollbar--small{--mecx-scrollbar-gap: 0px}.mecx-scrollbar--horizontal{width:100%}.mecx-scrollbar--horizontal .mecx-scrollbar-track{width:100%;height:calc(6px + 2 * var(--mecx-scrollbar-gap))}.mecx-scrollbar--horizontal .mecx-scrollbar-thumb{inset-block:var(--mecx-scrollbar-gap);left:0;width:var(--mecx-scrollbar-thumb-size);min-width:var(--mecx-spaces-medium);transform:translate(var(--mecx-scrollbar-thumb-offset, 0px))}.mecx-scrollbar--vertical{align-self:stretch}.mecx-scrollbar--vertical .mecx-scrollbar-track{width:calc(6px + 2 * var(--mecx-scrollbar-gap));height:100%}.mecx-scrollbar--vertical .mecx-scrollbar-thumb{inset-inline:var(--mecx-scrollbar-gap);top:0;height:var(--mecx-scrollbar-thumb-size);min-height:var(--mecx-spaces-medium);transform:translateY(var(--mecx-scrollbar-thumb-offset, 0px))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyScrollbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-scrollbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'mecx-scrollbar',
+                        'aria-hidden': 'true',
+                        '[class.mecx-scrollbar--horizontal]': "orientation() === 'horizontal'",
+                        '[class.mecx-scrollbar--vertical]': "orientation() === 'vertical'",
+                        '[class.mecx-scrollbar--small]': "size() === 'small'",
+                        '[class.mecx-scrollbar--medium]': "size() === 'medium'",
+                        '[class.mecx-scrollbar--inert]': '!scrollable()'
+                    }, template: "<div #track class=\"mecx-scrollbar-track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <div\n    class=\"mecx-scrollbar-thumb\"\n    [style.--mecx-scrollbar-thumb-size]=\"thumbSize()\"\n    [style.--mecx-scrollbar-thumb-offset]=\"thumbOffset()\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPointerUp($event)\"\n    (pointercancel)=\"onPointerUp($event)\"\n  ></div>\n</div>\n", styles: [".mecx-scrollbar{box-sizing:border-box;display:block;flex-shrink:0;background:var(--mecx-color-gray-100);border:1px solid var(--mecx-color-gray-500);border-radius:800px}.mecx-scrollbar--inert{display:none}.mecx-scrollbar-track{position:relative}.mecx-scrollbar-thumb{position:absolute;background:var(--mecx-color-gray-900);border-radius:800px;cursor:grab;touch-action:none;will-change:transform}.mecx-scrollbar-thumb:active{cursor:grabbing}.mecx-scrollbar--medium{--mecx-scrollbar-gap: 4px}.mecx-scrollbar--small{--mecx-scrollbar-gap: 0px}.mecx-scrollbar--horizontal{width:100%}.mecx-scrollbar--horizontal .mecx-scrollbar-track{width:100%;height:calc(6px + 2 * var(--mecx-scrollbar-gap))}.mecx-scrollbar--horizontal .mecx-scrollbar-thumb{inset-block:var(--mecx-scrollbar-gap);left:0;width:var(--mecx-scrollbar-thumb-size);min-width:var(--mecx-spaces-medium);transform:translate(var(--mecx-scrollbar-thumb-offset, 0px))}.mecx-scrollbar--vertical{align-self:stretch}.mecx-scrollbar--vertical .mecx-scrollbar-track{width:calc(6px + 2 * var(--mecx-scrollbar-gap));height:100%}.mecx-scrollbar--vertical .mecx-scrollbar-thumb{inset-inline:var(--mecx-scrollbar-gap);top:0;height:var(--mecx-scrollbar-thumb-size);min-height:var(--mecx-spaces-medium);transform:translateY(var(--mecx-scrollbar-thumb-offset, 0px))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], trackEl: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+
+/** ************************
+ * 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
+ ************************* */
+/**
+ * The segmented row that replaces the trigger once the user has picked a
+ * filter. Two segments and a bin:
+ *
+ *   [ icon  Data de Emissão | 01/01/2025 - 31/01/2025 | 🗑 ]
+ *     category               value                      action
+ *
+ * How many segments there are is the consumer's decision — the value segment
+ * is projected as soon as there is something to answer:
+ *
+ *   <monkey-filter-chip (remove)="drop()">
+ *     <monkey-filter-segment icon="calendar-box" text="Data" readonlySegment />
+ *     <monkey-filter-segment placeholder="Selecione" [(open)]="open" />
+ *   </monkey-filter-chip>
+ *
+ * The chip carries NO `overflow: hidden`. It would clip the panels the
+ * segments open right below themselves; the ends are rounded by radius, not by
+ * clipping.
+ */
+class MonkeyFilterChipComponent {
+    constructor() {
+        /** Icon font name of the remove action, without the `mk-i-` prefix. */
+        this.removeIcon = input('trash', ...(ngDevMode ? [{ debugName: "removeIcon" }] : /* istanbul ignore next */ []));
+        this.removeLabel = input('Remover filtro', ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+        this.remove = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: MonkeyFilterChipComponent, isStandalone: true, selector: "monkey-filter-chip", inputs: { removeIcon: { classPropertyName: "removeIcon", publicName: "removeIcon", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, host: { attributes: { "data-testid": "monkey-filter-chip" }, classAttribute: "mecx-filter-chip" }, ngImport: i0, template: "<ng-content></ng-content>\n\n<!-- 2px of room around a 24px button = 28px, the same height as the segments.\n     The numbers add up on their own, with nothing to compensate for. -->\n<span class=\"mecx-filter-chip-action\">\n  <button\n    class=\"mecx-filter-chip-remove\"\n    type=\"button\"\n    [attr.aria-label]=\"removeLabel()\"\n    (click)=\"remove.emit()\"\n  >\n    <i class=\"mk-i mk-i-{{ removeIcon() }}\" aria-hidden=\"true\"></i>\n  </button>\n</span>\n", styles: ["@charset \"UTF-8\";.mecx-filter-chip{--mecx-fbv2-duration-state: .15s;--mecx-fbv2-duration-enter: .2s;--mecx-fbv2-duration-exit: .15s;--mecx-fbv2-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-fbv2-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-fbv2-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-fbv2-scale-unfold: .94;--mecx-fbv2-travel-anchored: 4px;--mecx-fbv2-travel-slide: 16px;--mecx-fbv2-stagger: 25ms;--mecx-fbv2-control-height: 28px;--mecx-fbv2-pointer-target: 40px;--mecx-fbv2-radius: 8px;--mecx-fbv2-radius-item: 4px;--mecx-fbv2-fade-width: 48px}@media(prefers-reduced-motion:reduce){.mecx-filter-chip{--mecx-fbv2-duration-state: 1ms;--mecx-fbv2-duration-enter: 1ms;--mecx-fbv2-duration-exit: 1ms;--mecx-fbv2-scale-unfold: 1;--mecx-fbv2-travel-anchored: 0px;--mecx-fbv2-travel-slide: 0px;--mecx-fbv2-stagger: 0ms}}.mecx-filter-chip{display:inline-flex;align-items:center}.mecx-filter-chip>monkey-filter-segment:first-child .mecx-filter-segment-btn{border-top-left-radius:var(--mecx-fbv2-radius);border-bottom-left-radius:var(--mecx-fbv2-radius)}.mecx-filter-chip-action{display:inline-flex;align-items:center;height:var(--mecx-fbv2-control-height);padding:2px;box-sizing:border-box;background:var(--mecx-color-gray-50);border:1px solid var(--mecx-color-gray-500);border-top-right-radius:var(--mecx-fbv2-radius);border-bottom-right-radius:var(--mecx-fbv2-radius)}.mecx-filter-chip-remove{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--mecx-fbv2-radius-item);color:var(--mecx-color-gray-700);cursor:pointer;outline:none;transition:background-color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state)}.mecx-filter-chip-remove:after{content:\"\";position:absolute;inset:-6px -6px -6px 0}.mecx-filter-chip-remove .mk-i{display:flex;font-size:16px}.mecx-filter-chip-remove:hover{background-color:var(--mecx-color-gray-200);color:var(--mecx-color-error-main)}.mecx-filter-chip-remove:active{background-color:var(--mecx-color-gray-400)}.mecx-filter-chip-remove:focus-visible{outline:2px solid var(--mecx-color-gray-900);outline-offset:-2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-filter-chip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-filter-chip',
+                        class: 'mecx-filter-chip'
+                    }, template: "<ng-content></ng-content>\n\n<!-- 2px of room around a 24px button = 28px, the same height as the segments.\n     The numbers add up on their own, with nothing to compensate for. -->\n<span class=\"mecx-filter-chip-action\">\n  <button\n    class=\"mecx-filter-chip-remove\"\n    type=\"button\"\n    [attr.aria-label]=\"removeLabel()\"\n    (click)=\"remove.emit()\"\n  >\n    <i class=\"mk-i mk-i-{{ removeIcon() }}\" aria-hidden=\"true\"></i>\n  </button>\n</span>\n", styles: ["@charset \"UTF-8\";.mecx-filter-chip{--mecx-fbv2-duration-state: .15s;--mecx-fbv2-duration-enter: .2s;--mecx-fbv2-duration-exit: .15s;--mecx-fbv2-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-fbv2-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-fbv2-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-fbv2-scale-unfold: .94;--mecx-fbv2-travel-anchored: 4px;--mecx-fbv2-travel-slide: 16px;--mecx-fbv2-stagger: 25ms;--mecx-fbv2-control-height: 28px;--mecx-fbv2-pointer-target: 40px;--mecx-fbv2-radius: 8px;--mecx-fbv2-radius-item: 4px;--mecx-fbv2-fade-width: 48px}@media(prefers-reduced-motion:reduce){.mecx-filter-chip{--mecx-fbv2-duration-state: 1ms;--mecx-fbv2-duration-enter: 1ms;--mecx-fbv2-duration-exit: 1ms;--mecx-fbv2-scale-unfold: 1;--mecx-fbv2-travel-anchored: 0px;--mecx-fbv2-travel-slide: 0px;--mecx-fbv2-stagger: 0ms}}.mecx-filter-chip{display:inline-flex;align-items:center}.mecx-filter-chip>monkey-filter-segment:first-child .mecx-filter-segment-btn{border-top-left-radius:var(--mecx-fbv2-radius);border-bottom-left-radius:var(--mecx-fbv2-radius)}.mecx-filter-chip-action{display:inline-flex;align-items:center;height:var(--mecx-fbv2-control-height);padding:2px;box-sizing:border-box;background:var(--mecx-color-gray-50);border:1px solid var(--mecx-color-gray-500);border-top-right-radius:var(--mecx-fbv2-radius);border-bottom-right-radius:var(--mecx-fbv2-radius)}.mecx-filter-chip-remove{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--mecx-fbv2-radius-item);color:var(--mecx-color-gray-700);cursor:pointer;outline:none;transition:background-color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state)}.mecx-filter-chip-remove:after{content:\"\";position:absolute;inset:-6px -6px -6px 0}.mecx-filter-chip-remove .mk-i{display:flex;font-size:16px}.mecx-filter-chip-remove:hover{background-color:var(--mecx-color-gray-200);color:var(--mecx-color-error-main)}.mecx-filter-chip-remove:active{background-color:var(--mecx-color-gray-400)}.mecx-filter-chip-remove:focus-visible{outline:2px solid var(--mecx-color-gray-900);outline-offset:-2px}\n"] }]
+        }], propDecorators: { removeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeIcon", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+/**
+ * The panel every dropdown of monkey-filter-bar-v2 opens: a surface with an
+ * optional search field on top and the projected rows below it.
+ *
+ * Only the WIDTH changes from one panel to the next, and it is set from the
+ * bar's own stylesheet through a class on this host — the panel component has
+ * no opinion on how wide a company list should be.
+ *
+ * `width` and not `min-width` on those classes: each panel is a fixed-width
+ * frame in the design and a long label ellipsizes inside it. With a floor the
+ * content would win, and the measurement would turn into a suggestion.
+ */
+class MonkeyFilterMenuComponent {
+    constructor() {
+        this.showSearch = input(false, { ...(ngDevMode ? { debugName: "showSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.searchPlaceholder = input('Buscar', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        /** Lets the row list scroll instead of growing past the viewport. */
+        this.showScroll = input(true, { ...(ngDevMode ? { debugName: "showScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Ceiling of the scrolling list, in px. */
+        this.maxHeight = input(240, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        this.searchChange = output();
+        this.searchValue = '';
+        this._zone = inject(NgZone);
+        this._items = viewChild('items', ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+        /** Is the list actually overflowing right now? */
+        this._overflowing = signal(false, ...(ngDevMode ? [{ debugName: "_overflowing" }] : /* istanbul ignore next */ []));
+        /**
+         * Draw the track only when the content OVERFLOWS.
+         *
+         * Tied to `showScroll` alone, a three-row panel lost 12px of width to a
+         * track that was never going to appear.
+         */
+        this.scrolling = computed(() => {
+            return this.showScroll() && this._overflowing();
+        }, ...(ngDevMode ? [{ debugName: "scrolling" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const items = this._items()?.nativeElement;
+            if (!items)
+                return;
+            // Outside the Angular zone: a zone-patched observer costs a global
+            // change-detection pass per callback, and the signal written below
+            // already schedules one by itself when the value actually changes.
+            this._zone.runOutsideAngular(() => {
+                this._observer = new ResizeObserver(() => {
+                    this._overflowing.set(items.scrollHeight - items.clientHeight > 1);
+                });
+                this._observer.observe(items);
+                Array.from(items.children).forEach((child) => {
+                    return this._observer?.observe(child);
+                });
+            });
+            onCleanup(() => {
+                return this._disconnect();
+            });
+        });
+    }
+    ngOnDestroy() {
+        this._disconnect();
+    }
+    onSearchInput(value) {
+        this.searchValue = value;
+        this.searchChange.emit(value);
+    }
+    _disconnect() {
+        this._observer?.disconnect();
+        this._observer = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterMenuComponent, isStandalone: true, selector: "monkey-filter-menu", inputs: { showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showScroll: { classPropertyName: "showScroll", publicName: "showScroll", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange" }, host: { attributes: { "data-testid": "monkey-filter-menu" }, classAttribute: "mecx-filter-menu" }, viewQueries: [{ propertyName: "_items", first: true, predicate: ["items"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Search \u2014 optional, no label and no footer -->\n@if (showSearch()) {\n  <div class=\"mecx-filter-menu-search\">\n    <monkey-form-field size=\"sm\">\n      <input\n        type=\"text\"\n        monkey-input\n        [placeholder]=\"searchPlaceholder()\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearchInput($event)\"\n      />\n      <monkey-prefix>\n        <i class=\"mk-i mk-i-search fs-md\"></i>\n      </monkey-prefix>\n    </monkey-form-field>\n  </div>\n}\n\n<!-- Projected rows. `--scroll` allows scrolling; `--scrolling` draws the track\n     and hands it the right-hand breathing room, and only kicks in once the\n     content really overflows \u2014 otherwise the panel reserves 20px for a bar\n     that does not exist. -->\n<div\n  #items\n  class=\"mecx-filter-menu-items\"\n  [class.mecx-filter-menu-items--scroll]=\"showScroll()\"\n  [class.mecx-filter-menu-items--scrolling]=\"scrolling()\"\n  [style.max-height.px]=\"showScroll() ? maxHeight() : null\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.mecx-filter-menu{--mecx-fbv2-duration-state: .15s;--mecx-fbv2-duration-enter: .2s;--mecx-fbv2-duration-exit: .15s;--mecx-fbv2-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-fbv2-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-fbv2-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-fbv2-scale-unfold: .94;--mecx-fbv2-travel-anchored: 4px;--mecx-fbv2-travel-slide: 16px;--mecx-fbv2-stagger: 25ms;--mecx-fbv2-control-height: 28px;--mecx-fbv2-pointer-target: 40px;--mecx-fbv2-radius: 8px;--mecx-fbv2-radius-item: 4px;--mecx-fbv2-fade-width: 48px}@media(prefers-reduced-motion:reduce){.mecx-filter-menu{--mecx-fbv2-duration-state: 1ms;--mecx-fbv2-duration-enter: 1ms;--mecx-fbv2-duration-exit: 1ms;--mecx-fbv2-scale-unfold: 1;--mecx-fbv2-travel-anchored: 0px;--mecx-fbv2-travel-slide: 0px;--mecx-fbv2-stagger: 0ms}}.mecx-filter-menu{display:flex;flex-direction:column;min-width:158px;max-width:341px;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:var(--mecx-fbv2-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08));overflow:hidden;box-sizing:border-box}.mecx-filter-menu-search{padding:8px;border-bottom:2px solid var(--mecx-color-gray-200);flex-shrink:0}.mecx-filter-menu-search monkey-form-field{width:100%;display:block}.mecx-filter-menu-items{display:flex;flex-direction:column;padding:8px}.mecx-filter-menu-items--scroll{overflow-y:auto}.mecx-filter-menu-items--scrolling{scrollbar-gutter:stable;padding-right:0}.mecx-filter-menu-items--scrolling::-webkit-scrollbar{width:20px}.mecx-filter-menu-items--scrolling::-webkit-scrollbar-track{background:var(--mecx-color-gray-100);background-clip:padding-box;border-left:4px solid transparent;border-right:8px solid transparent;border-radius:8px 12px 12px 8px/4px;box-shadow:inset 0 0 0 1px var(--mecx-color-gray-400);margin:8px 0}.mecx-filter-menu-items--scrolling::-webkit-scrollbar-thumb{background:var(--mecx-color-gray-800);background-clip:padding-box;border-left:5px solid transparent;border-right:9px solid transparent;border-radius:8px 12px 12px 8px/3px}.mecx-filter-menu-items>monkey-divider{margin-block:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "directive", type: MonkeyPrefixDirective, selector: "monkey-prefix" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-filter-menu', imports: [FormsModule, MonkeyFormFieldModule, MonkeyInputModule, MonkeyPrefixDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-filter-menu',
+                        class: 'mecx-filter-menu'
+                    }, template: "<!-- Search \u2014 optional, no label and no footer -->\n@if (showSearch()) {\n  <div class=\"mecx-filter-menu-search\">\n    <monkey-form-field size=\"sm\">\n      <input\n        type=\"text\"\n        monkey-input\n        [placeholder]=\"searchPlaceholder()\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearchInput($event)\"\n      />\n      <monkey-prefix>\n        <i class=\"mk-i mk-i-search fs-md\"></i>\n      </monkey-prefix>\n    </monkey-form-field>\n  </div>\n}\n\n<!-- Projected rows. `--scroll` allows scrolling; `--scrolling` draws the track\n     and hands it the right-hand breathing room, and only kicks in once the\n     content really overflows \u2014 otherwise the panel reserves 20px for a bar\n     that does not exist. -->\n<div\n  #items\n  class=\"mecx-filter-menu-items\"\n  [class.mecx-filter-menu-items--scroll]=\"showScroll()\"\n  [class.mecx-filter-menu-items--scrolling]=\"scrolling()\"\n  [style.max-height.px]=\"showScroll() ? maxHeight() : null\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.mecx-filter-menu{--mecx-fbv2-duration-state: .15s;--mecx-fbv2-duration-enter: .2s;--mecx-fbv2-duration-exit: .15s;--mecx-fbv2-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-fbv2-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-fbv2-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-fbv2-scale-unfold: .94;--mecx-fbv2-travel-anchored: 4px;--mecx-fbv2-travel-slide: 16px;--mecx-fbv2-stagger: 25ms;--mecx-fbv2-control-height: 28px;--mecx-fbv2-pointer-target: 40px;--mecx-fbv2-radius: 8px;--mecx-fbv2-radius-item: 4px;--mecx-fbv2-fade-width: 48px}@media(prefers-reduced-motion:reduce){.mecx-filter-menu{--mecx-fbv2-duration-state: 1ms;--mecx-fbv2-duration-enter: 1ms;--mecx-fbv2-duration-exit: 1ms;--mecx-fbv2-scale-unfold: 1;--mecx-fbv2-travel-anchored: 0px;--mecx-fbv2-travel-slide: 0px;--mecx-fbv2-stagger: 0ms}}.mecx-filter-menu{display:flex;flex-direction:column;min-width:158px;max-width:341px;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:var(--mecx-fbv2-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08));overflow:hidden;box-sizing:border-box}.mecx-filter-menu-search{padding:8px;border-bottom:2px solid var(--mecx-color-gray-200);flex-shrink:0}.mecx-filter-menu-search monkey-form-field{width:100%;display:block}.mecx-filter-menu-items{display:flex;flex-direction:column;padding:8px}.mecx-filter-menu-items--scroll{overflow-y:auto}.mecx-filter-menu-items--scrolling{scrollbar-gutter:stable;padding-right:0}.mecx-filter-menu-items--scrolling::-webkit-scrollbar{width:20px}.mecx-filter-menu-items--scrolling::-webkit-scrollbar-track{background:var(--mecx-color-gray-100);background-clip:padding-box;border-left:4px solid transparent;border-right:8px solid transparent;border-radius:8px 12px 12px 8px/4px;box-shadow:inset 0 0 0 1px var(--mecx-color-gray-400);margin:8px 0}.mecx-filter-menu-items--scrolling::-webkit-scrollbar-thumb{background:var(--mecx-color-gray-800);background-clip:padding-box;border-left:5px solid transparent;border-right:9px solid transparent;border-radius:8px 12px 12px 8px/3px}.mecx-filter-menu-items>monkey-divider{margin-block:4px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScroll", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], _items: [{ type: i0.ViewChild, args: ['items', { isSignal: true }] }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+/**
+ * One row of a monkey-filter-menu.
+ *
+ * The ROW is the click target, which is why the checkbox inside it does not
+ * grow one of its own: the boxes sit 18px apart inside rows of 32px that touch
+ * each other, so a 40px floor on each would make two targets OVERLAP by 8px —
+ * inside rows that are already clickable end to end.
+ */
+class MonkeyFilterMenuItemComponent {
+    constructor() {
+        this.property = input('text', ...(ngDevMode ? [{ debugName: "property" }] : /* istanbul ignore next */ []));
+        /** Icon font name, without the `mk-i-` prefix. */
+        this.leadIcon = input(null, ...(ngDevMode ? [{ debugName: "leadIcon" }] : /* istanbul ignore next */ []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Secondary line under the label — a document number, a key. */
+        this.description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        this.checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Already answered elsewhere: the row shows a check and stops responding. */
+        this.selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.itemClick = output();
+    }
+    onClick() {
+        if (this.disabled())
+            return;
+        this.itemClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterMenuItemComponent, isStandalone: true, selector: "monkey-filter-menu-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: false, transformFunction: null }, leadIcon: { classPropertyName: "leadIcon", publicName: "leadIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { attributes: { "data-testid": "monkey-filter-menu-item", "role": "option" }, listeners: { "click": "onClick()" }, properties: { "class.mecx-filter-menu-item--disabled": "disabled()", "class.mecx-filter-menu-item--selected": "selected()", "attr.aria-selected": "selected() || checked()", "attr.aria-disabled": "disabled() || null" }, classAttribute: "mecx-filter-menu-item" }, ngImport: i0, template: "@if (property() === 'checkbox') {\n  <monkey-checkbox\n    class=\"mecx-filter-menu-item-checkbox\"\n    size=\"sm\"\n    [value]=\"checked()\"\n    [disabled]=\"disabled()\"\n    [showFooter]=\"false\"\n  ></monkey-checkbox>\n} @else if (leadIcon()) {\n  <i class=\"mk-i mk-i-{{ leadIcon() }} mecx-filter-menu-item-icon\"></i>\n}\n\n<span class=\"mecx-filter-menu-item-text\">\n  <span class=\"mecx-filter-menu-item-label\">{{ label() }}</span>\n  @if (description()) {\n    <span class=\"mecx-filter-menu-item-description\">{{ description() }}</span>\n  }\n</span>\n\n<!-- The row was already answered somewhere else \u2014 the check says so without\n     taking the row out of the list, which is what tells the user the filter\n     they are looking for is already on. -->\n@if (selected()) {\n  <i class=\"mk-i mk-i-check mecx-filter-menu-item-check\"></i>\n}\n", styles: ["@charset \"UTF-8\";.mecx-filter-menu-item{--mecx-fbv2-duration-state: .15s;--mecx-fbv2-duration-enter: .2s;--mecx-fbv2-duration-exit: .15s;--mecx-fbv2-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-fbv2-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-fbv2-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-fbv2-scale-unfold: .94;--mecx-fbv2-travel-anchored: 4px;--mecx-fbv2-travel-slide: 16px;--mecx-fbv2-stagger: 25ms;--mecx-fbv2-control-height: 28px;--mecx-fbv2-pointer-target: 40px;--mecx-fbv2-radius: 8px;--mecx-fbv2-radius-item: 4px;--mecx-fbv2-fade-width: 48px}@media(prefers-reduced-motion:reduce){.mecx-filter-menu-item{--mecx-fbv2-duration-state: 1ms;--mecx-fbv2-duration-enter: 1ms;--mecx-fbv2-duration-exit: 1ms;--mecx-fbv2-scale-unfold: 1;--mecx-fbv2-travel-anchored: 0px;--mecx-fbv2-travel-slide: 0px;--mecx-fbv2-stagger: 0ms}}.mecx-filter-menu-item{display:flex;align-items:center;gap:8px;padding:8px;background:var(--mecx-color-white);border-radius:var(--mecx-fbv2-radius-item);cursor:pointer;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none;transition:background-color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state),scale var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state)}.mecx-filter-menu-item:hover:not(.mecx-filter-menu-item--disabled){background-color:var(--mecx-color-gray-100)}.mecx-filter-menu-item:active:not(.mecx-filter-menu-item--disabled){scale:.99}.mecx-filter-menu-item--disabled{cursor:not-allowed}.mecx-filter-menu-item--disabled .mecx-filter-menu-item-label,.mecx-filter-menu-item--disabled .mecx-filter-menu-item-description,.mecx-filter-menu-item--disabled .mecx-filter-menu-item-icon{color:var(--mecx-color-gray-400)}.mecx-filter-menu-item-icon{display:flex;flex-shrink:0;font-size:16px;color:var(--mecx-color-gray-700)}.mecx-filter-menu-item-checkbox{flex-shrink:0;pointer-events:none}.mecx-filter-menu-item-text{display:flex;flex-direction:column;gap:4px;flex:1 0 0;min-width:0}.mecx-filter-menu-item-label{display:block;font-size:13px;font-weight:400;line-height:16px;letter-spacing:.02em;color:var(--mecx-color-gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mecx-filter-menu-item-description{display:block;font-size:13px;font-weight:400;line-height:16px;letter-spacing:.02em;color:var(--mecx-color-gray-700)}.mecx-filter-menu-item-check{display:flex;flex-shrink:0;font-size:12px;color:var(--mecx-color-theme-main)}\n"], dependencies: [{ kind: "component", type: MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["disabled", "indeterminate", "required", "showFooter", "size", "value"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-filter-menu-item', imports: [MonkeyCheckboxComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-filter-menu-item',
+                        class: 'mecx-filter-menu-item',
+                        role: 'option',
+                        '[class.mecx-filter-menu-item--disabled]': 'disabled()',
+                        '[class.mecx-filter-menu-item--selected]': 'selected()',
+                        '[attr.aria-selected]': 'selected() || checked()',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '(click)': 'onClick()'
+                    }, template: "@if (property() === 'checkbox') {\n  <monkey-checkbox\n    class=\"mecx-filter-menu-item-checkbox\"\n    size=\"sm\"\n    [value]=\"checked()\"\n    [disabled]=\"disabled()\"\n    [showFooter]=\"false\"\n  ></monkey-checkbox>\n} @else if (leadIcon()) {\n  <i class=\"mk-i mk-i-{{ leadIcon() }} mecx-filter-menu-item-icon\"></i>\n}\n\n<span class=\"mecx-filter-menu-item-text\">\n  <span class=\"mecx-filter-menu-item-label\">{{ label() }}</span>\n  @if (description()) {\n    <span class=\"mecx-filter-menu-item-description\">{{ description() }}</span>\n  }\n</span>\n\n<!-- The row was already answered somewhere else \u2014 the check says so without\n     taking the row out of the list, which is what tells the user the filter\n     they are looking for is already on. -->\n@if (selected()) {\n  <i class=\"mk-i mk-i-check mecx-filter-menu-item-check\"></i>\n}\n", styles: ["@charset \"UTF-8\";.mecx-filter-menu-item{--mecx-fbv2-duration-state: .15s;--mecx-fbv2-duration-enter: .2s;--mecx-fbv2-duration-exit: .15s;--mecx-fbv2-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-fbv2-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-fbv2-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-fbv2-scale-unfold: .94;--mecx-fbv2-travel-anchored: 4px;--mecx-fbv2-travel-slide: 16px;--mecx-fbv2-stagger: 25ms;--mecx-fbv2-control-height: 28px;--mecx-fbv2-pointer-target: 40px;--mecx-fbv2-radius: 8px;--mecx-fbv2-radius-item: 4px;--mecx-fbv2-fade-width: 48px}@media(prefers-reduced-motion:reduce){.mecx-filter-menu-item{--mecx-fbv2-duration-state: 1ms;--mecx-fbv2-duration-enter: 1ms;--mecx-fbv2-duration-exit: 1ms;--mecx-fbv2-scale-unfold: 1;--mecx-fbv2-travel-anchored: 0px;--mecx-fbv2-travel-slide: 0px;--mecx-fbv2-stagger: 0ms}}.mecx-filter-menu-item{display:flex;align-items:center;gap:8px;padding:8px;background:var(--mecx-color-white);border-radius:var(--mecx-fbv2-radius-item);cursor:pointer;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none;transition:background-color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state),scale var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state)}.mecx-filter-menu-item:hover:not(.mecx-filter-menu-item--disabled){background-color:var(--mecx-color-gray-100)}.mecx-filter-menu-item:active:not(.mecx-filter-menu-item--disabled){scale:.99}.mecx-filter-menu-item--disabled{cursor:not-allowed}.mecx-filter-menu-item--disabled .mecx-filter-menu-item-label,.mecx-filter-menu-item--disabled .mecx-filter-menu-item-description,.mecx-filter-menu-item--disabled .mecx-filter-menu-item-icon{color:var(--mecx-color-gray-400)}.mecx-filter-menu-item-icon{display:flex;flex-shrink:0;font-size:16px;color:var(--mecx-color-gray-700)}.mecx-filter-menu-item-checkbox{flex-shrink:0;pointer-events:none}.mecx-filter-menu-item-text{display:flex;flex-direction:column;gap:4px;flex:1 0 0;min-width:0}.mecx-filter-menu-item-label{display:block;font-size:13px;font-weight:400;line-height:16px;letter-spacing:.02em;color:var(--mecx-color-gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mecx-filter-menu-item-description{display:block;font-size:13px;font-weight:400;line-height:16px;letter-spacing:.02em;color:var(--mecx-color-gray-700)}.mecx-filter-menu-item-check{display:flex;flex-shrink:0;font-size:12px;color:var(--mecx-color-theme-main)}\n"] }]
+        }], propDecorators: { property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: false }] }], leadIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+/**
+ * Picks the panel's horizontal: align, FLIP, or butt against the edge.
+ *
+ * Three steps, in this order:
+ *
+ *   1. The preferred edge — the one `alignment` asks for.
+ *   2. The OPPOSITE edge, when the preferred one does not fit. Aligned to the
+ *      start with no room to the right, the panel flips and ends where the
+ *      trigger ends, growing back into the screen.
+ *   3. Clamped to the viewport, when not even flipped fits — i.e. when the
+ *      panel is WIDER than the viewport. There is no good position then, and
+ *      the fix is a narrower panel, not a better coordinate.
+ *
+ * Step 2 is the one that matters visually: nudging the panel just enough to
+ * fit leaves it misaligned with BOTH edges of the trigger, looking displaced
+ * for no reason. Flipped, it is still anchored to an edge — just the other one.
+ *
+ * A viewport of width 0 returns the preferred value without measuring. That is
+ * not defensive padding: jsdom reports `clientWidth: 0`, and measuring against
+ * zero would send every panel to the left edge.
+ */
+function horizontalOf(target, width, gap, alignment) {
+    // The horizontal gap is the panel's breathing room, not a one-sided border:
+    // aligned to the end it pushes inwards, which is the mirrored gesture.
+    const atStart = target.left + gap;
+    const atEnd = target.right - width - gap;
+    const preferred = alignment === 'end' ? atEnd : atStart;
+    const viewport = document.documentElement.clientWidth || 0;
+    if (viewport <= 0)
+        return preferred;
+    const fits = (x) => {
+        return x >= 0 && x + width <= viewport;
+    };
+    if (fits(preferred))
+        return preferred;
+    const opposite = alignment === 'end' ? atStart : atEnd;
+    if (fits(opposite))
+        return opposite;
+    return Math.max(0, Math.min(preferred, viewport - width));
+}
+/**
+ * The offset the panel is applying to ITSELF.
+ *
+ * `getBoundingClientRect` includes the element's own translate, and the
+ * zero-measurement uses that rect to discover the containing block's origin.
+ * Without subtracting this share, the translate of the ENTRANCE animation is
+ * baked into `top` as if it were origin — and comes back out when the
+ * animation ends, taking the panel with it.
+ *
+ * Only `translate` matters. The `scale` of the same animation does not move
+ * the top edge, because the entrance fixes `transform-origin: top` and scales
+ * X by 1.
+ */
+function ownOffset(menu) {
+    const raw = getComputedStyle(menu).translate;
+    if (!raw || raw === 'none')
+        return { x: 0, y: 0 };
+    const [x, y] = raw.split(' ');
+    return { x: parseFloat(x) || 0, y: parseFloat(y ?? '') || 0 };
+}
+/**
+ * Butts the panel against the requested side of the trigger.
+ *
+ * The breathing room stays in the stylesheet, as the panel's `margin`. It has
+ * to come back into the sum because the measurement ALREADY includes it:
+ * without adding it again the margin would cancel itself out and the panel
+ * would sit glued to the trigger.
+ *
+ * The containing block's origin comes out of the same sum without moving
+ * anything: with `top: T` applied, `rect.top = origin + T + translate`, so
+ * `origin = rect.top - T - translate`. All it takes is for the panel to have a
+ * known inline `top`, which `anchorMenu` guarantees the first time round.
+ *
+ * The earlier way to find the origin was to write `top: 0; left: 0`, measure,
+ * then write the final value. That was a round trip PER scroll event — dozens
+ * a second on an inertial scroll, each one throwing the panel into the corner
+ * and back with a forced layout read in between. The symptom is a panel
+ * flickering between the right place and the top of the window instead of
+ * following its trigger.
+ */
+function place(target, menu, gaps, alignment) {
+    const own = ownOffset(menu);
+    const appliedTop = parseFloat(menu.style.top) || 0;
+    const appliedLeft = parseFloat(menu.style.left) || 0;
+    const current = menu.getBoundingClientRect();
+    const originTop = current.top - own.y - appliedTop;
+    const originLeft = current.left - own.x - appliedLeft;
+    const x = horizontalOf(target, current.width, gaps.left, alignment);
+    const y = target.bottom + gaps.top;
+    menu.style.top = `${y - originTop}px`;
+    menu.style.left = `${x - originLeft}px`;
+}
+/** The nearest ancestor that SCROLLS — it is the one clipping the trigger. */
+function scrollingAncestor(el) {
+    let node = el.parentElement;
+    while (node) {
+        const { overflowX, overflowY } = getComputedStyle(node);
+        if (/(auto|scroll|hidden|clip)/.test(overflowX + overflowY))
+            return node;
+        node = node.parentElement;
+    }
+    return null;
+}
+/**
+ * Has the trigger gone out of sight?
+ *
+ * A panel anchored to a trigger that is no longer on screen is worse than no
+ * panel at all: it hangs in the middle of the content with no visible anchor,
+ * and the user has no way of knowing what those options belong to.
+ *
+ * Two boundaries count: the window, and the CLIP of the ancestor that scrolls.
+ * The second is the one that catches a chip scrolling sideways out of the
+ * filter row — there the trigger's rect is still inside the window, and only
+ * the container knows it is gone.
+ *
+ * With no measurable viewport nothing is hidden: in jsdom `clientWidth` is 0,
+ * and closing every menu because of that would be worse than the defect.
+ */
+function outOfSight(trigger, target) {
+    const vh = document.documentElement.clientHeight || 0;
+    const vw = document.documentElement.clientWidth || 0;
+    if (vh <= 0 || vw <= 0)
+        return false;
+    if (target.bottom <= 0 || target.top >= vh)
+        return true;
+    if (target.right <= 0 || target.left >= vw)
+        return true;
+    const scroller = scrollingAncestor(trigger);
+    if (!scroller)
+        return false;
+    const rect = scroller.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0)
+        return false;
+    return (target.bottom <= rect.top ||
+        target.top >= rect.bottom ||
+        target.right <= rect.left ||
+        target.left >= rect.right);
+}
+function readGaps(menu) {
+    const style = getComputedStyle(menu);
+    return {
+        top: parseFloat(style.marginTop) || 0,
+        left: parseFloat(style.marginLeft) || 0
+    };
+}
+/**
+ * Butts the panel against the trigger and KEEPS it there while anything
+ * scrolls. Returns the function that switches it all off.
+ *
+ * Anchoring and following are one job: a positioned panel that stops following
+ * is already wrong on the first scroll, and one that follows without having
+ * been positioned never reaches the right place.
+ *
+ * `capture: true` is not a detail: an element's `scroll` event does NOT
+ * bubble, so without the capture phase the filter row scrolling under the
+ * panel would go unnoticed and the panel would stay planted at the old spot.
+ *
+ * The margins are read once — they do not change. The ORIGIN does: if the page
+ * scrolls and the containing block is a transformed ancestor, it moves down
+ * with the trigger, and only re-measuring both keeps the sum standing.
+ *
+ * `transitionend` is there for one specific and expensive-to-find reason.
+ * While an ancestor's `translate` is ANIMATING it is a containing block; when
+ * the transition ends, it stops being one. A scroll that lands inside that
+ * window measures the transformed origin, and the sum stays wrong FOREVER —
+ * the panel is born displaced and nothing corrects it. That is exactly what
+ * happens here: the row scrolls to follow the new filter at the same instant
+ * the FLIP translates the slots.
+ *
+ * `animationend` closes the SAME window from the other side. The chip's
+ * entrance is not a transition, it is a `@keyframes` animating `translate`. A
+ * chip born with its panel already open — which is the normal case, because
+ * the value panel opens on its own — has that panel anchored against a slot
+ * that is still a containing block, and when the animation ends the slot stops
+ * being one: the same coordinates now resolve against the viewport and the
+ * panel jumps the slot's whole offset.
+ *
+ * The guard is `target.contains(menu)` rather than the animation's name. Only
+ * an ANCESTOR's animation changes the panel's containing block, so the right
+ * question is one of kinship — and it does not tie this helper to the list of
+ * keyframes used by whoever calls it.
+ */
+function anchorMenu(trigger, menu, alignment = 'start', onOutOfSight) {
+    const gaps = readGaps(menu);
+    // A KNOWN starting point for the first measurement: with `top: auto` the
+    // panel sits at its static position, and the containing block's origin
+    // cannot be derived from that. Once only, before any paint — from then on
+    // `place` derives from the applied position and never moves the panel just
+    // to measure it.
+    if (!menu.style.top) {
+        menu.style.top = '0px';
+        menu.style.left = '0px';
+    }
+    const reposition = () => {
+        // One read of the trigger per event, reused by both sums.
+        const target = trigger.getBoundingClientRect();
+        if (onOutOfSight && outOfSight(trigger, target)) {
+            onOutOfSight();
+            return;
+        }
+        place(target, menu, gaps, alignment);
+    };
+    // Only `translate` is of interest: it is the property that turns an ancestor
+    // into a containing block. Without the filter, every COLOUR transition in
+    // the document — and each hover on a chip is three — would fire a
+    // reposition with a forced layout read, leaving the panel trembling while
+    // the pointer wanders across the bar.
+    const onTransitionEnd = (event) => {
+        if (event.propertyName === 'translate')
+            reposition();
+    };
+    const onAnimationEnd = (event) => {
+        const node = event.target;
+        if (node?.contains(menu))
+            reposition();
+    };
+    // The panel's own SIZE feeds the horizontal sum — it is what decides whether
+    // the preferred edge fits. A panel that CHANGES size after being anchored
+    // would otherwise stay at the position that fitted the old size, and that is
+    // not a rare case here: the date panel swaps its content on "Personalizado",
+    // trading a short shortcut list for the full date range, without recreating
+    // the element. Repositioning changes nobody's size, so there is no loop.
+    const observer = new ResizeObserver(() => {
+        reposition();
+    });
+    observer.observe(menu);
+    reposition();
+    document.addEventListener('scroll', reposition, { capture: true, passive: true });
+    document.addEventListener('transitionend', onTransitionEnd, { capture: true, passive: true });
+    document.addEventListener('animationend', onAnimationEnd, { capture: true, passive: true });
+    window.addEventListener('resize', reposition, { passive: true });
+    return () => {
+        observer.disconnect();
+        document.removeEventListener('scroll', reposition, { capture: true });
+        document.removeEventListener('transitionend', onTransitionEnd, { capture: true });
+        document.removeEventListener('animationend', onAnimationEnd, { capture: true });
+        window.removeEventListener('resize', reposition);
+    };
+}
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+/**
+ * One segment of a monkey-filter-chip.
+ *
+ * ONE component for the two roles the chip has — the category name and the
+ * answer. Both share the same state table, the same padding, the same
+ * typography and the same height; what changes between them is the content
+ * (the first has an icon) and the rounding of the ends, which belongs to the
+ * chip and not to the segment. Two components would be two copies of the same
+ * stylesheet waiting to drift apart.
+ *
+ * `filled` is not an input: it is `text() !== ''`. Letting the consumer
+ * declare "filled" with an empty text would be a state impossible to draw.
+ *
+ * The projected panel is `position: fixed` and anchored by script — see
+ * `anchored-menu.ts` for why an `absolute` one cannot survive inside a row
+ * that scrolls.
+ */
+class MonkeyFilterSegmentComponent {
+    constructor() {
+        /** Category icon — usually only the chip's first segment has one. */
+        this.icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** The chosen value. Empty means the segment is still waiting. */
+        this.text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /** Waiting text, in the complement colour. */
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** A segment with no panel to open. */
+        this.readonlySegment = input(false, { ...(ngDevMode ? { debugName: "readonlySegment" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.segmentClick = output();
+        this.filled = computed(() => {
+            return this.text().length > 0;
+        }, ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
+        /** What is shown: the value when there is one, the waiting text when not. */
+        this.label = computed(() => {
+            return this.filled() ? this.text() : this.placeholder();
+        }, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this._hostEl = inject(ElementRef);
+        this._menuEl = viewChild('menu', ...(ngDevMode ? [{ debugName: "_menuEl" }] : /* istanbul ignore next */ []));
+        // The panel is `fixed` to escape the clip of the row that scrolls, and
+        // `fixed` follows nobody — the position is recomputed on every opening and
+        // kept by the listeners `anchorMenu` installs.
+        effect((onCleanup) => {
+            const menu = this._menuEl()?.nativeElement;
+            if (!menu)
+                return;
+            onCleanup(anchorMenu(this._hostEl.nativeElement, menu, 'start'));
+        });
+    }
+    toggle() {
+        this.segmentClick.emit();
+        if (this.readonlySegment())
+            return;
+        this.open.set(!this.open());
+    }
+    /**
+     * A click outside closes. Without it the panel would only close by clicking
+     * the segment again — behaviour no system menu has, and which left two
+     * panels open at once on a row with several chips.
+     */
+    onDocumentPointerdown(event) {
+        if (!this.open())
+            return;
+        const target = event.target;
+        if (target && this._hostEl.nativeElement.contains(target))
+            return;
+        this.open.set(false);
+    }
+    /**
+     * Escape closes and hands the focus back to the segment's button. Without
+     * the hand-back the focus falls to `<body>` and Tab restarts from the top of
+     * the page: whoever opened the panel from the keyboard loses their place in
+     * the middle of the row.
+     */
+    onEscape() {
+        if (!this.open())
+            return;
+        this.open.set(false);
+        this.focusButton();
+    }
+    /** Closes and returns the focus. Public for whoever needs to close from outside. */
+    closeAndFocus() {
+        this.open.set(false);
+        this.focusButton();
+    }
+    focusButton() {
+        this._hostEl.nativeElement.querySelector('.mecx-filter-segment-btn')?.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterSegmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterSegmentComponent, isStandalone: true, selector: "monkey-filter-segment", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlySegment: { classPropertyName: "readonlySegment", publicName: "readonlySegment", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", segmentClick: "segmentClick" }, host: { attributes: { "data-testid": "monkey-filter-segment" }, listeners: { "document:pointerdown": "onDocumentPointerdown($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.mecx-filter-segment--open": "open()", "class.mecx-filter-segment--filled": "filled()" }, classAttribute: "mecx-filter-segment" }, viewQueries: [{ propertyName: "_menuEl", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  class=\"mecx-filter-segment-btn\"\n  type=\"button\"\n  [attr.aria-expanded]=\"readonlySegment() ? null : open()\"\n  [attr.aria-haspopup]=\"readonlySegment() ? null : 'listbox'\"\n  (click)=\"toggle()\"\n>\n  @if (icon()) {\n    <i class=\"mk-i mk-i-{{ icon() }} mecx-filter-segment-icon\" aria-hidden=\"true\"></i>\n  }\n  <span class=\"mecx-filter-segment-label\">{{ label() }}</span>\n</button>\n\n@if (open()) {\n  <div\n    #menu\n    class=\"mecx-filter-segment-menu\"\n    animate.enter=\"mecx-filter-segment-menu--entering\"\n    animate.leave=\"mecx-filter-segment-menu--leaving\"\n  >\n    <ng-content></ng-content>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";@keyframes mecx-fbv2-surface-in{0%{opacity:0;scale:1 var(--mecx-fbv2-scale-unfold);translate:0 calc(var(--mecx-fbv2-travel-anchored) * -1)}}@keyframes mecx-fbv2-surface-out{to{opacity:0;scale:1 var(--mecx-fbv2-scale-unfold);translate:0 calc(var(--mecx-fbv2-travel-anchored) * -1)}}@keyframes mecx-fbv2-surface-item-in{0%{opacity:0;translate:0 calc(var(--mecx-fbv2-travel-anchored) * -1)}}.mecx-filter-segment{--mecx-fbv2-duration-state: .15s;--mecx-fbv2-duration-enter: .2s;--mecx-fbv2-duration-exit: .15s;--mecx-fbv2-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-fbv2-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-fbv2-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-fbv2-scale-unfold: .94;--mecx-fbv2-travel-anchored: 4px;--mecx-fbv2-travel-slide: 16px;--mecx-fbv2-stagger: 25ms;--mecx-fbv2-control-height: 28px;--mecx-fbv2-pointer-target: 40px;--mecx-fbv2-radius: 8px;--mecx-fbv2-radius-item: 4px;--mecx-fbv2-fade-width: 48px}@media(prefers-reduced-motion:reduce){.mecx-filter-segment{--mecx-fbv2-duration-state: 1ms;--mecx-fbv2-duration-enter: 1ms;--mecx-fbv2-duration-exit: 1ms;--mecx-fbv2-scale-unfold: 1;--mecx-fbv2-travel-anchored: 0px;--mecx-fbv2-travel-slide: 0px;--mecx-fbv2-stagger: 0ms}}.mecx-filter-segment{position:relative;display:inline-flex;margin-right:-1px}.mecx-filter-segment-btn{display:inline-flex;align-items:center;gap:4px;height:var(--mecx-fbv2-control-height);padding-inline:8px;box-sizing:border-box;background:var(--mecx-color-gray-50);border:1px solid var(--mecx-color-gray-500);border-radius:0;color:var(--mecx-color-gray-700);font-family:inherit;cursor:pointer;outline:none;white-space:nowrap;position:relative;transition:background-color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state),border-color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state),color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state)}.mecx-filter-segment-btn:after{content:\"\";position:absolute;inset:-6px 0}.mecx-filter-segment-btn:hover{background-color:var(--mecx-color-gray-200)}.mecx-filter-segment-btn:active{background-color:var(--mecx-color-gray-400)}.mecx-filter-segment-btn:focus-visible{border-color:var(--mecx-color-gray-900)}.mecx-filter-segment-btn:hover,.mecx-filter-segment-btn:focus-visible{z-index:1}.mecx-filter-segment--open{z-index:1}.mecx-filter-segment--open .mecx-filter-segment-btn{background-color:var(--mecx-color-gray-200)}.mecx-filter-segment--filled .mecx-filter-segment-btn{color:var(--mecx-color-gray-900)}.mecx-filter-segment-icon{display:inline-flex;flex-shrink:0;font-size:16px;color:var(--mecx-color-gray-600)}.mecx-filter-segment-label{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.02em;color:inherit}.mecx-filter-segment-menu{position:fixed;margin-top:4px;z-index:100}.mecx-filter-segment-menu--entering{transform-origin:top;animation:mecx-fbv2-surface-in var(--mecx-fbv2-duration-enter) var(--mecx-fbv2-ease-enter)}.mecx-filter-segment-menu--entering monkey-filter-menu-item,.mecx-filter-segment-menu--entering monkey-divider{animation:mecx-fbv2-surface-item-in var(--mecx-fbv2-duration-enter) var(--mecx-fbv2-ease-enter) both}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(1){animation-delay:calc(var(--mecx-fbv2-stagger) * 1)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(2){animation-delay:calc(var(--mecx-fbv2-stagger) * 2)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(3){animation-delay:calc(var(--mecx-fbv2-stagger) * 3)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(4){animation-delay:calc(var(--mecx-fbv2-stagger) * 4)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(5){animation-delay:calc(var(--mecx-fbv2-stagger) * 5)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(6){animation-delay:calc(var(--mecx-fbv2-stagger) * 6)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(7){animation-delay:calc(var(--mecx-fbv2-stagger) * 7)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(8){animation-delay:calc(var(--mecx-fbv2-stagger) * 8)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(n+8){animation-delay:calc(var(--mecx-fbv2-stagger) * 8)}.mecx-filter-segment-menu--leaving{transform-origin:top;animation:mecx-fbv2-surface-out var(--mecx-fbv2-duration-exit) var(--mecx-fbv2-ease-exit)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterSegmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-filter-segment', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-filter-segment',
+                        class: 'mecx-filter-segment',
+                        '[class.mecx-filter-segment--open]': 'open()',
+                        '[class.mecx-filter-segment--filled]': 'filled()',
+                        '(document:pointerdown)': 'onDocumentPointerdown($event)',
+                        '(document:keydown.escape)': 'onEscape()'
+                    }, template: "<button\n  class=\"mecx-filter-segment-btn\"\n  type=\"button\"\n  [attr.aria-expanded]=\"readonlySegment() ? null : open()\"\n  [attr.aria-haspopup]=\"readonlySegment() ? null : 'listbox'\"\n  (click)=\"toggle()\"\n>\n  @if (icon()) {\n    <i class=\"mk-i mk-i-{{ icon() }} mecx-filter-segment-icon\" aria-hidden=\"true\"></i>\n  }\n  <span class=\"mecx-filter-segment-label\">{{ label() }}</span>\n</button>\n\n@if (open()) {\n  <div\n    #menu\n    class=\"mecx-filter-segment-menu\"\n    animate.enter=\"mecx-filter-segment-menu--entering\"\n    animate.leave=\"mecx-filter-segment-menu--leaving\"\n  >\n    <ng-content></ng-content>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";@keyframes mecx-fbv2-surface-in{0%{opacity:0;scale:1 var(--mecx-fbv2-scale-unfold);translate:0 calc(var(--mecx-fbv2-travel-anchored) * -1)}}@keyframes mecx-fbv2-surface-out{to{opacity:0;scale:1 var(--mecx-fbv2-scale-unfold);translate:0 calc(var(--mecx-fbv2-travel-anchored) * -1)}}@keyframes mecx-fbv2-surface-item-in{0%{opacity:0;translate:0 calc(var(--mecx-fbv2-travel-anchored) * -1)}}.mecx-filter-segment{--mecx-fbv2-duration-state: .15s;--mecx-fbv2-duration-enter: .2s;--mecx-fbv2-duration-exit: .15s;--mecx-fbv2-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-fbv2-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-fbv2-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-fbv2-scale-unfold: .94;--mecx-fbv2-travel-anchored: 4px;--mecx-fbv2-travel-slide: 16px;--mecx-fbv2-stagger: 25ms;--mecx-fbv2-control-height: 28px;--mecx-fbv2-pointer-target: 40px;--mecx-fbv2-radius: 8px;--mecx-fbv2-radius-item: 4px;--mecx-fbv2-fade-width: 48px}@media(prefers-reduced-motion:reduce){.mecx-filter-segment{--mecx-fbv2-duration-state: 1ms;--mecx-fbv2-duration-enter: 1ms;--mecx-fbv2-duration-exit: 1ms;--mecx-fbv2-scale-unfold: 1;--mecx-fbv2-travel-anchored: 0px;--mecx-fbv2-travel-slide: 0px;--mecx-fbv2-stagger: 0ms}}.mecx-filter-segment{position:relative;display:inline-flex;margin-right:-1px}.mecx-filter-segment-btn{display:inline-flex;align-items:center;gap:4px;height:var(--mecx-fbv2-control-height);padding-inline:8px;box-sizing:border-box;background:var(--mecx-color-gray-50);border:1px solid var(--mecx-color-gray-500);border-radius:0;color:var(--mecx-color-gray-700);font-family:inherit;cursor:pointer;outline:none;white-space:nowrap;position:relative;transition:background-color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state),border-color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state),color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state)}.mecx-filter-segment-btn:after{content:\"\";position:absolute;inset:-6px 0}.mecx-filter-segment-btn:hover{background-color:var(--mecx-color-gray-200)}.mecx-filter-segment-btn:active{background-color:var(--mecx-color-gray-400)}.mecx-filter-segment-btn:focus-visible{border-color:var(--mecx-color-gray-900)}.mecx-filter-segment-btn:hover,.mecx-filter-segment-btn:focus-visible{z-index:1}.mecx-filter-segment--open{z-index:1}.mecx-filter-segment--open .mecx-filter-segment-btn{background-color:var(--mecx-color-gray-200)}.mecx-filter-segment--filled .mecx-filter-segment-btn{color:var(--mecx-color-gray-900)}.mecx-filter-segment-icon{display:inline-flex;flex-shrink:0;font-size:16px;color:var(--mecx-color-gray-600)}.mecx-filter-segment-label{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.02em;color:inherit}.mecx-filter-segment-menu{position:fixed;margin-top:4px;z-index:100}.mecx-filter-segment-menu--entering{transform-origin:top;animation:mecx-fbv2-surface-in var(--mecx-fbv2-duration-enter) var(--mecx-fbv2-ease-enter)}.mecx-filter-segment-menu--entering monkey-filter-menu-item,.mecx-filter-segment-menu--entering monkey-divider{animation:mecx-fbv2-surface-item-in var(--mecx-fbv2-duration-enter) var(--mecx-fbv2-ease-enter) both}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(1){animation-delay:calc(var(--mecx-fbv2-stagger) * 1)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(2){animation-delay:calc(var(--mecx-fbv2-stagger) * 2)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(3){animation-delay:calc(var(--mecx-fbv2-stagger) * 3)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(4){animation-delay:calc(var(--mecx-fbv2-stagger) * 4)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(5){animation-delay:calc(var(--mecx-fbv2-stagger) * 5)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(6){animation-delay:calc(var(--mecx-fbv2-stagger) * 6)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(7){animation-delay:calc(var(--mecx-fbv2-stagger) * 7)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(8){animation-delay:calc(var(--mecx-fbv2-stagger) * 8)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(n+8){animation-delay:calc(var(--mecx-fbv2-stagger) * 8)}.mecx-filter-segment-menu--leaving{transform-origin:top;animation:mecx-fbv2-surface-out var(--mecx-fbv2-duration-exit) var(--mecx-fbv2-ease-exit)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlySegment: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlySegment", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], segmentClick: [{ type: i0.Output, args: ["segmentClick"] }], _menuEl: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+/**
+ * The button that adds a filter, and the panel of categories it opens.
+ *
+ * It is always the LAST slot of the row. While the bar is empty the trigger is
+ * the CALL to action and earns its label; with filters on screen it becomes
+ * the ADDITION, and a 28px square is enough.
+ *
+ * Both are 28px tall — the same as a chip segment — because the button turns
+ * into a chip in place, and 1px of difference would show up as a jump at the
+ * moment of the swap.
+ */
+class MonkeyFilterTriggerComponent {
+    constructor() {
+        this.variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /** Icon font name, without the `mk-i-` prefix. */
+        this.icon = input('filter', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        this.text = input('Filtro', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input('Adicionar filtro', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The panel leaves with no exit animation.
+         *
+         * It exists for ONE case: when the closing goes along with the trigger
+         * itself changing place. The panel is a child of the button, so it travels
+         * with it — and a fade on an element that has just teleported 160px does not
+         * read as an exit, it reads as a glitch. Closing by Escape or by an outside
+         * click is not that case and keeps its fade.
+         */
+        this.immediateExit = input(false, { ...(ngDevMode ? { debugName: "immediateExit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        /**
+         * `aria-label` only on the variant with no visible label. Where there is a
+         * label, an `aria-label` over it would swap the name the user reads for one
+         * they cannot see — breaking voice control and the "Label in Name" criterion.
+         */
+        this.ariaLabelAttr = computed(() => {
+            return this.variant() === 'icon' ? this.ariaLabel() || null : null;
+        }, ...(ngDevMode ? [{ debugName: "ariaLabelAttr" }] : /* istanbul ignore next */ []));
+        this._hostEl = inject(ElementRef);
+        this._menuEl = viewChild('menu', ...(ngDevMode ? [{ debugName: "_menuEl" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const menu = this._menuEl()?.nativeElement;
+            if (!menu)
+                return;
+            // Aligned to the END, so the panel's right edge meets the button's own
+            // however wide the button happens to be — the label and the square are
+            // very different widths and the panel must not jump between them.
+            //
+            // Going out of sight closes: a `fixed` panel anchored to a trigger that
+            // has scrolled away hangs in the middle of the content with no visible
+            // anchor.
+            onCleanup(anchorMenu(this._hostEl.nativeElement, menu, 'end', () => {
+                return this.open.set(false);
+            }));
+        });
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        this.open.set(!this.open());
+    }
+    onDocumentPointerdown(event) {
+        if (!this.open())
+            return;
+        const target = event.target;
+        if (target && this._hostEl.nativeElement.contains(target))
+            return;
+        this.open.set(false);
+    }
+    onEscape() {
+        if (!this.open())
+            return;
+        this.open.set(false);
+        this._hostEl.nativeElement.querySelector('.mecx-filter-trigger-btn')?.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterTriggerComponent, isStandalone: true, selector: "monkey-filter-trigger", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, immediateExit: { classPropertyName: "immediateExit", publicName: "immediateExit", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-testid": "monkey-filter-trigger" }, listeners: { "document:pointerdown": "onDocumentPointerdown($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.mecx-filter-trigger--text": "variant() === \"text\"", "class.mecx-filter-trigger--icon": "variant() === \"icon\"", "class.mecx-filter-trigger--open": "open()" }, classAttribute: "mecx-filter-trigger" }, viewQueries: [{ propertyName: "_menuEl", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  class=\"mecx-filter-trigger-btn\"\n  type=\"button\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-label]=\"ariaLabelAttr()\"\n  aria-haspopup=\"listbox\"\n  (click)=\"toggle()\"\n>\n  <!-- The glyph comes BEFORE the label, and there is no caret \u2014 the trigger is\n       an action, not a select. -->\n  <i class=\"mk-i mk-i-{{ icon() }} mecx-filter-trigger-icon\" aria-hidden=\"true\"></i>\n  @if (variant() === 'text') {\n    <span class=\"mecx-filter-trigger-text\">{{ text() }}</span>\n  }\n</button>\n\n@if (open()) {\n  <div\n    #menu\n    class=\"mecx-filter-trigger-menu\"\n    animate.enter=\"mecx-filter-trigger-menu--entering\"\n    [animate.leave]=\"immediateExit() ? '' : 'mecx-filter-trigger-menu--leaving'\"\n  >\n    <ng-content></ng-content>\n  </div>\n}\n", styles: ["@keyframes mecx-fbv2-surface-in{0%{opacity:0;scale:1 var(--mecx-fbv2-scale-unfold);translate:0 calc(var(--mecx-fbv2-travel-anchored) * -1)}}@keyframes mecx-fbv2-surface-out{to{opacity:0;scale:1 var(--mecx-fbv2-scale-unfold);translate:0 calc(var(--mecx-fbv2-travel-anchored) * -1)}}@keyframes mecx-fbv2-surface-item-in{0%{opacity:0;translate:0 calc(var(--mecx-fbv2-travel-anchored) * -1)}}.mecx-filter-trigger{display:inline-flex;position:relative}.mecx-filter-trigger-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:var(--mecx-fbv2-control-height);box-sizing:border-box;background-color:var(--mecx-color-white);color:var(--mecx-color-gray-900);border:1px solid var(--mecx-color-gray-500);border-radius:var(--mecx-fbv2-radius);font-family:inherit;cursor:pointer;outline:none;white-space:nowrap;position:relative;transition:background-color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state),color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state)}.mecx-filter-trigger-btn:after{content:\"\";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,var(--mecx-fbv2-pointer-target));height:max(100%,var(--mecx-fbv2-pointer-target))}.mecx-filter-trigger-btn:hover:not(:disabled){color:var(--mecx-color-theme-main)}.mecx-filter-trigger-btn:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}.mecx-filter-trigger-btn:disabled{background-color:transparent;border-color:transparent;color:var(--mecx-color-gray-400);cursor:not-allowed}.mecx-filter-trigger--open .mecx-filter-trigger-btn{color:var(--mecx-color-theme-main)}.mecx-filter-trigger--text .mecx-filter-trigger-btn{padding-inline:7px 11px}.mecx-filter-trigger--icon .mecx-filter-trigger-btn{width:var(--mecx-fbv2-control-height);padding-inline:0}.mecx-filter-trigger-icon{display:inline-flex;flex-shrink:0;font-size:16px}.mecx-filter-trigger-text{font-size:13px;font-weight:500;line-height:16px;letter-spacing:.03em}.mecx-filter-trigger-menu{position:fixed;margin-top:4px;z-index:100}.mecx-filter-trigger-menu--entering{transform-origin:top;animation:mecx-fbv2-surface-in var(--mecx-fbv2-duration-enter) var(--mecx-fbv2-ease-enter)}.mecx-filter-trigger-menu--entering monkey-filter-menu-item,.mecx-filter-trigger-menu--entering monkey-divider{animation:mecx-fbv2-surface-item-in var(--mecx-fbv2-duration-enter) var(--mecx-fbv2-ease-enter) both}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(1){animation-delay:calc(var(--mecx-fbv2-stagger) * 1)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(2){animation-delay:calc(var(--mecx-fbv2-stagger) * 2)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(3){animation-delay:calc(var(--mecx-fbv2-stagger) * 3)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(4){animation-delay:calc(var(--mecx-fbv2-stagger) * 4)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(5){animation-delay:calc(var(--mecx-fbv2-stagger) * 5)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(6){animation-delay:calc(var(--mecx-fbv2-stagger) * 6)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(7){animation-delay:calc(var(--mecx-fbv2-stagger) * 7)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(8){animation-delay:calc(var(--mecx-fbv2-stagger) * 8)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(n+8){animation-delay:calc(var(--mecx-fbv2-stagger) * 8)}.mecx-filter-trigger-menu--leaving{transform-origin:top;animation:mecx-fbv2-surface-out var(--mecx-fbv2-duration-exit) var(--mecx-fbv2-ease-exit)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterTriggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-filter-trigger', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-filter-trigger',
+                        class: 'mecx-filter-trigger',
+                        '[class.mecx-filter-trigger--text]': 'variant() === "text"',
+                        '[class.mecx-filter-trigger--icon]': 'variant() === "icon"',
+                        '[class.mecx-filter-trigger--open]': 'open()',
+                        '(document:pointerdown)': 'onDocumentPointerdown($event)',
+                        '(document:keydown.escape)': 'onEscape()'
+                    }, template: "<button\n  class=\"mecx-filter-trigger-btn\"\n  type=\"button\"\n  [disabled]=\"disabled() || null\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-label]=\"ariaLabelAttr()\"\n  aria-haspopup=\"listbox\"\n  (click)=\"toggle()\"\n>\n  <!-- The glyph comes BEFORE the label, and there is no caret \u2014 the trigger is\n       an action, not a select. -->\n  <i class=\"mk-i mk-i-{{ icon() }} mecx-filter-trigger-icon\" aria-hidden=\"true\"></i>\n  @if (variant() === 'text') {\n    <span class=\"mecx-filter-trigger-text\">{{ text() }}</span>\n  }\n</button>\n\n@if (open()) {\n  <div\n    #menu\n    class=\"mecx-filter-trigger-menu\"\n    animate.enter=\"mecx-filter-trigger-menu--entering\"\n    [animate.leave]=\"immediateExit() ? '' : 'mecx-filter-trigger-menu--leaving'\"\n  >\n    <ng-content></ng-content>\n  </div>\n}\n", styles: ["@keyframes mecx-fbv2-surface-in{0%{opacity:0;scale:1 var(--mecx-fbv2-scale-unfold);translate:0 calc(var(--mecx-fbv2-travel-anchored) * -1)}}@keyframes mecx-fbv2-surface-out{to{opacity:0;scale:1 var(--mecx-fbv2-scale-unfold);translate:0 calc(var(--mecx-fbv2-travel-anchored) * -1)}}@keyframes mecx-fbv2-surface-item-in{0%{opacity:0;translate:0 calc(var(--mecx-fbv2-travel-anchored) * -1)}}.mecx-filter-trigger{display:inline-flex;position:relative}.mecx-filter-trigger-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:var(--mecx-fbv2-control-height);box-sizing:border-box;background-color:var(--mecx-color-white);color:var(--mecx-color-gray-900);border:1px solid var(--mecx-color-gray-500);border-radius:var(--mecx-fbv2-radius);font-family:inherit;cursor:pointer;outline:none;white-space:nowrap;position:relative;transition:background-color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state),color var(--mecx-fbv2-duration-state) var(--mecx-fbv2-ease-state)}.mecx-filter-trigger-btn:after{content:\"\";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,var(--mecx-fbv2-pointer-target));height:max(100%,var(--mecx-fbv2-pointer-target))}.mecx-filter-trigger-btn:hover:not(:disabled){color:var(--mecx-color-theme-main)}.mecx-filter-trigger-btn:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}.mecx-filter-trigger-btn:disabled{background-color:transparent;border-color:transparent;color:var(--mecx-color-gray-400);cursor:not-allowed}.mecx-filter-trigger--open .mecx-filter-trigger-btn{color:var(--mecx-color-theme-main)}.mecx-filter-trigger--text .mecx-filter-trigger-btn{padding-inline:7px 11px}.mecx-filter-trigger--icon .mecx-filter-trigger-btn{width:var(--mecx-fbv2-control-height);padding-inline:0}.mecx-filter-trigger-icon{display:inline-flex;flex-shrink:0;font-size:16px}.mecx-filter-trigger-text{font-size:13px;font-weight:500;line-height:16px;letter-spacing:.03em}.mecx-filter-trigger-menu{position:fixed;margin-top:4px;z-index:100}.mecx-filter-trigger-menu--entering{transform-origin:top;animation:mecx-fbv2-surface-in var(--mecx-fbv2-duration-enter) var(--mecx-fbv2-ease-enter)}.mecx-filter-trigger-menu--entering monkey-filter-menu-item,.mecx-filter-trigger-menu--entering monkey-divider{animation:mecx-fbv2-surface-item-in var(--mecx-fbv2-duration-enter) var(--mecx-fbv2-ease-enter) both}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(1){animation-delay:calc(var(--mecx-fbv2-stagger) * 1)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(2){animation-delay:calc(var(--mecx-fbv2-stagger) * 2)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(3){animation-delay:calc(var(--mecx-fbv2-stagger) * 3)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(4){animation-delay:calc(var(--mecx-fbv2-stagger) * 4)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(5){animation-delay:calc(var(--mecx-fbv2-stagger) * 5)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(6){animation-delay:calc(var(--mecx-fbv2-stagger) * 6)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(7){animation-delay:calc(var(--mecx-fbv2-stagger) * 7)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(8){animation-delay:calc(var(--mecx-fbv2-stagger) * 8)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(n+8){animation-delay:calc(var(--mecx-fbv2-stagger) * 8)}.mecx-filter-trigger-menu--leaving{transform-origin:top;animation:mecx-fbv2-surface-out var(--mecx-fbv2-duration-exit) var(--mecx-fbv2-ease-exit)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], immediateExit: [{ type: i0.Input, args: [{ isSignal: true, alias: "immediateExit", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], _menuEl: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+// ─── FLIP ───────────────────────────────────────────────────────────────────
+// First, Last, Invert, Play: measure where the elements were, let the layout
+// change, then put each one back at its old position with a `translate` and
+// animate to zero. The result is that EVERYTHING slides from where it was,
+// even though the browser repositioned all of it in one pass.
+//
+// Why it exists: when the bar's trigger turns into a chip, the whole row is
+// rebuilt — the chip is born where the button was and the new button moves to
+// the right. Without FLIP the only thing that can be animated is the chip
+// coming in, and the neighbours jump. With it, the swap reads as a swap of
+// PLACE.
+//
+// Two decisions that are not details:
+//
+//   • Only `translate`. Transform and opacity compose on the GPU and skip
+//     layout and paint. The duration and the curve stay in the stylesheet, in
+//     `--mecx-fbv2-*` custom properties, and this file reads no motion value
+//     at all — that is how `prefers-reduced-motion` keeps working for free,
+//     because the media query redefines the properties themselves.
+//
+//   • Forced reflow, NEVER requestAnimationFrame. In a hidden tab rAF does not
+//     fire: the elements would sit at the inverted position until the tab came
+//     back, which is worse than not animating. With the synchronous reflow the
+//     final state is always correct — in a hidden tab the transition simply
+//     does not run and the layout is already right.
+/** Attribute that gives an element identity across the two measurements. */
+const FLIP_ATTR = 'data-flip-id';
+/**
+ * Where each identified element is RIGHT NOW. Call before changing the state.
+ */
+function measureFlip(container) {
+    const before = new Map();
+    container.querySelectorAll(`[${FLIP_ATTR}]`).forEach((el) => {
+        const id = el.getAttribute(FLIP_ATTR);
+        if (id)
+            before.set(id, el.getBoundingClientRect());
+    });
+    return before;
+}
+/**
+ * Puts every element back at the measured position and releases the
+ * transition. Call AFTER the DOM already reflects the new state.
+ *
+ * @param frozenClass class that zeroes the transition on the inverted frame
+ */
+function animateFlip(container, before, frozenClass) {
+    const moved = [];
+    container.querySelectorAll(`[${FLIP_ATTR}]`).forEach((el) => {
+        const id = el.getAttribute(FLIP_ATTR);
+        if (!id)
+            return;
+        const from = before.get(id);
+        // No previous measurement means the element was BORN just now. It does not
+        // slide from anywhere — it comes in through its own entrance animation,
+        // which is a different movement.
+        if (!from)
+            return;
+        const to = el.getBoundingClientRect();
+        const dx = from.left - to.left;
+        const dy = from.top - to.top;
+        if (dx === 0 && dy === 0)
+            return;
+        el.classList.add(frozenClass);
+        el.style.translate = `${dx}px ${dy}px`;
+        moved.push(el);
+    });
+    if (moved.length === 0)
+        return;
+    // This read is mandatory and is not a hack: it forces the browser to compute
+    // style with the inverted translate ALREADY applied. Without it the two
+    // writes (invert and release) collapse into the same pass and nothing
+    // animates.
+    // eslint-disable-next-line no-void
+    void container.offsetWidth;
+    moved.forEach((el) => {
+        el.classList.remove(frozenClass);
+        el.style.translate = '';
+    });
+}
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+// ─── "Has the app painted yet?" ─────────────────────────────────────────────
+// A single shared boolean, so that components which animate on ENTERING the
+// DOM do not animate when they were already there at the first paint.
+//
+// Why it exists: `animate.enter` fires on the initial render of the view, not
+// only when the consumer mounts the component later. A filter bar that opens
+// with filters already seeded by the consumer would replay the whole row's
+// entrance on every page load and on every F5, for chips that were always
+// there. Users read that as the page still assembling itself.
+//
+// Why it cannot be solved inside the component: a per-instance signal does not
+// work. `animate.enter` is evaluated at the moment of INSERTION, and at that
+// moment the instance has just been created — any flag of its own is still
+// false, so the chip would simply never animate. "Has painted" is a notion of
+// the PAGE, not of the component.
+//
+// The double rAF is the usual pattern: the first frame schedules, the second
+// runs after the browser has painted.
+/** False until the browser paints the first frame. Read-only for consumers. */
+let painted = false;
+// There is no `requestAnimationFrame` under SSR — and no animation to suppress
+// either, because the server does not paint. It stays false, and the client
+// reschedules on hydration.
+if (typeof requestAnimationFrame === 'function') {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            painted = true;
+        });
+    });
+}
+/**
+ * Has the page painted its first frame?
+ *
+ * Use it to decide whether an `animate.enter` should apply:
+ *
+ *   [animate.enter]="appPainted() ? 'mecx-x--entering' : ''"
+ *
+ * A component already on screen at the first paint comes in without animation;
+ * one the consumer mounts later animates normally.
+ */
+function appPainted() {
+    return painted;
+}
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+// ─── monkey-filter-bar-v2 ───────────────────────────────────────────────────
+// A restyle of monkey-filter-bar: the same contract, the same service and the
+// same state, drawn as the segmented row of the monkey-design-system filter
+// bar.
+//
+// WHAT IS THE SAME as monkey-filter-bar, deliberately — this component is a
+// drop-in replacement and a consumer swaps the tag without touching anything
+// else:
+//
+//   · `key` + `config` in, `filtersChange` + `searchChange` out
+//   · MonkeyFilterBarService owns the state, keyed by `key`
+//   · the four filter types (text · date · currency · status) and the same
+//     answers for each: date shortcuts and a custom range, currency as a
+//     from/until with one amount, status as a multiple choice
+//   · nothing is written to the service until the answer is CONFIRMED, except
+//     for the date shortcuts, where the click on the row already is the answer
+//
+// WHAT CHANGES is the drawing and the movement:
+//
+//   · the active filter becomes a two-segment CHIP instead of a tag. The
+//     second segment is the edit affordance the tag used to be, and clicking
+//     it reopens exactly the panel that filled it.
+//   · the add-filter button lives at the END of the row and swaps variants:
+//     while the bar is empty it is the CALL to action and carries the label;
+//     with filters on screen it becomes a 28px `+`, because then it no longer
+//     opens "the filters", it ADDS one more.
+//   · the row SCROLLS horizontally instead of wrapping. Wrapping would push
+//     everything below the bar down by one line on every filter added;
+//     scrolling keeps the height stable.
+//   · every change of the row is animated by FLIP (see flip.ts). Each step
+//     changes the width of the whole row, and without FLIP only the new piece
+//     would move while everything else jumped.
+//
+// The bar OWNS the state and the animation. The pieces below it —
+// monkey-filter-chip, monkey-filter-segment, monkey-filter-trigger,
+// monkey-filter-menu — know nothing about the progression: each one only draws
+// what it is given.
+/** Class that freezes the transition on the FLIP's inverted frame. */
+const FROZEN = 'mecx-filter-bar-v2-slot--frozen';
+class MonkeyFilterBarV2Component {
+    constructor() {
+        this._service = inject(MonkeyFilterBarService);
+        this._hostEl = inject(ElementRef);
+        this._injector = inject(Injector);
+        /** Storage key of this bar's state inside MonkeyFilterBarService. */
+        this.key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+        /** Label of the trigger while the bar is still empty. */
+        this.addFilterLabel = input('Filtro', ...(ngDevMode ? [{ debugName: "addFilterLabel" }] : /* istanbul ignore next */ []));
+        this.clearAllLabel = input('Limpar filtros', ...(ngDevMode ? [{ debugName: "clearAllLabel" }] : /* istanbul ignore next */ []));
+        this.filtersChange = output();
+        this.searchChange = output();
+        /** A chip seeded by the consumer does not animate; one the user made does. */
+        this.appPainted = appPainted;
+        // ── State ────────────────────────────────────────────────────────────────
+        /**
+         * The filter being built — chosen from the trigger, not yet confirmed, so
+         * not yet in the service.
+         *
+         * It exists so the chip can be BORN where the trigger was, which is the
+         * whole point of the row's animation, without the bar reporting a filter
+         * that has no answer. Closing the panel without confirming drops it again:
+         * monkey-filter-bar has no half-filled state and neither does this one.
+         */
+        this.pending = signal(null, ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+        this.openPanel = signal(null, ...(ngDevMode ? [{ debugName: "openPanel" }] : /* istanbul ignore next */ []));
+        this.triggerOpen = signal(false, ...(ngDevMode ? [{ debugName: "triggerOpen" }] : /* istanbul ignore next */ []));
+        /**
+         * The filter whose date panel is showing the CALENDAR instead of the
+         * shortcuts, or `null`.
+         *
+         * It is the same panel, anchored to the same segment — "Personalizado" only
+         * swaps its content. No modal: the dialog would be almost all frame around a
+         * calendar, and frame is not an answer to anything.
+         */
+        this.calendarOpen = signal(null, ...(ngDevMode ? [{ debugName: "calendarOpen" }] : /* istanbul ignore next */ []));
+        /** Search of the category panel. */
+        this.categorySearch = signal('', ...(ngDevMode ? [{ debugName: "categorySearch" }] : /* istanbul ignore next */ []));
+        /**
+         * Turns off the fade on the trigger's panel. It is written BEFORE the
+         * mutation on purpose: `animate.leave` is read the instant the node leaves,
+         * and turning it on afterwards would arrive too late.
+         */
+        this.immediateTriggerExit = signal(false, ...(ngDevMode ? [{ debugName: "immediateTriggerExit" }] : /* istanbul ignore next */ []));
+        // Draft answers of the open panel. They are plain fields and not signals:
+        // they are bound with `[(ngModel)]`, so the template writes them directly,
+        // and nothing else in the view is derived from them.
+        this.textValue = '';
+        this.currencyValue = null;
+        this.currencyMode = 'from';
+        this.statusValues = [];
+        this.dateRange = { startDate: '', endDate: '' };
+        // ── Derived ──────────────────────────────────────────────────────────────
+        this.serviceConfig = computed(() => {
+            const k = this.key();
+            return k ? this._service.getConfig(k) ?? this.config() : undefined;
+        }, ...(ngDevMode ? [{ debugName: "serviceConfig" }] : /* istanbul ignore next */ []));
+        this.activeFilters = computed(() => {
+            const k = this.key();
+            return k ? this._service.getActiveFilters(k) : [];
+        }, ...(ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []));
+        this.searchValue = computed(() => {
+            const k = this.key();
+            return k ? this._service.getSearchValue(k) : '';
+        }, ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
+        this.searchPlaceholder = computed(() => {
+            return this.serviceConfig()?.searchPlaceholder ?? 'Pesquisar...';
+        }, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        /** The slots of the row, in order: the confirmed ones, then the draft. */
+        this.rows = computed(() => {
+            const confirmed = this.activeFilters().map((f) => {
+                return {
+                    key: f.key,
+                    label: f.label,
+                    icon: f.icon,
+                    type: f.type,
+                    value: f.displayText,
+                    pending: false
+                };
+            });
+            const draft = this.pending();
+            if (!draft)
+                return confirmed;
+            return [
+                ...confirmed,
+                {
+                    key: draft.key,
+                    label: draft.label,
+                    icon: draft.icon,
+                    type: draft.type,
+                    value: '',
+                    pending: true
+                }
+            ];
+        }, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        /**
+         * What the TRIGGER offers: only what can still be added.
+         *
+         * This is monkey-filter-bar's rule — a filter already on the row is not on
+         * offer, because the bar holds one filter per key.
+         */
+        this.addOptions = computed(() => {
+            const k = this.key();
+            const available = k ? this._service.availableFilterOptions(k) : [];
+            return this._matchingSearch(available);
+        }, ...(ngDevMode ? [{ debugName: "addOptions" }] : /* istanbul ignore next */ []));
+        /**
+         * What a chip's CATEGORY segment offers: the whole list.
+         *
+         * A different list from the trigger's on purpose. Here the question is "what
+         * else could this chip be", so the current category has to be visible — it
+         * is the one carrying the check — and the other filters already on the row
+         * are shown greyed out rather than hidden, which is what tells the user the
+         * category they were looking for is already in use.
+         */
+        this.changeOptions = computed(() => {
+            return this._matchingSearch(this.serviceConfig()?.filterOptions ?? []);
+        }, ...(ngDevMode ? [{ debugName: "changeOptions" }] : /* istanbul ignore next */ []));
+        /**
+         * While the bar is empty the trigger is the CALL and earns the label. With
+         * filters on screen a 28px square is enough.
+         */
+        this.triggerVariant = computed(() => {
+            return this.rows().length === 0 ? 'text' : 'icon';
+        }, ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
+        /**
+         * The glyph of the collapsed trigger is a `+`, not the funnel.
+         *
+         * The variant says what the button IS; the glyph says what it DOES. With
+         * filters already on screen the button does not open "the filters", it ADDS
+         * one more — and a funnel there reads as the wrong thing. With the bar empty
+         * the funnel is exact.
+         */
+        this.triggerIcon = computed(() => {
+            return this.rows().length === 0 ? 'filter' : 'add-plus';
+        }, ...(ngDevMode ? [{ debugName: "triggerIcon" }] : /* istanbul ignore next */ []));
+        /**
+         * The FLIP identity changes along with the variant, and that is the fix: the
+         * text trigger is REMOVED and the icon one is BORN in its place, instead of
+         * one button sliding to the right. Before this, the button dragged along the
+         * panel that was closing — the list vanished travelling sideways.
+         *
+         * From the second filter on the identity holds, and then the `+` really does
+         * slide: that movement is what says "the row grew".
+         */
+        this.triggerFlipId = computed(() => {
+            return this.rows().length === 0 ? 'trigger-text' : 'trigger-icon';
+        }, ...(ngDevMode ? [{ debugName: "triggerFlipId" }] : /* istanbul ignore next */ []));
+        // The config is registered in the service by the same key the state uses,
+        // so any other consumer of the service sees the same option list. An
+        // effect and not ngOnInit/ngOnChanges: `key` and `config` are signal
+        // inputs, so one reactive registration covers the first value and every
+        // one after it.
+        effect(() => {
+            const k = this.key();
+            const cfg = this.config();
+            if (k && cfg)
+                this._service.setConfig(k, cfg);
+        });
+    }
+    // ── Queries used by the template ─────────────────────────────────────────
+    isOpen(rowKey, part) {
+        const panel = this.openPanel();
+        return !!panel && panel.key === rowKey && panel.part === part;
+    }
+    isFilterActive(optionKey) {
+        const k = this.key();
+        return k ? this._service.isFilterActive(k, optionKey) : false;
+    }
+    /** A divider goes where the type changes relative to the row above. */
+    needsDivider(options, index) {
+        return index > 0 && options[index].type !== options[index - 1].type;
+    }
+    valuePlaceholder(row) {
+        return this._optionFor(row.key)?.placeholder ?? 'Selecione';
+    }
+    statusOptionsOf(row) {
+        return this._optionFor(row.key)?.statusOptions ?? [];
+    }
+    minDateOf(row) {
+        return this._optionFor(row.key)?.minDate ?? '';
+    }
+    maxDateOf(row) {
+        return this._optionFor(row.key)?.maxDate ?? '';
+    }
+    // ── Progression ──────────────────────────────────────────────────────────
+    /**
+     * `index` is the position in the list the template walked — the one the
+     * search filtered. Indexing the full list would pick the wrong option.
+     */
+    onSelectCategory(index) {
+        const option = this.addOptions()[index];
+        if (!option)
+            return;
+        // Choosing a category swaps the trigger's VARIANT (text → icon) and with
+        // it its place in the row. The panel is a child of the button and would
+        // travel along.
+        this.immediateTriggerExit.set(true);
+        this._withFlip(() => {
+            this.triggerOpen.set(false);
+            this.categorySearch.set('');
+            this._resetDraft();
+            this.calendarOpen.set(null);
+            this.pending.set(option);
+            // The answer panel is born ALREADY OPEN: the user asked for this filter,
+            // and making them click the fresh chip to be asked for a value would
+            // charge twice for one decision.
+            this.openPanel.set({ key: option.key, part: 'value' });
+        });
+    }
+    /**
+     * Swaps the category of a chip that already exists, from its first segment.
+     *
+     * The answer always falls: it belongs to the old category's domain — a list
+     * of statuses means nothing inside a date range — so the chip goes back to
+     * waiting, with its value panel open.
+     */
+    onChangeCategory(row, index) {
+        const option = this.changeOptions()[index];
+        if (!option)
+            return;
+        // The same category: nothing to swap, so the click just moves on to the
+        // answer, which is the only thing left to change.
+        if (option.key === row.key) {
+            this._openValuePanel(row);
+            return;
+        }
+        if (this.isFilterActive(option.key))
+            return;
+        this._withFlip(() => {
+            const k = this.key();
+            if (k && !row.pending)
+                this._service.removeFilter(k, row.key);
+            this._resetDraft();
+            this.calendarOpen.set(null);
+            this.categorySearch.set('');
+            this.pending.set(option);
+            this.openPanel.set({ key: option.key, part: 'value' });
+        }, 
+        // The slot keyed by the old category disappears either way — a new chip
+        // is born under the new key — so it always leaves through the ghost.
+        { leaving: [row.key], follow: false });
+        if (!row.pending)
+            this._emit();
+    }
+    /**
+     * Opening the trigger closes whatever chip panel was open: only one panel is
+     * ever on screen, and a draft chip whose panel was abandoned goes with it.
+     */
+    onTriggerOpenChange(open) {
+        this.categorySearch.set('');
+        this.triggerOpen.set(open);
+        if (!open)
+            return;
+        if (this.pending()) {
+            this._dropPending();
+            return;
+        }
+        this.openPanel.set(null);
+        this.calendarOpen.set(null);
+        this._resetDraft();
+    }
+    onCategoryOpenChange(row, open) {
+        this.categorySearch.set('');
+        if (!open) {
+            this._closePanel(row);
+            return;
+        }
+        this.triggerOpen.set(false);
+        this.openPanel.set({ key: row.key, part: 'category' });
+    }
+    onValueOpenChange(row, open) {
+        if (!open) {
+            this._closePanel(row);
+            return;
+        }
+        this.triggerOpen.set(false);
+        this._openValuePanel(row);
+    }
+    // ── Date ─────────────────────────────────────────────────────────────────
+    /**
+     * The same shortcuts monkey-filter-bar offers. "Personalizado" is the only
+     * one that does not resolve the interval on its own: it swaps the panel's
+     * content for the calendar, in the same place.
+     */
+    onQuickDate(row, preset) {
+        const option = this._optionFor(row.key);
+        if (!option || option.type !== 'date')
+            return;
+        if (preset === 'custom') {
+            this.dateRange = { startDate: '', endDate: '' };
+            this.calendarOpen.set(row.key);
+            return;
+        }
+        const today = new Date();
+        let start = today;
+        let end = today;
+        switch (preset) {
+            case '1-week-after':
+                end = addDays(today, 7);
+                break;
+            case '1-month-after':
+                end = addMonths(today, 1);
+                break;
+            case '3-months-after':
+                end = addMonths(today, 3);
+                break;
+            case '1-week-before':
+                start = subDays(today, 7);
+                break;
+            case '1-month-before':
+                start = subMonths(today, 1);
+                break;
+            case '3-months-before':
+                start = subMonths(today, 3);
+                break;
+            default:
+                return;
+        }
+        this.dateRange = {
+            startDate: format(start, 'yyyy-MM-dd'),
+            endDate: format(end, 'yyyy-MM-dd')
+        };
+        this.onApply(row);
+    }
+    onDateChange(row, event) {
+        this.dateRange = event;
+        if (event.startDate && event.endDate) {
+            // The 100ms is monkey-filter-bar's own: the date range emits while it is
+            // still settling its own state, and applying inside that turn would
+            // close the panel from under it.
+            setTimeout(() => {
+                return this.onApply(row);
+            }, 100);
+        }
+    }
+    /** Cancel inside the calendar goes back to the shortcuts, panel still open. */
+    onBackToShortcuts() {
+        this.calendarOpen.set(null);
+    }
+    // ── Answers ──────────────────────────────────────────────────────────────
+    onStatusChange(value, checked) {
+        if (checked) {
+            if (!this.statusValues.includes(value))
+                this.statusValues = [...this.statusValues, value];
+            return;
+        }
+        this.statusValues = this.statusValues.filter((v) => {
+            return v !== value;
+        });
+    }
+    onToggleStatus(value) {
+        this.onStatusChange(value, !this.statusValues.includes(value));
+    }
+    /**
+     * The one place where an answer is written. Same validation as
+     * monkey-filter-bar: an empty answer is not an answer, and the panel stays
+     * open instead of writing a filter with nothing in it.
+     */
+    onApply(row) {
+        const k = this.key();
+        const option = this._optionFor(row.key);
+        if (!k || !option)
+            return;
+        let value;
+        switch (option.type) {
+            case 'text':
+                if (!this.textValue.trim())
+                    return;
+                value = this.textValue.trim();
+                break;
+            case 'date':
+                if (!this.dateRange.startDate || !this.dateRange.endDate)
+                    return;
+                value = { startDate: this.dateRange.startDate, endDate: this.dateRange.endDate };
+                break;
+            case 'currency': {
+                const raw = this.currencyValue;
+                if (raw === null || raw === undefined)
+                    return;
+                value = this.currencyMode === 'from' ? { min: raw } : { max: raw };
+                break;
+            }
+            case 'status':
+                if (this.statusValues.length === 0)
+                    return;
+                value = [...this.statusValues];
+                break;
+            default:
+                return;
+        }
+        this._withFlip(() => {
+            if (this._service.isFilterActive(k, option.key)) {
+                this._service.updateFilter(k, option.key, option, value);
+            }
+            else {
+                this._service.addFilter(k, option, value);
+            }
+            this.pending.set(null);
+            this.openPanel.set(null);
+            this.calendarOpen.set(null);
+            this._resetDraft();
+        });
+        this._emit();
+    }
+    onRemove(row) {
+        const k = this.key();
+        if (!k)
+            return;
+        // Does not follow the end: the row shrank, and jumping to the end after
+        // deleting something is disorienting — the eye is on the hole that was
+        // left, not on the queue.
+        this._withFlip(() => {
+            if (row.pending) {
+                this.pending.set(null);
+            }
+            else {
+                this._service.removeFilter(k, row.key);
+            }
+            if (this.openPanel()?.key === row.key)
+                this.openPanel.set(null);
+            if (this.calendarOpen() === row.key)
+                this.calendarOpen.set(null);
+            this._resetDraft();
+        }, { leaving: [row.key], follow: false });
+        if (!row.pending)
+            this._emit();
+    }
+    /** Zeroes the whole bar. The trigger goes back to being the call with a label. */
+    onClearAll() {
+        const k = this.key();
+        if (!k)
+            return;
+        const leaving = this.rows().map((row) => {
+            return row.key;
+        });
+        this._withFlip(() => {
+            this._service.clearAllFilters(k);
+            this.pending.set(null);
+            this.openPanel.set(null);
+            this.calendarOpen.set(null);
+            this._resetDraft();
+        }, { leaving, follow: false });
+        this._emit();
+    }
+    onSearchChange(value) {
+        const k = this.key();
+        if (!k)
+            return;
+        this._service.setSearchValue(k, value);
+        this.searchChange.emit(value);
+        this._emit();
+    }
+    // ── Panel bookkeeping ────────────────────────────────────────────────────
+    /**
+     * Opens a chip's answer panel, pre-filled with the answer it already holds —
+     * this is the edit path the active-filter tag used to be.
+     */
+    _openValuePanel(row) {
+        this._resetDraft();
+        this.calendarOpen.set(null);
+        const k = this.key();
+        const filter = k
+            ? this._service.getActiveFilters(k).find((f) => {
+                return f.key === row.key;
+            })
+            : undefined;
+        if (filter) {
+            switch (filter.type) {
+                case 'text':
+                    this.textValue = filter.value;
+                    break;
+                case 'date': {
+                    const range = filter.value;
+                    this.dateRange = { startDate: range.startDate ?? '', endDate: range.endDate ?? '' };
+                    // Editing a date goes straight to the calendar: the shortcuts are the
+                    // way IN, and there is nothing to pick from them once an interval
+                    // already exists.
+                    this.calendarOpen.set(row.key);
+                    break;
+                }
+                case 'currency': {
+                    const amount = filter.value;
+                    if (amount.min !== undefined) {
+                        this.currencyMode = 'from';
+                        this.currencyValue = amount.min;
+                    }
+                    else if (amount.max !== undefined) {
+                        this.currencyMode = 'until';
+                        this.currencyValue = amount.max;
+                    }
+                    break;
+                }
+                case 'status':
+                    this.statusValues = [...(filter.value ?? [])];
+                    break;
+                default:
+                    break;
+            }
+        }
+        this.openPanel.set({ key: row.key, part: 'value' });
+    }
+    /**
+     * Closing the value panel of a chip that was never confirmed drops the chip:
+     * monkey-filter-bar adds nothing until Apply, and a chip left on the row
+     * with no answer would be a state it does not have.
+     *
+     * Closing the panel of a CONFIRMED chip changes no width — the segment shows
+     * the same text it did before — so that path needs no FLIP.
+     */
+    _closePanel(row) {
+        if (!this.isOpen(row.key, 'category') && !this.isOpen(row.key, 'value'))
+            return;
+        if (row.pending) {
+            this._dropPending();
+            return;
+        }
+        this.openPanel.set(null);
+        this.calendarOpen.set(null);
+        this._resetDraft();
+    }
+    /** Takes the draft chip off the row, ghost and all. */
+    _dropPending() {
+        const draft = this.pending();
+        if (!draft)
+            return;
+        this._withFlip(() => {
+            this.pending.set(null);
+            this.openPanel.set(null);
+            this.calendarOpen.set(null);
+            this._resetDraft();
+        }, { leaving: [draft.key], follow: false });
+    }
+    _optionFor(optionKey) {
+        return this.serviceConfig()?.filterOptions.find((o) => {
+            return o.key === optionKey;
+        });
+    }
+    _matchingSearch(options) {
+        const term = this.categorySearch().trim().toLowerCase();
+        if (!term)
+            return [...options];
+        return options.filter((o) => {
+            return o.label.toLowerCase().includes(term);
+        });
+    }
+    _resetDraft() {
+        this.textValue = '';
+        this.currencyValue = null;
+        this.currencyMode = 'from';
+        this.statusValues = [];
+        this.dateRange = { startDate: '', endDate: '' };
+    }
+    _emit() {
+        const k = this.key();
+        if (!k)
+            return;
+        const state = this._service.getState(k);
+        this.filtersChange.emit({ search: state.search, filters: state.filters });
+    }
+    // ── Coordinating state and DOM ───────────────────────────────────────────
+    /**
+     * Takes the slots that are about to leave out of the flow, at the exact
+     * place where they are.
+     *
+     * This is done HERE and not by the `animate.leave` class because of ORDER:
+     * Angular only applies the exit class the instant it removes the node, and
+     * that happens AFTER the `afterNextRender` that runs the FLIP. The FLIP
+     * would then measure a layout that had not collapsed yet, see no
+     * displacement at all, and the neighbours would snap into their new place
+     * with no animation — the chip's exit worked and the neighbours' arrival did
+     * not.
+     *
+     * Released from the flow BEFORE the mutation, the row collapses in the same
+     * pass: the FLIP measures a real before and a real after, and the ghost
+     * fades out on top, in place. Explicit `left`/`top` are mandatory — the
+     * static position of an absolute element inside a flex container is the
+     * container's corner, not where the element was.
+     */
+    _releaseFromFlow(container, leaving) {
+        leaving.forEach((id) => {
+            const slot = container.querySelector(`[${FLIP_ATTR}="${id}"]`);
+            if (!slot)
+                return;
+            slot.style.left = `${slot.offsetLeft}px`;
+            slot.style.top = `${slot.offsetTop}px`;
+            slot.style.position = 'absolute';
+        });
+    }
+    /**
+     * Takes the row to the end of its travel, so that what has just come in is
+     * not left hidden — and with it the trigger, which is always last in line.
+     *
+     * It runs BEFORE the "after" measurement on purpose. FLIP works in VIEWPORT
+     * coordinates, so scrolling first folds the scroll offset into the same sum:
+     * every piece slides from where the eye saw it to where it ended up, pan
+     * included. One single synchronised movement.
+     *
+     * It is also what makes `scroll-behavior: smooth` unnecessary, which has no
+     * token, guarantees nothing under reduced motion, and stalls in a throttled
+     * tab.
+     *
+     * The sum comes from the LAST SLOT, never from `scrollWidth`. `scrollWidth`
+     * at this instant is a poisoned measurement: the chip that has just been
+     * born brings its answer panel already open, and the panel has not been
+     * anchored yet — it is at its static position, far ahead, and counts as
+     * overflow. The scroll would go hundreds of pixels chasing a ghost, the FLIP
+     * would animate the whole row that distance, and the browser would clamp the
+     * scroll back when the panel got anchored — a hard jump with no animation,
+     * right in the middle of the chip's entrance.
+     *
+     * The slots do not have that problem: they are flow content, already at
+     * their final position on the first render, and none of them is `fixed`.
+     */
+    _followEnd(container) {
+        const row = container.querySelector('.mecx-filter-bar-v2-row');
+        if (!row)
+            return;
+        const slots = row.querySelectorAll(`[${FLIP_ATTR}]`);
+        const last = slots[slots.length - 1];
+        if (!last)
+            return;
+        // The breathing room at the end is padding INSIDE the row's box, so the
+        // usable right edge sits before it. Without discounting it, the trigger
+        // comes to rest exactly where the gradient dilutes it.
+        const room = parseFloat(getComputedStyle(row).paddingInlineEnd) || 0;
+        const excess = last.getBoundingClientRect().right + room - row.getBoundingClientRect().right;
+        // Only ever forward. With no overflow this is inert, and going backwards
+        // would drag the eye back at the moment the queue grew.
+        if (excess <= 0)
+            return;
+        row.scrollLeft += excess;
+    }
+    /**
+     * Measures, lets the state change, then makes everything slide from its old
+     * position.
+     *
+     * `afterNextRender` and not a `setTimeout`: we need the first instant at
+     * which the DOM ALREADY reflects the new state, and that is exactly what it
+     * delivers.
+     */
+    _withFlip(mutate, options = {}) {
+        const { leaving = [], follow = true } = options;
+        const container = this._hostEl.nativeElement;
+        const before = measureFlip(container);
+        this._releaseFromFlow(container, leaving);
+        mutate();
+        afterNextRender(() => {
+            if (follow)
+                this._followEnd(container);
+            animateFlip(container, before, FROZEN);
+            // The panel is gone; the next close goes back to a normal fade.
+            this.immediateTriggerExit.set(false);
+        }, { injector: this._injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterBarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterBarV2Component, isStandalone: true, selector: "monkey-filter-bar-v2", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, addFilterLabel: { classPropertyName: "addFilterLabel", publicName: "addFilterLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", searchChange: "searchChange" }, host: { attributes: { "data-testid": "monkey-filter-bar-v2" }, classAttribute: "mecx-filter-bar-v2" }, ngImport: i0, template: "<!-- Top row: the free-text search and whatever the consumer projects. Kept\n     from monkey-filter-bar \u2014 the search is part of this bar's contract\n     (`searchChange`), not of the chip row. -->\n<div class=\"mecx-filter-bar-v2-top\">\n  <monkey-form-field class=\"mecx-filter-bar-v2-search\" size=\"sm\">\n    <input\n      type=\"text\"\n      monkey-input\n      [placeholder]=\"searchPlaceholder()\"\n      [ngModel]=\"searchValue()\"\n      (ngModelChange)=\"onSearchChange($event)\"\n    />\n    <monkey-prefix>\n      <i class=\"mk-i mk-i-search fs-md\"></i>\n    </monkey-prefix>\n  </monkey-form-field>\n\n  <div class=\"mecx-filter-bar-v2-extra\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<div class=\"mecx-filter-bar-v2-line\">\n  <div #rowEl class=\"mecx-filter-bar-v2-row\">\n    @for (f of rows(); track f.key) {\n      <span\n        class=\"mecx-filter-bar-v2-slot\"\n        [attr.data-flip-id]=\"f.key\"\n        [animate.enter]=\"appPainted() ? 'mecx-filter-bar-v2-slot--entering' : ''\"\n        animate.leave=\"mecx-filter-bar-v2-slot--leaving\"\n      >\n        <monkey-filter-chip (remove)=\"onRemove(f)\">\n          <!-- 1 \u00B7 Category \u2014 opens the same list as the trigger, so the user\n               can move a filter to another field without deleting it and\n               starting over.\n\n               The list is repeated here and further down on purpose, and it\n               should NOT become a shared <ng-template>: the two differ in what\n               they offer (only what can be added, vs. the whole list), in what\n               counts as selected, and in what the click does. Sharing the\n               markup would mean threading three parameters through a context\n               object to save fifteen lines. -->\n          <monkey-filter-segment\n            [icon]=\"f.icon ?? null\"\n            [text]=\"f.label\"\n            [open]=\"isOpen(f.key, 'category')\"\n            (openChange)=\"onCategoryOpenChange(f, $event)\"\n          >\n            <!-- Guarded by the same condition the segment uses to show its\n                 panel. Projected content is created with the view that\n                 DECLARES it, not with the one that renders it, so without this\n                 every chip would build both of its panels \u2014 menus, rows,\n                 fields and all \u2014 and keep them alive while closed. -->\n            @if (isOpen(f.key, 'category')) {\n              <monkey-filter-menu\n                class=\"mecx-filter-bar-v2-menu-categories\"\n                [showSearch]=\"true\"\n                searchPlaceholder=\"Buscar filtro\"\n                (searchChange)=\"categorySearch.set($event)\"\n              >\n                @for (opt of changeOptions(); track opt.key; let i = $index) {\n                  @if (needsDivider(changeOptions(), i)) {\n                    <monkey-divider />\n                  }\n                  <monkey-filter-menu-item\n                    [leadIcon]=\"opt.icon ?? null\"\n                    [label]=\"opt.label\"\n                    [selected]=\"opt.key === f.key\"\n                    [disabled]=\"opt.key !== f.key && isFilterActive(opt.key)\"\n                    (itemClick)=\"onChangeCategory(f, i)\"\n                  />\n                }\n              </monkey-filter-menu>\n            }\n          </monkey-filter-segment>\n\n          <!-- 2 \u00B7 Value \u2014 the panel it opens is decided by the filter type,\n               and it is the same panel that the chip's answer came from. That\n               is what makes clicking a chip an EDIT instead of a restart. -->\n          <monkey-filter-segment\n            [placeholder]=\"valuePlaceholder(f)\"\n            [text]=\"f.value\"\n            [open]=\"isOpen(f.key, 'value')\"\n            (openChange)=\"onValueOpenChange(f, $event)\"\n          >\n            @if (isOpen(f.key, 'value')) {\n              @switch (f.type) {\n                <!-- status \u2014 a multiple choice, so the answer is only written\n                     on Confirmar. Ticking a box is not yet a decision. -->\n                @case ('status') {\n                  <monkey-filter-menu class=\"mecx-filter-bar-v2-menu-status\" [showSearch]=\"false\">\n                    @for (s of statusOptionsOf(f); track s.value) {\n                      <monkey-filter-menu-item\n                        property=\"checkbox\"\n                        [label]=\"s.description\"\n                        [checked]=\"statusValues.includes(s.value)\"\n                        (itemClick)=\"onToggleStatus(s.value)\"\n                      />\n                    }\n                    <div class=\"mecx-filter-bar-v2-panel-actions\">\n                      <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                        Confirmar\n                      </monkey-button>\n                    </div>\n                  </monkey-filter-menu>\n                }\n\n                <!-- date \u2014 the shortcuts are the way in and the calendar is\n                     the detour. \"Personalizado\" swaps the CONTENT of this\n                     panel, which stays anchored to the same segment: no modal,\n                     because the dialog was almost all frame around a calendar\n                     and the segment already knows how to hang anything. The\n                     footer here is the date range's own, and Cancelar goes\n                     back to the shortcuts. -->\n                @case ('date') {\n                  @if (calendarOpen() === f.key) {\n                    <monkey-date-range\n                      class=\"mecx-filter-bar-v2-calendar\"\n                      [startDate]=\"dateRange.startDate\"\n                      [endDate]=\"dateRange.endDate\"\n                      [minDate]=\"minDateOf(f)\"\n                      [maxDate]=\"maxDateOf(f)\"\n                      (onDate)=\"onDateChange(f, $event)\"\n                      (onCancel)=\"onBackToShortcuts()\"\n                    ></monkey-date-range>\n                  } @else {\n                    <monkey-filter-menu [showSearch]=\"false\">\n                      <monkey-filter-menu-item\n                        label=\"1 semana a partir de hoje\"\n                        (itemClick)=\"onQuickDate(f, '1-week-after')\"\n                      />\n                      <monkey-filter-menu-item\n                        label=\"1 m\u00EAs a partir de hoje\"\n                        (itemClick)=\"onQuickDate(f, '1-month-after')\"\n                      />\n                      <monkey-filter-menu-item\n                        label=\"3 meses a partir de hoje\"\n                        (itemClick)=\"onQuickDate(f, '3-months-after')\"\n                      />\n                      <monkey-filter-menu-item\n                        label=\"1 semana antes de hoje\"\n                        (itemClick)=\"onQuickDate(f, '1-week-before')\"\n                      />\n                      <monkey-filter-menu-item\n                        label=\"1 m\u00EAs antes de hoje\"\n                        (itemClick)=\"onQuickDate(f, '1-month-before')\"\n                      />\n                      <monkey-filter-menu-item\n                        label=\"3 meses antes de hoje\"\n                        (itemClick)=\"onQuickDate(f, '3-months-before')\"\n                      />\n                      <monkey-filter-menu-item\n                        label=\"Personalizado\"\n                        (itemClick)=\"onQuickDate(f, 'custom')\"\n                      />\n                    </monkey-filter-menu>\n                  }\n                }\n\n                <!-- currency \u2014 one amount and the side it applies to. The\n                     label lives inside the field, which is what lets the panel\n                     close in 238px instead of spending a line on a title. -->\n                @case ('currency') {\n                  <monkey-filter-menu class=\"mecx-filter-bar-v2-menu-field\" [showSearch]=\"false\">\n                    <div class=\"mecx-filter-bar-v2-field\">\n                      <monkey-radiobutton [(ngModel)]=\"currencyMode\" position=\"vertical\" size=\"sm\">\n                        <monkey-option [value]=\"'from'\">De</monkey-option>\n                        <monkey-option [value]=\"'until'\">At\u00E9</monkey-option>\n                      </monkey-radiobutton>\n\n                      <monkey-form-field size=\"sm\">\n                        <monkey-label>{{ f.label }}</monkey-label>\n                        <input\n                          type=\"text\"\n                          monkey-input-currency\n                          [placeholder]=\"currencyMode === 'from' ? 'Valor m\u00EDnimo' : 'Valor m\u00E1ximo'\"\n                          [(ngModel)]=\"currencyValue\"\n                          (keyup.enter)=\"onApply(f)\"\n                        />\n                      </monkey-form-field>\n\n                      <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                        Confirmar\n                      </monkey-button>\n                    </div>\n                  </monkey-filter-menu>\n                }\n\n                <!-- text \u2014 a single field, so the answer is the text itself. -->\n                @default {\n                  <monkey-filter-menu class=\"mecx-filter-bar-v2-menu-field\" [showSearch]=\"false\">\n                    <div class=\"mecx-filter-bar-v2-field\">\n                      <monkey-form-field size=\"sm\">\n                        <monkey-label>{{ f.label }}</monkey-label>\n                        <input\n                          type=\"text\"\n                          monkey-input\n                          [placeholder]=\"valuePlaceholder(f)\"\n                          [(ngModel)]=\"textValue\"\n                          (keyup.enter)=\"onApply(f)\"\n                        />\n                      </monkey-form-field>\n\n                      <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                        Confirmar\n                      </monkey-button>\n                    </div>\n                  </monkey-filter-menu>\n                }\n              }\n            }\n          </monkey-filter-segment>\n        </monkey-filter-chip>\n      </span>\n    }\n\n    <!-- The trigger is the last slot of the row. Its FLIP identity changes\n         along with the variant (see triggerFlipId): with the bar empty it is\n         the labelled \"Filtro\" and it goes away with the first filter; the \"+\"\n         that takes its place inherits no position, so there is no button\n         sliding along and dragging the panel that is closing. -->\n    <span class=\"mecx-filter-bar-v2-slot\" [attr.data-flip-id]=\"triggerFlipId()\">\n      <monkey-filter-trigger\n        [variant]=\"triggerVariant()\"\n        [icon]=\"triggerIcon()\"\n        [text]=\"addFilterLabel()\"\n        [immediateExit]=\"immediateTriggerExit()\"\n        [open]=\"triggerOpen()\"\n        (openChange)=\"onTriggerOpenChange($event)\"\n      >\n        @if (triggerOpen()) {\n          <monkey-filter-menu\n            class=\"mecx-filter-bar-v2-menu-categories\"\n            [showSearch]=\"true\"\n            searchPlaceholder=\"Buscar filtro\"\n            (searchChange)=\"categorySearch.set($event)\"\n          >\n            @for (opt of addOptions(); track opt.key; let i = $index) {\n              @if (needsDivider(addOptions(), i)) {\n                <monkey-divider />\n              }\n              <monkey-filter-menu-item\n                [leadIcon]=\"opt.icon ?? null\"\n                [label]=\"opt.label\"\n                (itemClick)=\"onSelectCategory(i)\"\n              />\n            }\n          </monkey-filter-menu>\n        }\n      </monkey-filter-trigger>\n    </span>\n  </div>\n\n  <!-- Gradient plus action. The gradient exists so the chips FADE OUT as they\n       pass underneath instead of being cut off hard by the edge of what\n       scrolls. -->\n  @if (rows().length > 0) {\n    <div class=\"mecx-filter-bar-v2-actions\">\n      <monkey-button type=\"tertiary\" size=\"sm\" (click)=\"onClearAll()\">\n        {{ clearAllLabel() }}\n      </monkey-button>\n    </div>\n  }\n</div>\n\n<!-- Drawn bar plus divider. The bar hides itself when there is nothing to\n     scroll, so filters existing is enough for it to be mounted. -->\n@if (rows().length > 0) {\n  <monkey-scrollbar orientation=\"horizontal\" size=\"small\" [target]=\"rowEl\" />\n  <monkey-divider />\n}\n", styles: ["@charset \"UTF-8\";.mecx-filter-bar-v2{--mecx-fbv2-duration-state: .15s;--mecx-fbv2-duration-enter: .2s;--mecx-fbv2-duration-exit: .15s;--mecx-fbv2-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-fbv2-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-fbv2-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-fbv2-scale-unfold: .94;--mecx-fbv2-travel-anchored: 4px;--mecx-fbv2-travel-slide: 16px;--mecx-fbv2-stagger: 25ms;--mecx-fbv2-control-height: 28px;--mecx-fbv2-pointer-target: 40px;--mecx-fbv2-radius: 8px;--mecx-fbv2-radius-item: 4px;--mecx-fbv2-fade-width: 48px}@media(prefers-reduced-motion:reduce){.mecx-filter-bar-v2{--mecx-fbv2-duration-state: 1ms;--mecx-fbv2-duration-enter: 1ms;--mecx-fbv2-duration-exit: 1ms;--mecx-fbv2-scale-unfold: 1;--mecx-fbv2-travel-anchored: 0px;--mecx-fbv2-travel-slide: 0px;--mecx-fbv2-stagger: 0ms}}.mecx-filter-bar-v2{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-v2-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-v2-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-v2-extra{margin-left:auto;display:flex;align-items:center;gap:8px}.mecx-filter-bar-v2-line{display:flex;align-items:center;width:100%}.mecx-filter-bar-v2-row{display:flex;align-items:center;gap:8px;flex:1 0 0;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-fbv2-pointer-target);padding-inline-end:var(--mecx-fbv2-fade-width);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-v2-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar-v2-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-fbv2-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-v2-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-fbv2-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-v2-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-fbv2-duration-enter) var(--mecx-fbv2-ease-enter)}.mecx-filter-bar-v2-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-v2-slot-in{0%{opacity:0;translate:calc(var(--mecx-fbv2-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-v2-slot-out{to{opacity:0;translate:calc(var(--mecx-fbv2-travel-slide) * -1) 0}}.mecx-filter-bar-v2-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-v2-slot-out var(--mecx-fbv2-duration-exit) var(--mecx-fbv2-ease-exit) both}.mecx-filter-bar-v2-slot--entering{animation:mecx-filter-bar-v2-slot-in var(--mecx-fbv2-duration-enter) var(--mecx-fbv2-ease-enter);position:relative;z-index:1}.mecx-filter-menu.mecx-filter-bar-v2-menu-categories{width:198px}.mecx-filter-menu.mecx-filter-bar-v2-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-v2-menu-field{width:238px}.mecx-filter-bar-v2-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-v2-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-v2-field monkey-button,.mecx-filter-bar-v2-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-v2-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-v2-panel-actions monkey-button,.mecx-filter-bar-v2-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-v2-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-fbv2-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }, { kind: "component", type: MonkeyDividerComponent, selector: "monkey-divider", inputs: ["size", "vertical", "id"] }, { kind: "component", type: MonkeyFilterChipComponent, selector: "monkey-filter-chip", inputs: ["removeIcon", "removeLabel"], outputs: ["remove"] }, { kind: "component", type: MonkeyFilterMenuComponent, selector: "monkey-filter-menu", inputs: ["showSearch", "searchPlaceholder", "showScroll", "maxHeight"], outputs: ["searchChange"] }, { kind: "component", type: MonkeyFilterMenuItemComponent, selector: "monkey-filter-menu-item", inputs: ["property", "leadIcon", "label", "description", "checked", "selected", "disabled"], outputs: ["itemClick"] }, { kind: "component", type: MonkeyFilterSegmentComponent, selector: "monkey-filter-segment", inputs: ["icon", "text", "placeholder", "readonlySegment", "open"], outputs: ["openChange", "segmentClick"] }, { kind: "component", type: MonkeyFilterTriggerComponent, selector: "monkey-filter-trigger", inputs: ["variant", "icon", "text", "ariaLabel", "disabled", "immediateExit", "open"], outputs: ["openChange"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "directive", type: MonkeyInputCurrencyDirective, selector: "input[monkey-input-currency]", inputs: ["name", "disabled", "id", "required", "type"], exportAs: ["monkeyInput"] }, { kind: "directive", type: MonkeyLabelDirective, selector: "monkey-label" }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "selected"] }, { kind: "directive", type: MonkeyPrefixDirective, selector: "monkey-prefix" }, { kind: "component", type: MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["tabIndex", "position", "size", "disabled", "required", "value"], outputs: ["onChange", "onSearch"] }, { kind: "component", type: MonkeyScrollbarComponent, selector: "monkey-scrollbar", inputs: ["orientation", "size", "target"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterBarV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-filter-bar-v2', imports: [
+                        FormsModule,
+                        MonkeyButtonComponent,
+                        MonkeyCheckboxComponent,
+                        MonkeyDateRangeComponent,
+                        MonkeyDividerComponent,
+                        MonkeyFilterChipComponent,
+                        MonkeyFilterMenuComponent,
+                        MonkeyFilterMenuItemComponent,
+                        MonkeyFilterSegmentComponent,
+                        MonkeyFilterTriggerComponent,
+                        MonkeyFormFieldModule,
+                        MonkeyInputModule,
+                        MonkeyLabelDirective,
+                        MonkeyOptionComponent,
+                        MonkeyPrefixDirective,
+                        MonkeyRadioButtonComponent,
+                        MonkeyScrollbarComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-filter-bar-v2',
+                        class: 'mecx-filter-bar-v2'
+                    }, template: "<!-- Top row: the free-text search and whatever the consumer projects. Kept\n     from monkey-filter-bar \u2014 the search is part of this bar's contract\n     (`searchChange`), not of the chip row. -->\n<div class=\"mecx-filter-bar-v2-top\">\n  <monkey-form-field class=\"mecx-filter-bar-v2-search\" size=\"sm\">\n    <input\n      type=\"text\"\n      monkey-input\n      [placeholder]=\"searchPlaceholder()\"\n      [ngModel]=\"searchValue()\"\n      (ngModelChange)=\"onSearchChange($event)\"\n    />\n    <monkey-prefix>\n      <i class=\"mk-i mk-i-search fs-md\"></i>\n    </monkey-prefix>\n  </monkey-form-field>\n\n  <div class=\"mecx-filter-bar-v2-extra\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<div class=\"mecx-filter-bar-v2-line\">\n  <div #rowEl class=\"mecx-filter-bar-v2-row\">\n    @for (f of rows(); track f.key) {\n      <span\n        class=\"mecx-filter-bar-v2-slot\"\n        [attr.data-flip-id]=\"f.key\"\n        [animate.enter]=\"appPainted() ? 'mecx-filter-bar-v2-slot--entering' : ''\"\n        animate.leave=\"mecx-filter-bar-v2-slot--leaving\"\n      >\n        <monkey-filter-chip (remove)=\"onRemove(f)\">\n          <!-- 1 \u00B7 Category \u2014 opens the same list as the trigger, so the user\n               can move a filter to another field without deleting it and\n               starting over.\n\n               The list is repeated here and further down on purpose, and it\n               should NOT become a shared <ng-template>: the two differ in what\n               they offer (only what can be added, vs. the whole list), in what\n               counts as selected, and in what the click does. Sharing the\n               markup would mean threading three parameters through a context\n               object to save fifteen lines. -->\n          <monkey-filter-segment\n            [icon]=\"f.icon ?? null\"\n            [text]=\"f.label\"\n            [open]=\"isOpen(f.key, 'category')\"\n            (openChange)=\"onCategoryOpenChange(f, $event)\"\n          >\n            <!-- Guarded by the same condition the segment uses to show its\n                 panel. Projected content is created with the view that\n                 DECLARES it, not with the one that renders it, so without this\n                 every chip would build both of its panels \u2014 menus, rows,\n                 fields and all \u2014 and keep them alive while closed. -->\n            @if (isOpen(f.key, 'category')) {\n              <monkey-filter-menu\n                class=\"mecx-filter-bar-v2-menu-categories\"\n                [showSearch]=\"true\"\n                searchPlaceholder=\"Buscar filtro\"\n                (searchChange)=\"categorySearch.set($event)\"\n              >\n                @for (opt of changeOptions(); track opt.key; let i = $index) {\n                  @if (needsDivider(changeOptions(), i)) {\n                    <monkey-divider />\n                  }\n                  <monkey-filter-menu-item\n                    [leadIcon]=\"opt.icon ?? null\"\n                    [label]=\"opt.label\"\n                    [selected]=\"opt.key === f.key\"\n                    [disabled]=\"opt.key !== f.key && isFilterActive(opt.key)\"\n                    (itemClick)=\"onChangeCategory(f, i)\"\n                  />\n                }\n              </monkey-filter-menu>\n            }\n          </monkey-filter-segment>\n\n          <!-- 2 \u00B7 Value \u2014 the panel it opens is decided by the filter type,\n               and it is the same panel that the chip's answer came from. That\n               is what makes clicking a chip an EDIT instead of a restart. -->\n          <monkey-filter-segment\n            [placeholder]=\"valuePlaceholder(f)\"\n            [text]=\"f.value\"\n            [open]=\"isOpen(f.key, 'value')\"\n            (openChange)=\"onValueOpenChange(f, $event)\"\n          >\n            @if (isOpen(f.key, 'value')) {\n              @switch (f.type) {\n                <!-- status \u2014 a multiple choice, so the answer is only written\n                     on Confirmar. Ticking a box is not yet a decision. -->\n                @case ('status') {\n                  <monkey-filter-menu class=\"mecx-filter-bar-v2-menu-status\" [showSearch]=\"false\">\n                    @for (s of statusOptionsOf(f); track s.value) {\n                      <monkey-filter-menu-item\n                        property=\"checkbox\"\n                        [label]=\"s.description\"\n                        [checked]=\"statusValues.includes(s.value)\"\n                        (itemClick)=\"onToggleStatus(s.value)\"\n                      />\n                    }\n                    <div class=\"mecx-filter-bar-v2-panel-actions\">\n                      <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                        Confirmar\n                      </monkey-button>\n                    </div>\n                  </monkey-filter-menu>\n                }\n\n                <!-- date \u2014 the shortcuts are the way in and the calendar is\n                     the detour. \"Personalizado\" swaps the CONTENT of this\n                     panel, which stays anchored to the same segment: no modal,\n                     because the dialog was almost all frame around a calendar\n                     and the segment already knows how to hang anything. The\n                     footer here is the date range's own, and Cancelar goes\n                     back to the shortcuts. -->\n                @case ('date') {\n                  @if (calendarOpen() === f.key) {\n                    <monkey-date-range\n                      class=\"mecx-filter-bar-v2-calendar\"\n                      [startDate]=\"dateRange.startDate\"\n                      [endDate]=\"dateRange.endDate\"\n                      [minDate]=\"minDateOf(f)\"\n                      [maxDate]=\"maxDateOf(f)\"\n                      (onDate)=\"onDateChange(f, $event)\"\n                      (onCancel)=\"onBackToShortcuts()\"\n                    ></monkey-date-range>\n                  } @else {\n                    <monkey-filter-menu [showSearch]=\"false\">\n                      <monkey-filter-menu-item\n                        label=\"1 semana a partir de hoje\"\n                        (itemClick)=\"onQuickDate(f, '1-week-after')\"\n                      />\n                      <monkey-filter-menu-item\n                        label=\"1 m\u00EAs a partir de hoje\"\n                        (itemClick)=\"onQuickDate(f, '1-month-after')\"\n                      />\n                      <monkey-filter-menu-item\n                        label=\"3 meses a partir de hoje\"\n                        (itemClick)=\"onQuickDate(f, '3-months-after')\"\n                      />\n                      <monkey-filter-menu-item\n                        label=\"1 semana antes de hoje\"\n                        (itemClick)=\"onQuickDate(f, '1-week-before')\"\n                      />\n                      <monkey-filter-menu-item\n                        label=\"1 m\u00EAs antes de hoje\"\n                        (itemClick)=\"onQuickDate(f, '1-month-before')\"\n                      />\n                      <monkey-filter-menu-item\n                        label=\"3 meses antes de hoje\"\n                        (itemClick)=\"onQuickDate(f, '3-months-before')\"\n                      />\n                      <monkey-filter-menu-item\n                        label=\"Personalizado\"\n                        (itemClick)=\"onQuickDate(f, 'custom')\"\n                      />\n                    </monkey-filter-menu>\n                  }\n                }\n\n                <!-- currency \u2014 one amount and the side it applies to. The\n                     label lives inside the field, which is what lets the panel\n                     close in 238px instead of spending a line on a title. -->\n                @case ('currency') {\n                  <monkey-filter-menu class=\"mecx-filter-bar-v2-menu-field\" [showSearch]=\"false\">\n                    <div class=\"mecx-filter-bar-v2-field\">\n                      <monkey-radiobutton [(ngModel)]=\"currencyMode\" position=\"vertical\" size=\"sm\">\n                        <monkey-option [value]=\"'from'\">De</monkey-option>\n                        <monkey-option [value]=\"'until'\">At\u00E9</monkey-option>\n                      </monkey-radiobutton>\n\n                      <monkey-form-field size=\"sm\">\n                        <monkey-label>{{ f.label }}</monkey-label>\n                        <input\n                          type=\"text\"\n                          monkey-input-currency\n                          [placeholder]=\"currencyMode === 'from' ? 'Valor m\u00EDnimo' : 'Valor m\u00E1ximo'\"\n                          [(ngModel)]=\"currencyValue\"\n                          (keyup.enter)=\"onApply(f)\"\n                        />\n                      </monkey-form-field>\n\n                      <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                        Confirmar\n                      </monkey-button>\n                    </div>\n                  </monkey-filter-menu>\n                }\n\n                <!-- text \u2014 a single field, so the answer is the text itself. -->\n                @default {\n                  <monkey-filter-menu class=\"mecx-filter-bar-v2-menu-field\" [showSearch]=\"false\">\n                    <div class=\"mecx-filter-bar-v2-field\">\n                      <monkey-form-field size=\"sm\">\n                        <monkey-label>{{ f.label }}</monkey-label>\n                        <input\n                          type=\"text\"\n                          monkey-input\n                          [placeholder]=\"valuePlaceholder(f)\"\n                          [(ngModel)]=\"textValue\"\n                          (keyup.enter)=\"onApply(f)\"\n                        />\n                      </monkey-form-field>\n\n                      <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                        Confirmar\n                      </monkey-button>\n                    </div>\n                  </monkey-filter-menu>\n                }\n              }\n            }\n          </monkey-filter-segment>\n        </monkey-filter-chip>\n      </span>\n    }\n\n    <!-- The trigger is the last slot of the row. Its FLIP identity changes\n         along with the variant (see triggerFlipId): with the bar empty it is\n         the labelled \"Filtro\" and it goes away with the first filter; the \"+\"\n         that takes its place inherits no position, so there is no button\n         sliding along and dragging the panel that is closing. -->\n    <span class=\"mecx-filter-bar-v2-slot\" [attr.data-flip-id]=\"triggerFlipId()\">\n      <monkey-filter-trigger\n        [variant]=\"triggerVariant()\"\n        [icon]=\"triggerIcon()\"\n        [text]=\"addFilterLabel()\"\n        [immediateExit]=\"immediateTriggerExit()\"\n        [open]=\"triggerOpen()\"\n        (openChange)=\"onTriggerOpenChange($event)\"\n      >\n        @if (triggerOpen()) {\n          <monkey-filter-menu\n            class=\"mecx-filter-bar-v2-menu-categories\"\n            [showSearch]=\"true\"\n            searchPlaceholder=\"Buscar filtro\"\n            (searchChange)=\"categorySearch.set($event)\"\n          >\n            @for (opt of addOptions(); track opt.key; let i = $index) {\n              @if (needsDivider(addOptions(), i)) {\n                <monkey-divider />\n              }\n              <monkey-filter-menu-item\n                [leadIcon]=\"opt.icon ?? null\"\n                [label]=\"opt.label\"\n                (itemClick)=\"onSelectCategory(i)\"\n              />\n            }\n          </monkey-filter-menu>\n        }\n      </monkey-filter-trigger>\n    </span>\n  </div>\n\n  <!-- Gradient plus action. The gradient exists so the chips FADE OUT as they\n       pass underneath instead of being cut off hard by the edge of what\n       scrolls. -->\n  @if (rows().length > 0) {\n    <div class=\"mecx-filter-bar-v2-actions\">\n      <monkey-button type=\"tertiary\" size=\"sm\" (click)=\"onClearAll()\">\n        {{ clearAllLabel() }}\n      </monkey-button>\n    </div>\n  }\n</div>\n\n<!-- Drawn bar plus divider. The bar hides itself when there is nothing to\n     scroll, so filters existing is enough for it to be mounted. -->\n@if (rows().length > 0) {\n  <monkey-scrollbar orientation=\"horizontal\" size=\"small\" [target]=\"rowEl\" />\n  <monkey-divider />\n}\n", styles: ["@charset \"UTF-8\";.mecx-filter-bar-v2{--mecx-fbv2-duration-state: .15s;--mecx-fbv2-duration-enter: .2s;--mecx-fbv2-duration-exit: .15s;--mecx-fbv2-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-fbv2-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-fbv2-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-fbv2-scale-unfold: .94;--mecx-fbv2-travel-anchored: 4px;--mecx-fbv2-travel-slide: 16px;--mecx-fbv2-stagger: 25ms;--mecx-fbv2-control-height: 28px;--mecx-fbv2-pointer-target: 40px;--mecx-fbv2-radius: 8px;--mecx-fbv2-radius-item: 4px;--mecx-fbv2-fade-width: 48px}@media(prefers-reduced-motion:reduce){.mecx-filter-bar-v2{--mecx-fbv2-duration-state: 1ms;--mecx-fbv2-duration-enter: 1ms;--mecx-fbv2-duration-exit: 1ms;--mecx-fbv2-scale-unfold: 1;--mecx-fbv2-travel-anchored: 0px;--mecx-fbv2-travel-slide: 0px;--mecx-fbv2-stagger: 0ms}}.mecx-filter-bar-v2{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-v2-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-v2-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-v2-extra{margin-left:auto;display:flex;align-items:center;gap:8px}.mecx-filter-bar-v2-line{display:flex;align-items:center;width:100%}.mecx-filter-bar-v2-row{display:flex;align-items:center;gap:8px;flex:1 0 0;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-fbv2-pointer-target);padding-inline-end:var(--mecx-fbv2-fade-width);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-v2-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar-v2-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-fbv2-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-v2-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-fbv2-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-v2-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-fbv2-duration-enter) var(--mecx-fbv2-ease-enter)}.mecx-filter-bar-v2-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-v2-slot-in{0%{opacity:0;translate:calc(var(--mecx-fbv2-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-v2-slot-out{to{opacity:0;translate:calc(var(--mecx-fbv2-travel-slide) * -1) 0}}.mecx-filter-bar-v2-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-v2-slot-out var(--mecx-fbv2-duration-exit) var(--mecx-fbv2-ease-exit) both}.mecx-filter-bar-v2-slot--entering{animation:mecx-filter-bar-v2-slot-in var(--mecx-fbv2-duration-enter) var(--mecx-fbv2-ease-enter);position:relative;z-index:1}.mecx-filter-menu.mecx-filter-bar-v2-menu-categories{width:198px}.mecx-filter-menu.mecx-filter-bar-v2-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-v2-menu-field{width:238px}.mecx-filter-bar-v2-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-v2-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-v2-field monkey-button,.mecx-filter-bar-v2-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-v2-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-v2-panel-actions monkey-button,.mecx-filter-bar-v2-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-v2-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-fbv2-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], addFilterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addFilterLabel", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }] } });
+
+/** ************************
+ * 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, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+        this.inputType = input('numeric', ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
+        this.inputIndices = computed(() => {
+            return Array.from({ length: this.length() }, (_, i) => {
+                return '';
+            });
+        }, ...(ngDevMode ? [{ debugName: "inputIndices" }] : /* istanbul ignore next */ []));
+        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');
@@ -8679,209 +10476,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyPassNumberComponent {
-    get isDisabledNumbers() {
-        return this.selected?.length === 4;
-    }
-    get isDisabledClear() {
-        return this.selected?.length === 0;
-    }
-    get id() {
-        return this._id;
-    }
-    set id(value) {
-        this._id = value || this._uid;
-    }
-    constructor() {
-        this._uid = inject(IdGenerator).getId('monkey-pass-number-');
-        this.selected = [];
-        this.onChange = output();
-        // eslint-disable-next-line no-self-assign
-        this.id = this.id;
-    }
-    clear() {
-        this.selected = [];
-        this.onChange.emit(this.selected);
-    }
-    onPress(pin) {
-        if (this.selected.length < 4) {
-            this.selected.push(pin);
-            this.onChange.emit(this.selected);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyPassNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyPassNumberComponent, isStandalone: true, selector: "monkey-pass-number", inputs: { disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pass-number" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: `
-    <div class="pin-selected">
-      @for (input of [0, 1, 2, 3]; track input) {
-        <div class="pin-input">
-          {{ selected[input] }}
-        </div>
-      }
-    </div>
-    <div class="grid">
-      @for (pin of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track pin) {
-        <monkey-button
-          size="lg"
-          (click)="onPress(pin)"
-          [disabled]="isDisabledNumbers || disabled"
-          color="black"
-        >
-          {{ pin }}
-        </monkey-button>
-      }
-      <div></div>
-      <monkey-button
-        size="lg"
-        (click)="onPress(0)"
-        [disabled]="isDisabledNumbers || disabled"
-        color="black"
-      >
-        0
-      </monkey-button>
-      <monkey-button
-        size="lg"
-        type="secondary"
-        (click)="clear()"
-        [disabled]="isDisabledClear || disabled"
-      >
-        <i class="mk-i mk-i-delete"></i>
-      </monkey-button>
-    </div>
-  `, isInline: true, styles: [":host{display:flex;width:100%;max-width:250px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyPassNumberComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-pass-number', imports: [MonkeyButtonComponent], template: `
-    <div class="pin-selected">
-      @for (input of [0, 1, 2, 3]; track input) {
-        <div class="pin-input">
-          {{ selected[input] }}
-        </div>
-      }
-    </div>
-    <div class="grid">
-      @for (pin of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track pin) {
-        <monkey-button
-          size="lg"
-          (click)="onPress(pin)"
-          [disabled]="isDisabledNumbers || disabled"
-          color="black"
-        >
-          {{ pin }}
-        </monkey-button>
-      }
-      <div></div>
-      <monkey-button
-        size="lg"
-        (click)="onPress(0)"
-        [disabled]="isDisabledNumbers || disabled"
-        color="black"
-      >
-        0
-      </monkey-button>
-      <monkey-button
-        size="lg"
-        type="secondary"
-        (click)="clear()"
-        [disabled]="isDisabledClear || disabled"
-      >
-        <i class="mk-i mk-i-delete"></i>
-      </monkey-button>
-    </div>
-  `, host: {
-                        'data-testid': 'monkey-pass-number',
-                        '[attr.id]': 'id',
-                        '[id]': 'id'
-                    }, styles: [":host{display:flex;width:100%;max-width:250px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{
-                type: Input
-            }], onChange: [{ type: i0.Output, args: ["onChange"] }], id: [{
-                type: Input
-            }] } });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyPassSecretNumberComponent {
-    get id() {
-        return this._id;
-    }
-    set id(value) {
-        this._id = value || this._uid;
-    }
+class MonkeyPassNumberComponent {
     get isDisabledNumbers() {
         return this.selected?.length === 4;
     }
     get isDisabledClear() {
         return this.selected?.length === 0;
     }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
     constructor() {
-        this._uid = inject(IdGenerator).getId('monkey-pass-secret-number-');
-        this.orLabel = inject(MonkeyDictionaryService).get('OR');
-        this.pins = [];
+        this._uid = inject(IdGenerator).getId('monkey-pass-number-');
         this.selected = [];
         this.onChange = output();
         // eslint-disable-next-line no-self-assign
         this.id = this.id;
     }
-    ngOnInit() {
-        const qtd = 10;
-        const pinPasswords = shuffle(new Array(qtd).fill(qtd).map((value, i) => {
-            return (value * i) / qtd;
-        }));
-        this.pins = pinPasswords
-            .map((value, index) => {
-            return {
-                first: value,
-                last: pinPasswords[pinPasswords.length - index - 1]
-            };
-        })
-            .slice(0, 5);
-    }
     clear() {
         this.selected = [];
-        this.onChange.emit(this.getPinPassword());
-    }
-    getPinPassword() {
-        const result = {
-            passNumber1: '',
-            passNumber2: '',
-            passNumber3: '',
-            passNumber4: ''
-        };
-        this.selected.forEach((value, index) => {
-            result[`passNumber${index + 1}`] = value;
-        });
-        return result;
+        this.onChange.emit(this.selected);
     }
     onPress(pin) {
         if (this.selected.length < 4) {
-            this.selected.push(`${pin.first}${pin.last}`);
-            this.onChange.emit(this.getPinPassword());
+            this.selected.push(pin);
+            this.onChange.emit(this.selected);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyPassSecretNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyPassSecretNumberComponent, isStandalone: true, selector: "monkey-pass-secret-number", inputs: { disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pass-secret-number" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyPassNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyPassNumberComponent, isStandalone: true, selector: "monkey-pass-number", inputs: { disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pass-number" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: `
     <div class="pin-selected">
       @for (input of [0, 1, 2, 3]; track input) {
-        <div class="pin-input" [class.filled]="selected[input]"></div>
+        <div class="pin-input">
+          {{ selected[input] }}
+        </div>
       }
     </div>
     <div class="grid">
-      @for (pin of pins; track pin) {
+      @for (pin of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track pin) {
         <monkey-button
           size="lg"
           (click)="onPress(pin)"
           [disabled]="isDisabledNumbers || disabled"
           color="black"
         >
-          {{ pin.first }} {{ orLabel | async }} {{ pin.last }}
+          {{ pin }}
         </monkey-button>
       }
+      <div></div>
+      <monkey-button
+        size="lg"
+        (click)="onPress(0)"
+        [disabled]="isDisabledNumbers || disabled"
+        color="black"
+      >
+        0
+      </monkey-button>
       <monkey-button
-        data-testid="clear-button"
         size="lg"
         type="secondary"
         (click)="clear()"
@@ -8890,29 +10544,39 @@ class MonkeyPassSecretNumberComponent {
         <i class="mk-i mk-i-delete"></i>
       </monkey-button>
     </div>
-  `, isInline: true, styles: [":host{display:flex;width:100%;max-width:250px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+  `, isInline: true, styles: [":host{display:flex;width:100%;max-width:250px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyPassSecretNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyPassNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-pass-secret-number', imports: [AsyncPipe, MonkeyButtonComponent], template: `
+            args: [{ selector: 'monkey-pass-number', imports: [MonkeyButtonComponent], template: `
     <div class="pin-selected">
       @for (input of [0, 1, 2, 3]; track input) {
-        <div class="pin-input" [class.filled]="selected[input]"></div>
+        <div class="pin-input">
+          {{ selected[input] }}
+        </div>
       }
     </div>
     <div class="grid">
-      @for (pin of pins; track pin) {
+      @for (pin of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track pin) {
         <monkey-button
           size="lg"
           (click)="onPress(pin)"
           [disabled]="isDisabledNumbers || disabled"
           color="black"
         >
-          {{ pin.first }} {{ orLabel | async }} {{ pin.last }}
+          {{ pin }}
         </monkey-button>
       }
+      <div></div>
+      <monkey-button
+        size="lg"
+        (click)="onPress(0)"
+        [disabled]="isDisabledNumbers || disabled"
+        color="black"
+      >
+        0
+      </monkey-button>
       <monkey-button
-        data-testid="clear-button"
         size="lg"
         type="secondary"
         (click)="clear()"
@@ -8922,7 +10586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
       </monkey-button>
     </div>
   `, host: {
-                        'data-testid': 'monkey-pass-secret-number',
+                        'data-testid': 'monkey-pass-number',
                         '[attr.id]': 'id',
                         '[id]': 'id'
                     }, styles: [":host{display:flex;width:100%;max-width:250px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"] }]
@@ -8937,231 +10601,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * 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
- ************************* */
-/**
- * Shortest the thumb may get, in px — matches the `--mecx-spaces-medium`
- * floor in the stylesheet. A very long list would otherwise give a 2px thumb,
- * too small to grab.
- */
-const MIN_THUMB = 24;
-/**
- * A DRAWN scrollbar, not the native one styled — a native scrollbar can't
- * live outside the element that scrolls (e.g. below a table's rows, next to
- * its footer), and cross-browser track styling (radius, border) is
- * inconsistent enough that matching a design exactly isn't reliable with
- * `::-webkit-scrollbar`/`scrollbar-color` alone.
- *
- * It does NOT replace real scrolling: `target` keeps its own
- * `overflow: auto`, so keyboard, wheel and trackpad scrolling all keep
- * working — this is a draggable mirror drawn on top. That's also why it's
- * `aria-hidden`: a screen reader user scrolls the real region, and a second
- * widget announcing the same position would only add noise.
- */
-class MonkeyScrollbarComponent {
-    constructor() {
-        this._zone = inject(NgZone);
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        /** The element that actually scrolls. */
-        this.target = input.required(...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
-        this.trackEl = viewChild.required('track');
-        /** Scrollable length of the content, in px. */
-        this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
-        /** Visible length of the viewport, in px. */
-        this.visible = signal(0, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        /** How far the target is scrolled, in px. */
-        this.scrolled = signal(0, ...(ngDevMode ? [{ debugName: "scrolled" }] : /* istanbul ignore next */ []));
-        /** Length of the track the thumb slides along, in px. */
-        this.trackLength = signal(0, ...(ngDevMode ? [{ debugName: "trackLength" }] : /* istanbul ignore next */ []));
-        this.scrollable = computed(() => this.total() - this.visible() > 1, ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
-        this.thumbSize = computed(() => {
-            const total = this.total();
-            return `${total > 0 ? Math.min(1, this.visible() / total) * 100 : 100}%`;
-        }, ...(ngDevMode ? [{ debugName: "thumbSize" }] : /* istanbul ignore next */ []));
-        /**
-         * A px distance, applied as a `translate`, not as `left`/`top`: moving the
-         * thumb then costs a composited transform instead of a layout pass on every
-         * scroll frame. It has to be px rather than a percentage of the thumb
-         * because the thumb has a minimum length — once that kicks in, a
-         * percentage of its own (clamped) size no longer maps to track distance.
-         */
-        this.thumbOffset = computed(() => {
-            const total = this.total();
-            const visible = this.visible();
-            const track = this.trackLength();
-            if (total <= 0 || track <= 0)
-                return '0px';
-            const thumb = Math.max(MIN_THUMB, (visible / total) * track);
-            const free = Math.max(0, track - thumb);
-            const progress = Math.min(1, Math.max(0, this.scrolled() / Math.max(1, total - visible)));
-            return `${free * progress}px`;
-        }, ...(ngDevMode ? [{ debugName: "thumbOffset" }] : /* istanbul ignore next */ []));
-        /** Pending animation frame, 0 when none is queued. */
-        this.frame = 0;
-        /** Whether the cached lengths need re-reading on the next frame. */
-        this.sizeStale = true;
-        this.onScroll = () => this.schedule();
-        /** Drag state. `null` = nobody is dragging. */
-        this.drag = null;
-        effect((onCleanup) => {
-            const target = this.target();
-            this.attach(target);
-            onCleanup(() => this.detach());
-        });
-    }
-    ngOnDestroy() {
-        this.detach();
-    }
-    attach(target) {
-        this.detach();
-        this.observedTarget = target;
-        // Outside the Angular zone: a zone-patched 'scroll' listener costs a full
-        // global change-detection pass per event. The signals `measure()` writes
-        // still schedule change detection by themselves.
-        this._zone.runOutsideAngular(() => {
-            target.addEventListener('scroll', this.onScroll, { passive: true });
-            // The target AND its content: the bar should disappear when the content
-            // shrinks, not only when the container itself is resized — a column
-            // removed from the table doesn't resize the scrolling wrapper, only how
-            // far it needs to scroll. The track too, so the thumb's px offset stays
-            // right when the bar itself changes width.
-            this.resizeObserver = new ResizeObserver(() => this.schedule(true));
-            this.resizeObserver.observe(target);
-            this.resizeObserver.observe(this.trackEl().nativeElement);
-            Array.from(target.children).forEach((child) => this.resizeObserver?.observe(child));
-        });
-        this.sizeStale = true;
-        this.measure();
-    }
-    detach() {
-        this.observedTarget?.removeEventListener('scroll', this.onScroll);
-        this.observedTarget = undefined;
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = undefined;
-        if (this.frame)
-            cancelAnimationFrame(this.frame);
-        this.frame = 0;
-    }
-    /**
-     * Scroll events fire far more often than the screen refreshes, and each
-     * measurement reads layout. Coalescing to one read per frame is what keeps
-     * a long table from thrashing layout while it scrolls.
-     */
-    schedule(resized = false) {
-        if (resized)
-            this.sizeStale = true;
-        if (this.frame)
-            return;
-        this.frame = this._zone.runOutsideAngular(() => {
-            return requestAnimationFrame(() => {
-                this.frame = 0;
-                this.measure();
-            });
-        });
-    }
-    measure() {
-        const target = this.observedTarget;
-        if (!target)
-            return;
-        const horizontal = this.orientation() === 'horizontal';
-        // Only the scroll offset changes while scrolling; the lengths can't, so
-        // re-reading them per frame would force layout for nothing.
-        if (this.sizeStale) {
-            this.sizeStale = false;
-            const track = this.trackEl().nativeElement;
-            this.total.set(horizontal ? target.scrollWidth : target.scrollHeight);
-            this.visible.set(horizontal ? target.clientWidth : target.clientHeight);
-            this.trackLength.set(horizontal ? track.clientWidth : track.clientHeight);
-        }
-        this.scrolled.set(horizontal ? target.scrollLeft : target.scrollTop);
+class MonkeyPassSecretNumberComponent {
+    get id() {
+        return this._id;
     }
-    onPointerDown(event) {
-        const target = this.observedTarget;
-        if (!target || !this.scrollable())
-            return;
-        const horizontal = this.orientation() === 'horizontal';
-        event.preventDefault();
-        event.target.setPointerCapture(event.pointerId);
-        this.drag = {
-            start: horizontal ? event.clientX : event.clientY,
-            initialScroll: horizontal ? target.scrollLeft : target.scrollTop
-        };
+    set id(value) {
+        this._id = value || this._uid;
     }
-    onPointerMove(event) {
-        const target = this.observedTarget;
-        if (!this.drag || !target)
-            return;
-        const horizontal = this.orientation() === 'horizontal';
-        const track = this.trackEl().nativeElement.getBoundingClientRect();
-        const trackLength = horizontal ? track.width : track.height;
-        if (trackLength <= 0)
-            return;
-        // One thumb pixel is worth (total / track) content pixels — without this
-        // conversion, dragging moves at the wrong speed and the thumb drifts
-        // away from the pointer.
-        const total = horizontal ? target.scrollWidth : target.scrollHeight;
-        const moved = (horizontal ? event.clientX : event.clientY) - this.drag.start;
-        const destination = this.drag.initialScroll + moved * (total / trackLength);
-        if (horizontal)
-            target.scrollLeft = destination;
-        else
-            target.scrollTop = destination;
+    get isDisabledNumbers() {
+        return this.selected?.length === 4;
     }
-    onPointerUp(event) {
-        if (!this.drag)
-            return;
-        this.drag = null;
-        event.target.releasePointerCapture?.(event.pointerId);
+    get isDisabledClear() {
+        return this.selected?.length === 0;
     }
-    /** Clicking the track outside the thumb jumps the content there, centered on the click. */
-    onTrackPointerDown(event) {
-        const target = this.observedTarget;
-        if (!target || !this.scrollable() || this.drag)
-            return;
-        const horizontal = this.orientation() === 'horizontal';
-        const track = this.trackEl().nativeElement.getBoundingClientRect();
-        const length = horizontal ? track.width : track.height;
-        if (length <= 0)
-            return;
-        const point = horizontal ? event.clientX - track.left : event.clientY - track.top;
-        const total = horizontal ? target.scrollWidth : target.scrollHeight;
-        const visible = horizontal ? target.clientWidth : target.clientHeight;
-        const destination = (point / length) * total - visible / 2;
-        if (horizontal)
-            target.scrollLeft = destination;
-        else
-            target.scrollTop = destination;
+    constructor() {
+        this._uid = inject(IdGenerator).getId('monkey-pass-secret-number-');
+        this.orLabel = inject(MonkeyDictionaryService).get('OR');
+        this.pins = [];
+        this.selected = [];
+        this.onChange = output();
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
     }
-    /**
-     * Manual re-measure. Public on purpose: the automatic triggers (scroll,
-     * ResizeObserver on the target and its children) cover what the browser
-     * reports on its own — this is the escape hatch for what it doesn't, e.g.
-     * a target swapped out from under the component.
-     */
-    remeasure() {
-        this.sizeStale = true;
-        this.measure();
+    ngOnInit() {
+        const qtd = 10;
+        const pinPasswords = shuffle(new Array(qtd).fill(qtd).map((value, i) => {
+            return (value * i) / qtd;
+        }));
+        this.pins = pinPasswords
+            .map((value, index) => {
+            return {
+                first: value,
+                last: pinPasswords[pinPasswords.length - index - 1]
+            };
+        })
+            .slice(0, 5);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: MonkeyScrollbarComponent, isStandalone: true, selector: "monkey-scrollbar", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class.mecx-scrollbar--horizontal": "orientation() === 'horizontal'", "class.mecx-scrollbar--vertical": "orientation() === 'vertical'", "class.mecx-scrollbar--small": "size() === 'small'", "class.mecx-scrollbar--medium": "size() === 'medium'", "class.mecx-scrollbar--inert": "!scrollable()" }, classAttribute: "mecx-scrollbar" }, viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #track class=\"mecx-scrollbar-track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <div\n    class=\"mecx-scrollbar-thumb\"\n    [style.--mecx-scrollbar-thumb-size]=\"thumbSize()\"\n    [style.--mecx-scrollbar-thumb-offset]=\"thumbOffset()\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPointerUp($event)\"\n    (pointercancel)=\"onPointerUp($event)\"\n  ></div>\n</div>\n", styles: [".mecx-scrollbar{box-sizing:border-box;display:block;flex-shrink:0;background:var(--mecx-color-gray-100);border:1px solid var(--mecx-color-gray-500);border-radius:800px}.mecx-scrollbar--inert{display:none}.mecx-scrollbar-track{position:relative}.mecx-scrollbar-thumb{position:absolute;background:var(--mecx-color-gray-900);border-radius:800px;cursor:grab;touch-action:none;will-change:transform}.mecx-scrollbar-thumb:active{cursor:grabbing}.mecx-scrollbar--medium{--mecx-scrollbar-gap: 4px}.mecx-scrollbar--small{--mecx-scrollbar-gap: 0px}.mecx-scrollbar--horizontal{width:100%}.mecx-scrollbar--horizontal .mecx-scrollbar-track{width:100%;height:calc(6px + 2 * var(--mecx-scrollbar-gap))}.mecx-scrollbar--horizontal .mecx-scrollbar-thumb{inset-block:var(--mecx-scrollbar-gap);left:0;width:var(--mecx-scrollbar-thumb-size);min-width:var(--mecx-spaces-medium);transform:translate(var(--mecx-scrollbar-thumb-offset, 0px))}.mecx-scrollbar--vertical{align-self:stretch}.mecx-scrollbar--vertical .mecx-scrollbar-track{width:calc(6px + 2 * var(--mecx-scrollbar-gap));height:100%}.mecx-scrollbar--vertical .mecx-scrollbar-thumb{inset-inline:var(--mecx-scrollbar-gap);top:0;height:var(--mecx-scrollbar-thumb-size);min-height:var(--mecx-spaces-medium);transform:translateY(var(--mecx-scrollbar-thumb-offset, 0px))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    clear() {
+        this.selected = [];
+        this.onChange.emit(this.getPinPassword());
+    }
+    getPinPassword() {
+        const result = {
+            passNumber1: '',
+            passNumber2: '',
+            passNumber3: '',
+            passNumber4: ''
+        };
+        this.selected.forEach((value, index) => {
+            result[`passNumber${index + 1}`] = value;
+        });
+        return result;
+    }
+    onPress(pin) {
+        if (this.selected.length < 4) {
+            this.selected.push(`${pin.first}${pin.last}`);
+            this.onChange.emit(this.getPinPassword());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyPassSecretNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyPassSecretNumberComponent, isStandalone: true, selector: "monkey-pass-secret-number", inputs: { disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pass-secret-number" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: `
+    <div class="pin-selected">
+      @for (input of [0, 1, 2, 3]; track input) {
+        <div class="pin-input" [class.filled]="selected[input]"></div>
+      }
+    </div>
+    <div class="grid">
+      @for (pin of pins; track pin) {
+        <monkey-button
+          size="lg"
+          (click)="onPress(pin)"
+          [disabled]="isDisabledNumbers || disabled"
+          color="black"
+        >
+          {{ pin.first }} {{ orLabel | async }} {{ pin.last }}
+        </monkey-button>
+      }
+      <monkey-button
+        data-testid="clear-button"
+        size="lg"
+        type="secondary"
+        (click)="clear()"
+        [disabled]="isDisabledClear || disabled"
+      >
+        <i class="mk-i mk-i-delete"></i>
+      </monkey-button>
+    </div>
+  `, isInline: true, styles: [":host{display:flex;width:100%;max-width:250px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyScrollbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyPassSecretNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-scrollbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'mecx-scrollbar',
-                        'aria-hidden': 'true',
-                        '[class.mecx-scrollbar--horizontal]': "orientation() === 'horizontal'",
-                        '[class.mecx-scrollbar--vertical]': "orientation() === 'vertical'",
-                        '[class.mecx-scrollbar--small]': "size() === 'small'",
-                        '[class.mecx-scrollbar--medium]': "size() === 'medium'",
-                        '[class.mecx-scrollbar--inert]': '!scrollable()'
-                    }, template: "<div #track class=\"mecx-scrollbar-track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <div\n    class=\"mecx-scrollbar-thumb\"\n    [style.--mecx-scrollbar-thumb-size]=\"thumbSize()\"\n    [style.--mecx-scrollbar-thumb-offset]=\"thumbOffset()\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPointerUp($event)\"\n    (pointercancel)=\"onPointerUp($event)\"\n  ></div>\n</div>\n", styles: [".mecx-scrollbar{box-sizing:border-box;display:block;flex-shrink:0;background:var(--mecx-color-gray-100);border:1px solid var(--mecx-color-gray-500);border-radius:800px}.mecx-scrollbar--inert{display:none}.mecx-scrollbar-track{position:relative}.mecx-scrollbar-thumb{position:absolute;background:var(--mecx-color-gray-900);border-radius:800px;cursor:grab;touch-action:none;will-change:transform}.mecx-scrollbar-thumb:active{cursor:grabbing}.mecx-scrollbar--medium{--mecx-scrollbar-gap: 4px}.mecx-scrollbar--small{--mecx-scrollbar-gap: 0px}.mecx-scrollbar--horizontal{width:100%}.mecx-scrollbar--horizontal .mecx-scrollbar-track{width:100%;height:calc(6px + 2 * var(--mecx-scrollbar-gap))}.mecx-scrollbar--horizontal .mecx-scrollbar-thumb{inset-block:var(--mecx-scrollbar-gap);left:0;width:var(--mecx-scrollbar-thumb-size);min-width:var(--mecx-spaces-medium);transform:translate(var(--mecx-scrollbar-thumb-offset, 0px))}.mecx-scrollbar--vertical{align-self:stretch}.mecx-scrollbar--vertical .mecx-scrollbar-track{width:calc(6px + 2 * var(--mecx-scrollbar-gap));height:100%}.mecx-scrollbar--vertical .mecx-scrollbar-thumb{inset-inline:var(--mecx-scrollbar-gap);top:0;height:var(--mecx-scrollbar-thumb-size);min-height:var(--mecx-spaces-medium);transform:translateY(var(--mecx-scrollbar-thumb-offset, 0px))}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], trackEl: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+            args: [{ selector: 'monkey-pass-secret-number', imports: [AsyncPipe, MonkeyButtonComponent], template: `
+    <div class="pin-selected">
+      @for (input of [0, 1, 2, 3]; track input) {
+        <div class="pin-input" [class.filled]="selected[input]"></div>
+      }
+    </div>
+    <div class="grid">
+      @for (pin of pins; track pin) {
+        <monkey-button
+          size="lg"
+          (click)="onPress(pin)"
+          [disabled]="isDisabledNumbers || disabled"
+          color="black"
+        >
+          {{ pin.first }} {{ orLabel | async }} {{ pin.last }}
+        </monkey-button>
+      }
+      <monkey-button
+        data-testid="clear-button"
+        size="lg"
+        type="secondary"
+        (click)="clear()"
+        [disabled]="isDisabledClear || disabled"
+      >
+        <i class="mk-i mk-i-delete"></i>
+      </monkey-button>
+    </div>
+  `, host: {
+                        'data-testid': 'monkey-pass-secret-number',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, styles: [":host{display:flex;width:100%;max-width:250px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input
+            }], onChange: [{ type: i0.Output, args: ["onChange"] }], id: [{
+                type: Input
+            }] } });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
@@ -9883,7 +11449,7 @@ const DEFAULT_MAX_VISIBLE_ROWS = 20;
 const DEFAULT_SKELETON_ROWS = 5;
 const WINDOW_BUFFER = 6;
 const VIRTUAL_SCREENFULS = 3;
-const VIRTUAL_MIN_ROWS = 100;
+const VIRTUAL_MIN_ROWS = 22;
 class MonkeyTableComponent {
     constructor() {
         this.virtualStrategy = new MonkeyTableVirtualScroll();
@@ -9919,7 +11485,16 @@ class MonkeyTableComponent {
                 ? 'left'
                 : 'none';
             const control = (kind, px, pinned) => {
-                return { kind, key: `__${kind}`, column: null, width: `${px}px`, px, pinned, offset: 0, align: 'start' };
+                return {
+                    kind,
+                    key: `__${kind}`,
+                    column: null,
+                    width: `${px}px`,
+                    px,
+                    pinned,
+                    offset: 0,
+                    align: 'start'
+                };
             };
             const slots = [];
             if (this.selectionMode() !== 'none') {
@@ -10720,81 +12295,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 }]
         }] });
 
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyToastComponent {
-    get id() {
-        return this._id;
-    }
-    set id(value) {
-        this._id = value || this._uid;
-    }
-    get class() {
-        return this.type;
-    }
-    constructor(host) {
-        this.host = host;
-        this.icon = 'close-circle';
-        this.type = 'default';
-        this.isClosable = false;
-        this.onActionClick = new EventEmitter();
-        this.onClose = new EventEmitter();
-        this._uid = inject(IdGenerator).getId('monkey-toast-');
-        // eslint-disable-next-line no-self-assign
-        this.id = this.id;
-    }
-    close() {
-        this.host.nativeElement.classList.add('closed');
-    }
-    onAnimationEnd(event) {
-        if (event.animationName.includes('fade-out')) {
-            this.onClose.emit(this.id);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyToastComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyToastComponent, isStandalone: true, selector: "monkey-toast", inputs: { message: "message", icon: "icon", type: "type", isClosable: ["isClosable", "isClosable", booleanAttribute], actionLabel: "actionLabel", actionIcon: "actionIcon", id: "id" }, outputs: { onActionClick: "onActionClick", onClose: "onClose" }, host: { attributes: { "data-testid": "monkey-toast" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"monkey-toast-content\">\r\n  @if (icon) {\r\n    <i class=\"mk-i mk-i-{{icon}} lg\"></i>\r\n  }\r\n  <div>\r\n    <div class=\"monkey-toast-message\">\r\n      {{ message }}\r\n    </div>\r\n    @if (actionLabel) {\r\n      <div class=\"monkey-toast-action\">\r\n        <monkey-button\r\n          class=\"monkey-toast-btn-action\"\r\n          type=\"tertiary\"\r\n          size=\"sm\"\r\n          (click)=\"onActionClick.emit(id)\"\r\n        >\r\n          {{ actionLabel }}\r\n          @if (actionIcon) {\r\n            <i class=\"mk-i mk-i-{{actionIcon}} xs\" first></i>\r\n          }\r\n        </monkey-button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n@if (isClosable) {\r\n  <div class=\"monkey-toast-divider\"></div>\r\n  <div class=\"monkey-toast-close\" (click)=\"close()\">\r\n    <util-icon name=\"clear\" />\r\n  </div>\r\n}\r\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:var(--mecx-spaces-medium);padding:var(--mecx-spaces-medium);box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-lh-24);font-size:var(--mecx-fs-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white)}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;cursor:pointer}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-700)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyToastComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-toast', imports: [MonkeyButtonComponent, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
-                        'data-testid': 'monkey-toast',
-                        '(animationend)': 'onAnimationEnd($event)',
-                        '[attr.id]': 'id',
-                        '[id]': 'id'
-                    }, template: "<div class=\"monkey-toast-content\">\r\n  @if (icon) {\r\n    <i class=\"mk-i mk-i-{{icon}} lg\"></i>\r\n  }\r\n  <div>\r\n    <div class=\"monkey-toast-message\">\r\n      {{ message }}\r\n    </div>\r\n    @if (actionLabel) {\r\n      <div class=\"monkey-toast-action\">\r\n        <monkey-button\r\n          class=\"monkey-toast-btn-action\"\r\n          type=\"tertiary\"\r\n          size=\"sm\"\r\n          (click)=\"onActionClick.emit(id)\"\r\n        >\r\n          {{ actionLabel }}\r\n          @if (actionIcon) {\r\n            <i class=\"mk-i mk-i-{{actionIcon}} xs\" first></i>\r\n          }\r\n        </monkey-button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n@if (isClosable) {\r\n  <div class=\"monkey-toast-divider\"></div>\r\n  <div class=\"monkey-toast-close\" (click)=\"close()\">\r\n    <util-icon name=\"clear\" />\r\n  </div>\r\n}\r\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:var(--mecx-spaces-medium);padding:var(--mecx-spaces-medium);box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-lh-24);font-size:var(--mecx-fs-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white)}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;cursor:pointer}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-700)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { message: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], isClosable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], actionLabel: [{
-                type: Input
-            }], actionIcon: [{
-                type: Input
-            }], onActionClick: [{
-                type: Output
-            }], onClose: [{
-                type: Output
-            }], id: [{
-                type: Input
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/** ************************
- * 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
@@ -11521,5 +13021,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyComplexFilterBarComponent, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFilterBarService, MonkeyFormDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeyScrollbarComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableCellDirective, MonkeyTableColumnDirective, MonkeyTableComponent, MonkeyTableEmptyDirective, MonkeyTableHeaderCellDirective, MonkeyTableLoadingDirective, MonkeyTableRowDetailDirective, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, addKeys, ariaSortOf, getCurrencySymbol, indexAtOffset, injectTokenWithWarning, interpolate, mergeOrder, offsetOfIndex, removeKeys, sameColumnState, selectionState, sortByOrder, toPx, toggleKey, totalHeight };
+export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyComplexFilterBarComponent, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFilterBarService, MonkeyFilterBarV2Component, MonkeyFilterChipComponent, MonkeyFilterMenuComponent, MonkeyFilterMenuItemComponent, MonkeyFilterSegmentComponent, MonkeyFilterTriggerComponent, MonkeyFormDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeyScrollbarComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableCellDirective, MonkeyTableColumnDirective, MonkeyTableComponent, MonkeyTableEmptyDirective, MonkeyTableHeaderCellDirective, MonkeyTableLoadingDirective, MonkeyTableRowDetailDirective, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, addKeys, ariaSortOf, getCurrencySymbol, indexAtOffset, injectTokenWithWarning, interpolate, mergeOrder, offsetOfIndex, removeKeys, sameColumnState, selectionState, sortByOrder, toPx, toggleKey, totalHeight };
 //# sourceMappingURL=monkey-style-guide.mjs.map