monkey-style-guide 21.2.16 → 21.2.19
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.
|
@@ -2258,7 +2258,7 @@ class MonkeyFormFieldComponent {
|
|
|
2258
2258
|
}
|
|
2259
2259
|
constructor() {
|
|
2260
2260
|
this.size = 'md';
|
|
2261
|
-
this.noFooterSpace = false;
|
|
2261
|
+
this.noFooterSpace = input(false, { ...(ngDevMode ? { debugName: "noFooterSpace" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2262
2262
|
this.displayOnly = input(false, ...(ngDevMode ? [{ debugName: "displayOnly" }] : /* istanbul ignore next */ []));
|
|
2263
2263
|
this.onDisplayOnlyChange = output();
|
|
2264
2264
|
this._formFieldControl = contentChild(MonkeyFormFieldControl, { ...(ngDevMode ? { debugName: "_formFieldControl" } : /* istanbul ignore next */ {}), descendants: true });
|
|
@@ -2286,7 +2286,9 @@ class MonkeyFormFieldComponent {
|
|
|
2286
2286
|
this.hasInfo = computed(() => this._infoChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasInfo" }] : /* istanbul ignore next */ []));
|
|
2287
2287
|
this.hasError = computed(() => this._errorChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2288
2288
|
this.showHeader = computed(() => this.hasLabel() || this.hasHelper(), ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
|
|
2289
|
-
this.showFooter = computed(() =>
|
|
2289
|
+
this.showFooter = computed(() => {
|
|
2290
|
+
return !this.noFooterSpace() || this.hasInfo() || this.hasError();
|
|
2291
|
+
}, ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
|
|
2290
2292
|
this.hideBorder = computed(() => {
|
|
2291
2293
|
const { control } = this;
|
|
2292
2294
|
return (control?.type === 'input-code' ||
|
|
@@ -2430,7 +2432,7 @@ class MonkeyFormFieldComponent {
|
|
|
2430
2432
|
}, 0);
|
|
2431
2433
|
}
|
|
2432
2434
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2433
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, hideAction: { classPropertyName: "hideAction", publicName: "hideAction", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, enableClear: { classPropertyName: "enableClear", publicName: "enableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, noFooterSpace: { classPropertyName: "noFooterSpace", publicName: "noFooterSpace", isSignal:
|
|
2435
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, hideAction: { classPropertyName: "hideAction", publicName: "hideAction", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, enableClear: { classPropertyName: "enableClear", publicName: "enableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, noFooterSpace: { classPropertyName: "noFooterSpace", publicName: "noFooterSpace", isSignal: true, isRequired: false, transformFunction: null }, displayOnly: { classPropertyName: "displayOnly", publicName: "displayOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDisplayOnlyChange: "onDisplayOnlyChange" }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "class.mecx-form-field-borderless": "hideBorder()", "class.no-footer-space": "noFooterSpace()", "attr.id": "id", "id": "id", "class": "size" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true, isSignal: true }, { propertyName: "_displayChild", first: true, predicate: MonkeyDisplayDirective, descendants: true, isSignal: true }, { propertyName: "_labelChildren", predicate: MonkeyLabelDirective, descendants: true, isSignal: true }, { propertyName: "_helperChildren", predicate: MonkeyHelperDirective, descendants: true, isSignal: true }, { propertyName: "_prefixChildren", predicate: MonkeyPrefixDirective, descendants: true, isSignal: true }, { propertyName: "_suffixChildren", predicate: MonkeySuffixDirective, descendants: true, isSignal: true }, { propertyName: "_infoChildren", predicate: MonkeyInfoDirective, descendants: true, isSignal: true }, { propertyName: "_errorChildren", predicate: MonkeyErrorDirective, descendants: true, isSignal: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (internalDisplayOnly()) {\r\n <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\r\n <div class=\"mecx-form-field-display-only-header\">\r\n <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\r\n </div>\r\n <div class=\"mecx-form-field-display-only-body\">\r\n <ng-content select=\"monkey-display\"></ng-content>\r\n </div>\r\n <div class=\"mecx-form-field-display-only-action\">\r\n {{ editDictionary | async }} <util-icon name=\"edit\" />\r\n </div>\r\n </div>\r\n} @else {\r\n @if (showHeader()) {\r\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\r\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\r\n <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\r\n </label>\r\n <ng-content select=\"monkey-helper\"></ng-content>\r\n </div>\r\n }\r\n\r\n <div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\r\n @if (hasPrefix()) {\r\n <ng-content select=\"monkey-prefix\"></ng-content>\r\n }\r\n @if (getSymbols(); as symbols) {\r\n <div class=\"mecx-form-field-prefix-symbol\">\r\n {{ symbols }}\r\n </div>\r\n }\r\n\r\n <ng-content></ng-content>\r\n\r\n @if (showClear()) {\r\n <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\r\n }\r\n @if (showCalendar) {\r\n <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\r\n }\r\n @if (showLoading) {\r\n <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\r\n }\r\n\r\n @if (hasSuffix()) {\r\n <ng-content select=\"monkey-suffix\"></ng-content>\r\n }\r\n </div>\r\n\r\n @if (showFooter()) {\r\n <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\r\n @switch (getFooterMessages()) {\r\n @case ('error') {\r\n <ng-content select=\"monkey-error\"></ng-content>\r\n }\r\n @case ('info') {\r\n <div class=\"mecx-form-field-info\">\r\n <ng-content select=\"monkey-info\"></ng-content>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n}\r\n\r\n<ng-template #labelTpl>\r\n <ng-content select=\"monkey-label\"></ng-content>\r\n</ng-template>\r\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:flex-end}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-body{width:100%;border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{border-color:var(--mecx-color-gray-900)}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px;cursor:not-allowed}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.sm .mecx-form-field-body monkey-prefix .mk-i,.sm .mecx-form-field-body monkey-suffix .mk-i{width:16px;height:16px;font-size:16px}.sm .mecx-form-field-body util-icon svg{transform:scale(.72)}.md .mecx-form-field-body{height:40px}.md .mecx-form-field-body monkey-prefix .mk-i,.md .mecx-form-field-body monkey-suffix .mk-i{width:20px;height:20px;font-size:20px}.md .mecx-form-field-body util-icon{transform:scale(.834)}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column;min-height:16px}.no-footer-space .mecx-form-field-footer{min-height:initial}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media(max-width:767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:var(--mecx-color-white);padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2434
2436
|
}
|
|
2435
2437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
|
|
2436
2438
|
type: Component,
|
|
@@ -2440,7 +2442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
2440
2442
|
'[class.mecx-form-field-focused]': 'control.focused',
|
|
2441
2443
|
'[class.mecx-form-field-invalid]': 'showInvalid',
|
|
2442
2444
|
'[class.mecx-form-field-borderless]': 'hideBorder()',
|
|
2443
|
-
'[class.no-footer-space]': 'noFooterSpace',
|
|
2445
|
+
'[class.no-footer-space]': 'noFooterSpace()',
|
|
2444
2446
|
'[attr.id]': 'id',
|
|
2445
2447
|
'[id]': 'id',
|
|
2446
2448
|
'[class]': 'size'
|
|
@@ -2455,10 +2457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
2455
2457
|
args: [{ transform: booleanAttribute }]
|
|
2456
2458
|
}], size: [{
|
|
2457
2459
|
type: Input
|
|
2458
|
-
}], noFooterSpace: [{
|
|
2459
|
-
type: Input,
|
|
2460
|
-
args: [{ transform: booleanAttribute }]
|
|
2461
|
-
}], displayOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayOnly", required: false }] }], onDisplayOnlyChange: [{ type: i0.Output, args: ["onDisplayOnlyChange"] }], _formFieldControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonkeyFormFieldControl), { ...{ descendants: true }, isSignal: true }] }], _displayChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonkeyDisplayDirective), { ...{ descendants: true }, isSignal: true }] }], _labelChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyLabelDirective), { ...{ descendants: true }, isSignal: true }] }], _helperChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyHelperDirective), { ...{ descendants: true }, isSignal: true }] }], _prefixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyPrefixDirective), { ...{ descendants: true }, isSignal: true }] }], _suffixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeySuffixDirective), { ...{ descendants: true }, isSignal: true }] }], _infoChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyInfoDirective), { ...{ descendants: true }, isSignal: true }] }], _errorChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyErrorDirective), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
2460
|
+
}], noFooterSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "noFooterSpace", required: false }] }], displayOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayOnly", required: false }] }], onDisplayOnlyChange: [{ type: i0.Output, args: ["onDisplayOnlyChange"] }], _formFieldControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonkeyFormFieldControl), { ...{ descendants: true }, isSignal: true }] }], _displayChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonkeyDisplayDirective), { ...{ descendants: true }, isSignal: true }] }], _labelChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyLabelDirective), { ...{ descendants: true }, isSignal: true }] }], _helperChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyHelperDirective), { ...{ descendants: true }, isSignal: true }] }], _prefixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyPrefixDirective), { ...{ descendants: true }, isSignal: true }] }], _suffixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeySuffixDirective), { ...{ descendants: true }, isSignal: true }] }], _infoChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyInfoDirective), { ...{ descendants: true }, isSignal: true }] }], _errorChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyErrorDirective), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
2462
2461
|
|
|
2463
2462
|
/** ************************
|
|
2464
2463
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
@@ -6498,6 +6497,10 @@ class MonkeyFilterBarComponent {
|
|
|
6498
6497
|
constructor() {
|
|
6499
6498
|
this._hostEl = inject(ElementRef);
|
|
6500
6499
|
this._injector = inject(Injector);
|
|
6500
|
+
this._currencyCode = inject(DEFAULT_CURRENCY_CODE);
|
|
6501
|
+
this._localeId = inject(LOCALE_ID);
|
|
6502
|
+
this._currencyPipe = inject(CurrencyPipe);
|
|
6503
|
+
this._scrollbar = viewChild(MonkeyScrollbarComponent, ...(ngDevMode ? [{ debugName: "_scrollbar" }] : /* istanbul ignore next */ []));
|
|
6501
6504
|
this._text = toSignal(inject(MonkeyDictionaryService).get('FILTER-BAR'));
|
|
6502
6505
|
this._commitTimer = null;
|
|
6503
6506
|
this._reported = signal([], ...(ngDevMode ? [{ debugName: "_reported" }] : /* istanbul ignore next */ []));
|
|
@@ -6578,6 +6581,7 @@ class MonkeyFilterBarComponent {
|
|
|
6578
6581
|
operands: filter.operands
|
|
6579
6582
|
};
|
|
6580
6583
|
}));
|
|
6584
|
+
this.scheduleRemeasure();
|
|
6581
6585
|
});
|
|
6582
6586
|
});
|
|
6583
6587
|
effect(() => {
|
|
@@ -6688,7 +6692,12 @@ class MonkeyFilterBarComponent {
|
|
|
6688
6692
|
}
|
|
6689
6693
|
}
|
|
6690
6694
|
money(value) {
|
|
6691
|
-
|
|
6695
|
+
const currency = this._currencyCode || 'BRL';
|
|
6696
|
+
const amount = this._currencyPipe.transform(value, currency, '', '1.2-2', this._localeId || 'pt-BR');
|
|
6697
|
+
if (amount === null)
|
|
6698
|
+
return '';
|
|
6699
|
+
const symbol = getCurrencySymbol(currency);
|
|
6700
|
+
return symbol ? `${symbol} ${amount}` : amount;
|
|
6692
6701
|
}
|
|
6693
6702
|
showDate(iso) {
|
|
6694
6703
|
if (!iso)
|
|
@@ -6800,10 +6809,14 @@ class MonkeyFilterBarComponent {
|
|
|
6800
6809
|
afterNextRender(() => {
|
|
6801
6810
|
if (follow)
|
|
6802
6811
|
this.followEnd(container);
|
|
6812
|
+
this._scrollbar()?.remeasure();
|
|
6803
6813
|
animateFlip(container, before, FROZEN);
|
|
6804
6814
|
this.immediateTriggerExit.set(false);
|
|
6805
6815
|
}, { injector: this._injector });
|
|
6806
6816
|
}
|
|
6817
|
+
scheduleRemeasure() {
|
|
6818
|
+
afterNextRender(() => this._scrollbar()?.remeasure(), { injector: this._injector });
|
|
6819
|
+
}
|
|
6807
6820
|
operatorLabel(operator) {
|
|
6808
6821
|
if (!operator)
|
|
6809
6822
|
return '';
|
|
@@ -7042,7 +7055,7 @@ class MonkeyFilterBarComponent {
|
|
|
7042
7055
|
this.commit();
|
|
7043
7056
|
}
|
|
7044
7057
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7045
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChange: "onFiltersChange" }, host: { attributes: { "data-testid": "monkey-filter-bar" }, properties: { "class.mecx-filter-bar--disabled": "disabled()" }, classAttribute: "mecx-filter-bar" }, ngImport: i0, template: "<div class=\"mecx-filter-bar-line\">\n <div #rowEl class=\"mecx-filter-bar-row\">\n @for (f of rows(); track f.key) {\n <span\n class=\"mecx-filter-bar-slot\"\n [attr.data-flip-id]=\"f.key\"\n [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\n animate.leave=\"mecx-filter-bar-slot--leaving\"\n >\n <monkey-filter-chip\n [removeLabel]=\"labels().remove\"\n [disabled]=\"disabled()\"\n (onRemove)=\"onRemove(f)\"\n >\n <monkey-filter-segment\n [icon]=\"f.icon ?? null\"\n [text]=\"f.label\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'category')\"\n (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'category')) {\n <monkey-filter-menu\n class=\"mecx-filter-bar-menu-categories\"\n [showSearch]=\"true\"\n [searchPlaceholder]=\"labels().search\"\n (onSearchChange)=\"categorySearch.set($event)\"\n >\n @for (opt of changeOptions(); track opt.key; let i = $index) {\n @if (needsDivider(changeOptions(), i)) {\n <monkey-divider />\n }\n <monkey-filter-menu-item\n [leadIcon]=\"opt.icon ?? null\"\n [label]=\"opt.label\"\n [selected]=\"opt.key === f.key\"\n [disabled]=\"opt.key !== f.key && isFilterActive(opt.key)\"\n (onItemClick)=\"onChangeCategory(f, i)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-segment>\n <monkey-filter-segment\n [placeholder]=\"labels().selectCondition\"\n [text]=\"operatorLabel(f.condition)\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'condition')\"\n (onOpenChange)=\"onConditionOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'condition')) {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\n @for (c of conditionsFor(f); track c) {\n <monkey-filter-menu-item\n [label]=\"operatorLabel(c)\"\n [selected]=\"c === f.condition\"\n (onItemClick)=\"onSelectCondition(f, c)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-segment>\n @if (hasValueSegment(f)) {\n <monkey-filter-segment\n [placeholder]=\"valuePlaceholder(f)\"\n [text]=\"displayOf(f)\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'value')\"\n (onOpenChange)=\"onValueOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'value')) {\n @switch (panelFor(f)) {\n @case ('status') {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-status\" [showSearch]=\"false\">\n @for (s of statusOptionsOf(f); track s.value) {\n <monkey-filter-menu-item\n property=\"checkbox\"\n [label]=\"s.description\"\n [checked]=\"statusValues.includes(s.value)\"\n (onItemClick)=\"onToggleStatus(s.value)\"\n />\n }\n <div class=\"mecx-filter-bar-panel-actions\">\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n\n @case ('date-day') {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n <div class=\"mecx-filter-bar-field\">\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"date\"\n monkey-input\n [(ngModel)]=\"dayValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n\n @case ('date-range') {\n @if (calendarOpen() === f.key) {\n <monkey-date-range\n class=\"mecx-filter-bar-calendar\"\n [startDate]=\"dateRange.startDate\"\n [endDate]=\"dateRange.endDate\"\n [minDate]=\"minDateOf(f)\"\n [maxDate]=\"maxDateOf(f)\"\n (onDate)=\"onDateChange(f, $event)\"\n (onCancel)=\"onBackToShortcuts()\"\n ></monkey-date-range>\n } @else {\n <monkey-filter-menu [showSearch]=\"false\">\n @for (shortcut of dateShortcuts(); track shortcut.key) {\n <monkey-filter-menu-item\n [label]=\"shortcut.label\"\n (onItemClick)=\"onQuickDate(f, shortcut.key)\"\n />\n }\n </monkey-filter-menu>\n }\n }\n\n @default {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n <div class=\"mecx-filter-bar-field\">\n @if (f.type === 'currency') {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">\n {{ isRange(f) ? labels().rangeFrom : f.label }}\n </span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input-currency\n [(ngModel)]=\"currencyValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n @if (isRange(f)) {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input-currency\n [(ngModel)]=\"currencyValue2\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n }\n } @else {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">\n {{ isRange(f) ? labels().rangeFrom : f.label }}\n </span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [placeholder]=\"valuePlaceholder(f)\"\n [(ngModel)]=\"textValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n @if (isRange(f)) {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [(ngModel)]=\"textValue2\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n }\n }\n\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n }\n }\n </monkey-filter-segment>\n }\n </monkey-filter-chip>\n </span>\n }\n\n @if (canAddFilter()) {\n <span\n class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\n [attr.data-flip-id]=\"triggerFlipId()\"\n >\n <monkey-filter-trigger\n [variant]=\"triggerVariant()\"\n [icon]=\"triggerIcon()\"\n [text]=\"labels().add\"\n [ariaLabel]=\"labels().addAria\"\n [disabled]=\"disabled()\"\n [immediateExit]=\"immediateTriggerExit()\"\n [open]=\"triggerOpen()\"\n (onOpenChange)=\"onTriggerOpenChange($event)\"\n >\n @if (triggerOpen()) {\n <monkey-filter-menu\n class=\"mecx-filter-bar-menu-categories\"\n [showSearch]=\"true\"\n [searchPlaceholder]=\"labels().search\"\n (onSearchChange)=\"categorySearch.set($event)\"\n >\n @for (opt of addOptions(); track opt.key; let i = $index) {\n @if (needsDivider(addOptions(), i)) {\n <monkey-divider />\n }\n <monkey-filter-menu-item\n [leadIcon]=\"opt.icon ?? null\"\n [label]=\"opt.label\"\n (onItemClick)=\"onSelectCategory(i)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-trigger>\n </span>\n }\n </div>\n @if (rows().length > 0) {\n <monkey-scrollbar\n class=\"mecx-filter-bar-bar\"\n orientation=\"horizontal\"\n size=\"small\"\n [target]=\"rowEl\"\n />\n }\n\n <div class=\"mecx-filter-bar-tail\">\n @if (rows().length > 0) {\n <div class=\"mecx-filter-bar-actions\">\n <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\n {{ labels().clear }}\n </monkey-button>\n </div>\n }\n\n <div class=\"mecx-filter-bar-extra\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n@if (rows().length > 0) {\n <monkey-divider />\n}\n", styles: [".mecx-filter-bar{--mecx-filter-bar-duration-state: .15s;--mecx-filter-bar-duration-enter: .2s;--mecx-filter-bar-duration-exit: .15s;--mecx-filter-bar-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-filter-bar-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-filter-bar-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-filter-bar-scale-unfold: .94;--mecx-filter-bar-travel-anchored: 4px;--mecx-filter-bar-travel-slide: 16px;--mecx-filter-bar-stagger: 25ms;--mecx-filter-bar-control-height: 32px;--mecx-filter-bar-pointer-target: 40px;--mecx-filter-bar-reach: calc((var(--mecx-filter-bar-control-height) - var(--mecx-filter-bar-pointer-target)) / 2);--mecx-filter-bar-radius: 8px;--mecx-filter-bar-radius-item: 4px;--mecx-filter-bar-fade-width: 48px;--mecx-filter-bar-focus-reach: 4px;--mecx-filter-bar-z-raised: 1;--mecx-filter-bar-z-sticky: 2;--mecx-filter-bar-z-menu: 1000}@media(prefers-reduced-motion:reduce){.mecx-filter-bar{--mecx-filter-bar-duration-state: 1ms;--mecx-filter-bar-duration-enter: 1ms;--mecx-filter-bar-duration-exit: 1ms;--mecx-filter-bar-scale-unfold: 1;--mecx-filter-bar-travel-anchored: 0px;--mecx-filter-bar-travel-slide: 0px;--mecx-filter-bar-stagger: 0ms}}.mecx-filter-bar{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-extra{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.mecx-filter-bar-extra:empty{display:none}.mecx-filter-bar-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"row tail\" \"bar bar\";align-items:center;row-gap:8px;width:100%}.mecx-filter-bar-bar{grid-area:bar;min-width:0}.mecx-filter-bar-tail{grid-area:tail;display:flex;align-items:center;min-width:0}.mecx-filter-bar-row{grid-area:row;display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-filter-bar-pointer-target);margin-inline-start:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline:var(--mecx-filter-bar-focus-reach) var(--mecx-filter-bar-fade-width);scroll-padding-inline-start:var(--mecx-filter-bar-focus-reach);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar--disabled .mecx-filter-bar-row{cursor:default}.mecx-filter-bar-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-filter-bar-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-slot-in{0%{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-slot-out{to{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}.mecx-filter-bar-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-slot-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-slot--entering{animation:mecx-filter-bar-slot-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter);position:relative;z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-bar-slot:has(.mecx-filter-segment--open),.mecx-filter-bar-slot:has(.mecx-filter-trigger--open){z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-menu.mecx-filter-bar-menu-categories{width:220px}.mecx-filter-menu.mecx-filter-bar-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-menu-field{width:238px}.mecx-filter-bar-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-field monkey-button,.mecx-filter-bar-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-field-row{display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer}.mecx-filter-bar-field-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px}.mecx-filter-bar-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-panel-actions monkey-button,.mecx-filter-bar-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}@media(max-width:767.98px){.mecx-filter-bar-line{grid-template-columns:minmax(0,1fr);grid-template-areas:\"row\" \"bar\" \"tail\";position:relative}.mecx-filter-bar-slot--trigger{position:sticky;right:0;z-index:var(--mecx-filter-bar-z-sticky)}.mecx-filter-bar-row{margin-inline-end:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline-end:var(--mecx-filter-bar-focus-reach)}.mecx-filter-bar-actions{padding-left:0;align-self:auto;background:none;position:static}.mecx-filter-bar-actions:before{right:var(--mecx-filter-bar-control-height);bottom:auto;height:var(--mecx-filter-bar-pointer-target)}}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }, { kind: "component", type: MonkeyDividerComponent, selector: "monkey-divider", inputs: ["size", "vertical", "id"] }, { kind: "component", type: MonkeyFilterChipComponent, selector: "monkey-filter-chip", inputs: ["removeIcon", "removeLabel", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: MonkeyFilterMenuComponent, selector: "monkey-filter-menu", inputs: ["showSearch", "searchPlaceholder", "showScroll", "maxHeight"], outputs: ["onSearchChange"] }, { kind: "component", type: MonkeyFilterMenuItemComponent, selector: "monkey-filter-menu-item", inputs: ["property", "leadIcon", "label", "description", "checked", "selected", "disabled"], outputs: ["onItemClick"] }, { kind: "component", type: MonkeyFilterSegmentComponent, selector: "monkey-filter-segment", inputs: ["icon", "text", "placeholder", "readonlySegment", "disabled", "open"], outputs: ["onOpenChange", "onSegmentClick"] }, { kind: "component", type: MonkeyFilterTriggerComponent, selector: "monkey-filter-trigger", inputs: ["variant", "icon", "text", "ariaLabel", "disabled", "immediateExit", "open", "alignment"], outputs: ["onOpenChange"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "directive", type: MonkeyInputCurrencyDirective, selector: "input[monkey-input-currency]", inputs: ["name", "disabled", "id", "required", "type"], exportAs: ["monkeyInput"] }, { kind: "component", type: MonkeyScrollbarComponent, selector: "monkey-scrollbar", inputs: ["orientation", "size", "target"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7058
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChange: "onFiltersChange" }, host: { attributes: { "data-testid": "monkey-filter-bar" }, properties: { "class.mecx-filter-bar--disabled": "disabled()" }, classAttribute: "mecx-filter-bar" }, providers: [CurrencyPipe], viewQueries: [{ propertyName: "_scrollbar", first: true, predicate: MonkeyScrollbarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mecx-filter-bar-line\">\n <div #rowEl class=\"mecx-filter-bar-row\">\n @for (f of rows(); track f.key) {\n <span\n class=\"mecx-filter-bar-slot\"\n [attr.data-flip-id]=\"f.key\"\n [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\n animate.leave=\"mecx-filter-bar-slot--leaving\"\n >\n <monkey-filter-chip\n [removeLabel]=\"labels().remove\"\n [disabled]=\"disabled()\"\n (onRemove)=\"onRemove(f)\"\n >\n <monkey-filter-segment\n [icon]=\"f.icon ?? null\"\n [text]=\"f.label\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'category')\"\n (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'category')) {\n <monkey-filter-menu\n class=\"mecx-filter-bar-menu-categories\"\n [showSearch]=\"true\"\n [searchPlaceholder]=\"labels().search\"\n (onSearchChange)=\"categorySearch.set($event)\"\n >\n @for (opt of changeOptions(); track opt.key; let i = $index) {\n @if (needsDivider(changeOptions(), i)) {\n <monkey-divider />\n }\n <monkey-filter-menu-item\n [leadIcon]=\"opt.icon ?? null\"\n [label]=\"opt.label\"\n [selected]=\"opt.key === f.key\"\n [disabled]=\"opt.key !== f.key && isFilterActive(opt.key)\"\n (onItemClick)=\"onChangeCategory(f, i)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-segment>\n <monkey-filter-segment\n [placeholder]=\"labels().selectCondition\"\n [text]=\"operatorLabel(f.condition)\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'condition')\"\n (onOpenChange)=\"onConditionOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'condition')) {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\n @for (c of conditionsFor(f); track c) {\n <monkey-filter-menu-item\n [label]=\"operatorLabel(c)\"\n [selected]=\"c === f.condition\"\n (onItemClick)=\"onSelectCondition(f, c)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-segment>\n @if (hasValueSegment(f)) {\n <monkey-filter-segment\n [placeholder]=\"valuePlaceholder(f)\"\n [text]=\"displayOf(f)\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'value')\"\n (onOpenChange)=\"onValueOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'value')) {\n @switch (panelFor(f)) {\n @case ('status') {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-status\" [showSearch]=\"false\">\n @for (s of statusOptionsOf(f); track s.value) {\n <monkey-filter-menu-item\n property=\"checkbox\"\n [label]=\"s.description\"\n [checked]=\"statusValues.includes(s.value)\"\n (onItemClick)=\"onToggleStatus(s.value)\"\n />\n }\n <div class=\"mecx-filter-bar-panel-actions\">\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n\n @case ('date-day') {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n <div class=\"mecx-filter-bar-field\">\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"date\"\n monkey-input\n [(ngModel)]=\"dayValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n\n @case ('date-range') {\n @if (calendarOpen() === f.key) {\n <monkey-date-range\n class=\"mecx-filter-bar-calendar\"\n [startDate]=\"dateRange.startDate\"\n [endDate]=\"dateRange.endDate\"\n [minDate]=\"minDateOf(f)\"\n [maxDate]=\"maxDateOf(f)\"\n (onDate)=\"onDateChange(f, $event)\"\n (onCancel)=\"onBackToShortcuts()\"\n ></monkey-date-range>\n } @else {\n <monkey-filter-menu [showSearch]=\"false\">\n @for (shortcut of dateShortcuts(); track shortcut.key) {\n <monkey-filter-menu-item\n [label]=\"shortcut.label\"\n (onItemClick)=\"onQuickDate(f, shortcut.key)\"\n />\n }\n </monkey-filter-menu>\n }\n }\n\n @default {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n <div class=\"mecx-filter-bar-field\">\n @if (f.type === 'currency') {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">\n {{ isRange(f) ? labels().rangeFrom : f.label }}\n </span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input-currency\n [(ngModel)]=\"currencyValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n @if (isRange(f)) {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input-currency\n [(ngModel)]=\"currencyValue2\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n }\n } @else {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">\n {{ isRange(f) ? labels().rangeFrom : f.label }}\n </span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [placeholder]=\"valuePlaceholder(f)\"\n [(ngModel)]=\"textValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n @if (isRange(f)) {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [(ngModel)]=\"textValue2\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n }\n }\n\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n }\n }\n </monkey-filter-segment>\n }\n </monkey-filter-chip>\n </span>\n }\n\n @if (canAddFilter()) {\n <span\n class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\n [attr.data-flip-id]=\"triggerFlipId()\"\n >\n <monkey-filter-trigger\n [variant]=\"triggerVariant()\"\n [icon]=\"triggerIcon()\"\n [text]=\"labels().add\"\n [ariaLabel]=\"labels().addAria\"\n [disabled]=\"disabled()\"\n [immediateExit]=\"immediateTriggerExit()\"\n [open]=\"triggerOpen()\"\n (onOpenChange)=\"onTriggerOpenChange($event)\"\n >\n @if (triggerOpen()) {\n <monkey-filter-menu\n class=\"mecx-filter-bar-menu-categories\"\n [showSearch]=\"true\"\n [searchPlaceholder]=\"labels().search\"\n (onSearchChange)=\"categorySearch.set($event)\"\n >\n @for (opt of addOptions(); track opt.key; let i = $index) {\n @if (needsDivider(addOptions(), i)) {\n <monkey-divider />\n }\n <monkey-filter-menu-item\n [leadIcon]=\"opt.icon ?? null\"\n [label]=\"opt.label\"\n (onItemClick)=\"onSelectCategory(i)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-trigger>\n </span>\n }\n </div>\n @if (rows().length > 0) {\n <monkey-scrollbar\n class=\"mecx-filter-bar-bar\"\n orientation=\"horizontal\"\n size=\"small\"\n [target]=\"rowEl\"\n />\n }\n\n <div class=\"mecx-filter-bar-tail\">\n @if (rows().length > 0) {\n <div class=\"mecx-filter-bar-actions\">\n <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\n {{ labels().clear }}\n </monkey-button>\n </div>\n }\n\n <div class=\"mecx-filter-bar-extra\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n@if (rows().length > 0) {\n <monkey-divider />\n}\n", styles: [".mecx-filter-bar{--mecx-filter-bar-duration-state: .15s;--mecx-filter-bar-duration-enter: .2s;--mecx-filter-bar-duration-exit: .15s;--mecx-filter-bar-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-filter-bar-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-filter-bar-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-filter-bar-scale-unfold: .94;--mecx-filter-bar-travel-anchored: 4px;--mecx-filter-bar-travel-slide: 16px;--mecx-filter-bar-stagger: 25ms;--mecx-filter-bar-control-height: 32px;--mecx-filter-bar-pointer-target: 40px;--mecx-filter-bar-reach: calc((var(--mecx-filter-bar-control-height) - var(--mecx-filter-bar-pointer-target)) / 2);--mecx-filter-bar-radius: 8px;--mecx-filter-bar-radius-item: 4px;--mecx-filter-bar-fade-width: 48px;--mecx-filter-bar-focus-reach: 4px;--mecx-filter-bar-z-raised: 1;--mecx-filter-bar-z-sticky: 2;--mecx-filter-bar-z-menu: 1000}@media(prefers-reduced-motion:reduce){.mecx-filter-bar{--mecx-filter-bar-duration-state: 1ms;--mecx-filter-bar-duration-enter: 1ms;--mecx-filter-bar-duration-exit: 1ms;--mecx-filter-bar-scale-unfold: 1;--mecx-filter-bar-travel-anchored: 0px;--mecx-filter-bar-travel-slide: 0px;--mecx-filter-bar-stagger: 0ms}}.mecx-filter-bar{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-extra{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.mecx-filter-bar-extra:empty{display:none}.mecx-filter-bar-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"row tail\" \"bar bar\";align-items:center;row-gap:8px;width:100%}.mecx-filter-bar-bar{grid-area:bar;min-width:0}.mecx-filter-bar-tail{grid-area:tail;display:flex;align-items:center;min-width:0}.mecx-filter-bar-row{grid-area:row;display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-filter-bar-pointer-target);margin-inline-start:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline:var(--mecx-filter-bar-focus-reach) var(--mecx-filter-bar-fade-width);scroll-padding-inline-start:var(--mecx-filter-bar-focus-reach);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar--disabled .mecx-filter-bar-row{cursor:default}.mecx-filter-bar-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-filter-bar-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-slot-in{0%{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-slot-out{to{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}.mecx-filter-bar-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-slot-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-slot--entering{animation:mecx-filter-bar-slot-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter);position:relative;z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-bar-slot:has(.mecx-filter-segment--open),.mecx-filter-bar-slot:has(.mecx-filter-trigger--open){z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-menu.mecx-filter-bar-menu-categories{width:220px}.mecx-filter-menu.mecx-filter-bar-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-menu-field{width:238px}.mecx-filter-bar-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-field monkey-button,.mecx-filter-bar-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-field-row{display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer}.mecx-filter-bar-field-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px}.mecx-filter-bar-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-panel-actions monkey-button,.mecx-filter-bar-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}@media(max-width:767.98px){.mecx-filter-bar-line{grid-template-columns:minmax(0,1fr);grid-template-areas:\"row\" \"bar\" \"tail\";position:relative}.mecx-filter-bar-slot--trigger{position:sticky;right:0;z-index:var(--mecx-filter-bar-z-sticky)}.mecx-filter-bar-row{margin-inline-end:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline-end:var(--mecx-filter-bar-focus-reach)}.mecx-filter-bar-actions{padding-left:0;align-self:auto;background:none;position:static}.mecx-filter-bar-actions:before{right:var(--mecx-filter-bar-control-height);bottom:auto;height:var(--mecx-filter-bar-pointer-target)}}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }, { kind: "component", type: MonkeyDividerComponent, selector: "monkey-divider", inputs: ["size", "vertical", "id"] }, { kind: "component", type: MonkeyFilterChipComponent, selector: "monkey-filter-chip", inputs: ["removeIcon", "removeLabel", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: MonkeyFilterMenuComponent, selector: "monkey-filter-menu", inputs: ["showSearch", "searchPlaceholder", "showScroll", "maxHeight"], outputs: ["onSearchChange"] }, { kind: "component", type: MonkeyFilterMenuItemComponent, selector: "monkey-filter-menu-item", inputs: ["property", "leadIcon", "label", "description", "checked", "selected", "disabled"], outputs: ["onItemClick"] }, { kind: "component", type: MonkeyFilterSegmentComponent, selector: "monkey-filter-segment", inputs: ["icon", "text", "placeholder", "readonlySegment", "disabled", "open"], outputs: ["onOpenChange", "onSegmentClick"] }, { kind: "component", type: MonkeyFilterTriggerComponent, selector: "monkey-filter-trigger", inputs: ["variant", "icon", "text", "ariaLabel", "disabled", "immediateExit", "open", "alignment"], outputs: ["onOpenChange"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "directive", type: MonkeyInputCurrencyDirective, selector: "input[monkey-input-currency]", inputs: ["name", "disabled", "id", "required", "type"], exportAs: ["monkeyInput"] }, { kind: "component", type: MonkeyScrollbarComponent, selector: "monkey-scrollbar", inputs: ["orientation", "size", "target"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7046
7059
|
}
|
|
7047
7060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
7048
7061
|
type: Component,
|
|
@@ -7059,12 +7072,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
7059
7072
|
MonkeyFormFieldModule,
|
|
7060
7073
|
MonkeyInputModule,
|
|
7061
7074
|
MonkeyScrollbarComponent
|
|
7062
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
7075
|
+
], providers: [CurrencyPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
7063
7076
|
'data-testid': 'monkey-filter-bar',
|
|
7064
7077
|
class: 'mecx-filter-bar',
|
|
7065
7078
|
'[class.mecx-filter-bar--disabled]': 'disabled()'
|
|
7066
7079
|
}, template: "<div class=\"mecx-filter-bar-line\">\n <div #rowEl class=\"mecx-filter-bar-row\">\n @for (f of rows(); track f.key) {\n <span\n class=\"mecx-filter-bar-slot\"\n [attr.data-flip-id]=\"f.key\"\n [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\n animate.leave=\"mecx-filter-bar-slot--leaving\"\n >\n <monkey-filter-chip\n [removeLabel]=\"labels().remove\"\n [disabled]=\"disabled()\"\n (onRemove)=\"onRemove(f)\"\n >\n <monkey-filter-segment\n [icon]=\"f.icon ?? null\"\n [text]=\"f.label\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'category')\"\n (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'category')) {\n <monkey-filter-menu\n class=\"mecx-filter-bar-menu-categories\"\n [showSearch]=\"true\"\n [searchPlaceholder]=\"labels().search\"\n (onSearchChange)=\"categorySearch.set($event)\"\n >\n @for (opt of changeOptions(); track opt.key; let i = $index) {\n @if (needsDivider(changeOptions(), i)) {\n <monkey-divider />\n }\n <monkey-filter-menu-item\n [leadIcon]=\"opt.icon ?? null\"\n [label]=\"opt.label\"\n [selected]=\"opt.key === f.key\"\n [disabled]=\"opt.key !== f.key && isFilterActive(opt.key)\"\n (onItemClick)=\"onChangeCategory(f, i)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-segment>\n <monkey-filter-segment\n [placeholder]=\"labels().selectCondition\"\n [text]=\"operatorLabel(f.condition)\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'condition')\"\n (onOpenChange)=\"onConditionOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'condition')) {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\n @for (c of conditionsFor(f); track c) {\n <monkey-filter-menu-item\n [label]=\"operatorLabel(c)\"\n [selected]=\"c === f.condition\"\n (onItemClick)=\"onSelectCondition(f, c)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-segment>\n @if (hasValueSegment(f)) {\n <monkey-filter-segment\n [placeholder]=\"valuePlaceholder(f)\"\n [text]=\"displayOf(f)\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'value')\"\n (onOpenChange)=\"onValueOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'value')) {\n @switch (panelFor(f)) {\n @case ('status') {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-status\" [showSearch]=\"false\">\n @for (s of statusOptionsOf(f); track s.value) {\n <monkey-filter-menu-item\n property=\"checkbox\"\n [label]=\"s.description\"\n [checked]=\"statusValues.includes(s.value)\"\n (onItemClick)=\"onToggleStatus(s.value)\"\n />\n }\n <div class=\"mecx-filter-bar-panel-actions\">\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n\n @case ('date-day') {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n <div class=\"mecx-filter-bar-field\">\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"date\"\n monkey-input\n [(ngModel)]=\"dayValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n\n @case ('date-range') {\n @if (calendarOpen() === f.key) {\n <monkey-date-range\n class=\"mecx-filter-bar-calendar\"\n [startDate]=\"dateRange.startDate\"\n [endDate]=\"dateRange.endDate\"\n [minDate]=\"minDateOf(f)\"\n [maxDate]=\"maxDateOf(f)\"\n (onDate)=\"onDateChange(f, $event)\"\n (onCancel)=\"onBackToShortcuts()\"\n ></monkey-date-range>\n } @else {\n <monkey-filter-menu [showSearch]=\"false\">\n @for (shortcut of dateShortcuts(); track shortcut.key) {\n <monkey-filter-menu-item\n [label]=\"shortcut.label\"\n (onItemClick)=\"onQuickDate(f, shortcut.key)\"\n />\n }\n </monkey-filter-menu>\n }\n }\n\n @default {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n <div class=\"mecx-filter-bar-field\">\n @if (f.type === 'currency') {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">\n {{ isRange(f) ? labels().rangeFrom : f.label }}\n </span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input-currency\n [(ngModel)]=\"currencyValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n @if (isRange(f)) {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input-currency\n [(ngModel)]=\"currencyValue2\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n }\n } @else {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">\n {{ isRange(f) ? labels().rangeFrom : f.label }}\n </span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [placeholder]=\"valuePlaceholder(f)\"\n [(ngModel)]=\"textValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n @if (isRange(f)) {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{ labels().rangeTo }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [(ngModel)]=\"textValue2\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n }\n }\n\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n }\n }\n </monkey-filter-segment>\n }\n </monkey-filter-chip>\n </span>\n }\n\n @if (canAddFilter()) {\n <span\n class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\n [attr.data-flip-id]=\"triggerFlipId()\"\n >\n <monkey-filter-trigger\n [variant]=\"triggerVariant()\"\n [icon]=\"triggerIcon()\"\n [text]=\"labels().add\"\n [ariaLabel]=\"labels().addAria\"\n [disabled]=\"disabled()\"\n [immediateExit]=\"immediateTriggerExit()\"\n [open]=\"triggerOpen()\"\n (onOpenChange)=\"onTriggerOpenChange($event)\"\n >\n @if (triggerOpen()) {\n <monkey-filter-menu\n class=\"mecx-filter-bar-menu-categories\"\n [showSearch]=\"true\"\n [searchPlaceholder]=\"labels().search\"\n (onSearchChange)=\"categorySearch.set($event)\"\n >\n @for (opt of addOptions(); track opt.key; let i = $index) {\n @if (needsDivider(addOptions(), i)) {\n <monkey-divider />\n }\n <monkey-filter-menu-item\n [leadIcon]=\"opt.icon ?? null\"\n [label]=\"opt.label\"\n (onItemClick)=\"onSelectCategory(i)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-trigger>\n </span>\n }\n </div>\n @if (rows().length > 0) {\n <monkey-scrollbar\n class=\"mecx-filter-bar-bar\"\n orientation=\"horizontal\"\n size=\"small\"\n [target]=\"rowEl\"\n />\n }\n\n <div class=\"mecx-filter-bar-tail\">\n @if (rows().length > 0) {\n <div class=\"mecx-filter-bar-actions\">\n <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\n {{ labels().clear }}\n </monkey-button>\n </div>\n }\n\n <div class=\"mecx-filter-bar-extra\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n@if (rows().length > 0) {\n <monkey-divider />\n}\n", styles: [".mecx-filter-bar{--mecx-filter-bar-duration-state: .15s;--mecx-filter-bar-duration-enter: .2s;--mecx-filter-bar-duration-exit: .15s;--mecx-filter-bar-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-filter-bar-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-filter-bar-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-filter-bar-scale-unfold: .94;--mecx-filter-bar-travel-anchored: 4px;--mecx-filter-bar-travel-slide: 16px;--mecx-filter-bar-stagger: 25ms;--mecx-filter-bar-control-height: 32px;--mecx-filter-bar-pointer-target: 40px;--mecx-filter-bar-reach: calc((var(--mecx-filter-bar-control-height) - var(--mecx-filter-bar-pointer-target)) / 2);--mecx-filter-bar-radius: 8px;--mecx-filter-bar-radius-item: 4px;--mecx-filter-bar-fade-width: 48px;--mecx-filter-bar-focus-reach: 4px;--mecx-filter-bar-z-raised: 1;--mecx-filter-bar-z-sticky: 2;--mecx-filter-bar-z-menu: 1000}@media(prefers-reduced-motion:reduce){.mecx-filter-bar{--mecx-filter-bar-duration-state: 1ms;--mecx-filter-bar-duration-enter: 1ms;--mecx-filter-bar-duration-exit: 1ms;--mecx-filter-bar-scale-unfold: 1;--mecx-filter-bar-travel-anchored: 0px;--mecx-filter-bar-travel-slide: 0px;--mecx-filter-bar-stagger: 0ms}}.mecx-filter-bar{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-extra{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.mecx-filter-bar-extra:empty{display:none}.mecx-filter-bar-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"row tail\" \"bar bar\";align-items:center;row-gap:8px;width:100%}.mecx-filter-bar-bar{grid-area:bar;min-width:0}.mecx-filter-bar-tail{grid-area:tail;display:flex;align-items:center;min-width:0}.mecx-filter-bar-row{grid-area:row;display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-filter-bar-pointer-target);margin-inline-start:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline:var(--mecx-filter-bar-focus-reach) var(--mecx-filter-bar-fade-width);scroll-padding-inline-start:var(--mecx-filter-bar-focus-reach);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar--disabled .mecx-filter-bar-row{cursor:default}.mecx-filter-bar-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-filter-bar-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-slot-in{0%{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-slot-out{to{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}.mecx-filter-bar-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-slot-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-slot--entering{animation:mecx-filter-bar-slot-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter);position:relative;z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-bar-slot:has(.mecx-filter-segment--open),.mecx-filter-bar-slot:has(.mecx-filter-trigger--open){z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-menu.mecx-filter-bar-menu-categories{width:220px}.mecx-filter-menu.mecx-filter-bar-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-menu-field{width:238px}.mecx-filter-bar-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-field monkey-button,.mecx-filter-bar-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-field-row{display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer}.mecx-filter-bar-field-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px}.mecx-filter-bar-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-panel-actions monkey-button,.mecx-filter-bar-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}@media(max-width:767.98px){.mecx-filter-bar-line{grid-template-columns:minmax(0,1fr);grid-template-areas:\"row\" \"bar\" \"tail\";position:relative}.mecx-filter-bar-slot--trigger{position:sticky;right:0;z-index:var(--mecx-filter-bar-z-sticky)}.mecx-filter-bar-row{margin-inline-end:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline-end:var(--mecx-filter-bar-focus-reach)}.mecx-filter-bar-actions{padding-left:0;align-self:auto;background:none;position:static}.mecx-filter-bar-actions:before{right:var(--mecx-filter-bar-control-height);bottom:auto;height:var(--mecx-filter-bar-pointer-target)}}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
|
|
7067
|
-
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], onFiltersChange: [{ type: i0.Output, args: ["onFiltersChange"] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }] } });
|
|
7080
|
+
}], ctorParameters: () => [], propDecorators: { _scrollbar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MonkeyScrollbarComponent), { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], onFiltersChange: [{ type: i0.Output, args: ["onFiltersChange"] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }] } });
|
|
7068
7081
|
|
|
7069
7082
|
/** ************************
|
|
7070
7083
|
* Copyright Monkey Exchange. All Rights Reserved
|