monkey-style-guide 21.2.26 → 21.2.28

package/fesm2022/monkey-style-guide.mjs

@@ -7816,10 +7816,6 @@ class MonkeyFilterBarComponent {
         });
         inject(DestroyRef).onDestroy(() => this.cancelCommit());
     }
-    /**
-     * A field with a single condition has nothing to ask: the answer to "which
-     * condition" is already known, so it is taken rather than put to the user.
-     */
     autoCondition(row, allowed) {
         if (row.condition || allowed.length !== 1)
             return row;
@@ -8305,7 +8301,7 @@ class MonkeyFilterBarComponent {
         this.commit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 }, { propertyName: "_rowEl", first: true, predicate: ["rowEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mecx-filter-bar-line\">\r\n  <div\r\n    #rowEl\r\n    class=\"mecx-filter-bar-row\"\r\n    (animationend)=\"onSlotSettled($event)\"\r\n    (transitionend)=\"onSlotSettled($event)\"\r\n  >\r\n    @for (f of rows(); track f.key) {\r\n      <span\r\n        class=\"mecx-filter-bar-slot\"\r\n        [attr.data-flip-id]=\"f.key\"\r\n        [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\r\n        animate.leave=\"mecx-filter-bar-slot--leaving\"\r\n      >\r\n        <monkey-filter-chip\r\n          [removeLabel]=\"labels().remove\"\r\n          [disabled]=\"disabled()\"\r\n          (onRemove)=\"onRemove(f)\"\r\n        >\r\n          <monkey-filter-segment\r\n            [icon]=\"f.icon ?? null\"\r\n            [text]=\"f.label\"\r\n            [disabled]=\"disabled()\"\r\n            [open]=\"isOpen(f.key, 'category')\"\r\n            (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\r\n          >\r\n            @if (isOpen(f.key, 'category')) {\r\n              <monkey-filter-menu\r\n                class=\"mecx-filter-bar-menu-categories\"\r\n                [showSearch]=\"true\"\r\n                [searchPlaceholder]=\"labels().search\"\r\n                (onSearchChange)=\"categorySearch.set($event)\"\r\n              >\r\n                @for (opt of changeOptions(); track opt.key; let i = $index) {\r\n                  @if (needsDivider(changeOptions(), i)) {\r\n                    <monkey-divider />\r\n                  }\r\n                  <monkey-filter-menu-item\r\n                    [leadIcon]=\"opt.icon ?? null\"\r\n                    [label]=\"opt.label\"\r\n                    [selected]=\"opt.key === f.key\"\r\n                    [disabled]=\"opt.key !== f.key && isFilterActive(opt.key)\"\r\n                    (onItemClick)=\"onChangeCategory(f, i)\"\r\n                  />\r\n                }\r\n              </monkey-filter-menu>\r\n            }\r\n          </monkey-filter-segment>\r\n          <monkey-filter-segment\r\n            [placeholder]=\"labels().selectCondition\"\r\n            [text]=\"operatorLabel(f.condition)\"\r\n            [disabled]=\"disabled()\"\r\n            [open]=\"isOpen(f.key, 'condition')\"\r\n            (onOpenChange)=\"onConditionOpenChange(f, $event)\"\r\n          >\r\n            @if (isOpen(f.key, 'condition')) {\r\n              <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\r\n                @for (c of conditionsFor(f); track c) {\r\n                  <monkey-filter-menu-item\r\n                    [label]=\"operatorLabel(c)\"\r\n                    [selected]=\"c === f.condition\"\r\n                    (onItemClick)=\"onSelectCondition(f, c)\"\r\n                  />\r\n                }\r\n              </monkey-filter-menu>\r\n            }\r\n          </monkey-filter-segment>\r\n          @if (hasValueSegment(f)) {\r\n            <monkey-filter-segment\r\n              [placeholder]=\"valuePlaceholder(f)\"\r\n              [text]=\"displayOf(f)\"\r\n              [disabled]=\"disabled()\"\r\n              [open]=\"isOpen(f.key, 'value')\"\r\n              (onOpenChange)=\"onValueOpenChange(f, $event)\"\r\n            >\r\n              @if (isOpen(f.key, 'value')) {\r\n                @switch (panelFor(f)) {\r\n                  @case ('status') {\r\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-status\" [showSearch]=\"false\">\r\n                      @for (s of statusOptionsOf(f); track s.value) {\r\n                        <monkey-filter-menu-item\r\n                          property=\"checkbox\"\r\n                          [label]=\"s.description\"\r\n                          [checked]=\"statusValues.includes(s.value)\"\r\n                          (onItemClick)=\"onToggleStatus(s.value)\"\r\n                        />\r\n                      }\r\n                      <div class=\"mecx-filter-bar-panel-actions\">\r\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\r\n                          {{ labels().confirm }}\r\n                        </monkey-button>\r\n                      </div>\r\n                    </monkey-filter-menu>\r\n                  }\r\n\r\n                  @case ('date-day') {\r\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\r\n                      <div class=\"mecx-filter-bar-field\">\r\n                        <label class=\"mecx-filter-bar-field-row\">\r\n                          <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\r\n                          <monkey-form-field size=\"sm\" noFooterSpace>\r\n                            <input\r\n                              type=\"date\"\r\n                              monkey-input\r\n                              [(ngModel)]=\"dayValue\"\r\n                              (keyup.enter)=\"onApply(f)\"\r\n                            />\r\n                          </monkey-form-field>\r\n                        </label>\r\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\r\n                          {{ labels().confirm }}\r\n                        </monkey-button>\r\n                      </div>\r\n                    </monkey-filter-menu>\r\n                  }\r\n\r\n                  @case ('date-range') {\r\n                    @if (calendarOpen() === f.key) {\r\n                      <monkey-date-range\r\n                        class=\"mecx-filter-bar-calendar\"\r\n                        [startDate]=\"dateRange.startDate\"\r\n                        [endDate]=\"dateRange.endDate\"\r\n                        [minDate]=\"minDateOf(f)\"\r\n                        [maxDate]=\"maxDateOf(f)\"\r\n                        (onDate)=\"onDateChange(f, $event)\"\r\n                        (onCancel)=\"onBackToShortcuts()\"\r\n                      ></monkey-date-range>\r\n                    } @else {\r\n                      <monkey-filter-menu [showSearch]=\"false\">\r\n                        @for (shortcut of dateShortcuts(); track shortcut.key) {\r\n                          <monkey-filter-menu-item\r\n                            [label]=\"shortcut.label\"\r\n                            (onItemClick)=\"onQuickDate(f, shortcut.key)\"\r\n                          />\r\n                        }\r\n                      </monkey-filter-menu>\r\n                    }\r\n                  }\r\n\r\n                  @default {\r\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\r\n                      <div class=\"mecx-filter-bar-field\">\r\n                        @if (f.type === 'currency') {\r\n                          <label class=\"mecx-filter-bar-field-row\">\r\n                            <span class=\"mecx-filter-bar-field-label\">\r\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\r\n                            </span>\r\n                            <monkey-form-field size=\"sm\" noFooterSpace>\r\n                              <input\r\n                                type=\"text\"\r\n                                monkey-input-currency\r\n                                [(ngModel)]=\"currencyValue\"\r\n                                (keyup.enter)=\"onApply(f)\"\r\n                              />\r\n                            </monkey-form-field>\r\n                          </label>\r\n                          @if (isRange(f)) {\r\n                            <label class=\"mecx-filter-bar-field-row\">\r\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\r\n                              <monkey-form-field size=\"sm\" noFooterSpace>\r\n                                <input\r\n                                  type=\"text\"\r\n                                  monkey-input-currency\r\n                                  [(ngModel)]=\"currencyValue2\"\r\n                                  (keyup.enter)=\"onApply(f)\"\r\n                                />\r\n                              </monkey-form-field>\r\n                            </label>\r\n                          }\r\n                        } @else {\r\n                          <label class=\"mecx-filter-bar-field-row\">\r\n                            <span class=\"mecx-filter-bar-field-label\">\r\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\r\n                            </span>\r\n                            <monkey-form-field size=\"sm\" noFooterSpace>\r\n                              <input\r\n                                type=\"text\"\r\n                                monkey-input\r\n                                [placeholder]=\"valuePlaceholder(f)\"\r\n                                [(ngModel)]=\"textValue\"\r\n                                (keyup.enter)=\"onApply(f)\"\r\n                              />\r\n                            </monkey-form-field>\r\n                          </label>\r\n                          @if (isRange(f)) {\r\n                            <label class=\"mecx-filter-bar-field-row\">\r\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\r\n                              <monkey-form-field size=\"sm\" noFooterSpace>\r\n                                <input\r\n                                  type=\"text\"\r\n                                  monkey-input\r\n                                  [(ngModel)]=\"textValue2\"\r\n                                  (keyup.enter)=\"onApply(f)\"\r\n                                />\r\n                              </monkey-form-field>\r\n                            </label>\r\n                          }\r\n                        }\r\n\r\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\r\n                          {{ labels().confirm }}\r\n                        </monkey-button>\r\n                      </div>\r\n                    </monkey-filter-menu>\r\n                  }\r\n                }\r\n              }\r\n            </monkey-filter-segment>\r\n          }\r\n        </monkey-filter-chip>\r\n      </span>\r\n    }\r\n\r\n    @if (canAddFilter()) {\r\n      <span\r\n        class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\r\n        [attr.data-flip-id]=\"triggerFlipId()\"\r\n      >\r\n        <monkey-filter-trigger\r\n          [variant]=\"triggerVariant()\"\r\n          [icon]=\"triggerIcon()\"\r\n          [text]=\"labels().add\"\r\n          [ariaLabel]=\"labels().addAria\"\r\n          [disabled]=\"disabled()\"\r\n          [immediateExit]=\"immediateTriggerExit()\"\r\n          [open]=\"triggerOpen()\"\r\n          (onOpenChange)=\"onTriggerOpenChange($event)\"\r\n        >\r\n          @if (triggerOpen()) {\r\n            <monkey-filter-menu\r\n              class=\"mecx-filter-bar-menu-categories\"\r\n              [showSearch]=\"true\"\r\n              [searchPlaceholder]=\"labels().search\"\r\n              (onSearchChange)=\"categorySearch.set($event)\"\r\n            >\r\n              @for (opt of addOptions(); track opt.key; let i = $index) {\r\n                @if (needsDivider(addOptions(), i)) {\r\n                  <monkey-divider />\r\n                }\r\n                <monkey-filter-menu-item\r\n                  [leadIcon]=\"opt.icon ?? null\"\r\n                  [label]=\"opt.label\"\r\n                  (onItemClick)=\"onSelectCategory(i)\"\r\n                />\r\n              }\r\n            </monkey-filter-menu>\r\n          }\r\n        </monkey-filter-trigger>\r\n      </span>\r\n    }\r\n  </div>\r\n  @if (rows().length > 0) {\r\n    <monkey-scrollbar\r\n      class=\"mecx-filter-bar-bar\"\r\n      orientation=\"horizontal\"\r\n      size=\"small\"\r\n      [class.mecx-filter-bar-bar--visible]=\"scrollVisible()\"\r\n      [target]=\"rowEl\"\r\n    />\r\n  }\r\n\r\n  <div class=\"mecx-filter-bar-tail\">\r\n    @if (rows().length > 0) {\r\n      <div class=\"mecx-filter-bar-actions\">\r\n        <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\r\n          {{ labels().clear }}\r\n        </monkey-button>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"mecx-filter-bar-extra\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n@if (rows().length > 0) {\r\n  <monkey-divider />\r\n}\r\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-delay-settle: .32s;--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,.mecx-filter-bar-bar.mecx-scrollbar--inert{grid-area:bar;min-width:0;display:block;opacity:0;pointer-events:none;transition:opacity var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state) var(--mecx-filter-bar-delay-settle)}.mecx-filter-bar-bar.mecx-filter-bar-bar--visible{opacity:1;pointer-events:auto;transition-delay:0s}.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.23", 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 }, { propertyName: "_rowEl", first: true, predicate: ["rowEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mecx-filter-bar-line\">\r\n  <div\r\n    #rowEl\r\n    class=\"mecx-filter-bar-row\"\r\n    (animationend)=\"onSlotSettled($event)\"\r\n    (transitionend)=\"onSlotSettled($event)\"\r\n  >\r\n    @for (f of rows(); track f.key) {\r\n      <span\r\n        class=\"mecx-filter-bar-slot\"\r\n        [attr.data-flip-id]=\"f.key\"\r\n        [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\r\n        animate.leave=\"mecx-filter-bar-slot--leaving\"\r\n      >\r\n        <monkey-filter-chip\r\n          [removeLabel]=\"labels().remove\"\r\n          [disabled]=\"disabled()\"\r\n          (onRemove)=\"onRemove(f)\"\r\n        >\r\n          <monkey-filter-segment\r\n            [icon]=\"f.icon ?? null\"\r\n            [text]=\"f.label\"\r\n            [disabled]=\"disabled()\"\r\n            [open]=\"isOpen(f.key, 'category')\"\r\n            (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\r\n          >\r\n            @if (isOpen(f.key, 'category')) {\r\n              <monkey-filter-menu\r\n                class=\"mecx-filter-bar-menu-categories\"\r\n                [showSearch]=\"true\"\r\n                [searchPlaceholder]=\"labels().search\"\r\n                (onSearchChange)=\"categorySearch.set($event)\"\r\n              >\r\n                @for (opt of changeOptions(); track opt.key; let i = $index) {\r\n                  @if (needsDivider(changeOptions(), i)) {\r\n                    <monkey-divider />\r\n                  }\r\n                  <monkey-filter-menu-item\r\n                    [leadIcon]=\"opt.icon ?? null\"\r\n                    [label]=\"opt.label\"\r\n                    [selected]=\"opt.key === f.key\"\r\n                    [disabled]=\"opt.key !== f.key && isFilterActive(opt.key)\"\r\n                    (onItemClick)=\"onChangeCategory(f, i)\"\r\n                  />\r\n                }\r\n              </monkey-filter-menu>\r\n            }\r\n          </monkey-filter-segment>\r\n          <monkey-filter-segment\r\n            [placeholder]=\"labels().selectCondition\"\r\n            [text]=\"operatorLabel(f.condition)\"\r\n            [disabled]=\"disabled()\"\r\n            [open]=\"isOpen(f.key, 'condition')\"\r\n            (onOpenChange)=\"onConditionOpenChange(f, $event)\"\r\n          >\r\n            @if (isOpen(f.key, 'condition')) {\r\n              <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\r\n                @for (c of conditionsFor(f); track c) {\r\n                  <monkey-filter-menu-item\r\n                    [label]=\"operatorLabel(c)\"\r\n                    [selected]=\"c === f.condition\"\r\n                    (onItemClick)=\"onSelectCondition(f, c)\"\r\n                  />\r\n                }\r\n              </monkey-filter-menu>\r\n            }\r\n          </monkey-filter-segment>\r\n          @if (hasValueSegment(f)) {\r\n            <monkey-filter-segment\r\n              [placeholder]=\"valuePlaceholder(f)\"\r\n              [text]=\"displayOf(f)\"\r\n              [disabled]=\"disabled()\"\r\n              [open]=\"isOpen(f.key, 'value')\"\r\n              (onOpenChange)=\"onValueOpenChange(f, $event)\"\r\n            >\r\n              @if (isOpen(f.key, 'value')) {\r\n                @switch (panelFor(f)) {\r\n                  @case ('status') {\r\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-status\" [showSearch]=\"false\">\r\n                      @for (s of statusOptionsOf(f); track s.value) {\r\n                        <monkey-filter-menu-item\r\n                          property=\"checkbox\"\r\n                          [label]=\"s.description\"\r\n                          [checked]=\"statusValues.includes(s.value)\"\r\n                          (onItemClick)=\"onToggleStatus(s.value)\"\r\n                        />\r\n                      }\r\n                      <div class=\"mecx-filter-bar-panel-actions\">\r\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\r\n                          {{ labels().confirm }}\r\n                        </monkey-button>\r\n                      </div>\r\n                    </monkey-filter-menu>\r\n                  }\r\n\r\n                  @case ('date-day') {\r\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\r\n                      <div class=\"mecx-filter-bar-field\">\r\n                        <label class=\"mecx-filter-bar-field-row\">\r\n                          <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\r\n                          <monkey-form-field size=\"sm\" noFooterSpace>\r\n                            <input\r\n                              type=\"date\"\r\n                              monkey-input\r\n                              [(ngModel)]=\"dayValue\"\r\n                              (keyup.enter)=\"onApply(f)\"\r\n                            />\r\n                          </monkey-form-field>\r\n                        </label>\r\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\r\n                          {{ labels().confirm }}\r\n                        </monkey-button>\r\n                      </div>\r\n                    </monkey-filter-menu>\r\n                  }\r\n\r\n                  @case ('date-range') {\r\n                    @if (calendarOpen() === f.key) {\r\n                      <monkey-date-range\r\n                        class=\"mecx-filter-bar-calendar\"\r\n                        [startDate]=\"dateRange.startDate\"\r\n                        [endDate]=\"dateRange.endDate\"\r\n                        [minDate]=\"minDateOf(f)\"\r\n                        [maxDate]=\"maxDateOf(f)\"\r\n                        (onDate)=\"onDateChange(f, $event)\"\r\n                        (onCancel)=\"onBackToShortcuts()\"\r\n                      ></monkey-date-range>\r\n                    } @else {\r\n                      <monkey-filter-menu [showSearch]=\"false\">\r\n                        @for (shortcut of dateShortcuts(); track shortcut.key) {\r\n                          <monkey-filter-menu-item\r\n                            [label]=\"shortcut.label\"\r\n                            (onItemClick)=\"onQuickDate(f, shortcut.key)\"\r\n                          />\r\n                        }\r\n                      </monkey-filter-menu>\r\n                    }\r\n                  }\r\n\r\n                  @default {\r\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\r\n                      <div class=\"mecx-filter-bar-field\">\r\n                        @if (f.type === 'currency') {\r\n                          <label class=\"mecx-filter-bar-field-row\">\r\n                            <span class=\"mecx-filter-bar-field-label\">\r\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\r\n                            </span>\r\n                            <monkey-form-field size=\"sm\" noFooterSpace>\r\n                              <input\r\n                                type=\"text\"\r\n                                monkey-input-currency\r\n                                [(ngModel)]=\"currencyValue\"\r\n                                (keyup.enter)=\"onApply(f)\"\r\n                              />\r\n                            </monkey-form-field>\r\n                          </label>\r\n                          @if (isRange(f)) {\r\n                            <label class=\"mecx-filter-bar-field-row\">\r\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\r\n                              <monkey-form-field size=\"sm\" noFooterSpace>\r\n                                <input\r\n                                  type=\"text\"\r\n                                  monkey-input-currency\r\n                                  [(ngModel)]=\"currencyValue2\"\r\n                                  (keyup.enter)=\"onApply(f)\"\r\n                                />\r\n                              </monkey-form-field>\r\n                            </label>\r\n                          }\r\n                        } @else {\r\n                          <label class=\"mecx-filter-bar-field-row\">\r\n                            <span class=\"mecx-filter-bar-field-label\">\r\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\r\n                            </span>\r\n                            <monkey-form-field size=\"sm\" noFooterSpace>\r\n                              <input\r\n                                type=\"text\"\r\n                                monkey-input\r\n                                [placeholder]=\"valuePlaceholder(f)\"\r\n                                [(ngModel)]=\"textValue\"\r\n                                (keyup.enter)=\"onApply(f)\"\r\n                              />\r\n                            </monkey-form-field>\r\n                          </label>\r\n                          @if (isRange(f)) {\r\n                            <label class=\"mecx-filter-bar-field-row\">\r\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\r\n                              <monkey-form-field size=\"sm\" noFooterSpace>\r\n                                <input\r\n                                  type=\"text\"\r\n                                  monkey-input\r\n                                  [(ngModel)]=\"textValue2\"\r\n                                  (keyup.enter)=\"onApply(f)\"\r\n                                />\r\n                              </monkey-form-field>\r\n                            </label>\r\n                          }\r\n                        }\r\n\r\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\r\n                          {{ labels().confirm }}\r\n                        </monkey-button>\r\n                      </div>\r\n                    </monkey-filter-menu>\r\n                  }\r\n                }\r\n              }\r\n            </monkey-filter-segment>\r\n          }\r\n        </monkey-filter-chip>\r\n      </span>\r\n    }\r\n\r\n    @if (canAddFilter()) {\r\n      <span\r\n        class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\r\n        [attr.data-flip-id]=\"triggerFlipId()\"\r\n      >\r\n        <monkey-filter-trigger\r\n          [variant]=\"triggerVariant()\"\r\n          [icon]=\"triggerIcon()\"\r\n          [text]=\"labels().add\"\r\n          [ariaLabel]=\"labels().addAria\"\r\n          [disabled]=\"disabled()\"\r\n          [immediateExit]=\"immediateTriggerExit()\"\r\n          [open]=\"triggerOpen()\"\r\n          (onOpenChange)=\"onTriggerOpenChange($event)\"\r\n        >\r\n          @if (triggerOpen()) {\r\n            <monkey-filter-menu\r\n              class=\"mecx-filter-bar-menu-categories\"\r\n              [showSearch]=\"true\"\r\n              [searchPlaceholder]=\"labels().search\"\r\n              (onSearchChange)=\"categorySearch.set($event)\"\r\n            >\r\n              @for (opt of addOptions(); track opt.key; let i = $index) {\r\n                @if (needsDivider(addOptions(), i)) {\r\n                  <monkey-divider />\r\n                }\r\n                <monkey-filter-menu-item\r\n                  [leadIcon]=\"opt.icon ?? null\"\r\n                  [label]=\"opt.label\"\r\n                  (onItemClick)=\"onSelectCategory(i)\"\r\n                />\r\n              }\r\n            </monkey-filter-menu>\r\n          }\r\n        </monkey-filter-trigger>\r\n      </span>\r\n    }\r\n  </div>\r\n  @if (rows().length > 0) {\r\n    <monkey-scrollbar\r\n      class=\"mecx-filter-bar-bar\"\r\n      orientation=\"horizontal\"\r\n      size=\"small\"\r\n      [class.mecx-filter-bar-bar--visible]=\"scrollVisible()\"\r\n      [target]=\"rowEl\"\r\n    />\r\n  }\r\n\r\n  <div class=\"mecx-filter-bar-tail\">\r\n    @if (rows().length > 0) {\r\n      <div class=\"mecx-filter-bar-actions\">\r\n        <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\r\n          {{ labels().clear }}\r\n        </monkey-button>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"mecx-filter-bar-extra\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n@if (rows().length > 0) {\r\n  <monkey-divider />\r\n}\r\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-delay-settle: .32s;--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,.mecx-filter-bar-bar.mecx-scrollbar--inert{grid-area:bar;min-width:0;display:block;opacity:0;pointer-events:none;transition:opacity var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state) var(--mecx-filter-bar-delay-settle)}.mecx-filter-bar-bar.mecx-filter-bar-bar--visible{opacity:1;pointer-events:auto;transition-delay:0s}.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);background:var(--mecx-color-white)}.mecx-filter-bar-slot--trigger: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-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{content:none}}\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.23", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
             type: Component,
@@ -8326,7 +8322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                         'data-testid': 'monkey-filter-bar',
                         class: 'mecx-filter-bar',
                         '[class.mecx-filter-bar--disabled]': 'disabled()'
-                    }, template: "<div class=\"mecx-filter-bar-line\">\r\n  <div\r\n    #rowEl\r\n    class=\"mecx-filter-bar-row\"\r\n    (animationend)=\"onSlotSettled($event)\"\r\n    (transitionend)=\"onSlotSettled($event)\"\r\n  >\r\n    @for (f of rows(); track f.key) {\r\n      <span\r\n        class=\"mecx-filter-bar-slot\"\r\n        [attr.data-flip-id]=\"f.key\"\r\n        [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\r\n        animate.leave=\"mecx-filter-bar-slot--leaving\"\r\n      >\r\n        <monkey-filter-chip\r\n          [removeLabel]=\"labels().remove\"\r\n          [disabled]=\"disabled()\"\r\n          (onRemove)=\"onRemove(f)\"\r\n        >\r\n          <monkey-filter-segment\r\n            [icon]=\"f.icon ?? null\"\r\n            [text]=\"f.label\"\r\n            [disabled]=\"disabled()\"\r\n            [open]=\"isOpen(f.key, 'category')\"\r\n            (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\r\n          >\r\n            @if (isOpen(f.key, 'category')) {\r\n              <monkey-filter-menu\r\n                class=\"mecx-filter-bar-menu-categories\"\r\n                [showSearch]=\"true\"\r\n                [searchPlaceholder]=\"labels().search\"\r\n                (onSearchChange)=\"categorySearch.set($event)\"\r\n              >\r\n                @for (opt of changeOptions(); track opt.key; let i = $index) {\r\n                  @if (needsDivider(changeOptions(), i)) {\r\n                    <monkey-divider />\r\n                  }\r\n                  <monkey-filter-menu-item\r\n                    [leadIcon]=\"opt.icon ?? null\"\r\n                    [label]=\"opt.label\"\r\n                    [selected]=\"opt.key === f.key\"\r\n                    [disabled]=\"opt.key !== f.key && isFilterActive(opt.key)\"\r\n                    (onItemClick)=\"onChangeCategory(f, i)\"\r\n                  />\r\n                }\r\n              </monkey-filter-menu>\r\n            }\r\n          </monkey-filter-segment>\r\n          <monkey-filter-segment\r\n            [placeholder]=\"labels().selectCondition\"\r\n            [text]=\"operatorLabel(f.condition)\"\r\n            [disabled]=\"disabled()\"\r\n            [open]=\"isOpen(f.key, 'condition')\"\r\n            (onOpenChange)=\"onConditionOpenChange(f, $event)\"\r\n          >\r\n            @if (isOpen(f.key, 'condition')) {\r\n              <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\r\n                @for (c of conditionsFor(f); track c) {\r\n                  <monkey-filter-menu-item\r\n                    [label]=\"operatorLabel(c)\"\r\n                    [selected]=\"c === f.condition\"\r\n                    (onItemClick)=\"onSelectCondition(f, c)\"\r\n                  />\r\n                }\r\n              </monkey-filter-menu>\r\n            }\r\n          </monkey-filter-segment>\r\n          @if (hasValueSegment(f)) {\r\n            <monkey-filter-segment\r\n              [placeholder]=\"valuePlaceholder(f)\"\r\n              [text]=\"displayOf(f)\"\r\n              [disabled]=\"disabled()\"\r\n              [open]=\"isOpen(f.key, 'value')\"\r\n              (onOpenChange)=\"onValueOpenChange(f, $event)\"\r\n            >\r\n              @if (isOpen(f.key, 'value')) {\r\n                @switch (panelFor(f)) {\r\n                  @case ('status') {\r\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-status\" [showSearch]=\"false\">\r\n                      @for (s of statusOptionsOf(f); track s.value) {\r\n                        <monkey-filter-menu-item\r\n                          property=\"checkbox\"\r\n                          [label]=\"s.description\"\r\n                          [checked]=\"statusValues.includes(s.value)\"\r\n                          (onItemClick)=\"onToggleStatus(s.value)\"\r\n                        />\r\n                      }\r\n                      <div class=\"mecx-filter-bar-panel-actions\">\r\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\r\n                          {{ labels().confirm }}\r\n                        </monkey-button>\r\n                      </div>\r\n                    </monkey-filter-menu>\r\n                  }\r\n\r\n                  @case ('date-day') {\r\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\r\n                      <div class=\"mecx-filter-bar-field\">\r\n                        <label class=\"mecx-filter-bar-field-row\">\r\n                          <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\r\n                          <monkey-form-field size=\"sm\" noFooterSpace>\r\n                            <input\r\n                              type=\"date\"\r\n                              monkey-input\r\n                              [(ngModel)]=\"dayValue\"\r\n                              (keyup.enter)=\"onApply(f)\"\r\n                            />\r\n                          </monkey-form-field>\r\n                        </label>\r\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\r\n                          {{ labels().confirm }}\r\n                        </monkey-button>\r\n                      </div>\r\n                    </monkey-filter-menu>\r\n                  }\r\n\r\n                  @case ('date-range') {\r\n                    @if (calendarOpen() === f.key) {\r\n                      <monkey-date-range\r\n                        class=\"mecx-filter-bar-calendar\"\r\n                        [startDate]=\"dateRange.startDate\"\r\n                        [endDate]=\"dateRange.endDate\"\r\n                        [minDate]=\"minDateOf(f)\"\r\n                        [maxDate]=\"maxDateOf(f)\"\r\n                        (onDate)=\"onDateChange(f, $event)\"\r\n                        (onCancel)=\"onBackToShortcuts()\"\r\n                      ></monkey-date-range>\r\n                    } @else {\r\n                      <monkey-filter-menu [showSearch]=\"false\">\r\n                        @for (shortcut of dateShortcuts(); track shortcut.key) {\r\n                          <monkey-filter-menu-item\r\n                            [label]=\"shortcut.label\"\r\n                            (onItemClick)=\"onQuickDate(f, shortcut.key)\"\r\n                          />\r\n                        }\r\n                      </monkey-filter-menu>\r\n                    }\r\n                  }\r\n\r\n                  @default {\r\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\r\n                      <div class=\"mecx-filter-bar-field\">\r\n                        @if (f.type === 'currency') {\r\n                          <label class=\"mecx-filter-bar-field-row\">\r\n                            <span class=\"mecx-filter-bar-field-label\">\r\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\r\n                            </span>\r\n                            <monkey-form-field size=\"sm\" noFooterSpace>\r\n                              <input\r\n                                type=\"text\"\r\n                                monkey-input-currency\r\n                                [(ngModel)]=\"currencyValue\"\r\n                                (keyup.enter)=\"onApply(f)\"\r\n                              />\r\n                            </monkey-form-field>\r\n                          </label>\r\n                          @if (isRange(f)) {\r\n                            <label class=\"mecx-filter-bar-field-row\">\r\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\r\n                              <monkey-form-field size=\"sm\" noFooterSpace>\r\n                                <input\r\n                                  type=\"text\"\r\n                                  monkey-input-currency\r\n                                  [(ngModel)]=\"currencyValue2\"\r\n                                  (keyup.enter)=\"onApply(f)\"\r\n                                />\r\n                              </monkey-form-field>\r\n                            </label>\r\n                          }\r\n                        } @else {\r\n                          <label class=\"mecx-filter-bar-field-row\">\r\n                            <span class=\"mecx-filter-bar-field-label\">\r\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\r\n                            </span>\r\n                            <monkey-form-field size=\"sm\" noFooterSpace>\r\n                              <input\r\n                                type=\"text\"\r\n                                monkey-input\r\n                                [placeholder]=\"valuePlaceholder(f)\"\r\n                                [(ngModel)]=\"textValue\"\r\n                                (keyup.enter)=\"onApply(f)\"\r\n                              />\r\n                            </monkey-form-field>\r\n                          </label>\r\n                          @if (isRange(f)) {\r\n                            <label class=\"mecx-filter-bar-field-row\">\r\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\r\n                              <monkey-form-field size=\"sm\" noFooterSpace>\r\n                                <input\r\n                                  type=\"text\"\r\n                                  monkey-input\r\n                                  [(ngModel)]=\"textValue2\"\r\n                                  (keyup.enter)=\"onApply(f)\"\r\n                                />\r\n                              </monkey-form-field>\r\n                            </label>\r\n                          }\r\n                        }\r\n\r\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\r\n                          {{ labels().confirm }}\r\n                        </monkey-button>\r\n                      </div>\r\n                    </monkey-filter-menu>\r\n                  }\r\n                }\r\n              }\r\n            </monkey-filter-segment>\r\n          }\r\n        </monkey-filter-chip>\r\n      </span>\r\n    }\r\n\r\n    @if (canAddFilter()) {\r\n      <span\r\n        class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\r\n        [attr.data-flip-id]=\"triggerFlipId()\"\r\n      >\r\n        <monkey-filter-trigger\r\n          [variant]=\"triggerVariant()\"\r\n          [icon]=\"triggerIcon()\"\r\n          [text]=\"labels().add\"\r\n          [ariaLabel]=\"labels().addAria\"\r\n          [disabled]=\"disabled()\"\r\n          [immediateExit]=\"immediateTriggerExit()\"\r\n          [open]=\"triggerOpen()\"\r\n          (onOpenChange)=\"onTriggerOpenChange($event)\"\r\n        >\r\n          @if (triggerOpen()) {\r\n            <monkey-filter-menu\r\n              class=\"mecx-filter-bar-menu-categories\"\r\n              [showSearch]=\"true\"\r\n              [searchPlaceholder]=\"labels().search\"\r\n              (onSearchChange)=\"categorySearch.set($event)\"\r\n            >\r\n              @for (opt of addOptions(); track opt.key; let i = $index) {\r\n                @if (needsDivider(addOptions(), i)) {\r\n                  <monkey-divider />\r\n                }\r\n                <monkey-filter-menu-item\r\n                  [leadIcon]=\"opt.icon ?? null\"\r\n                  [label]=\"opt.label\"\r\n                  (onItemClick)=\"onSelectCategory(i)\"\r\n                />\r\n              }\r\n            </monkey-filter-menu>\r\n          }\r\n        </monkey-filter-trigger>\r\n      </span>\r\n    }\r\n  </div>\r\n  @if (rows().length > 0) {\r\n    <monkey-scrollbar\r\n      class=\"mecx-filter-bar-bar\"\r\n      orientation=\"horizontal\"\r\n      size=\"small\"\r\n      [class.mecx-filter-bar-bar--visible]=\"scrollVisible()\"\r\n      [target]=\"rowEl\"\r\n    />\r\n  }\r\n\r\n  <div class=\"mecx-filter-bar-tail\">\r\n    @if (rows().length > 0) {\r\n      <div class=\"mecx-filter-bar-actions\">\r\n        <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\r\n          {{ labels().clear }}\r\n        </monkey-button>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"mecx-filter-bar-extra\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n@if (rows().length > 0) {\r\n  <monkey-divider />\r\n}\r\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-delay-settle: .32s;--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,.mecx-filter-bar-bar.mecx-scrollbar--inert{grid-area:bar;min-width:0;display:block;opacity:0;pointer-events:none;transition:opacity var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state) var(--mecx-filter-bar-delay-settle)}.mecx-filter-bar-bar.mecx-filter-bar-bar--visible{opacity:1;pointer-events:auto;transition-delay:0s}.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"] }]
+                    }, template: "<div class=\"mecx-filter-bar-line\">\r\n  <div\r\n    #rowEl\r\n    class=\"mecx-filter-bar-row\"\r\n    (animationend)=\"onSlotSettled($event)\"\r\n    (transitionend)=\"onSlotSettled($event)\"\r\n  >\r\n    @for (f of rows(); track f.key) {\r\n      <span\r\n        class=\"mecx-filter-bar-slot\"\r\n        [attr.data-flip-id]=\"f.key\"\r\n        [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\r\n        animate.leave=\"mecx-filter-bar-slot--leaving\"\r\n      >\r\n        <monkey-filter-chip\r\n          [removeLabel]=\"labels().remove\"\r\n          [disabled]=\"disabled()\"\r\n          (onRemove)=\"onRemove(f)\"\r\n        >\r\n          <monkey-filter-segment\r\n            [icon]=\"f.icon ?? null\"\r\n            [text]=\"f.label\"\r\n            [disabled]=\"disabled()\"\r\n            [open]=\"isOpen(f.key, 'category')\"\r\n            (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\r\n          >\r\n            @if (isOpen(f.key, 'category')) {\r\n              <monkey-filter-menu\r\n                class=\"mecx-filter-bar-menu-categories\"\r\n                [showSearch]=\"true\"\r\n                [searchPlaceholder]=\"labels().search\"\r\n                (onSearchChange)=\"categorySearch.set($event)\"\r\n              >\r\n                @for (opt of changeOptions(); track opt.key; let i = $index) {\r\n                  @if (needsDivider(changeOptions(), i)) {\r\n                    <monkey-divider />\r\n                  }\r\n                  <monkey-filter-menu-item\r\n                    [leadIcon]=\"opt.icon ?? null\"\r\n                    [label]=\"opt.label\"\r\n                    [selected]=\"opt.key === f.key\"\r\n                    [disabled]=\"opt.key !== f.key && isFilterActive(opt.key)\"\r\n                    (onItemClick)=\"onChangeCategory(f, i)\"\r\n                  />\r\n                }\r\n              </monkey-filter-menu>\r\n            }\r\n          </monkey-filter-segment>\r\n          <monkey-filter-segment\r\n            [placeholder]=\"labels().selectCondition\"\r\n            [text]=\"operatorLabel(f.condition)\"\r\n            [disabled]=\"disabled()\"\r\n            [open]=\"isOpen(f.key, 'condition')\"\r\n            (onOpenChange)=\"onConditionOpenChange(f, $event)\"\r\n          >\r\n            @if (isOpen(f.key, 'condition')) {\r\n              <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\r\n                @for (c of conditionsFor(f); track c) {\r\n                  <monkey-filter-menu-item\r\n                    [label]=\"operatorLabel(c)\"\r\n                    [selected]=\"c === f.condition\"\r\n                    (onItemClick)=\"onSelectCondition(f, c)\"\r\n                  />\r\n                }\r\n              </monkey-filter-menu>\r\n            }\r\n          </monkey-filter-segment>\r\n          @if (hasValueSegment(f)) {\r\n            <monkey-filter-segment\r\n              [placeholder]=\"valuePlaceholder(f)\"\r\n              [text]=\"displayOf(f)\"\r\n              [disabled]=\"disabled()\"\r\n              [open]=\"isOpen(f.key, 'value')\"\r\n              (onOpenChange)=\"onValueOpenChange(f, $event)\"\r\n            >\r\n              @if (isOpen(f.key, 'value')) {\r\n                @switch (panelFor(f)) {\r\n                  @case ('status') {\r\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-status\" [showSearch]=\"false\">\r\n                      @for (s of statusOptionsOf(f); track s.value) {\r\n                        <monkey-filter-menu-item\r\n                          property=\"checkbox\"\r\n                          [label]=\"s.description\"\r\n                          [checked]=\"statusValues.includes(s.value)\"\r\n                          (onItemClick)=\"onToggleStatus(s.value)\"\r\n                        />\r\n                      }\r\n                      <div class=\"mecx-filter-bar-panel-actions\">\r\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\r\n                          {{ labels().confirm }}\r\n                        </monkey-button>\r\n                      </div>\r\n                    </monkey-filter-menu>\r\n                  }\r\n\r\n                  @case ('date-day') {\r\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\r\n                      <div class=\"mecx-filter-bar-field\">\r\n                        <label class=\"mecx-filter-bar-field-row\">\r\n                          <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\r\n                          <monkey-form-field size=\"sm\" noFooterSpace>\r\n                            <input\r\n                              type=\"date\"\r\n                              monkey-input\r\n                              [(ngModel)]=\"dayValue\"\r\n                              (keyup.enter)=\"onApply(f)\"\r\n                            />\r\n                          </monkey-form-field>\r\n                        </label>\r\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\r\n                          {{ labels().confirm }}\r\n                        </monkey-button>\r\n                      </div>\r\n                    </monkey-filter-menu>\r\n                  }\r\n\r\n                  @case ('date-range') {\r\n                    @if (calendarOpen() === f.key) {\r\n                      <monkey-date-range\r\n                        class=\"mecx-filter-bar-calendar\"\r\n                        [startDate]=\"dateRange.startDate\"\r\n                        [endDate]=\"dateRange.endDate\"\r\n                        [minDate]=\"minDateOf(f)\"\r\n                        [maxDate]=\"maxDateOf(f)\"\r\n                        (onDate)=\"onDateChange(f, $event)\"\r\n                        (onCancel)=\"onBackToShortcuts()\"\r\n                      ></monkey-date-range>\r\n                    } @else {\r\n                      <monkey-filter-menu [showSearch]=\"false\">\r\n                        @for (shortcut of dateShortcuts(); track shortcut.key) {\r\n                          <monkey-filter-menu-item\r\n                            [label]=\"shortcut.label\"\r\n                            (onItemClick)=\"onQuickDate(f, shortcut.key)\"\r\n                          />\r\n                        }\r\n                      </monkey-filter-menu>\r\n                    }\r\n                  }\r\n\r\n                  @default {\r\n                    <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\r\n                      <div class=\"mecx-filter-bar-field\">\r\n                        @if (f.type === 'currency') {\r\n                          <label class=\"mecx-filter-bar-field-row\">\r\n                            <span class=\"mecx-filter-bar-field-label\">\r\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\r\n                            </span>\r\n                            <monkey-form-field size=\"sm\" noFooterSpace>\r\n                              <input\r\n                                type=\"text\"\r\n                                monkey-input-currency\r\n                                [(ngModel)]=\"currencyValue\"\r\n                                (keyup.enter)=\"onApply(f)\"\r\n                              />\r\n                            </monkey-form-field>\r\n                          </label>\r\n                          @if (isRange(f)) {\r\n                            <label class=\"mecx-filter-bar-field-row\">\r\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\r\n                              <monkey-form-field size=\"sm\" noFooterSpace>\r\n                                <input\r\n                                  type=\"text\"\r\n                                  monkey-input-currency\r\n                                  [(ngModel)]=\"currencyValue2\"\r\n                                  (keyup.enter)=\"onApply(f)\"\r\n                                />\r\n                              </monkey-form-field>\r\n                            </label>\r\n                          }\r\n                        } @else {\r\n                          <label class=\"mecx-filter-bar-field-row\">\r\n                            <span class=\"mecx-filter-bar-field-label\">\r\n                              {{ isRange(f) ? labels().rangeFrom : f.label }}\r\n                            </span>\r\n                            <monkey-form-field size=\"sm\" noFooterSpace>\r\n                              <input\r\n                                type=\"text\"\r\n                                monkey-input\r\n                                [placeholder]=\"valuePlaceholder(f)\"\r\n                                [(ngModel)]=\"textValue\"\r\n                                (keyup.enter)=\"onApply(f)\"\r\n                              />\r\n                            </monkey-form-field>\r\n                          </label>\r\n                          @if (isRange(f)) {\r\n                            <label class=\"mecx-filter-bar-field-row\">\r\n                              <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\r\n                              <monkey-form-field size=\"sm\" noFooterSpace>\r\n                                <input\r\n                                  type=\"text\"\r\n                                  monkey-input\r\n                                  [(ngModel)]=\"textValue2\"\r\n                                  (keyup.enter)=\"onApply(f)\"\r\n                                />\r\n                              </monkey-form-field>\r\n                            </label>\r\n                          }\r\n                        }\r\n\r\n                        <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\r\n                          {{ labels().confirm }}\r\n                        </monkey-button>\r\n                      </div>\r\n                    </monkey-filter-menu>\r\n                  }\r\n                }\r\n              }\r\n            </monkey-filter-segment>\r\n          }\r\n        </monkey-filter-chip>\r\n      </span>\r\n    }\r\n\r\n    @if (canAddFilter()) {\r\n      <span\r\n        class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\r\n        [attr.data-flip-id]=\"triggerFlipId()\"\r\n      >\r\n        <monkey-filter-trigger\r\n          [variant]=\"triggerVariant()\"\r\n          [icon]=\"triggerIcon()\"\r\n          [text]=\"labels().add\"\r\n          [ariaLabel]=\"labels().addAria\"\r\n          [disabled]=\"disabled()\"\r\n          [immediateExit]=\"immediateTriggerExit()\"\r\n          [open]=\"triggerOpen()\"\r\n          (onOpenChange)=\"onTriggerOpenChange($event)\"\r\n        >\r\n          @if (triggerOpen()) {\r\n            <monkey-filter-menu\r\n              class=\"mecx-filter-bar-menu-categories\"\r\n              [showSearch]=\"true\"\r\n              [searchPlaceholder]=\"labels().search\"\r\n              (onSearchChange)=\"categorySearch.set($event)\"\r\n            >\r\n              @for (opt of addOptions(); track opt.key; let i = $index) {\r\n                @if (needsDivider(addOptions(), i)) {\r\n                  <monkey-divider />\r\n                }\r\n                <monkey-filter-menu-item\r\n                  [leadIcon]=\"opt.icon ?? null\"\r\n                  [label]=\"opt.label\"\r\n                  (onItemClick)=\"onSelectCategory(i)\"\r\n                />\r\n              }\r\n            </monkey-filter-menu>\r\n          }\r\n        </monkey-filter-trigger>\r\n      </span>\r\n    }\r\n  </div>\r\n  @if (rows().length > 0) {\r\n    <monkey-scrollbar\r\n      class=\"mecx-filter-bar-bar\"\r\n      orientation=\"horizontal\"\r\n      size=\"small\"\r\n      [class.mecx-filter-bar-bar--visible]=\"scrollVisible()\"\r\n      [target]=\"rowEl\"\r\n    />\r\n  }\r\n\r\n  <div class=\"mecx-filter-bar-tail\">\r\n    @if (rows().length > 0) {\r\n      <div class=\"mecx-filter-bar-actions\">\r\n        <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\r\n          {{ labels().clear }}\r\n        </monkey-button>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"mecx-filter-bar-extra\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n@if (rows().length > 0) {\r\n  <monkey-divider />\r\n}\r\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-delay-settle: .32s;--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,.mecx-filter-bar-bar.mecx-scrollbar--inert{grid-area:bar;min-width:0;display:block;opacity:0;pointer-events:none;transition:opacity var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state) var(--mecx-filter-bar-delay-settle)}.mecx-filter-bar-bar.mecx-filter-bar-bar--visible{opacity:1;pointer-events:auto;transition-delay:0s}.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);background:var(--mecx-color-white)}.mecx-filter-bar-slot--trigger: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-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{content:none}}\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: { _scrollbar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MonkeyScrollbarComponent), { isSignal: true }] }], _rowEl: [{ type: i0.ViewChild, args: ['rowEl', { 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 }] }] } });
 
 /** ************************