monkey-style-guide 21.2.17 → 21.2.19

package/fesm2022/monkey-style-guide.mjs

@@ -6497,6 +6497,10 @@ class MonkeyFilterBarComponent {
     constructor() {
         this._hostEl = inject(ElementRef);
         this._injector = inject(Injector);
+        this._currencyCode = inject(DEFAULT_CURRENCY_CODE);
+        this._localeId = inject(LOCALE_ID);
+        this._currencyPipe = inject(CurrencyPipe);
+        this._scrollbar = viewChild(MonkeyScrollbarComponent, ...(ngDevMode ? [{ debugName: "_scrollbar" }] : /* istanbul ignore next */ []));
         this._text = toSignal(inject(MonkeyDictionaryService).get('FILTER-BAR'));
         this._commitTimer = null;
         this._reported = signal([], ...(ngDevMode ? [{ debugName: "_reported" }] : /* istanbul ignore next */ []));
@@ -6577,6 +6581,7 @@ class MonkeyFilterBarComponent {
                         operands: filter.operands
                     };
                 }));
+                this.scheduleRemeasure();
             });
         });
         effect(() => {
@@ -6687,7 +6692,12 @@ class MonkeyFilterBarComponent {
         }
     }
     money(value) {
-        return value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
+        const currency = this._currencyCode || 'BRL';
+        const amount = this._currencyPipe.transform(value, currency, '', '1.2-2', this._localeId || 'pt-BR');
+        if (amount === null)
+            return '';
+        const symbol = getCurrencySymbol(currency);
+        return symbol ? `${symbol} ${amount}` : amount;
     }
     showDate(iso) {
         if (!iso)
@@ -6799,10 +6809,14 @@ class MonkeyFilterBarComponent {
         afterNextRender(() => {
             if (follow)
                 this.followEnd(container);
+            this._scrollbar()?.remeasure();
             animateFlip(container, before, FROZEN);
             this.immediateTriggerExit.set(false);
         }, { injector: this._injector });
     }
+    scheduleRemeasure() {
+        afterNextRender(() => this._scrollbar()?.remeasure(), { injector: this._injector });
+    }
     operatorLabel(operator) {
         if (!operator)
             return '';
@@ -7041,7 +7055,7 @@ class MonkeyFilterBarComponent {
         this.commit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChange: "onFiltersChange" }, host: { attributes: { "data-testid": "monkey-filter-bar" }, properties: { "class.mecx-filter-bar--disabled": "disabled()" }, classAttribute: "mecx-filter-bar" }, ngImport: i0, template: "<div class=\"mecx-filter-bar-line\">\n  <div #rowEl class=\"mecx-filter-bar-row\">\n    @for (f of rows(); track f.key) {\n      <span\n        class=\"mecx-filter-bar-slot\"\n        [attr.data-flip-id]=\"f.key\"\n        [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\n        animate.leave=\"mecx-filter-bar-slot--leaving\"\n      >\n        <monkey-filter-chip\n          [removeLabel]=\"labels().remove\"\n          [disabled]=\"disabled()\"\n          (onRemove)=\"onRemove(f)\"\n        >\n          <monkey-filter-segment\n            [icon]=\"f.icon ?? null\"\n            [text]=\"f.label\"\n            [disabled]=\"disabled()\"\n            [open]=\"isOpen(f.key, 'category')\"\n            (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\n          >\n            @if (isOpen(f.key, 'category')) {\n              <monkey-filter-menu\n                class=\"mecx-filter-bar-menu-categories\"\n                [showSearch]=\"true\"\n                [searchPlaceholder]=\"labels().search\"\n                (onSearchChange)=\"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                    (onItemClick)=\"onChangeCategory(f, i)\"\n                  />\n                }\n              </monkey-filter-menu>\n            }\n          </monkey-filter-segment>\n          <monkey-filter-segment\n            [placeholder]=\"labels().selectCondition\"\n            [text]=\"operatorLabel(f.condition)\"\n            [disabled]=\"disabled()\"\n            [open]=\"isOpen(f.key, 'condition')\"\n            (onOpenChange)=\"onConditionOpenChange(f, $event)\"\n          >\n            @if (isOpen(f.key, 'condition')) {\n              <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\n                @for (c of conditionsFor(f); track c) {\n                  <monkey-filter-menu-item\n                    [label]=\"operatorLabel(c)\"\n                    [selected]=\"c === f.condition\"\n                    (onItemClick)=\"onSelectCondition(f, c)\"\n                  />\n                }\n              </monkey-filter-menu>\n            }\n          </monkey-filter-segment>\n          @if (hasValueSegment(f)) {\n            <monkey-filter-segment\n              [placeholder]=\"valuePlaceholder(f)\"\n              [text]=\"displayOf(f)\"\n              [disabled]=\"disabled()\"\n              [open]=\"isOpen(f.key, 'value')\"\n              (onOpenChange)=\"onValueOpenChange(f, $event)\"\n            >\n              @if (isOpen(f.key, 'value')) {\n                @switch (panelFor(f)) {\n                  @case ('status') {\n                    <monkey-filter-menu class=\"mecx-filter-bar-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                          (onItemClick)=\"onToggleStatus(s.value)\"\n                        />\n                      }\n                      <div class=\"mecx-filter-bar-panel-actions\">\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                          {{ labels().confirm }}\n                        </monkey-button>\n                      </div>\n                    </monkey-filter-menu>\n                  }\n\n                  @case ('date-day') {\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n                      <div class=\"mecx-filter-bar-field\">\n                        <label class=\"mecx-filter-bar-field-row\">\n                          <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\n                          <monkey-form-field size=\"sm\" noFooterSpace>\n                            <input\n                              type=\"date\"\n                              monkey-input\n                              [(ngModel)]=\"dayValue\"\n                              (keyup.enter)=\"onApply(f)\"\n                            />\n                          </monkey-form-field>\n                        </label>\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                          {{ labels().confirm }}\n                        </monkey-button>\n                      </div>\n                    </monkey-filter-menu>\n                  }\n\n                  @case ('date-range') {\n                    @if (calendarOpen() === f.key) {\n                      <monkey-date-range\n                        class=\"mecx-filter-bar-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                        @for (shortcut of dateShortcuts(); track shortcut.key) {\n                          <monkey-filter-menu-item\n                            [label]=\"shortcut.label\"\n                            (onItemClick)=\"onQuickDate(f, shortcut.key)\"\n                          />\n                        }\n                      </monkey-filter-menu>\n                    }\n                  }\n\n                  @default {\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n                      <div class=\"mecx-filter-bar-field\">\n                        @if (f.type === 'currency') {\n                          <label class=\"mecx-filter-bar-field-row\">\n                            <span class=\"mecx-filter-bar-field-label\">\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\n                            </span>\n                            <monkey-form-field size=\"sm\" noFooterSpace>\n                              <input\n                                type=\"text\"\n                                monkey-input-currency\n                                [(ngModel)]=\"currencyValue\"\n                                (keyup.enter)=\"onApply(f)\"\n                              />\n                            </monkey-form-field>\n                          </label>\n                          @if (isRange(f)) {\n                            <label class=\"mecx-filter-bar-field-row\">\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\n                              <monkey-form-field size=\"sm\" noFooterSpace>\n                                <input\n                                  type=\"text\"\n                                  monkey-input-currency\n                                  [(ngModel)]=\"currencyValue2\"\n                                  (keyup.enter)=\"onApply(f)\"\n                                />\n                              </monkey-form-field>\n                            </label>\n                          }\n                        } @else {\n                          <label class=\"mecx-filter-bar-field-row\">\n                            <span class=\"mecx-filter-bar-field-label\">\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\n                            </span>\n                            <monkey-form-field size=\"sm\" noFooterSpace>\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                          </label>\n                          @if (isRange(f)) {\n                            <label class=\"mecx-filter-bar-field-row\">\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\n                              <monkey-form-field size=\"sm\" noFooterSpace>\n                                <input\n                                  type=\"text\"\n                                  monkey-input\n                                  [(ngModel)]=\"textValue2\"\n                                  (keyup.enter)=\"onApply(f)\"\n                                />\n                              </monkey-form-field>\n                            </label>\n                          }\n                        }\n\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                          {{ labels().confirm }}\n                        </monkey-button>\n                      </div>\n                    </monkey-filter-menu>\n                  }\n                }\n              }\n            </monkey-filter-segment>\n          }\n        </monkey-filter-chip>\n      </span>\n    }\n\n    @if (canAddFilter()) {\n      <span\n        class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\n        [attr.data-flip-id]=\"triggerFlipId()\"\n      >\n        <monkey-filter-trigger\n          [variant]=\"triggerVariant()\"\n          [icon]=\"triggerIcon()\"\n          [text]=\"labels().add\"\n          [ariaLabel]=\"labels().addAria\"\n          [disabled]=\"disabled()\"\n          [immediateExit]=\"immediateTriggerExit()\"\n          [open]=\"triggerOpen()\"\n          (onOpenChange)=\"onTriggerOpenChange($event)\"\n        >\n          @if (triggerOpen()) {\n            <monkey-filter-menu\n              class=\"mecx-filter-bar-menu-categories\"\n              [showSearch]=\"true\"\n              [searchPlaceholder]=\"labels().search\"\n              (onSearchChange)=\"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                  (onItemClick)=\"onSelectCategory(i)\"\n                />\n              }\n            </monkey-filter-menu>\n          }\n        </monkey-filter-trigger>\n      </span>\n    }\n  </div>\n  @if (rows().length > 0) {\n    <monkey-scrollbar\n      class=\"mecx-filter-bar-bar\"\n      orientation=\"horizontal\"\n      size=\"small\"\n      [target]=\"rowEl\"\n    />\n  }\n\n  <div class=\"mecx-filter-bar-tail\">\n    @if (rows().length > 0) {\n      <div class=\"mecx-filter-bar-actions\">\n        <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\n          {{ labels().clear }}\n        </monkey-button>\n      </div>\n    }\n\n    <div class=\"mecx-filter-bar-extra\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n@if (rows().length > 0) {\n  <monkey-divider />\n}\n", styles: [".mecx-filter-bar{--mecx-filter-bar-duration-state: .15s;--mecx-filter-bar-duration-enter: .2s;--mecx-filter-bar-duration-exit: .15s;--mecx-filter-bar-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-filter-bar-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-filter-bar-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-filter-bar-scale-unfold: .94;--mecx-filter-bar-travel-anchored: 4px;--mecx-filter-bar-travel-slide: 16px;--mecx-filter-bar-stagger: 25ms;--mecx-filter-bar-control-height: 32px;--mecx-filter-bar-pointer-target: 40px;--mecx-filter-bar-reach: calc((var(--mecx-filter-bar-control-height) - var(--mecx-filter-bar-pointer-target)) / 2);--mecx-filter-bar-radius: 8px;--mecx-filter-bar-radius-item: 4px;--mecx-filter-bar-fade-width: 48px;--mecx-filter-bar-focus-reach: 4px;--mecx-filter-bar-z-raised: 1;--mecx-filter-bar-z-sticky: 2;--mecx-filter-bar-z-menu: 1000}@media(prefers-reduced-motion:reduce){.mecx-filter-bar{--mecx-filter-bar-duration-state: 1ms;--mecx-filter-bar-duration-enter: 1ms;--mecx-filter-bar-duration-exit: 1ms;--mecx-filter-bar-scale-unfold: 1;--mecx-filter-bar-travel-anchored: 0px;--mecx-filter-bar-travel-slide: 0px;--mecx-filter-bar-stagger: 0ms}}.mecx-filter-bar{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-extra{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.mecx-filter-bar-extra:empty{display:none}.mecx-filter-bar-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"row tail\" \"bar bar\";align-items:center;row-gap:8px;width:100%}.mecx-filter-bar-bar{grid-area:bar;min-width:0}.mecx-filter-bar-tail{grid-area:tail;display:flex;align-items:center;min-width:0}.mecx-filter-bar-row{grid-area:row;display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-filter-bar-pointer-target);margin-inline-start:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline:var(--mecx-filter-bar-focus-reach) var(--mecx-filter-bar-fade-width);scroll-padding-inline-start:var(--mecx-filter-bar-focus-reach);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar--disabled .mecx-filter-bar-row{cursor:default}.mecx-filter-bar-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-filter-bar-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-slot-in{0%{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-slot-out{to{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}.mecx-filter-bar-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-slot-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-slot--entering{animation:mecx-filter-bar-slot-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter);position:relative;z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-bar-slot:has(.mecx-filter-segment--open),.mecx-filter-bar-slot:has(.mecx-filter-trigger--open){z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-menu.mecx-filter-bar-menu-categories{width:220px}.mecx-filter-menu.mecx-filter-bar-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-menu-field{width:238px}.mecx-filter-bar-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-field monkey-button,.mecx-filter-bar-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-field-row{display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer}.mecx-filter-bar-field-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px}.mecx-filter-bar-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-panel-actions monkey-button,.mecx-filter-bar-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}@media(max-width:767.98px){.mecx-filter-bar-line{grid-template-columns:minmax(0,1fr);grid-template-areas:\"row\" \"bar\" \"tail\";position:relative}.mecx-filter-bar-slot--trigger{position:sticky;right:0;z-index:var(--mecx-filter-bar-z-sticky)}.mecx-filter-bar-row{margin-inline-end:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline-end:var(--mecx-filter-bar-focus-reach)}.mecx-filter-bar-actions{padding-left:0;align-self:auto;background:none;position:static}.mecx-filter-bar-actions:before{right:var(--mecx-filter-bar-control-height);bottom:auto;height:var(--mecx-filter-bar-pointer-target)}}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "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", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: MonkeyFilterMenuComponent, selector: "monkey-filter-menu", inputs: ["showSearch", "searchPlaceholder", "showScroll", "maxHeight"], outputs: ["onSearchChange"] }, { kind: "component", type: MonkeyFilterMenuItemComponent, selector: "monkey-filter-menu-item", inputs: ["property", "leadIcon", "label", "description", "checked", "selected", "disabled"], outputs: ["onItemClick"] }, { kind: "component", type: MonkeyFilterSegmentComponent, selector: "monkey-filter-segment", inputs: ["icon", "text", "placeholder", "readonlySegment", "disabled", "open"], outputs: ["onOpenChange", "onSegmentClick"] }, { kind: "component", type: MonkeyFilterTriggerComponent, selector: "monkey-filter-trigger", inputs: ["variant", "icon", "text", "ariaLabel", "disabled", "immediateExit", "open", "alignment"], outputs: ["onOpenChange"] }, { 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: "component", type: MonkeyScrollbarComponent, selector: "monkey-scrollbar", inputs: ["orientation", "size", "target"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChange: "onFiltersChange" }, host: { attributes: { "data-testid": "monkey-filter-bar" }, properties: { "class.mecx-filter-bar--disabled": "disabled()" }, classAttribute: "mecx-filter-bar" }, providers: [CurrencyPipe], viewQueries: [{ propertyName: "_scrollbar", first: true, predicate: MonkeyScrollbarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mecx-filter-bar-line\">\n  <div #rowEl class=\"mecx-filter-bar-row\">\n    @for (f of rows(); track f.key) {\n      <span\n        class=\"mecx-filter-bar-slot\"\n        [attr.data-flip-id]=\"f.key\"\n        [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\n        animate.leave=\"mecx-filter-bar-slot--leaving\"\n      >\n        <monkey-filter-chip\n          [removeLabel]=\"labels().remove\"\n          [disabled]=\"disabled()\"\n          (onRemove)=\"onRemove(f)\"\n        >\n          <monkey-filter-segment\n            [icon]=\"f.icon ?? null\"\n            [text]=\"f.label\"\n            [disabled]=\"disabled()\"\n            [open]=\"isOpen(f.key, 'category')\"\n            (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\n          >\n            @if (isOpen(f.key, 'category')) {\n              <monkey-filter-menu\n                class=\"mecx-filter-bar-menu-categories\"\n                [showSearch]=\"true\"\n                [searchPlaceholder]=\"labels().search\"\n                (onSearchChange)=\"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                    (onItemClick)=\"onChangeCategory(f, i)\"\n                  />\n                }\n              </monkey-filter-menu>\n            }\n          </monkey-filter-segment>\n          <monkey-filter-segment\n            [placeholder]=\"labels().selectCondition\"\n            [text]=\"operatorLabel(f.condition)\"\n            [disabled]=\"disabled()\"\n            [open]=\"isOpen(f.key, 'condition')\"\n            (onOpenChange)=\"onConditionOpenChange(f, $event)\"\n          >\n            @if (isOpen(f.key, 'condition')) {\n              <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\n                @for (c of conditionsFor(f); track c) {\n                  <monkey-filter-menu-item\n                    [label]=\"operatorLabel(c)\"\n                    [selected]=\"c === f.condition\"\n                    (onItemClick)=\"onSelectCondition(f, c)\"\n                  />\n                }\n              </monkey-filter-menu>\n            }\n          </monkey-filter-segment>\n          @if (hasValueSegment(f)) {\n            <monkey-filter-segment\n              [placeholder]=\"valuePlaceholder(f)\"\n              [text]=\"displayOf(f)\"\n              [disabled]=\"disabled()\"\n              [open]=\"isOpen(f.key, 'value')\"\n              (onOpenChange)=\"onValueOpenChange(f, $event)\"\n            >\n              @if (isOpen(f.key, 'value')) {\n                @switch (panelFor(f)) {\n                  @case ('status') {\n                    <monkey-filter-menu class=\"mecx-filter-bar-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                          (onItemClick)=\"onToggleStatus(s.value)\"\n                        />\n                      }\n                      <div class=\"mecx-filter-bar-panel-actions\">\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                          {{ labels().confirm }}\n                        </monkey-button>\n                      </div>\n                    </monkey-filter-menu>\n                  }\n\n                  @case ('date-day') {\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n                      <div class=\"mecx-filter-bar-field\">\n                        <label class=\"mecx-filter-bar-field-row\">\n                          <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\n                          <monkey-form-field size=\"sm\" noFooterSpace>\n                            <input\n                              type=\"date\"\n                              monkey-input\n                              [(ngModel)]=\"dayValue\"\n                              (keyup.enter)=\"onApply(f)\"\n                            />\n                          </monkey-form-field>\n                        </label>\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                          {{ labels().confirm }}\n                        </monkey-button>\n                      </div>\n                    </monkey-filter-menu>\n                  }\n\n                  @case ('date-range') {\n                    @if (calendarOpen() === f.key) {\n                      <monkey-date-range\n                        class=\"mecx-filter-bar-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                        @for (shortcut of dateShortcuts(); track shortcut.key) {\n                          <monkey-filter-menu-item\n                            [label]=\"shortcut.label\"\n                            (onItemClick)=\"onQuickDate(f, shortcut.key)\"\n                          />\n                        }\n                      </monkey-filter-menu>\n                    }\n                  }\n\n                  @default {\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n                      <div class=\"mecx-filter-bar-field\">\n                        @if (f.type === 'currency') {\n                          <label class=\"mecx-filter-bar-field-row\">\n                            <span class=\"mecx-filter-bar-field-label\">\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\n                            </span>\n                            <monkey-form-field size=\"sm\" noFooterSpace>\n                              <input\n                                type=\"text\"\n                                monkey-input-currency\n                                [(ngModel)]=\"currencyValue\"\n                                (keyup.enter)=\"onApply(f)\"\n                              />\n                            </monkey-form-field>\n                          </label>\n                          @if (isRange(f)) {\n                            <label class=\"mecx-filter-bar-field-row\">\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\n                              <monkey-form-field size=\"sm\" noFooterSpace>\n                                <input\n                                  type=\"text\"\n                                  monkey-input-currency\n                                  [(ngModel)]=\"currencyValue2\"\n                                  (keyup.enter)=\"onApply(f)\"\n                                />\n                              </monkey-form-field>\n                            </label>\n                          }\n                        } @else {\n                          <label class=\"mecx-filter-bar-field-row\">\n                            <span class=\"mecx-filter-bar-field-label\">\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\n                            </span>\n                            <monkey-form-field size=\"sm\" noFooterSpace>\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                          </label>\n                          @if (isRange(f)) {\n                            <label class=\"mecx-filter-bar-field-row\">\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\n                              <monkey-form-field size=\"sm\" noFooterSpace>\n                                <input\n                                  type=\"text\"\n                                  monkey-input\n                                  [(ngModel)]=\"textValue2\"\n                                  (keyup.enter)=\"onApply(f)\"\n                                />\n                              </monkey-form-field>\n                            </label>\n                          }\n                        }\n\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                          {{ labels().confirm }}\n                        </monkey-button>\n                      </div>\n                    </monkey-filter-menu>\n                  }\n                }\n              }\n            </monkey-filter-segment>\n          }\n        </monkey-filter-chip>\n      </span>\n    }\n\n    @if (canAddFilter()) {\n      <span\n        class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\n        [attr.data-flip-id]=\"triggerFlipId()\"\n      >\n        <monkey-filter-trigger\n          [variant]=\"triggerVariant()\"\n          [icon]=\"triggerIcon()\"\n          [text]=\"labels().add\"\n          [ariaLabel]=\"labels().addAria\"\n          [disabled]=\"disabled()\"\n          [immediateExit]=\"immediateTriggerExit()\"\n          [open]=\"triggerOpen()\"\n          (onOpenChange)=\"onTriggerOpenChange($event)\"\n        >\n          @if (triggerOpen()) {\n            <monkey-filter-menu\n              class=\"mecx-filter-bar-menu-categories\"\n              [showSearch]=\"true\"\n              [searchPlaceholder]=\"labels().search\"\n              (onSearchChange)=\"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                  (onItemClick)=\"onSelectCategory(i)\"\n                />\n              }\n            </monkey-filter-menu>\n          }\n        </monkey-filter-trigger>\n      </span>\n    }\n  </div>\n  @if (rows().length > 0) {\n    <monkey-scrollbar\n      class=\"mecx-filter-bar-bar\"\n      orientation=\"horizontal\"\n      size=\"small\"\n      [target]=\"rowEl\"\n    />\n  }\n\n  <div class=\"mecx-filter-bar-tail\">\n    @if (rows().length > 0) {\n      <div class=\"mecx-filter-bar-actions\">\n        <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\n          {{ labels().clear }}\n        </monkey-button>\n      </div>\n    }\n\n    <div class=\"mecx-filter-bar-extra\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n@if (rows().length > 0) {\n  <monkey-divider />\n}\n", styles: [".mecx-filter-bar{--mecx-filter-bar-duration-state: .15s;--mecx-filter-bar-duration-enter: .2s;--mecx-filter-bar-duration-exit: .15s;--mecx-filter-bar-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-filter-bar-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-filter-bar-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-filter-bar-scale-unfold: .94;--mecx-filter-bar-travel-anchored: 4px;--mecx-filter-bar-travel-slide: 16px;--mecx-filter-bar-stagger: 25ms;--mecx-filter-bar-control-height: 32px;--mecx-filter-bar-pointer-target: 40px;--mecx-filter-bar-reach: calc((var(--mecx-filter-bar-control-height) - var(--mecx-filter-bar-pointer-target)) / 2);--mecx-filter-bar-radius: 8px;--mecx-filter-bar-radius-item: 4px;--mecx-filter-bar-fade-width: 48px;--mecx-filter-bar-focus-reach: 4px;--mecx-filter-bar-z-raised: 1;--mecx-filter-bar-z-sticky: 2;--mecx-filter-bar-z-menu: 1000}@media(prefers-reduced-motion:reduce){.mecx-filter-bar{--mecx-filter-bar-duration-state: 1ms;--mecx-filter-bar-duration-enter: 1ms;--mecx-filter-bar-duration-exit: 1ms;--mecx-filter-bar-scale-unfold: 1;--mecx-filter-bar-travel-anchored: 0px;--mecx-filter-bar-travel-slide: 0px;--mecx-filter-bar-stagger: 0ms}}.mecx-filter-bar{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-extra{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.mecx-filter-bar-extra:empty{display:none}.mecx-filter-bar-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"row tail\" \"bar bar\";align-items:center;row-gap:8px;width:100%}.mecx-filter-bar-bar{grid-area:bar;min-width:0}.mecx-filter-bar-tail{grid-area:tail;display:flex;align-items:center;min-width:0}.mecx-filter-bar-row{grid-area:row;display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-filter-bar-pointer-target);margin-inline-start:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline:var(--mecx-filter-bar-focus-reach) var(--mecx-filter-bar-fade-width);scroll-padding-inline-start:var(--mecx-filter-bar-focus-reach);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar--disabled .mecx-filter-bar-row{cursor:default}.mecx-filter-bar-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-filter-bar-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-slot-in{0%{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-slot-out{to{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}.mecx-filter-bar-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-slot-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-slot--entering{animation:mecx-filter-bar-slot-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter);position:relative;z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-bar-slot:has(.mecx-filter-segment--open),.mecx-filter-bar-slot:has(.mecx-filter-trigger--open){z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-menu.mecx-filter-bar-menu-categories{width:220px}.mecx-filter-menu.mecx-filter-bar-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-menu-field{width:238px}.mecx-filter-bar-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-field monkey-button,.mecx-filter-bar-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-field-row{display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer}.mecx-filter-bar-field-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px}.mecx-filter-bar-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-panel-actions monkey-button,.mecx-filter-bar-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}@media(max-width:767.98px){.mecx-filter-bar-line{grid-template-columns:minmax(0,1fr);grid-template-areas:\"row\" \"bar\" \"tail\";position:relative}.mecx-filter-bar-slot--trigger{position:sticky;right:0;z-index:var(--mecx-filter-bar-z-sticky)}.mecx-filter-bar-row{margin-inline-end:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline-end:var(--mecx-filter-bar-focus-reach)}.mecx-filter-bar-actions{padding-left:0;align-self:auto;background:none;position:static}.mecx-filter-bar-actions:before{right:var(--mecx-filter-bar-control-height);bottom:auto;height:var(--mecx-filter-bar-pointer-target)}}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "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", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: MonkeyFilterMenuComponent, selector: "monkey-filter-menu", inputs: ["showSearch", "searchPlaceholder", "showScroll", "maxHeight"], outputs: ["onSearchChange"] }, { kind: "component", type: MonkeyFilterMenuItemComponent, selector: "monkey-filter-menu-item", inputs: ["property", "leadIcon", "label", "description", "checked", "selected", "disabled"], outputs: ["onItemClick"] }, { kind: "component", type: MonkeyFilterSegmentComponent, selector: "monkey-filter-segment", inputs: ["icon", "text", "placeholder", "readonlySegment", "disabled", "open"], outputs: ["onOpenChange", "onSegmentClick"] }, { kind: "component", type: MonkeyFilterTriggerComponent, selector: "monkey-filter-trigger", inputs: ["variant", "icon", "text", "ariaLabel", "disabled", "immediateExit", "open", "alignment"], outputs: ["onOpenChange"] }, { 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: "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: MonkeyFilterBarComponent, decorators: [{
             type: Component,
@@ -7058,12 +7072,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         MonkeyFormFieldModule,
                         MonkeyInputModule,
                         MonkeyScrollbarComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                    ], providers: [CurrencyPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-testid': 'monkey-filter-bar',
                         class: 'mecx-filter-bar',
                         '[class.mecx-filter-bar--disabled]': 'disabled()'
                     }, template: "<div class=\"mecx-filter-bar-line\">\n  <div #rowEl class=\"mecx-filter-bar-row\">\n    @for (f of rows(); track f.key) {\n      <span\n        class=\"mecx-filter-bar-slot\"\n        [attr.data-flip-id]=\"f.key\"\n        [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\n        animate.leave=\"mecx-filter-bar-slot--leaving\"\n      >\n        <monkey-filter-chip\n          [removeLabel]=\"labels().remove\"\n          [disabled]=\"disabled()\"\n          (onRemove)=\"onRemove(f)\"\n        >\n          <monkey-filter-segment\n            [icon]=\"f.icon ?? null\"\n            [text]=\"f.label\"\n            [disabled]=\"disabled()\"\n            [open]=\"isOpen(f.key, 'category')\"\n            (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\n          >\n            @if (isOpen(f.key, 'category')) {\n              <monkey-filter-menu\n                class=\"mecx-filter-bar-menu-categories\"\n                [showSearch]=\"true\"\n                [searchPlaceholder]=\"labels().search\"\n                (onSearchChange)=\"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                    (onItemClick)=\"onChangeCategory(f, i)\"\n                  />\n                }\n              </monkey-filter-menu>\n            }\n          </monkey-filter-segment>\n          <monkey-filter-segment\n            [placeholder]=\"labels().selectCondition\"\n            [text]=\"operatorLabel(f.condition)\"\n            [disabled]=\"disabled()\"\n            [open]=\"isOpen(f.key, 'condition')\"\n            (onOpenChange)=\"onConditionOpenChange(f, $event)\"\n          >\n            @if (isOpen(f.key, 'condition')) {\n              <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\n                @for (c of conditionsFor(f); track c) {\n                  <monkey-filter-menu-item\n                    [label]=\"operatorLabel(c)\"\n                    [selected]=\"c === f.condition\"\n                    (onItemClick)=\"onSelectCondition(f, c)\"\n                  />\n                }\n              </monkey-filter-menu>\n            }\n          </monkey-filter-segment>\n          @if (hasValueSegment(f)) {\n            <monkey-filter-segment\n              [placeholder]=\"valuePlaceholder(f)\"\n              [text]=\"displayOf(f)\"\n              [disabled]=\"disabled()\"\n              [open]=\"isOpen(f.key, 'value')\"\n              (onOpenChange)=\"onValueOpenChange(f, $event)\"\n            >\n              @if (isOpen(f.key, 'value')) {\n                @switch (panelFor(f)) {\n                  @case ('status') {\n                    <monkey-filter-menu class=\"mecx-filter-bar-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                          (onItemClick)=\"onToggleStatus(s.value)\"\n                        />\n                      }\n                      <div class=\"mecx-filter-bar-panel-actions\">\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                          {{ labels().confirm }}\n                        </monkey-button>\n                      </div>\n                    </monkey-filter-menu>\n                  }\n\n                  @case ('date-day') {\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n                      <div class=\"mecx-filter-bar-field\">\n                        <label class=\"mecx-filter-bar-field-row\">\n                          <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\n                          <monkey-form-field size=\"sm\" noFooterSpace>\n                            <input\n                              type=\"date\"\n                              monkey-input\n                              [(ngModel)]=\"dayValue\"\n                              (keyup.enter)=\"onApply(f)\"\n                            />\n                          </monkey-form-field>\n                        </label>\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                          {{ labels().confirm }}\n                        </monkey-button>\n                      </div>\n                    </monkey-filter-menu>\n                  }\n\n                  @case ('date-range') {\n                    @if (calendarOpen() === f.key) {\n                      <monkey-date-range\n                        class=\"mecx-filter-bar-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                        @for (shortcut of dateShortcuts(); track shortcut.key) {\n                          <monkey-filter-menu-item\n                            [label]=\"shortcut.label\"\n                            (onItemClick)=\"onQuickDate(f, shortcut.key)\"\n                          />\n                        }\n                      </monkey-filter-menu>\n                    }\n                  }\n\n                  @default {\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n                      <div class=\"mecx-filter-bar-field\">\n                        @if (f.type === 'currency') {\n                          <label class=\"mecx-filter-bar-field-row\">\n                            <span class=\"mecx-filter-bar-field-label\">\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\n                            </span>\n                            <monkey-form-field size=\"sm\" noFooterSpace>\n                              <input\n                                type=\"text\"\n                                monkey-input-currency\n                                [(ngModel)]=\"currencyValue\"\n                                (keyup.enter)=\"onApply(f)\"\n                              />\n                            </monkey-form-field>\n                          </label>\n                          @if (isRange(f)) {\n                            <label class=\"mecx-filter-bar-field-row\">\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\n                              <monkey-form-field size=\"sm\" noFooterSpace>\n                                <input\n                                  type=\"text\"\n                                  monkey-input-currency\n                                  [(ngModel)]=\"currencyValue2\"\n                                  (keyup.enter)=\"onApply(f)\"\n                                />\n                              </monkey-form-field>\n                            </label>\n                          }\n                        } @else {\n                          <label class=\"mecx-filter-bar-field-row\">\n                            <span class=\"mecx-filter-bar-field-label\">\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\n                            </span>\n                            <monkey-form-field size=\"sm\" noFooterSpace>\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                          </label>\n                          @if (isRange(f)) {\n                            <label class=\"mecx-filter-bar-field-row\">\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\n                              <monkey-form-field size=\"sm\" noFooterSpace>\n                                <input\n                                  type=\"text\"\n                                  monkey-input\n                                  [(ngModel)]=\"textValue2\"\n                                  (keyup.enter)=\"onApply(f)\"\n                                />\n                              </monkey-form-field>\n                            </label>\n                          }\n                        }\n\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n                          {{ labels().confirm }}\n                        </monkey-button>\n                      </div>\n                    </monkey-filter-menu>\n                  }\n                }\n              }\n            </monkey-filter-segment>\n          }\n        </monkey-filter-chip>\n      </span>\n    }\n\n    @if (canAddFilter()) {\n      <span\n        class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\n        [attr.data-flip-id]=\"triggerFlipId()\"\n      >\n        <monkey-filter-trigger\n          [variant]=\"triggerVariant()\"\n          [icon]=\"triggerIcon()\"\n          [text]=\"labels().add\"\n          [ariaLabel]=\"labels().addAria\"\n          [disabled]=\"disabled()\"\n          [immediateExit]=\"immediateTriggerExit()\"\n          [open]=\"triggerOpen()\"\n          (onOpenChange)=\"onTriggerOpenChange($event)\"\n        >\n          @if (triggerOpen()) {\n            <monkey-filter-menu\n              class=\"mecx-filter-bar-menu-categories\"\n              [showSearch]=\"true\"\n              [searchPlaceholder]=\"labels().search\"\n              (onSearchChange)=\"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                  (onItemClick)=\"onSelectCategory(i)\"\n                />\n              }\n            </monkey-filter-menu>\n          }\n        </monkey-filter-trigger>\n      </span>\n    }\n  </div>\n  @if (rows().length > 0) {\n    <monkey-scrollbar\n      class=\"mecx-filter-bar-bar\"\n      orientation=\"horizontal\"\n      size=\"small\"\n      [target]=\"rowEl\"\n    />\n  }\n\n  <div class=\"mecx-filter-bar-tail\">\n    @if (rows().length > 0) {\n      <div class=\"mecx-filter-bar-actions\">\n        <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\n          {{ labels().clear }}\n        </monkey-button>\n      </div>\n    }\n\n    <div class=\"mecx-filter-bar-extra\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n@if (rows().length > 0) {\n  <monkey-divider />\n}\n", styles: [".mecx-filter-bar{--mecx-filter-bar-duration-state: .15s;--mecx-filter-bar-duration-enter: .2s;--mecx-filter-bar-duration-exit: .15s;--mecx-filter-bar-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-filter-bar-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-filter-bar-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-filter-bar-scale-unfold: .94;--mecx-filter-bar-travel-anchored: 4px;--mecx-filter-bar-travel-slide: 16px;--mecx-filter-bar-stagger: 25ms;--mecx-filter-bar-control-height: 32px;--mecx-filter-bar-pointer-target: 40px;--mecx-filter-bar-reach: calc((var(--mecx-filter-bar-control-height) - var(--mecx-filter-bar-pointer-target)) / 2);--mecx-filter-bar-radius: 8px;--mecx-filter-bar-radius-item: 4px;--mecx-filter-bar-fade-width: 48px;--mecx-filter-bar-focus-reach: 4px;--mecx-filter-bar-z-raised: 1;--mecx-filter-bar-z-sticky: 2;--mecx-filter-bar-z-menu: 1000}@media(prefers-reduced-motion:reduce){.mecx-filter-bar{--mecx-filter-bar-duration-state: 1ms;--mecx-filter-bar-duration-enter: 1ms;--mecx-filter-bar-duration-exit: 1ms;--mecx-filter-bar-scale-unfold: 1;--mecx-filter-bar-travel-anchored: 0px;--mecx-filter-bar-travel-slide: 0px;--mecx-filter-bar-stagger: 0ms}}.mecx-filter-bar{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-extra{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.mecx-filter-bar-extra:empty{display:none}.mecx-filter-bar-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"row tail\" \"bar bar\";align-items:center;row-gap:8px;width:100%}.mecx-filter-bar-bar{grid-area:bar;min-width:0}.mecx-filter-bar-tail{grid-area:tail;display:flex;align-items:center;min-width:0}.mecx-filter-bar-row{grid-area:row;display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-filter-bar-pointer-target);margin-inline-start:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline:var(--mecx-filter-bar-focus-reach) var(--mecx-filter-bar-fade-width);scroll-padding-inline-start:var(--mecx-filter-bar-focus-reach);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar--disabled .mecx-filter-bar-row{cursor:default}.mecx-filter-bar-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-filter-bar-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-slot-in{0%{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-slot-out{to{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}.mecx-filter-bar-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-slot-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-slot--entering{animation:mecx-filter-bar-slot-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter);position:relative;z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-bar-slot:has(.mecx-filter-segment--open),.mecx-filter-bar-slot:has(.mecx-filter-trigger--open){z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-menu.mecx-filter-bar-menu-categories{width:220px}.mecx-filter-menu.mecx-filter-bar-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-menu-field{width:238px}.mecx-filter-bar-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-field monkey-button,.mecx-filter-bar-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-field-row{display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer}.mecx-filter-bar-field-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px}.mecx-filter-bar-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-panel-actions monkey-button,.mecx-filter-bar-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}@media(max-width:767.98px){.mecx-filter-bar-line{grid-template-columns:minmax(0,1fr);grid-template-areas:\"row\" \"bar\" \"tail\";position:relative}.mecx-filter-bar-slot--trigger{position:sticky;right:0;z-index:var(--mecx-filter-bar-z-sticky)}.mecx-filter-bar-row{margin-inline-end:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline-end:var(--mecx-filter-bar-focus-reach)}.mecx-filter-bar-actions{padding-left:0;align-self:auto;background:none;position:static}.mecx-filter-bar-actions:before{right:var(--mecx-filter-bar-control-height);bottom:auto;height:var(--mecx-filter-bar-pointer-target)}}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], onFiltersChange: [{ type: i0.Output, args: ["onFiltersChange"] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { _scrollbar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MonkeyScrollbarComponent), { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], onFiltersChange: [{ type: i0.Output, args: ["onFiltersChange"] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }] } });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved