monkey-style-guide 21.2.29 → 21.2.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7814,7 +7814,13 @@ class MonkeyFilterBarComponent {
|
|
|
7814
7814
|
this.closePanel();
|
|
7815
7815
|
});
|
|
7816
7816
|
});
|
|
7817
|
-
inject(DestroyRef)
|
|
7817
|
+
const destroyRef = inject(DestroyRef);
|
|
7818
|
+
destroyRef.onDestroy(() => this.cancelCommit());
|
|
7819
|
+
afterNextRender(() => {
|
|
7820
|
+
const observer = new ResizeObserver(() => this.syncScrollbar());
|
|
7821
|
+
observer.observe(this._rowEl().nativeElement);
|
|
7822
|
+
destroyRef.onDestroy(() => observer.disconnect());
|
|
7823
|
+
});
|
|
7818
7824
|
}
|
|
7819
7825
|
autoCondition(row, allowed) {
|
|
7820
7826
|
if (row.condition || allowed.length !== 1)
|
|
@@ -8301,7 +8307,7 @@ class MonkeyFilterBarComponent {
|
|
|
8301
8307
|
this.commit();
|
|
8302
8308
|
}
|
|
8303
8309
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8304
|
-
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\">{{\r\n labels().rangeTo\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)]=\"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\">{{\r\n labels().rangeTo\r\n }}</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", 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:4px;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 }); }
|
|
8310
|
+
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\">\n <div\n #rowEl\n class=\"mecx-filter-bar-row\"\n (animationend)=\"onSlotSettled($event)\"\n (transitionend)=\"onSlotSettled($event)\"\n >\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\">{{\n labels().rangeTo\n }}</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\">{{\n labels().rangeTo\n }}</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 (scrollVisible()) {\n <monkey-scrollbar\n class=\"mecx-filter-bar-bar\"\n orientation=\"horizontal\"\n [target]=\"rowEl\"\n [animate.enter]=\"appPainted() ? 'mecx-filter-bar-bar--entering' : ''\"\n animate.leave=\"mecx-filter-bar-bar--leaving\"\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", 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;width:100%}.mecx-filter-bar-bar{grid-area:bar;min-width:0;display:block;margin-block-start:4px}@keyframes mecx-filter-bar-bar-in{0%{opacity:0}}@keyframes mecx-filter-bar-bar-out{to{opacity:0}}.mecx-filter-bar-bar--entering{animation:mecx-filter-bar-bar-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-bar--leaving{animation:mecx-filter-bar-bar-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.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-tail:has(.mecx-filter-bar-actions,.mecx-filter-bar-extra>*){margin-block-start:4px}.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 }); }
|
|
8305
8311
|
}
|
|
8306
8312
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
8307
8313
|
type: Component,
|
|
@@ -8322,7 +8328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
8322
8328
|
'data-testid': 'monkey-filter-bar',
|
|
8323
8329
|
class: 'mecx-filter-bar',
|
|
8324
8330
|
'[class.mecx-filter-bar--disabled]': 'disabled()'
|
|
8325
|
-
}, 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\">{{\r\n labels().rangeTo\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)]=\"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\">{{\r\n labels().rangeTo\r\n }}</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", 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:4px;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"] }]
|
|
8331
|
+
}, template: "<div class=\"mecx-filter-bar-line\">\n <div\n #rowEl\n class=\"mecx-filter-bar-row\"\n (animationend)=\"onSlotSettled($event)\"\n (transitionend)=\"onSlotSettled($event)\"\n >\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\">{{\n labels().rangeTo\n }}</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\">{{\n labels().rangeTo\n }}</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 (scrollVisible()) {\n <monkey-scrollbar\n class=\"mecx-filter-bar-bar\"\n orientation=\"horizontal\"\n [target]=\"rowEl\"\n [animate.enter]=\"appPainted() ? 'mecx-filter-bar-bar--entering' : ''\"\n animate.leave=\"mecx-filter-bar-bar--leaving\"\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", 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;width:100%}.mecx-filter-bar-bar{grid-area:bar;min-width:0;display:block;margin-block-start:4px}@keyframes mecx-filter-bar-bar-in{0%{opacity:0}}@keyframes mecx-filter-bar-bar-out{to{opacity:0}}.mecx-filter-bar-bar--entering{animation:mecx-filter-bar-bar-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-bar--leaving{animation:mecx-filter-bar-bar-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.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-tail:has(.mecx-filter-bar-actions,.mecx-filter-bar-extra>*){margin-block-start:4px}.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"] }]
|
|
8326
8332
|
}], 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 }] }] } });
|
|
8327
8333
|
|
|
8328
8334
|
/** ************************
|