monkey-style-guide 21.2.19 → 21.2.21
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.
|
@@ -6048,7 +6048,7 @@ class MonkeyFilterChipComponent {
|
|
|
6048
6048
|
this.onRemove = output();
|
|
6049
6049
|
}
|
|
6050
6050
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6051
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: MonkeyFilterChipComponent, isStandalone: true, selector: "monkey-filter-chip", inputs: { removeIcon: { classPropertyName: "removeIcon", publicName: "removeIcon", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove" }, host: { attributes: { "data-testid": "monkey-filter-chip" }, properties: { "class.mecx-filter-chip--disabled": "disabled()" }, classAttribute: "mecx-filter-chip" }, ngImport: i0, template: "<ng-content></ng-content>\n<span class=\"mecx-filter-chip-action\">\n <button\n class=\"mecx-filter-chip-remove\"\n type=\"button\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"removeLabel()\"\n (click)=\"onRemove.emit()\"\n >\n <i class=\"mk-i mk-i-{{ removeIcon() }}\" aria-hidden=\"true\"></i>\n </button>\n</span>\n", styles: [".mecx-filter-chip{--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-chip{--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-chip{display:inline-flex;align-items:center}.mecx-filter-chip>monkey-filter-segment:first-child .mecx-filter-segment-btn{border-top-left-radius:var(--mecx-filter-bar-radius);border-bottom-left-radius:var(--mecx-filter-bar-radius)}.mecx-filter-chip-action{display:inline-flex;align-items:center;height:var(--mecx-filter-bar-control-height);padding:2px;box-sizing:border-box;background:var(--mecx-color-gray-50);border:1px solid var(--mecx-color-gray-500);border-top-right-radius:var(--mecx-filter-bar-radius);border-bottom-right-radius:var(--mecx-filter-bar-radius)}.mecx-filter-chip--disabled .mecx-filter-chip-action{border-color:var(--mecx-color-gray-400)}.mecx-filter-chip-remove{--mecx-filter-bar-bin: 24px;--mecx-filter-bar-bin-reach: calc((var(--mecx-filter-bar-bin) - var(--mecx-filter-bar-pointer-target)) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--mecx-filter-bar-bin);height:var(--mecx-filter-bar-bin);padding:0;background:transparent;border:none;border-radius:var(--mecx-filter-bar-radius-item);color:var(--mecx-color-gray-700);cursor:pointer;outline:none;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-chip-remove:after{content:\"\";position:absolute;inset:var(--mecx-filter-bar-bin-reach) var(--mecx-filter-bar-bin-reach) var(--mecx-filter-bar-bin-reach) 0}.mecx-filter-chip-remove .mk-i{display:flex;font-size:16px}.mecx-filter-chip-remove:hover{background-color:var(--mecx-color-gray-200);color:var(--mecx-color-error-main)}.mecx-filter-chip-remove:active{background-color:var(--mecx-color-gray-400)}.mecx-filter-chip-remove:focus-visible{outline:2px solid var(--mecx-color-gray-900);outline-offset:-2px}.mecx-filter-chip-remove:disabled{background-color:transparent;color:var(--mecx-color-gray-400);cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6051
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: MonkeyFilterChipComponent, isStandalone: true, selector: "monkey-filter-chip", inputs: { removeIcon: { classPropertyName: "removeIcon", publicName: "removeIcon", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove" }, host: { attributes: { "data-testid": "monkey-filter-chip" }, properties: { "class.mecx-filter-chip--disabled": "disabled()" }, classAttribute: "mecx-filter-chip" }, ngImport: i0, template: "<ng-content></ng-content>\n<span class=\"mecx-filter-chip-action\">\n <button\n class=\"mecx-filter-chip-remove\"\n type=\"button\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"removeLabel()\"\n (click)=\"onRemove.emit()\"\n >\n <i class=\"mk-i mk-i-{{ removeIcon() }}\" aria-hidden=\"true\"></i>\n </button>\n</span>\n", styles: [".mecx-filter-chip{--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-chip{--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-chip{display:inline-flex;align-items:center}.mecx-filter-chip>monkey-filter-segment:first-child .mecx-filter-segment-btn{border-top-left-radius:var(--mecx-filter-bar-radius);border-bottom-left-radius:var(--mecx-filter-bar-radius)}.mecx-filter-chip-action{display:inline-flex;align-items:center;height:var(--mecx-filter-bar-control-height);padding:2px;box-sizing:border-box;background:var(--mecx-color-gray-50);border:1px solid var(--mecx-color-gray-500);border-top-right-radius:var(--mecx-filter-bar-radius);border-bottom-right-radius:var(--mecx-filter-bar-radius)}.mecx-filter-chip--disabled .mecx-filter-chip-action{border-color:var(--mecx-color-gray-400)}.mecx-filter-chip-remove{--mecx-filter-bar-bin: 24px;--mecx-filter-bar-bin-reach: calc((var(--mecx-filter-bar-bin) - var(--mecx-filter-bar-pointer-target)) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--mecx-filter-bar-bin);height:var(--mecx-filter-bar-bin);padding:0;background:transparent;border:none;border-radius:var(--mecx-filter-bar-radius-item);color:var(--mecx-color-gray-700);cursor:pointer;outline:none;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-chip-remove:after{content:\"\";position:absolute;inset:var(--mecx-filter-bar-bin-reach) var(--mecx-filter-bar-bin-reach) var(--mecx-filter-bar-bin-reach) 0}.mecx-filter-chip-remove .mk-i{display:flex;font-size:16px}.mecx-filter-chip-remove:hover{background-color:var(--mecx-color-gray-200);color:var(--mecx-color-error-main)}.mecx-filter-chip-remove:active{background-color:var(--mecx-color-gray-400)}.mecx-filter-chip-remove:focus-visible{outline:2px solid var(--mecx-color-gray-900);outline-offset:-2px}.mecx-filter-chip-remove:disabled{background-color:transparent;color:var(--mecx-color-gray-400);cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6052
6052
|
}
|
|
6053
6053
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterChipComponent, decorators: [{
|
|
6054
6054
|
type: Component,
|
|
@@ -6056,7 +6056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
6056
6056
|
'data-testid': 'monkey-filter-chip',
|
|
6057
6057
|
class: 'mecx-filter-chip',
|
|
6058
6058
|
'[class.mecx-filter-chip--disabled]': 'disabled()'
|
|
6059
|
-
}, template: "<ng-content></ng-content>\n<span class=\"mecx-filter-chip-action\">\n <button\n class=\"mecx-filter-chip-remove\"\n type=\"button\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"removeLabel()\"\n (click)=\"onRemove.emit()\"\n >\n <i class=\"mk-i mk-i-{{ removeIcon() }}\" aria-hidden=\"true\"></i>\n </button>\n</span>\n", styles: [".mecx-filter-chip{--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-chip{--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-chip{display:inline-flex;align-items:center}.mecx-filter-chip>monkey-filter-segment:first-child .mecx-filter-segment-btn{border-top-left-radius:var(--mecx-filter-bar-radius);border-bottom-left-radius:var(--mecx-filter-bar-radius)}.mecx-filter-chip-action{display:inline-flex;align-items:center;height:var(--mecx-filter-bar-control-height);padding:2px;box-sizing:border-box;background:var(--mecx-color-gray-50);border:1px solid var(--mecx-color-gray-500);border-top-right-radius:var(--mecx-filter-bar-radius);border-bottom-right-radius:var(--mecx-filter-bar-radius)}.mecx-filter-chip--disabled .mecx-filter-chip-action{border-color:var(--mecx-color-gray-400)}.mecx-filter-chip-remove{--mecx-filter-bar-bin: 24px;--mecx-filter-bar-bin-reach: calc((var(--mecx-filter-bar-bin) - var(--mecx-filter-bar-pointer-target)) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--mecx-filter-bar-bin);height:var(--mecx-filter-bar-bin);padding:0;background:transparent;border:none;border-radius:var(--mecx-filter-bar-radius-item);color:var(--mecx-color-gray-700);cursor:pointer;outline:none;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-chip-remove:after{content:\"\";position:absolute;inset:var(--mecx-filter-bar-bin-reach) var(--mecx-filter-bar-bin-reach) var(--mecx-filter-bar-bin-reach) 0}.mecx-filter-chip-remove .mk-i{display:flex;font-size:16px}.mecx-filter-chip-remove:hover{background-color:var(--mecx-color-gray-200);color:var(--mecx-color-error-main)}.mecx-filter-chip-remove:active{background-color:var(--mecx-color-gray-400)}.mecx-filter-chip-remove:focus-visible{outline:2px solid var(--mecx-color-gray-900);outline-offset:-2px}.mecx-filter-chip-remove:disabled{background-color:transparent;color:var(--mecx-color-gray-400);cursor:not-allowed}\n"] }]
|
|
6059
|
+
}, template: "<ng-content></ng-content>\n<span class=\"mecx-filter-chip-action\">\n <button\n class=\"mecx-filter-chip-remove\"\n type=\"button\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"removeLabel()\"\n (click)=\"onRemove.emit()\"\n >\n <i class=\"mk-i mk-i-{{ removeIcon() }}\" aria-hidden=\"true\"></i>\n </button>\n</span>\n", styles: [".mecx-filter-chip{--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-chip{--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-chip{display:inline-flex;align-items:center}.mecx-filter-chip>monkey-filter-segment:first-child .mecx-filter-segment-btn{border-top-left-radius:var(--mecx-filter-bar-radius);border-bottom-left-radius:var(--mecx-filter-bar-radius)}.mecx-filter-chip-action{display:inline-flex;align-items:center;height:var(--mecx-filter-bar-control-height);padding:2px;box-sizing:border-box;background:var(--mecx-color-gray-50);border:1px solid var(--mecx-color-gray-500);border-top-right-radius:var(--mecx-filter-bar-radius);border-bottom-right-radius:var(--mecx-filter-bar-radius)}.mecx-filter-chip--disabled .mecx-filter-chip-action{border-color:var(--mecx-color-gray-400)}.mecx-filter-chip-remove{--mecx-filter-bar-bin: 24px;--mecx-filter-bar-bin-reach: calc((var(--mecx-filter-bar-bin) - var(--mecx-filter-bar-pointer-target)) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--mecx-filter-bar-bin);height:var(--mecx-filter-bar-bin);padding:0;background:transparent;border:none;border-radius:var(--mecx-filter-bar-radius-item);color:var(--mecx-color-gray-700);cursor:pointer;outline:none;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-chip-remove:after{content:\"\";position:absolute;inset:var(--mecx-filter-bar-bin-reach) var(--mecx-filter-bar-bin-reach) var(--mecx-filter-bar-bin-reach) 0}.mecx-filter-chip-remove .mk-i{display:flex;font-size:16px}.mecx-filter-chip-remove:hover{background-color:var(--mecx-color-gray-200);color:var(--mecx-color-error-main)}.mecx-filter-chip-remove:active{background-color:var(--mecx-color-gray-400)}.mecx-filter-chip-remove:focus-visible{outline:2px solid var(--mecx-color-gray-900);outline-offset:-2px}.mecx-filter-chip-remove:disabled{background-color:transparent;color:var(--mecx-color-gray-400);cursor:not-allowed}\n"] }]
|
|
6060
6060
|
}], propDecorators: { removeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeIcon", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }] } });
|
|
6061
6061
|
|
|
6062
6062
|
/** ************************
|
|
@@ -6108,14 +6108,14 @@ class MonkeyFilterMenuComponent {
|
|
|
6108
6108
|
this.onSearchChange.emit(value);
|
|
6109
6109
|
}
|
|
6110
6110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterMenuComponent, isStandalone: true, selector: "monkey-filter-menu", inputs: { showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showScroll: { classPropertyName: "showScroll", publicName: "showScroll", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearchChange: "onSearchChange" }, host: { attributes: { "data-testid": "monkey-filter-menu" }, classAttribute: "mecx-filter-menu" }, viewQueries: [{ propertyName: "_items", first: true, predicate: ["items"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showSearch()) {\n <div class=\"mecx-filter-menu-search\">\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [placeholder]=\"searchPlaceholder()\"\n [ngModel]=\"searchValue\"\n (ngModelChange)=\"onSearchInput($event)\"\n />\n <monkey-prefix>\n <i class=\"mk-i mk-i-search fs-md\"></i>\n </monkey-prefix>\n </monkey-form-field>\n </div>\n}\n\n<div\n #items\n class=\"mecx-filter-menu-items\"\n [class.mecx-filter-menu-items--scroll]=\"showScroll()\"\n [class.mecx-filter-menu-items--scrolling]=\"scrolling()\"\n [style.max-height.px]=\"showScroll() ? maxHeight() : null\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".mecx-filter-menu{--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-menu{--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-menu{display:flex;flex-direction:column;min-width:158px;max-width:341px;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08));overflow:hidden;box-sizing:border-box}.mecx-filter-menu-search{padding:8px;border-bottom:2px solid var(--mecx-color-gray-200);flex-shrink:0}.mecx-filter-menu-search monkey-form-field{width:100%;display:block}.mecx-filter-menu-items{display:flex;flex-direction:column;padding:8px}.mecx-filter-menu-items--scroll{overflow-y:auto}.mecx-filter-menu-items--scrolling{scrollbar-gutter:stable;padding-right:0}.mecx-filter-menu-items--scrolling::-webkit-scrollbar{width:20px}.mecx-filter-menu-items--scrolling::-webkit-scrollbar-track{background:var(--mecx-color-gray-100);background-clip:padding-box;border-left:4px solid transparent;border-right:8px solid transparent;border-radius:8px 12px 12px 8px/4px;box-shadow:inset 0 0 0 1px var(--mecx-color-gray-400);margin:8px 0}.mecx-filter-menu-items--scrolling::-webkit-scrollbar-thumb{background:var(--mecx-color-gray-800);background-clip:padding-box;border-left:5px solid transparent;border-right:9px solid transparent;border-radius:8px 12px 12px 8px/3px}.mecx-filter-menu-items>monkey-divider{margin-block:4px}.mecx-filter-menu-items>*{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "directive", type: MonkeyPrefixDirective, selector: "monkey-prefix" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterMenuComponent, isStandalone: true, selector: "monkey-filter-menu", inputs: { showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showScroll: { classPropertyName: "showScroll", publicName: "showScroll", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearchChange: "onSearchChange" }, host: { attributes: { "data-testid": "monkey-filter-menu" }, classAttribute: "mecx-filter-menu" }, viewQueries: [{ propertyName: "_items", first: true, predicate: ["items"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showSearch()) {\n <div class=\"mecx-filter-menu-search\">\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [placeholder]=\"searchPlaceholder()\"\n [ngModel]=\"searchValue\"\n (ngModelChange)=\"onSearchInput($event)\"\n />\n <monkey-prefix>\n <i class=\"mk-i mk-i-search fs-md\"></i>\n </monkey-prefix>\n </monkey-form-field>\n </div>\n}\n\n<div\n #items\n class=\"mecx-filter-menu-items\"\n [class.mecx-filter-menu-items--scroll]=\"showScroll()\"\n [class.mecx-filter-menu-items--scrolling]=\"scrolling()\"\n [style.max-height.px]=\"showScroll() ? maxHeight() : null\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".mecx-filter-menu{--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-menu{--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-menu{display:flex;flex-direction:column;min-width:158px;max-width:341px;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08));overflow:hidden;box-sizing:border-box}.mecx-filter-menu-search{padding:8px;border-bottom:2px solid var(--mecx-color-gray-200);flex-shrink:0}.mecx-filter-menu-search monkey-form-field{width:100%;display:block}.mecx-filter-menu-items{display:flex;flex-direction:column;padding:8px}.mecx-filter-menu-items--scroll{overflow-y:auto}.mecx-filter-menu-items--scrolling{scrollbar-gutter:stable;padding-right:0}.mecx-filter-menu-items--scrolling::-webkit-scrollbar{width:20px}.mecx-filter-menu-items--scrolling::-webkit-scrollbar-track{background:var(--mecx-color-gray-100);background-clip:padding-box;border-left:4px solid transparent;border-right:8px solid transparent;border-radius:8px 12px 12px 8px/4px;box-shadow:inset 0 0 0 1px var(--mecx-color-gray-400);margin:8px 0}.mecx-filter-menu-items--scrolling::-webkit-scrollbar-thumb{background:var(--mecx-color-gray-800);background-clip:padding-box;border-left:5px solid transparent;border-right:9px solid transparent;border-radius:8px 12px 12px 8px/3px}.mecx-filter-menu-items>monkey-divider{margin-block:4px}.mecx-filter-menu-items>*{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "directive", type: MonkeyPrefixDirective, selector: "monkey-prefix" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6112
6112
|
}
|
|
6113
6113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterMenuComponent, decorators: [{
|
|
6114
6114
|
type: Component,
|
|
6115
6115
|
args: [{ selector: 'monkey-filter-menu', imports: [FormsModule, MonkeyFormFieldModule, MonkeyInputModule, MonkeyPrefixDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
6116
6116
|
'data-testid': 'monkey-filter-menu',
|
|
6117
6117
|
class: 'mecx-filter-menu'
|
|
6118
|
-
}, template: "@if (showSearch()) {\n <div class=\"mecx-filter-menu-search\">\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [placeholder]=\"searchPlaceholder()\"\n [ngModel]=\"searchValue\"\n (ngModelChange)=\"onSearchInput($event)\"\n />\n <monkey-prefix>\n <i class=\"mk-i mk-i-search fs-md\"></i>\n </monkey-prefix>\n </monkey-form-field>\n </div>\n}\n\n<div\n #items\n class=\"mecx-filter-menu-items\"\n [class.mecx-filter-menu-items--scroll]=\"showScroll()\"\n [class.mecx-filter-menu-items--scrolling]=\"scrolling()\"\n [style.max-height.px]=\"showScroll() ? maxHeight() : null\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".mecx-filter-menu{--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-menu{--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-menu{display:flex;flex-direction:column;min-width:158px;max-width:341px;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08));overflow:hidden;box-sizing:border-box}.mecx-filter-menu-search{padding:8px;border-bottom:2px solid var(--mecx-color-gray-200);flex-shrink:0}.mecx-filter-menu-search monkey-form-field{width:100%;display:block}.mecx-filter-menu-items{display:flex;flex-direction:column;padding:8px}.mecx-filter-menu-items--scroll{overflow-y:auto}.mecx-filter-menu-items--scrolling{scrollbar-gutter:stable;padding-right:0}.mecx-filter-menu-items--scrolling::-webkit-scrollbar{width:20px}.mecx-filter-menu-items--scrolling::-webkit-scrollbar-track{background:var(--mecx-color-gray-100);background-clip:padding-box;border-left:4px solid transparent;border-right:8px solid transparent;border-radius:8px 12px 12px 8px/4px;box-shadow:inset 0 0 0 1px var(--mecx-color-gray-400);margin:8px 0}.mecx-filter-menu-items--scrolling::-webkit-scrollbar-thumb{background:var(--mecx-color-gray-800);background-clip:padding-box;border-left:5px solid transparent;border-right:9px solid transparent;border-radius:8px 12px 12px 8px/3px}.mecx-filter-menu-items>monkey-divider{margin-block:4px}.mecx-filter-menu-items>*{flex-shrink:0}\n"] }]
|
|
6118
|
+
}, template: "@if (showSearch()) {\n <div class=\"mecx-filter-menu-search\">\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [placeholder]=\"searchPlaceholder()\"\n [ngModel]=\"searchValue\"\n (ngModelChange)=\"onSearchInput($event)\"\n />\n <monkey-prefix>\n <i class=\"mk-i mk-i-search fs-md\"></i>\n </monkey-prefix>\n </monkey-form-field>\n </div>\n}\n\n<div\n #items\n class=\"mecx-filter-menu-items\"\n [class.mecx-filter-menu-items--scroll]=\"showScroll()\"\n [class.mecx-filter-menu-items--scrolling]=\"scrolling()\"\n [style.max-height.px]=\"showScroll() ? maxHeight() : null\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".mecx-filter-menu{--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-menu{--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-menu{display:flex;flex-direction:column;min-width:158px;max-width:341px;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08));overflow:hidden;box-sizing:border-box}.mecx-filter-menu-search{padding:8px;border-bottom:2px solid var(--mecx-color-gray-200);flex-shrink:0}.mecx-filter-menu-search monkey-form-field{width:100%;display:block}.mecx-filter-menu-items{display:flex;flex-direction:column;padding:8px}.mecx-filter-menu-items--scroll{overflow-y:auto}.mecx-filter-menu-items--scrolling{scrollbar-gutter:stable;padding-right:0}.mecx-filter-menu-items--scrolling::-webkit-scrollbar{width:20px}.mecx-filter-menu-items--scrolling::-webkit-scrollbar-track{background:var(--mecx-color-gray-100);background-clip:padding-box;border-left:4px solid transparent;border-right:8px solid transparent;border-radius:8px 12px 12px 8px/4px;box-shadow:inset 0 0 0 1px var(--mecx-color-gray-400);margin:8px 0}.mecx-filter-menu-items--scrolling::-webkit-scrollbar-thumb{background:var(--mecx-color-gray-800);background-clip:padding-box;border-left:5px solid transparent;border-right:9px solid transparent;border-radius:8px 12px 12px 8px/3px}.mecx-filter-menu-items>monkey-divider{margin-block:4px}.mecx-filter-menu-items>*{flex-shrink:0}\n"] }]
|
|
6119
6119
|
}], ctorParameters: () => [], propDecorators: { _items: [{ type: i0.ViewChild, args: ['items', { isSignal: true }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScroll", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], onSearchChange: [{ type: i0.Output, args: ["onSearchChange"] }] } });
|
|
6120
6120
|
|
|
6121
6121
|
/** ************************
|
|
@@ -6140,7 +6140,7 @@ class MonkeyFilterMenuItemComponent {
|
|
|
6140
6140
|
this.onItemClick.emit();
|
|
6141
6141
|
}
|
|
6142
6142
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterMenuItemComponent, isStandalone: true, selector: "monkey-filter-menu-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: false, transformFunction: null }, leadIcon: { classPropertyName: "leadIcon", publicName: "leadIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { attributes: { "data-testid": "monkey-filter-menu-item", "role": "option" }, listeners: { "click": "onClick()" }, properties: { "class.mecx-filter-menu-item--disabled": "disabled()", "class.mecx-filter-menu-item--selected": "selected()", "attr.aria-selected": "selected() || checked()", "attr.aria-disabled": "disabled() || null" }, classAttribute: "mecx-filter-menu-item" }, ngImport: i0, template: "@if (property() === 'checkbox') {\n <monkey-checkbox\n class=\"mecx-filter-menu-item-checkbox\"\n size=\"sm\"\n [value]=\"checked()\"\n [disabled]=\"disabled()\"\n [showFooter]=\"false\"\n ></monkey-checkbox>\n} @else if (leadIcon()) {\n <i class=\"mk-i mk-i-{{ leadIcon() }} mecx-filter-menu-item-icon\"></i>\n}\n\n<span class=\"mecx-filter-menu-item-text\">\n <span class=\"mecx-filter-menu-item-label\">{{ label() }}</span>\n @if (description()) {\n <span class=\"mecx-filter-menu-item-description\">{{ description() }}</span>\n }\n</span>\n@if (selected()) {\n <i class=\"mk-i mk-i-check mecx-filter-menu-item-check\"></i>\n}\n", styles: [".mecx-filter-menu-item{--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-menu-item{--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-menu-item{display:flex;align-items:center;gap:8px;padding:8px;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius-item);cursor:pointer;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),scale var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-menu-item:hover:not(.mecx-filter-menu-item--disabled){background-color:var(--mecx-color-gray-100)}.mecx-filter-menu-item:active:not(.mecx-filter-menu-item--disabled){scale:.99}.mecx-filter-menu-item--disabled{cursor:not-allowed}.mecx-filter-menu-item--disabled .mecx-filter-menu-item-label,.mecx-filter-menu-item--disabled .mecx-filter-menu-item-description,.mecx-filter-menu-item--disabled .mecx-filter-menu-item-icon{color:var(--mecx-color-gray-400)}.mecx-filter-menu-item-icon{display:flex;flex-shrink:0;font-size:16px;color:var(--mecx-color-gray-700)}.mecx-filter-menu-item-checkbox{flex-shrink:0;pointer-events:none}.mecx-filter-menu-item-text{display:flex;flex-direction:column;gap:4px;flex:1 0 0;min-width:0}.mecx-filter-menu-item-label{display:block;font-size:13px;font-weight:400;line-height:16px;letter-spacing:.02em;color:var(--mecx-color-gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mecx-filter-menu-item-description{display:block;font-size:13px;font-weight:400;line-height:16px;letter-spacing:.02em;color:var(--mecx-color-gray-700)}.mecx-filter-menu-item-check{display:flex;flex-shrink:0;font-size:12px;color:var(--mecx-color-theme-main)}\n"], dependencies: [{ kind: "component", type: MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["disabled", "indeterminate", "required", "showFooter", "size", "value"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6143
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterMenuItemComponent, isStandalone: true, selector: "monkey-filter-menu-item", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: false, transformFunction: null }, leadIcon: { classPropertyName: "leadIcon", publicName: "leadIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { attributes: { "data-testid": "monkey-filter-menu-item", "role": "option" }, listeners: { "click": "onClick()" }, properties: { "class.mecx-filter-menu-item--disabled": "disabled()", "class.mecx-filter-menu-item--selected": "selected()", "attr.aria-selected": "selected() || checked()", "attr.aria-disabled": "disabled() || null" }, classAttribute: "mecx-filter-menu-item" }, ngImport: i0, template: "@if (property() === 'checkbox') {\n <monkey-checkbox\n class=\"mecx-filter-menu-item-checkbox\"\n size=\"sm\"\n [value]=\"checked()\"\n [disabled]=\"disabled()\"\n [showFooter]=\"false\"\n ></monkey-checkbox>\n} @else if (leadIcon()) {\n <i class=\"mk-i mk-i-{{ leadIcon() }} mecx-filter-menu-item-icon\"></i>\n}\n\n<span class=\"mecx-filter-menu-item-text\">\n <span class=\"mecx-filter-menu-item-label\">{{ label() }}</span>\n @if (description()) {\n <span class=\"mecx-filter-menu-item-description\">{{ description() }}</span>\n }\n</span>\n@if (selected()) {\n <i class=\"mk-i mk-i-check mecx-filter-menu-item-check\"></i>\n}\n", styles: [".mecx-filter-menu-item{--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-menu-item{--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-menu-item{display:flex;align-items:center;gap:8px;padding:8px;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius-item);cursor:pointer;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),scale var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-menu-item:hover:not(.mecx-filter-menu-item--disabled){background-color:var(--mecx-color-gray-100)}.mecx-filter-menu-item:active:not(.mecx-filter-menu-item--disabled){scale:.99}.mecx-filter-menu-item--disabled{cursor:not-allowed}.mecx-filter-menu-item--disabled .mecx-filter-menu-item-label,.mecx-filter-menu-item--disabled .mecx-filter-menu-item-description,.mecx-filter-menu-item--disabled .mecx-filter-menu-item-icon{color:var(--mecx-color-gray-400)}.mecx-filter-menu-item-icon{display:flex;flex-shrink:0;font-size:16px;color:var(--mecx-color-gray-700)}.mecx-filter-menu-item-checkbox{flex-shrink:0;pointer-events:none}.mecx-filter-menu-item-text{display:flex;flex-direction:column;gap:4px;flex:1 0 0;min-width:0}.mecx-filter-menu-item-label{display:block;font-size:13px;font-weight:400;line-height:16px;letter-spacing:.02em;color:var(--mecx-color-gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mecx-filter-menu-item-description{display:block;font-size:13px;font-weight:400;line-height:16px;letter-spacing:.02em;color:var(--mecx-color-gray-700)}.mecx-filter-menu-item-check{display:flex;flex-shrink:0;font-size:12px;color:var(--mecx-color-theme-main)}\n"], dependencies: [{ kind: "component", type: MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["disabled", "indeterminate", "required", "showFooter", "size", "value"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6144
6144
|
}
|
|
6145
6145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterMenuItemComponent, decorators: [{
|
|
6146
6146
|
type: Component,
|
|
@@ -6153,7 +6153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
6153
6153
|
'[attr.aria-selected]': 'selected() || checked()',
|
|
6154
6154
|
'[attr.aria-disabled]': 'disabled() || null',
|
|
6155
6155
|
'(click)': 'onClick()'
|
|
6156
|
-
}, template: "@if (property() === 'checkbox') {\n <monkey-checkbox\n class=\"mecx-filter-menu-item-checkbox\"\n size=\"sm\"\n [value]=\"checked()\"\n [disabled]=\"disabled()\"\n [showFooter]=\"false\"\n ></monkey-checkbox>\n} @else if (leadIcon()) {\n <i class=\"mk-i mk-i-{{ leadIcon() }} mecx-filter-menu-item-icon\"></i>\n}\n\n<span class=\"mecx-filter-menu-item-text\">\n <span class=\"mecx-filter-menu-item-label\">{{ label() }}</span>\n @if (description()) {\n <span class=\"mecx-filter-menu-item-description\">{{ description() }}</span>\n }\n</span>\n@if (selected()) {\n <i class=\"mk-i mk-i-check mecx-filter-menu-item-check\"></i>\n}\n", styles: [".mecx-filter-menu-item{--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-menu-item{--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-menu-item{display:flex;align-items:center;gap:8px;padding:8px;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius-item);cursor:pointer;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),scale var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-menu-item:hover:not(.mecx-filter-menu-item--disabled){background-color:var(--mecx-color-gray-100)}.mecx-filter-menu-item:active:not(.mecx-filter-menu-item--disabled){scale:.99}.mecx-filter-menu-item--disabled{cursor:not-allowed}.mecx-filter-menu-item--disabled .mecx-filter-menu-item-label,.mecx-filter-menu-item--disabled .mecx-filter-menu-item-description,.mecx-filter-menu-item--disabled .mecx-filter-menu-item-icon{color:var(--mecx-color-gray-400)}.mecx-filter-menu-item-icon{display:flex;flex-shrink:0;font-size:16px;color:var(--mecx-color-gray-700)}.mecx-filter-menu-item-checkbox{flex-shrink:0;pointer-events:none}.mecx-filter-menu-item-text{display:flex;flex-direction:column;gap:4px;flex:1 0 0;min-width:0}.mecx-filter-menu-item-label{display:block;font-size:13px;font-weight:400;line-height:16px;letter-spacing:.02em;color:var(--mecx-color-gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mecx-filter-menu-item-description{display:block;font-size:13px;font-weight:400;line-height:16px;letter-spacing:.02em;color:var(--mecx-color-gray-700)}.mecx-filter-menu-item-check{display:flex;flex-shrink:0;font-size:12px;color:var(--mecx-color-theme-main)}\n"] }]
|
|
6156
|
+
}, template: "@if (property() === 'checkbox') {\n <monkey-checkbox\n class=\"mecx-filter-menu-item-checkbox\"\n size=\"sm\"\n [value]=\"checked()\"\n [disabled]=\"disabled()\"\n [showFooter]=\"false\"\n ></monkey-checkbox>\n} @else if (leadIcon()) {\n <i class=\"mk-i mk-i-{{ leadIcon() }} mecx-filter-menu-item-icon\"></i>\n}\n\n<span class=\"mecx-filter-menu-item-text\">\n <span class=\"mecx-filter-menu-item-label\">{{ label() }}</span>\n @if (description()) {\n <span class=\"mecx-filter-menu-item-description\">{{ description() }}</span>\n }\n</span>\n@if (selected()) {\n <i class=\"mk-i mk-i-check mecx-filter-menu-item-check\"></i>\n}\n", styles: [".mecx-filter-menu-item{--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-menu-item{--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-menu-item{display:flex;align-items:center;gap:8px;padding:8px;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius-item);cursor:pointer;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),scale var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-menu-item:hover:not(.mecx-filter-menu-item--disabled){background-color:var(--mecx-color-gray-100)}.mecx-filter-menu-item:active:not(.mecx-filter-menu-item--disabled){scale:.99}.mecx-filter-menu-item--disabled{cursor:not-allowed}.mecx-filter-menu-item--disabled .mecx-filter-menu-item-label,.mecx-filter-menu-item--disabled .mecx-filter-menu-item-description,.mecx-filter-menu-item--disabled .mecx-filter-menu-item-icon{color:var(--mecx-color-gray-400)}.mecx-filter-menu-item-icon{display:flex;flex-shrink:0;font-size:16px;color:var(--mecx-color-gray-700)}.mecx-filter-menu-item-checkbox{flex-shrink:0;pointer-events:none}.mecx-filter-menu-item-text{display:flex;flex-direction:column;gap:4px;flex:1 0 0;min-width:0}.mecx-filter-menu-item-label{display:block;font-size:13px;font-weight:400;line-height:16px;letter-spacing:.02em;color:var(--mecx-color-gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mecx-filter-menu-item-description{display:block;font-size:13px;font-weight:400;line-height:16px;letter-spacing:.02em;color:var(--mecx-color-gray-700)}.mecx-filter-menu-item-check{display:flex;flex-shrink:0;font-size:12px;color:var(--mecx-color-theme-main)}\n"] }]
|
|
6157
6157
|
}], propDecorators: { property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: false }] }], leadIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }] } });
|
|
6158
6158
|
|
|
6159
6159
|
/** ************************
|
|
@@ -6335,7 +6335,7 @@ class MonkeyFilterSegmentComponent {
|
|
|
6335
6335
|
this.focusButton();
|
|
6336
6336
|
}
|
|
6337
6337
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterSegmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6338
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterSegmentComponent, isStandalone: true, selector: "monkey-filter-segment", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlySegment: { classPropertyName: "readonlySegment", publicName: "readonlySegment", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpenChange: "onOpenChange", onSegmentClick: "onSegmentClick" }, host: { attributes: { "data-testid": "monkey-filter-segment" }, listeners: { "document:pointerdown": "onDocumentPointerdown($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.mecx-filter-segment--open": "open()", "class.mecx-filter-segment--filled": "filled()", "class.mecx-filter-segment--disabled": "disabled()" }, classAttribute: "mecx-filter-segment" }, viewQueries: [{ propertyName: "_menuEl", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n class=\"mecx-filter-segment-btn\"\n type=\"button\"\n [disabled]=\"disabled() || null\"\n [attr.aria-expanded]=\"readonlySegment() ? null : open()\"\n [attr.aria-haspopup]=\"readonlySegment() ? null : 'listbox'\"\n (click)=\"toggle()\"\n>\n @if (icon()) {\n <i class=\"mk-i mk-i-{{ icon() }} mecx-filter-segment-icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"mecx-filter-segment-label\">{{ label() }}</span>\n</button>\n@if (open()) {\n <div\n #menu\n class=\"mecx-filter-segment-menu\"\n animate.enter=\"mecx-filter-segment-menu--entering\"\n animate.leave=\"mecx-filter-segment-menu--leaving\"\n >\n <ng-content></ng-content>\n </div>\n}\n", styles: ["@keyframes mecx-filter-bar-surface-in{0%{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-out{to{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-item-in{0%{opacity:0;translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}.mecx-filter-segment{--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-segment{--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-segment{position:relative;display:inline-flex;margin-right:-1px}.mecx-filter-segment-btn{display:inline-flex;align-items:center;gap:4px;height:var(--mecx-filter-bar-control-height);padding-inline:8px;box-sizing:border-box;background:var(--mecx-color-gray-50);border:1px solid var(--mecx-color-gray-500);border-radius:0;color:var(--mecx-color-gray-700);font-family:inherit;cursor:pointer;outline:none;white-space:nowrap;position:relative;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),border-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-segment-btn:after{content:\"\";position:absolute;inset:var(--mecx-filter-bar-reach) 0}.mecx-filter-segment-btn:hover{background-color:var(--mecx-color-gray-200)}.mecx-filter-segment-btn:active{background-color:var(--mecx-color-gray-400)}.mecx-filter-segment-btn:focus-visible{border-color:var(--mecx-color-gray-900)}.mecx-filter-segment-btn:disabled{background-color:var(--mecx-color-gray-50);color:var(--mecx-color-gray-400);border-color:var(--mecx-color-gray-400);cursor:not-allowed}.mecx-filter-segment-btn:hover,.mecx-filter-segment-btn:focus-visible{z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-segment--open{z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-segment--open .mecx-filter-segment-btn{background-color:var(--mecx-color-gray-200)}.mecx-filter-segment--filled .mecx-filter-segment-btn{color:var(--mecx-color-gray-900)}.mecx-filter-segment--disabled .mecx-filter-segment-btn,.mecx-filter-segment--filled.mecx-filter-segment--disabled .mecx-filter-segment-btn{color:var(--mecx-color-gray-400)}.mecx-filter-segment-icon{display:inline-flex;flex-shrink:0;font-size:16px;color:var(--mecx-color-gray-600)}.mecx-filter-segment--disabled .mecx-filter-segment-icon{color:var(--mecx-color-gray-400)}.mecx-filter-segment-label{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.02em;color:inherit}.mecx-filter-segment-menu{position:fixed;margin-top:4px;z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-segment-menu--entering{transform-origin:top;animation:mecx-filter-bar-surface-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-segment-menu--entering monkey-filter-menu-item,.mecx-filter-segment-menu--entering monkey-divider{animation:mecx-filter-bar-surface-item-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter) both}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(1){animation-delay:calc(var(--mecx-filter-bar-stagger) * 1)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(2){animation-delay:calc(var(--mecx-filter-bar-stagger) * 2)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(3){animation-delay:calc(var(--mecx-filter-bar-stagger) * 3)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(4){animation-delay:calc(var(--mecx-filter-bar-stagger) * 4)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(5){animation-delay:calc(var(--mecx-filter-bar-stagger) * 5)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(6){animation-delay:calc(var(--mecx-filter-bar-stagger) * 6)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(7){animation-delay:calc(var(--mecx-filter-bar-stagger) * 7)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(n+8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-segment-menu--leaving{transform-origin:top;animation:mecx-filter-bar-surface-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6338
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterSegmentComponent, isStandalone: true, selector: "monkey-filter-segment", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlySegment: { classPropertyName: "readonlySegment", publicName: "readonlySegment", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpenChange: "onOpenChange", onSegmentClick: "onSegmentClick" }, host: { attributes: { "data-testid": "monkey-filter-segment" }, listeners: { "document:pointerdown": "onDocumentPointerdown($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.mecx-filter-segment--open": "open()", "class.mecx-filter-segment--filled": "filled()", "class.mecx-filter-segment--disabled": "disabled()" }, classAttribute: "mecx-filter-segment" }, viewQueries: [{ propertyName: "_menuEl", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n class=\"mecx-filter-segment-btn\"\n type=\"button\"\n [disabled]=\"disabled() || null\"\n [attr.aria-expanded]=\"readonlySegment() ? null : open()\"\n [attr.aria-haspopup]=\"readonlySegment() ? null : 'listbox'\"\n (click)=\"toggle()\"\n>\n @if (icon()) {\n <i class=\"mk-i mk-i-{{ icon() }} mecx-filter-segment-icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"mecx-filter-segment-label\">{{ label() }}</span>\n</button>\n@if (open()) {\n <div\n #menu\n class=\"mecx-filter-segment-menu\"\n animate.enter=\"mecx-filter-segment-menu--entering\"\n animate.leave=\"mecx-filter-segment-menu--leaving\"\n >\n <ng-content></ng-content>\n </div>\n}\n", styles: ["@keyframes mecx-filter-bar-surface-in{0%{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-out{to{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-item-in{0%{opacity:0;translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}.mecx-filter-segment{--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-segment{--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-segment{position:relative;display:inline-flex;margin-right:-1px}.mecx-filter-segment-btn{display:inline-flex;align-items:center;gap:4px;height:var(--mecx-filter-bar-control-height);padding-inline:8px;box-sizing:border-box;background:var(--mecx-color-gray-50);border:1px solid var(--mecx-color-gray-500);border-radius:0;color:var(--mecx-color-gray-700);font-family:inherit;cursor:pointer;outline:none;white-space:nowrap;position:relative;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),border-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-segment-btn:after{content:\"\";position:absolute;inset:var(--mecx-filter-bar-reach) 0}.mecx-filter-segment-btn:hover{background-color:var(--mecx-color-gray-200)}.mecx-filter-segment-btn:active{background-color:var(--mecx-color-gray-400)}.mecx-filter-segment-btn:focus-visible{border-color:var(--mecx-color-gray-900)}.mecx-filter-segment-btn:disabled{background-color:var(--mecx-color-gray-50);color:var(--mecx-color-gray-400);border-color:var(--mecx-color-gray-400);cursor:not-allowed}.mecx-filter-segment-btn:hover,.mecx-filter-segment-btn:focus-visible{z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-segment--open{z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-segment--open .mecx-filter-segment-btn{background-color:var(--mecx-color-gray-200)}.mecx-filter-segment--filled .mecx-filter-segment-btn{color:var(--mecx-color-gray-900)}.mecx-filter-segment--disabled .mecx-filter-segment-btn,.mecx-filter-segment--filled.mecx-filter-segment--disabled .mecx-filter-segment-btn{color:var(--mecx-color-gray-400)}.mecx-filter-segment-icon{display:inline-flex;flex-shrink:0;font-size:16px;color:var(--mecx-color-gray-600)}.mecx-filter-segment--disabled .mecx-filter-segment-icon{color:var(--mecx-color-gray-400)}.mecx-filter-segment-label{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.02em;color:inherit}.mecx-filter-segment-menu{position:fixed;margin-top:4px;z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-segment-menu--entering{transform-origin:top;animation:mecx-filter-bar-surface-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-segment-menu--entering monkey-filter-menu-item,.mecx-filter-segment-menu--entering monkey-divider{animation:mecx-filter-bar-surface-item-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter) both}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(1){animation-delay:calc(var(--mecx-filter-bar-stagger) * 1)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(2){animation-delay:calc(var(--mecx-filter-bar-stagger) * 2)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(3){animation-delay:calc(var(--mecx-filter-bar-stagger) * 3)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(4){animation-delay:calc(var(--mecx-filter-bar-stagger) * 4)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(5){animation-delay:calc(var(--mecx-filter-bar-stagger) * 5)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(6){animation-delay:calc(var(--mecx-filter-bar-stagger) * 6)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(7){animation-delay:calc(var(--mecx-filter-bar-stagger) * 7)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(n+8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-segment-menu--leaving{transform-origin:top;animation:mecx-filter-bar-surface-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6339
6339
|
}
|
|
6340
6340
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterSegmentComponent, decorators: [{
|
|
6341
6341
|
type: Component,
|
|
@@ -6347,7 +6347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
6347
6347
|
'[class.mecx-filter-segment--disabled]': 'disabled()',
|
|
6348
6348
|
'(document:pointerdown)': 'onDocumentPointerdown($event)',
|
|
6349
6349
|
'(document:keydown.escape)': 'onEscape()'
|
|
6350
|
-
}, template: "<button\n class=\"mecx-filter-segment-btn\"\n type=\"button\"\n [disabled]=\"disabled() || null\"\n [attr.aria-expanded]=\"readonlySegment() ? null : open()\"\n [attr.aria-haspopup]=\"readonlySegment() ? null : 'listbox'\"\n (click)=\"toggle()\"\n>\n @if (icon()) {\n <i class=\"mk-i mk-i-{{ icon() }} mecx-filter-segment-icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"mecx-filter-segment-label\">{{ label() }}</span>\n</button>\n@if (open()) {\n <div\n #menu\n class=\"mecx-filter-segment-menu\"\n animate.enter=\"mecx-filter-segment-menu--entering\"\n animate.leave=\"mecx-filter-segment-menu--leaving\"\n >\n <ng-content></ng-content>\n </div>\n}\n", styles: ["@keyframes mecx-filter-bar-surface-in{0%{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-out{to{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-item-in{0%{opacity:0;translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}.mecx-filter-segment{--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-segment{--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-segment{position:relative;display:inline-flex;margin-right:-1px}.mecx-filter-segment-btn{display:inline-flex;align-items:center;gap:4px;height:var(--mecx-filter-bar-control-height);padding-inline:8px;box-sizing:border-box;background:var(--mecx-color-gray-50);border:1px solid var(--mecx-color-gray-500);border-radius:0;color:var(--mecx-color-gray-700);font-family:inherit;cursor:pointer;outline:none;white-space:nowrap;position:relative;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),border-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-segment-btn:after{content:\"\";position:absolute;inset:var(--mecx-filter-bar-reach) 0}.mecx-filter-segment-btn:hover{background-color:var(--mecx-color-gray-200)}.mecx-filter-segment-btn:active{background-color:var(--mecx-color-gray-400)}.mecx-filter-segment-btn:focus-visible{border-color:var(--mecx-color-gray-900)}.mecx-filter-segment-btn:disabled{background-color:var(--mecx-color-gray-50);color:var(--mecx-color-gray-400);border-color:var(--mecx-color-gray-400);cursor:not-allowed}.mecx-filter-segment-btn:hover,.mecx-filter-segment-btn:focus-visible{z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-segment--open{z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-segment--open .mecx-filter-segment-btn{background-color:var(--mecx-color-gray-200)}.mecx-filter-segment--filled .mecx-filter-segment-btn{color:var(--mecx-color-gray-900)}.mecx-filter-segment--disabled .mecx-filter-segment-btn,.mecx-filter-segment--filled.mecx-filter-segment--disabled .mecx-filter-segment-btn{color:var(--mecx-color-gray-400)}.mecx-filter-segment-icon{display:inline-flex;flex-shrink:0;font-size:16px;color:var(--mecx-color-gray-600)}.mecx-filter-segment--disabled .mecx-filter-segment-icon{color:var(--mecx-color-gray-400)}.mecx-filter-segment-label{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.02em;color:inherit}.mecx-filter-segment-menu{position:fixed;margin-top:4px;z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-segment-menu--entering{transform-origin:top;animation:mecx-filter-bar-surface-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-segment-menu--entering monkey-filter-menu-item,.mecx-filter-segment-menu--entering monkey-divider{animation:mecx-filter-bar-surface-item-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter) both}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(1){animation-delay:calc(var(--mecx-filter-bar-stagger) * 1)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(2){animation-delay:calc(var(--mecx-filter-bar-stagger) * 2)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(3){animation-delay:calc(var(--mecx-filter-bar-stagger) * 3)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(4){animation-delay:calc(var(--mecx-filter-bar-stagger) * 4)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(5){animation-delay:calc(var(--mecx-filter-bar-stagger) * 5)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(6){animation-delay:calc(var(--mecx-filter-bar-stagger) * 6)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(7){animation-delay:calc(var(--mecx-filter-bar-stagger) * 7)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(n+8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-segment-menu--leaving{transform-origin:top;animation:mecx-filter-bar-surface-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit)}\n"] }]
|
|
6350
|
+
}, template: "<button\n class=\"mecx-filter-segment-btn\"\n type=\"button\"\n [disabled]=\"disabled() || null\"\n [attr.aria-expanded]=\"readonlySegment() ? null : open()\"\n [attr.aria-haspopup]=\"readonlySegment() ? null : 'listbox'\"\n (click)=\"toggle()\"\n>\n @if (icon()) {\n <i class=\"mk-i mk-i-{{ icon() }} mecx-filter-segment-icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"mecx-filter-segment-label\">{{ label() }}</span>\n</button>\n@if (open()) {\n <div\n #menu\n class=\"mecx-filter-segment-menu\"\n animate.enter=\"mecx-filter-segment-menu--entering\"\n animate.leave=\"mecx-filter-segment-menu--leaving\"\n >\n <ng-content></ng-content>\n </div>\n}\n", styles: ["@keyframes mecx-filter-bar-surface-in{0%{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-out{to{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-item-in{0%{opacity:0;translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}.mecx-filter-segment{--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-segment{--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-segment{position:relative;display:inline-flex;margin-right:-1px}.mecx-filter-segment-btn{display:inline-flex;align-items:center;gap:4px;height:var(--mecx-filter-bar-control-height);padding-inline:8px;box-sizing:border-box;background:var(--mecx-color-gray-50);border:1px solid var(--mecx-color-gray-500);border-radius:0;color:var(--mecx-color-gray-700);font-family:inherit;cursor:pointer;outline:none;white-space:nowrap;position:relative;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),border-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-segment-btn:after{content:\"\";position:absolute;inset:var(--mecx-filter-bar-reach) 0}.mecx-filter-segment-btn:hover{background-color:var(--mecx-color-gray-200)}.mecx-filter-segment-btn:active{background-color:var(--mecx-color-gray-400)}.mecx-filter-segment-btn:focus-visible{border-color:var(--mecx-color-gray-900)}.mecx-filter-segment-btn:disabled{background-color:var(--mecx-color-gray-50);color:var(--mecx-color-gray-400);border-color:var(--mecx-color-gray-400);cursor:not-allowed}.mecx-filter-segment-btn:hover,.mecx-filter-segment-btn:focus-visible{z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-segment--open{z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-segment--open .mecx-filter-segment-btn{background-color:var(--mecx-color-gray-200)}.mecx-filter-segment--filled .mecx-filter-segment-btn{color:var(--mecx-color-gray-900)}.mecx-filter-segment--disabled .mecx-filter-segment-btn,.mecx-filter-segment--filled.mecx-filter-segment--disabled .mecx-filter-segment-btn{color:var(--mecx-color-gray-400)}.mecx-filter-segment-icon{display:inline-flex;flex-shrink:0;font-size:16px;color:var(--mecx-color-gray-600)}.mecx-filter-segment--disabled .mecx-filter-segment-icon{color:var(--mecx-color-gray-400)}.mecx-filter-segment-label{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.02em;color:inherit}.mecx-filter-segment-menu{position:fixed;margin-top:4px;z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-segment-menu--entering{transform-origin:top;animation:mecx-filter-bar-surface-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-segment-menu--entering monkey-filter-menu-item,.mecx-filter-segment-menu--entering monkey-divider{animation:mecx-filter-bar-surface-item-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter) both}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(1){animation-delay:calc(var(--mecx-filter-bar-stagger) * 1)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(2){animation-delay:calc(var(--mecx-filter-bar-stagger) * 2)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(3){animation-delay:calc(var(--mecx-filter-bar-stagger) * 3)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(4){animation-delay:calc(var(--mecx-filter-bar-stagger) * 4)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(5){animation-delay:calc(var(--mecx-filter-bar-stagger) * 5)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(6){animation-delay:calc(var(--mecx-filter-bar-stagger) * 6)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(7){animation-delay:calc(var(--mecx-filter-bar-stagger) * 7)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-segment-menu--entering .mecx-filter-menu-items>:nth-child(n+8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-segment-menu--leaving{transform-origin:top;animation:mecx-filter-bar-surface-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit)}\n"] }]
|
|
6351
6351
|
}], ctorParameters: () => [], propDecorators: { _menuEl: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlySegment: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlySegment", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onSegmentClick: [{ type: i0.Output, args: ["onSegmentClick"] }] } });
|
|
6352
6352
|
|
|
6353
6353
|
/** ************************
|
|
@@ -6403,7 +6403,7 @@ class MonkeyFilterTriggerComponent {
|
|
|
6403
6403
|
this._hostEl.nativeElement.querySelector('.mecx-filter-trigger-btn')?.focus();
|
|
6404
6404
|
}
|
|
6405
6405
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6406
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterTriggerComponent, isStandalone: true, selector: "monkey-filter-trigger", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, immediateExit: { classPropertyName: "immediateExit", publicName: "immediateExit", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpenChange: "onOpenChange" }, host: { attributes: { "data-testid": "monkey-filter-trigger" }, listeners: { "document:pointerdown": "onDocumentPointerdown($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.mecx-filter-trigger--text": "variant() === \"text\"", "class.mecx-filter-trigger--icon": "variant() === \"icon\"", "class.mecx-filter-trigger--open": "open()" }, classAttribute: "mecx-filter-trigger" }, viewQueries: [{ propertyName: "_menuEl", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n class=\"mecx-filter-trigger-btn\"\n type=\"button\"\n [disabled]=\"disabled() || null\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-label]=\"ariaLabelAttr()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggle()\"\n>\n <i class=\"mk-i mk-i-{{ icon() }} mecx-filter-trigger-icon\" aria-hidden=\"true\"></i>\n @if (variant() === 'text') {\n <span class=\"mecx-filter-trigger-text\">{{ text() }}</span>\n }\n</button>\n@if (open()) {\n <div\n #menu\n class=\"mecx-filter-trigger-menu\"\n animate.enter=\"mecx-filter-trigger-menu--entering\"\n [animate.leave]=\"immediateExit() ? '' : 'mecx-filter-trigger-menu--leaving'\"\n >\n <ng-content></ng-content>\n </div>\n}\n", styles: ["@keyframes mecx-filter-bar-surface-in{0%{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-out{to{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-item-in{0%{opacity:0;translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}.mecx-filter-trigger{--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-trigger{--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-trigger{display:inline-flex;position:relative}.mecx-filter-trigger-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:var(--mecx-filter-bar-control-height);box-sizing:border-box;background-color:var(--mecx-color-white);color:var(--mecx-color-gray-900);border:1px solid var(--mecx-color-gray-500);border-radius:var(--mecx-filter-bar-radius);font-family:inherit;cursor:pointer;outline:none;white-space:nowrap;position:relative;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-trigger-btn:after{content:\"\";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,var(--mecx-filter-bar-pointer-target));height:max(100%,var(--mecx-filter-bar-pointer-target))}.mecx-filter-trigger-btn:hover:not(:disabled){color:var(--mecx-color-theme-main)}.mecx-filter-trigger-btn:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}.mecx-filter-trigger-btn:disabled{background-color:transparent;border-color:transparent;color:var(--mecx-color-gray-400);cursor:not-allowed}.mecx-filter-trigger--open{z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-trigger--open .mecx-filter-trigger-btn{color:var(--mecx-color-theme-main)}.mecx-filter-trigger--text .mecx-filter-trigger-btn{padding-inline:7px 11px}.mecx-filter-trigger--icon .mecx-filter-trigger-btn{width:var(--mecx-filter-bar-control-height);padding-inline:0}.mecx-filter-trigger-icon{display:inline-flex;flex-shrink:0;font-size:16px}.mecx-filter-trigger-text{font-size:13px;font-weight:500;line-height:16px;letter-spacing:.03em}.mecx-filter-trigger-menu{position:fixed;margin-top:4px;z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-trigger-menu--entering{transform-origin:top;animation:mecx-filter-bar-surface-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-trigger-menu--entering monkey-filter-menu-item,.mecx-filter-trigger-menu--entering monkey-divider{animation:mecx-filter-bar-surface-item-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter) both}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(1){animation-delay:calc(var(--mecx-filter-bar-stagger) * 1)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(2){animation-delay:calc(var(--mecx-filter-bar-stagger) * 2)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(3){animation-delay:calc(var(--mecx-filter-bar-stagger) * 3)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(4){animation-delay:calc(var(--mecx-filter-bar-stagger) * 4)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(5){animation-delay:calc(var(--mecx-filter-bar-stagger) * 5)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(6){animation-delay:calc(var(--mecx-filter-bar-stagger) * 6)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(7){animation-delay:calc(var(--mecx-filter-bar-stagger) * 7)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(n+8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-trigger-menu--leaving{transform-origin:top;animation:mecx-filter-bar-surface-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6406
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFilterTriggerComponent, isStandalone: true, selector: "monkey-filter-trigger", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, immediateExit: { classPropertyName: "immediateExit", publicName: "immediateExit", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpenChange: "onOpenChange" }, host: { attributes: { "data-testid": "monkey-filter-trigger" }, listeners: { "document:pointerdown": "onDocumentPointerdown($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.mecx-filter-trigger--text": "variant() === \"text\"", "class.mecx-filter-trigger--icon": "variant() === \"icon\"", "class.mecx-filter-trigger--open": "open()" }, classAttribute: "mecx-filter-trigger" }, viewQueries: [{ propertyName: "_menuEl", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n class=\"mecx-filter-trigger-btn\"\n type=\"button\"\n [disabled]=\"disabled() || null\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-label]=\"ariaLabelAttr()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggle()\"\n>\n <i class=\"mk-i mk-i-{{ icon() }} mecx-filter-trigger-icon\" aria-hidden=\"true\"></i>\n @if (variant() === 'text') {\n <span class=\"mecx-filter-trigger-text\">{{ text() }}</span>\n }\n</button>\n@if (open()) {\n <div\n #menu\n class=\"mecx-filter-trigger-menu\"\n animate.enter=\"mecx-filter-trigger-menu--entering\"\n [animate.leave]=\"immediateExit() ? '' : 'mecx-filter-trigger-menu--leaving'\"\n >\n <ng-content></ng-content>\n </div>\n}\n", styles: ["@keyframes mecx-filter-bar-surface-in{0%{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-out{to{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-item-in{0%{opacity:0;translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}.mecx-filter-trigger{--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-trigger{--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-trigger{display:inline-flex;position:relative}.mecx-filter-trigger-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:var(--mecx-filter-bar-control-height);box-sizing:border-box;background-color:var(--mecx-color-white);color:var(--mecx-color-gray-900);border:1px solid var(--mecx-color-gray-500);border-radius:var(--mecx-filter-bar-radius);font-family:inherit;cursor:pointer;outline:none;white-space:nowrap;position:relative;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-trigger-btn:after{content:\"\";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,var(--mecx-filter-bar-pointer-target));height:max(100%,var(--mecx-filter-bar-pointer-target))}.mecx-filter-trigger-btn:hover:not(:disabled){color:var(--mecx-color-theme-main)}.mecx-filter-trigger-btn:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}.mecx-filter-trigger-btn:disabled{background-color:transparent;border-color:transparent;color:var(--mecx-color-gray-400);cursor:not-allowed}.mecx-filter-trigger--open{z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-trigger--open .mecx-filter-trigger-btn{color:var(--mecx-color-theme-main)}.mecx-filter-trigger--text .mecx-filter-trigger-btn{padding-inline:7px 11px}.mecx-filter-trigger--icon .mecx-filter-trigger-btn{width:var(--mecx-filter-bar-control-height);padding-inline:0}.mecx-filter-trigger-icon{display:inline-flex;flex-shrink:0;font-size:16px}.mecx-filter-trigger-text{font-size:13px;font-weight:500;line-height:16px;letter-spacing:.03em}.mecx-filter-trigger-menu{position:fixed;margin-top:4px;z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-trigger-menu--entering{transform-origin:top;animation:mecx-filter-bar-surface-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-trigger-menu--entering monkey-filter-menu-item,.mecx-filter-trigger-menu--entering monkey-divider{animation:mecx-filter-bar-surface-item-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter) both}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(1){animation-delay:calc(var(--mecx-filter-bar-stagger) * 1)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(2){animation-delay:calc(var(--mecx-filter-bar-stagger) * 2)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(3){animation-delay:calc(var(--mecx-filter-bar-stagger) * 3)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(4){animation-delay:calc(var(--mecx-filter-bar-stagger) * 4)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(5){animation-delay:calc(var(--mecx-filter-bar-stagger) * 5)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(6){animation-delay:calc(var(--mecx-filter-bar-stagger) * 6)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(7){animation-delay:calc(var(--mecx-filter-bar-stagger) * 7)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(n+8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-trigger-menu--leaving{transform-origin:top;animation:mecx-filter-bar-surface-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6407
6407
|
}
|
|
6408
6408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterTriggerComponent, decorators: [{
|
|
6409
6409
|
type: Component,
|
|
@@ -6415,7 +6415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
6415
6415
|
'[class.mecx-filter-trigger--open]': 'open()',
|
|
6416
6416
|
'(document:pointerdown)': 'onDocumentPointerdown($event)',
|
|
6417
6417
|
'(document:keydown.escape)': 'onEscape()'
|
|
6418
|
-
}, template: "<button\n class=\"mecx-filter-trigger-btn\"\n type=\"button\"\n [disabled]=\"disabled() || null\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-label]=\"ariaLabelAttr()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggle()\"\n>\n <i class=\"mk-i mk-i-{{ icon() }} mecx-filter-trigger-icon\" aria-hidden=\"true\"></i>\n @if (variant() === 'text') {\n <span class=\"mecx-filter-trigger-text\">{{ text() }}</span>\n }\n</button>\n@if (open()) {\n <div\n #menu\n class=\"mecx-filter-trigger-menu\"\n animate.enter=\"mecx-filter-trigger-menu--entering\"\n [animate.leave]=\"immediateExit() ? '' : 'mecx-filter-trigger-menu--leaving'\"\n >\n <ng-content></ng-content>\n </div>\n}\n", styles: ["@keyframes mecx-filter-bar-surface-in{0%{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-out{to{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-item-in{0%{opacity:0;translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}.mecx-filter-trigger{--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-trigger{--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-trigger{display:inline-flex;position:relative}.mecx-filter-trigger-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:var(--mecx-filter-bar-control-height);box-sizing:border-box;background-color:var(--mecx-color-white);color:var(--mecx-color-gray-900);border:1px solid var(--mecx-color-gray-500);border-radius:var(--mecx-filter-bar-radius);font-family:inherit;cursor:pointer;outline:none;white-space:nowrap;position:relative;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-trigger-btn:after{content:\"\";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,var(--mecx-filter-bar-pointer-target));height:max(100%,var(--mecx-filter-bar-pointer-target))}.mecx-filter-trigger-btn:hover:not(:disabled){color:var(--mecx-color-theme-main)}.mecx-filter-trigger-btn:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}.mecx-filter-trigger-btn:disabled{background-color:transparent;border-color:transparent;color:var(--mecx-color-gray-400);cursor:not-allowed}.mecx-filter-trigger--open{z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-trigger--open .mecx-filter-trigger-btn{color:var(--mecx-color-theme-main)}.mecx-filter-trigger--text .mecx-filter-trigger-btn{padding-inline:7px 11px}.mecx-filter-trigger--icon .mecx-filter-trigger-btn{width:var(--mecx-filter-bar-control-height);padding-inline:0}.mecx-filter-trigger-icon{display:inline-flex;flex-shrink:0;font-size:16px}.mecx-filter-trigger-text{font-size:13px;font-weight:500;line-height:16px;letter-spacing:.03em}.mecx-filter-trigger-menu{position:fixed;margin-top:4px;z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-trigger-menu--entering{transform-origin:top;animation:mecx-filter-bar-surface-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-trigger-menu--entering monkey-filter-menu-item,.mecx-filter-trigger-menu--entering monkey-divider{animation:mecx-filter-bar-surface-item-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter) both}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(1){animation-delay:calc(var(--mecx-filter-bar-stagger) * 1)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(2){animation-delay:calc(var(--mecx-filter-bar-stagger) * 2)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(3){animation-delay:calc(var(--mecx-filter-bar-stagger) * 3)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(4){animation-delay:calc(var(--mecx-filter-bar-stagger) * 4)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(5){animation-delay:calc(var(--mecx-filter-bar-stagger) * 5)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(6){animation-delay:calc(var(--mecx-filter-bar-stagger) * 6)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(7){animation-delay:calc(var(--mecx-filter-bar-stagger) * 7)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(n+8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-trigger-menu--leaving{transform-origin:top;animation:mecx-filter-bar-surface-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit)}\n"] }]
|
|
6418
|
+
}, template: "<button\n class=\"mecx-filter-trigger-btn\"\n type=\"button\"\n [disabled]=\"disabled() || null\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-label]=\"ariaLabelAttr()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggle()\"\n>\n <i class=\"mk-i mk-i-{{ icon() }} mecx-filter-trigger-icon\" aria-hidden=\"true\"></i>\n @if (variant() === 'text') {\n <span class=\"mecx-filter-trigger-text\">{{ text() }}</span>\n }\n</button>\n@if (open()) {\n <div\n #menu\n class=\"mecx-filter-trigger-menu\"\n animate.enter=\"mecx-filter-trigger-menu--entering\"\n [animate.leave]=\"immediateExit() ? '' : 'mecx-filter-trigger-menu--leaving'\"\n >\n <ng-content></ng-content>\n </div>\n}\n", styles: ["@keyframes mecx-filter-bar-surface-in{0%{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-out{to{opacity:0;scale:1 var(--mecx-filter-bar-scale-unfold);translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}@keyframes mecx-filter-bar-surface-item-in{0%{opacity:0;translate:0 calc(var(--mecx-filter-bar-travel-anchored) * -1)}}.mecx-filter-trigger{--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-trigger{--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-trigger{display:inline-flex;position:relative}.mecx-filter-trigger-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:var(--mecx-filter-bar-control-height);box-sizing:border-box;background-color:var(--mecx-color-white);color:var(--mecx-color-gray-900);border:1px solid var(--mecx-color-gray-500);border-radius:var(--mecx-filter-bar-radius);font-family:inherit;cursor:pointer;outline:none;white-space:nowrap;position:relative;transition:background-color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state),color var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state)}.mecx-filter-trigger-btn:after{content:\"\";position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100%,var(--mecx-filter-bar-pointer-target));height:max(100%,var(--mecx-filter-bar-pointer-target))}.mecx-filter-trigger-btn:hover:not(:disabled){color:var(--mecx-color-theme-main)}.mecx-filter-trigger-btn:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}.mecx-filter-trigger-btn:disabled{background-color:transparent;border-color:transparent;color:var(--mecx-color-gray-400);cursor:not-allowed}.mecx-filter-trigger--open{z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-trigger--open .mecx-filter-trigger-btn{color:var(--mecx-color-theme-main)}.mecx-filter-trigger--text .mecx-filter-trigger-btn{padding-inline:7px 11px}.mecx-filter-trigger--icon .mecx-filter-trigger-btn{width:var(--mecx-filter-bar-control-height);padding-inline:0}.mecx-filter-trigger-icon{display:inline-flex;flex-shrink:0;font-size:16px}.mecx-filter-trigger-text{font-size:13px;font-weight:500;line-height:16px;letter-spacing:.03em}.mecx-filter-trigger-menu{position:fixed;margin-top:4px;z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-trigger-menu--entering{transform-origin:top;animation:mecx-filter-bar-surface-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-trigger-menu--entering monkey-filter-menu-item,.mecx-filter-trigger-menu--entering monkey-divider{animation:mecx-filter-bar-surface-item-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter) both}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(1){animation-delay:calc(var(--mecx-filter-bar-stagger) * 1)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(2){animation-delay:calc(var(--mecx-filter-bar-stagger) * 2)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(3){animation-delay:calc(var(--mecx-filter-bar-stagger) * 3)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(4){animation-delay:calc(var(--mecx-filter-bar-stagger) * 4)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(5){animation-delay:calc(var(--mecx-filter-bar-stagger) * 5)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(6){animation-delay:calc(var(--mecx-filter-bar-stagger) * 6)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(7){animation-delay:calc(var(--mecx-filter-bar-stagger) * 7)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-trigger-menu--entering .mecx-filter-menu-items>:nth-child(n+8){animation-delay:calc(var(--mecx-filter-bar-stagger) * 8)}.mecx-filter-trigger-menu--leaving{transform-origin:top;animation:mecx-filter-bar-surface-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit)}\n"] }]
|
|
6419
6419
|
}], ctorParameters: () => [], propDecorators: { _menuEl: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], immediateExit: [{ type: i0.Input, args: [{ isSignal: true, alias: "immediateExit", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }] } });
|
|
6420
6420
|
|
|
6421
6421
|
/** ************************
|
|
@@ -6501,6 +6501,7 @@ class MonkeyFilterBarComponent {
|
|
|
6501
6501
|
this._localeId = inject(LOCALE_ID);
|
|
6502
6502
|
this._currencyPipe = inject(CurrencyPipe);
|
|
6503
6503
|
this._scrollbar = viewChild(MonkeyScrollbarComponent, ...(ngDevMode ? [{ debugName: "_scrollbar" }] : /* istanbul ignore next */ []));
|
|
6504
|
+
this._rowEl = viewChild.required('rowEl');
|
|
6504
6505
|
this._text = toSignal(inject(MonkeyDictionaryService).get('FILTER-BAR'));
|
|
6505
6506
|
this._commitTimer = null;
|
|
6506
6507
|
this._reported = signal([], ...(ngDevMode ? [{ debugName: "_reported" }] : /* istanbul ignore next */ []));
|
|
@@ -6517,6 +6518,7 @@ class MonkeyFilterBarComponent {
|
|
|
6517
6518
|
this.calendarOpen = signal(null, ...(ngDevMode ? [{ debugName: "calendarOpen" }] : /* istanbul ignore next */ []));
|
|
6518
6519
|
this.categorySearch = signal('', ...(ngDevMode ? [{ debugName: "categorySearch" }] : /* istanbul ignore next */ []));
|
|
6519
6520
|
this.immediateTriggerExit = signal(false, ...(ngDevMode ? [{ debugName: "immediateTriggerExit" }] : /* istanbul ignore next */ []));
|
|
6521
|
+
this.scrollVisible = signal(false, ...(ngDevMode ? [{ debugName: "scrollVisible" }] : /* istanbul ignore next */ []));
|
|
6520
6522
|
this.textValue = '';
|
|
6521
6523
|
this.textValue2 = '';
|
|
6522
6524
|
this.currencyValue = null;
|
|
@@ -6809,13 +6811,27 @@ class MonkeyFilterBarComponent {
|
|
|
6809
6811
|
afterNextRender(() => {
|
|
6810
6812
|
if (follow)
|
|
6811
6813
|
this.followEnd(container);
|
|
6812
|
-
this.
|
|
6814
|
+
this.syncScrollbar();
|
|
6813
6815
|
animateFlip(container, before, FROZEN);
|
|
6814
6816
|
this.immediateTriggerExit.set(false);
|
|
6815
6817
|
}, { injector: this._injector });
|
|
6816
6818
|
}
|
|
6817
6819
|
scheduleRemeasure() {
|
|
6818
|
-
afterNextRender(() => this.
|
|
6820
|
+
afterNextRender(() => this.syncScrollbar(), { injector: this._injector });
|
|
6821
|
+
}
|
|
6822
|
+
rowOverflows() {
|
|
6823
|
+
const row = this._rowEl().nativeElement;
|
|
6824
|
+
return row.scrollWidth - row.clientWidth > 1;
|
|
6825
|
+
}
|
|
6826
|
+
syncScrollbar() {
|
|
6827
|
+
this._scrollbar()?.remeasure();
|
|
6828
|
+
this.scrollVisible.set(this.rowOverflows());
|
|
6829
|
+
}
|
|
6830
|
+
onSlotSettled(event) {
|
|
6831
|
+
const slot = event.target;
|
|
6832
|
+
if (!slot?.classList.contains('mecx-filter-bar-slot'))
|
|
6833
|
+
return;
|
|
6834
|
+
this.syncScrollbar();
|
|
6819
6835
|
}
|
|
6820
6836
|
operatorLabel(operator) {
|
|
6821
6837
|
if (!operator)
|
|
@@ -7055,7 +7071,7 @@ class MonkeyFilterBarComponent {
|
|
|
7055
7071
|
this.commit();
|
|
7056
7072
|
}
|
|
7057
7073
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 }); }
|
|
7074
|
+
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 }, { 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\">{{ 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 [class.mecx-filter-bar-bar--visible]=\"scrollVisible()\"\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-delay-settle: .32s;--mecx-filter-bar-z-raised: 1;--mecx-filter-bar-z-sticky: 2;--mecx-filter-bar-z-menu: 1000}@media(prefers-reduced-motion:reduce){.mecx-filter-bar{--mecx-filter-bar-duration-state: 1ms;--mecx-filter-bar-duration-enter: 1ms;--mecx-filter-bar-duration-exit: 1ms;--mecx-filter-bar-scale-unfold: 1;--mecx-filter-bar-travel-anchored: 0px;--mecx-filter-bar-travel-slide: 0px;--mecx-filter-bar-stagger: 0ms}}.mecx-filter-bar{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-extra{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.mecx-filter-bar-extra:empty{display:none}.mecx-filter-bar-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"row tail\" \"bar bar\";align-items:center;row-gap:8px;width:100%}.mecx-filter-bar-bar,.mecx-filter-bar-bar.mecx-scrollbar--inert{grid-area:bar;min-width:0;display:block;opacity:0;pointer-events:none;transition:opacity var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state) var(--mecx-filter-bar-delay-settle)}.mecx-filter-bar-bar.mecx-filter-bar-bar--visible{opacity:1;pointer-events:auto;transition-delay:0s}.mecx-filter-bar-tail{grid-area:tail;display:flex;align-items:center;min-width:0}.mecx-filter-bar-row{grid-area:row;display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-filter-bar-pointer-target);margin-inline-start:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline:var(--mecx-filter-bar-focus-reach) var(--mecx-filter-bar-fade-width);scroll-padding-inline-start:var(--mecx-filter-bar-focus-reach);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar--disabled .mecx-filter-bar-row{cursor:default}.mecx-filter-bar-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-filter-bar-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-slot-in{0%{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-slot-out{to{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}.mecx-filter-bar-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-slot-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-slot--entering{animation:mecx-filter-bar-slot-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter);position:relative;z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-bar-slot:has(.mecx-filter-segment--open),.mecx-filter-bar-slot:has(.mecx-filter-trigger--open){z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-menu.mecx-filter-bar-menu-categories{width:220px}.mecx-filter-menu.mecx-filter-bar-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-menu-field{width:238px}.mecx-filter-bar-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-field monkey-button,.mecx-filter-bar-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-field-row{display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer}.mecx-filter-bar-field-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px}.mecx-filter-bar-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-panel-actions monkey-button,.mecx-filter-bar-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}@media(max-width:767.98px){.mecx-filter-bar-line{grid-template-columns:minmax(0,1fr);grid-template-areas:\"row\" \"bar\" \"tail\";position:relative}.mecx-filter-bar-slot--trigger{position:sticky;right:0;z-index:var(--mecx-filter-bar-z-sticky)}.mecx-filter-bar-row{margin-inline-end:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline-end:var(--mecx-filter-bar-focus-reach)}.mecx-filter-bar-actions{padding-left:0;align-self:auto;background:none;position:static}.mecx-filter-bar-actions:before{right:var(--mecx-filter-bar-control-height);bottom:auto;height:var(--mecx-filter-bar-pointer-target)}}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }, { kind: "component", type: MonkeyDividerComponent, selector: "monkey-divider", inputs: ["size", "vertical", "id"] }, { kind: "component", type: MonkeyFilterChipComponent, selector: "monkey-filter-chip", inputs: ["removeIcon", "removeLabel", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: MonkeyFilterMenuComponent, selector: "monkey-filter-menu", inputs: ["showSearch", "searchPlaceholder", "showScroll", "maxHeight"], outputs: ["onSearchChange"] }, { kind: "component", type: MonkeyFilterMenuItemComponent, selector: "monkey-filter-menu-item", inputs: ["property", "leadIcon", "label", "description", "checked", "selected", "disabled"], outputs: ["onItemClick"] }, { kind: "component", type: MonkeyFilterSegmentComponent, selector: "monkey-filter-segment", inputs: ["icon", "text", "placeholder", "readonlySegment", "disabled", "open"], outputs: ["onOpenChange", "onSegmentClick"] }, { kind: "component", type: MonkeyFilterTriggerComponent, selector: "monkey-filter-trigger", inputs: ["variant", "icon", "text", "ariaLabel", "disabled", "immediateExit", "open", "alignment"], outputs: ["onOpenChange"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "directive", type: MonkeyInputCurrencyDirective, selector: "input[monkey-input-currency]", inputs: ["name", "disabled", "id", "required", "type"], exportAs: ["monkeyInput"] }, { kind: "component", type: MonkeyScrollbarComponent, selector: "monkey-scrollbar", inputs: ["orientation", "size", "target"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7059
7075
|
}
|
|
7060
7076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
7061
7077
|
type: Component,
|
|
@@ -7076,8 +7092,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
7076
7092
|
'data-testid': 'monkey-filter-bar',
|
|
7077
7093
|
class: 'mecx-filter-bar',
|
|
7078
7094
|
'[class.mecx-filter-bar--disabled]': 'disabled()'
|
|
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"] }]
|
|
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 }] }] } });
|
|
7095
|
+
}, 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\">{{ 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 [class.mecx-filter-bar-bar--visible]=\"scrollVisible()\"\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-delay-settle: .32s;--mecx-filter-bar-z-raised: 1;--mecx-filter-bar-z-sticky: 2;--mecx-filter-bar-z-menu: 1000}@media(prefers-reduced-motion:reduce){.mecx-filter-bar{--mecx-filter-bar-duration-state: 1ms;--mecx-filter-bar-duration-enter: 1ms;--mecx-filter-bar-duration-exit: 1ms;--mecx-filter-bar-scale-unfold: 1;--mecx-filter-bar-travel-anchored: 0px;--mecx-filter-bar-travel-slide: 0px;--mecx-filter-bar-stagger: 0ms}}.mecx-filter-bar{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-extra{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.mecx-filter-bar-extra:empty{display:none}.mecx-filter-bar-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"row tail\" \"bar bar\";align-items:center;row-gap:8px;width:100%}.mecx-filter-bar-bar,.mecx-filter-bar-bar.mecx-scrollbar--inert{grid-area:bar;min-width:0;display:block;opacity:0;pointer-events:none;transition:opacity var(--mecx-filter-bar-duration-state) var(--mecx-filter-bar-ease-state) var(--mecx-filter-bar-delay-settle)}.mecx-filter-bar-bar.mecx-filter-bar-bar--visible{opacity:1;pointer-events:auto;transition-delay:0s}.mecx-filter-bar-tail{grid-area:tail;display:flex;align-items:center;min-width:0}.mecx-filter-bar-row{grid-area:row;display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-filter-bar-pointer-target);margin-inline-start:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline:var(--mecx-filter-bar-focus-reach) var(--mecx-filter-bar-fade-width);scroll-padding-inline-start:var(--mecx-filter-bar-focus-reach);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar--disabled .mecx-filter-bar-row{cursor:default}.mecx-filter-bar-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-filter-bar-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-slot-in{0%{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-slot-out{to{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}.mecx-filter-bar-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-slot-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-slot--entering{animation:mecx-filter-bar-slot-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter);position:relative;z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-bar-slot:has(.mecx-filter-segment--open),.mecx-filter-bar-slot:has(.mecx-filter-trigger--open){z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-menu.mecx-filter-bar-menu-categories{width:220px}.mecx-filter-menu.mecx-filter-bar-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-menu-field{width:238px}.mecx-filter-bar-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-field monkey-button,.mecx-filter-bar-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-field-row{display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer}.mecx-filter-bar-field-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px}.mecx-filter-bar-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-panel-actions monkey-button,.mecx-filter-bar-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}@media(max-width:767.98px){.mecx-filter-bar-line{grid-template-columns:minmax(0,1fr);grid-template-areas:\"row\" \"bar\" \"tail\";position:relative}.mecx-filter-bar-slot--trigger{position:sticky;right:0;z-index:var(--mecx-filter-bar-z-sticky)}.mecx-filter-bar-row{margin-inline-end:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline-end:var(--mecx-filter-bar-focus-reach)}.mecx-filter-bar-actions{padding-left:0;align-self:auto;background:none;position:static}.mecx-filter-bar-actions:before{right:var(--mecx-filter-bar-control-height);bottom:auto;height:var(--mecx-filter-bar-pointer-target)}}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
|
|
7096
|
+
}], 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 }] }] } });
|
|
7081
7097
|
|
|
7082
7098
|
/** ************************
|
|
7083
7099
|
* Copyright Monkey Exchange. All Rights Reserved
|