monkey-style-guide 21.2.31 → 21.2.32
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.
|
@@ -2955,6 +2955,10 @@ class MonkeyButtonComponent {
|
|
|
2955
2955
|
this.color = 'default';
|
|
2956
2956
|
this.size = 'md';
|
|
2957
2957
|
this.type = 'primary';
|
|
2958
|
+
this.nativeType = 'submit';
|
|
2959
|
+
this.ariaLabel = null;
|
|
2960
|
+
this.ariaExpanded = null;
|
|
2961
|
+
this.ariaHasPopup = null;
|
|
2958
2962
|
this.elementRef = inject(ElementRef);
|
|
2959
2963
|
this._uid = inject(IdGenerator).getId('monkey-button-');
|
|
2960
2964
|
// eslint-disable-next-line no-self-assign
|
|
@@ -2971,7 +2975,7 @@ class MonkeyButtonComponent {
|
|
|
2971
2975
|
return this.elementRef.nativeElement;
|
|
2972
2976
|
}
|
|
2973
2977
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2974
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", color: "color", size: "size", type: "type", loading: "loading", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "attr.tabindex": "null" } }, ngImport: i0, template: "<button
|
|
2978
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", color: "color", size: "size", type: "type", loading: "loading", nativeType: "nativeType", ariaLabel: "ariaLabel", ariaExpanded: "ariaExpanded", ariaHasPopup: "ariaHasPopup", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "attr.tabindex": "null" } }, ngImport: i0, template: "<button\r\n class=\"mecx-button {{ type }} {{ size }} {{ color }}\"\r\n [attr.type]=\"nativeType\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-expanded]=\"ariaExpanded\"\r\n [attr.aria-haspopup]=\"ariaHasPopup\"\r\n>\r\n <div class=\"content\">\r\n @if (!loading) {\r\n <ng-content select=\"[first]\"></ng-content>\r\n }\r\n <span><ng-content></ng-content></span>\r\n @if (!loading) {\r\n <ng-content select=\"[last]\"></ng-content>\r\n }\r\n @if (loading) {\r\n <util-icon class=\"mecx-button-loading\" name=\"loading\" />\r\n }\r\n </div>\r\n</button>\r\n", styles: ["monkey-button{display:inline-block}monkey-button.has-progress button:disabled{position:relative;overflow:hidden;border:2px solid var(--mecx-color-gray-400)}monkey-button.has-progress :is(.mecx-button){transition:none!important}monkey-button.has-progress :is(.mecx-button) :is(.content){transition:none!important}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button .mecx-button-loading{display:flex;background:transparent}monkey-button .mecx-button .mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary.black{background:var(--mecx-color-gray-900);color:var(--mecx-color-white)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-700)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-700)}monkey-button .mecx-button.primary:hover:not(:disabled).black{background:var(--mecx-color-gray-700)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.9)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2975
2979
|
}
|
|
2976
2980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
|
|
2977
2981
|
type: Component,
|
|
@@ -2980,7 +2984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
2980
2984
|
'[attr.id]': 'id',
|
|
2981
2985
|
'[id]': 'id',
|
|
2982
2986
|
'[attr.tabindex]': 'null'
|
|
2983
|
-
}, template: "<button
|
|
2987
|
+
}, template: "<button\r\n class=\"mecx-button {{ type }} {{ size }} {{ color }}\"\r\n [attr.type]=\"nativeType\"\r\n [disabled]=\"disabled || loading\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-expanded]=\"ariaExpanded\"\r\n [attr.aria-haspopup]=\"ariaHasPopup\"\r\n>\r\n <div class=\"content\">\r\n @if (!loading) {\r\n <ng-content select=\"[first]\"></ng-content>\r\n }\r\n <span><ng-content></ng-content></span>\r\n @if (!loading) {\r\n <ng-content select=\"[last]\"></ng-content>\r\n }\r\n @if (loading) {\r\n <util-icon class=\"mecx-button-loading\" name=\"loading\" />\r\n }\r\n </div>\r\n</button>\r\n", styles: ["monkey-button{display:inline-block}monkey-button.has-progress button:disabled{position:relative;overflow:hidden;border:2px solid var(--mecx-color-gray-400)}monkey-button.has-progress :is(.mecx-button){transition:none!important}monkey-button.has-progress :is(.mecx-button) :is(.content){transition:none!important}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button .mecx-button-loading{display:flex;background:transparent}monkey-button .mecx-button .mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary.black{background:var(--mecx-color-gray-900);color:var(--mecx-color-white)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-700)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-700)}monkey-button .mecx-button.primary:hover:not(:disabled).black{background:var(--mecx-color-gray-700)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.9)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
|
|
2984
2988
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
2985
2989
|
type: Input
|
|
2986
2990
|
}], color: [{
|
|
@@ -2991,6 +2995,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
2991
2995
|
type: Input
|
|
2992
2996
|
}], loading: [{
|
|
2993
2997
|
type: Input
|
|
2998
|
+
}], nativeType: [{
|
|
2999
|
+
type: Input
|
|
3000
|
+
}], ariaLabel: [{
|
|
3001
|
+
type: Input
|
|
3002
|
+
}], ariaExpanded: [{
|
|
3003
|
+
type: Input
|
|
3004
|
+
}], ariaHasPopup: [{
|
|
3005
|
+
type: Input
|
|
2994
3006
|
}], id: [{
|
|
2995
3007
|
type: Input
|
|
2996
3008
|
}], onClick: [{
|
|
@@ -3039,7 +3051,7 @@ class MonkeyToastComponent {
|
|
|
3039
3051
|
}
|
|
3040
3052
|
}
|
|
3041
3053
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyToastComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3042
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MonkeyToastComponent, isStandalone: true, selector: "monkey-toast", inputs: { message: "message", icon: "icon", type: "type", isClosable: ["isClosable", "isClosable", booleanAttribute], actionLabel: "actionLabel", actionIcon: "actionIcon", id: "id" }, outputs: { onActionClick: "onActionClick", onClose: "onClose" }, host: { attributes: { "data-testid": "monkey-toast" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"monkey-toast-content\">\r\n @if (icon) {\r\n <i class=\"mk-i mk-i-{{icon}} lg\"></i>\r\n }\r\n <div>\r\n <div class=\"monkey-toast-message\">\r\n {{ message }}\r\n </div>\r\n @if (actionLabel) {\r\n <div class=\"monkey-toast-action\">\r\n <monkey-button\r\n class=\"monkey-toast-btn-action\"\r\n type=\"tertiary\"\r\n size=\"sm\"\r\n (click)=\"onActionClick.emit(id)\"\r\n >\r\n {{ actionLabel }}\r\n @if (actionIcon) {\r\n <i class=\"mk-i mk-i-{{actionIcon}} xs\" first></i>\r\n }\r\n </monkey-button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n@if (isClosable) {\r\n <div class=\"monkey-toast-actions\">\r\n <div class=\"monkey-toast-divider\" aria-hidden=\"true\"></div>\r\n <div class=\"monkey-toast-close\" (click)=\"close()\">\r\n <util-icon name=\"clear\" />\r\n </div>\r\n </div>\r\n}\r\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:16px;padding:16px;box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-lh-24);font-size:var(--mecx-fs-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;align-self:flex-start}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white);flex-shrink:0}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer;flex-shrink:0}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-700)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MonkeyToastComponent, isStandalone: true, selector: "monkey-toast", inputs: { message: "message", icon: "icon", type: "type", isClosable: ["isClosable", "isClosable", booleanAttribute], actionLabel: "actionLabel", actionIcon: "actionIcon", id: "id" }, outputs: { onActionClick: "onActionClick", onClose: "onClose" }, host: { attributes: { "data-testid": "monkey-toast" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"monkey-toast-content\">\r\n @if (icon) {\r\n <i class=\"mk-i mk-i-{{icon}} lg\"></i>\r\n }\r\n <div>\r\n <div class=\"monkey-toast-message\">\r\n {{ message }}\r\n </div>\r\n @if (actionLabel) {\r\n <div class=\"monkey-toast-action\">\r\n <monkey-button\r\n class=\"monkey-toast-btn-action\"\r\n type=\"tertiary\"\r\n size=\"sm\"\r\n (click)=\"onActionClick.emit(id)\"\r\n >\r\n {{ actionLabel }}\r\n @if (actionIcon) {\r\n <i class=\"mk-i mk-i-{{actionIcon}} xs\" first></i>\r\n }\r\n </monkey-button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n@if (isClosable) {\r\n <div class=\"monkey-toast-actions\">\r\n <div class=\"monkey-toast-divider\" aria-hidden=\"true\"></div>\r\n <div class=\"monkey-toast-close\" (click)=\"close()\">\r\n <util-icon name=\"clear\" />\r\n </div>\r\n </div>\r\n}\r\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:16px;padding:16px;box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-lh-24);font-size:var(--mecx-fs-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;align-self:flex-start}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white);flex-shrink:0}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer;flex-shrink:0}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-700)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "nativeType", "ariaLabel", "ariaExpanded", "ariaHasPopup", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3043
3055
|
}
|
|
3044
3056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyToastComponent, decorators: [{
|
|
3045
3057
|
type: Component,
|
|
@@ -5841,7 +5853,7 @@ class MonkeyDateRangeComponent {
|
|
|
5841
5853
|
this.secondCalendar = calendars.secondCalendar;
|
|
5842
5854
|
}
|
|
5843
5855
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5844
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MonkeyDateRangeComponent, isStandalone: true, selector: "monkey-date-range", inputs: { startDate: "startDate", endDate: "endDate", hideQuickAction: ["hideQuickAction", "hideQuickAction", booleanAttribute], hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], hideSecondCalendar: ["hideSecondCalendar", "hideSecondCalendar", booleanAttribute], allowFastActionOnHeader: ["allowFastActionOnHeader", "allowFastActionOnHeader", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onCancel: "onCancel", onDate: "onDate" }, host: { attributes: { "data-testid": "monkey-date-range" }, listeners: { "window:resize": "onResize($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "@if (i18nDictionary | async; as i18n) {\r\n <div class=\"container-date-range-group\">\r\n @if (!hideQuickAction) {\r\n <div class=\"quick-actions\">\r\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\r\n </monkey-date-range-quick-actions>\r\n </div>\r\n }\r\n <div class=\"container-date-range\">\r\n @if (!hideHeader) {\r\n <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\r\n @if (allowFastActionOnHeader) {\r\n <div class=\"quick-actions\">\r\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\r\n </monkey-date-range-quick-actions>\r\n </div>\r\n } @else {\r\n <div class=\"inputs\">\r\n <monkey-form-field hideAction enableClear size=\"sm\">\r\n <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\r\n <input\r\n type=\"date\"\r\n monkey-input\r\n id=\"startDate\"\r\n [(ngModel)]=\"handledStartDate\"\r\n (ngModelChange)=\"onDataChange($event, true)\"\r\n [min]=\"handledMinDate\"\r\n [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\r\n (change)=\"onChangeInputStartDate($event)\"\r\n />\r\n </monkey-form-field>\r\n <monkey-form-field hideAction enableClear size=\"sm\">\r\n <monkey-label>{{ i18n?.['END-DATE'] }}</monkey-label>\r\n <input\r\n type=\"date\"\r\n monkey-input\r\n id=\"endDate\"\r\n [(ngModel)]=\"handledEndDate\"\r\n (ngModelChange)=\"onDataChange($event, false)\"\r\n [min]=\"handledStartDate ? handledStartDate : ''\"\r\n [max]=\"handledMaxDate\"\r\n (change)=\"onChangeInputEndDate($event)\"\r\n />\r\n </monkey-form-field>\r\n </div>\r\n @if (isInvalidInterval) {\r\n <monkey-error>{{ i18n?.['INVALID'] }}</monkey-error>\r\n }\r\n }\r\n </div>\r\n }\r\n <div class=\"body\">\r\n <div class=\"calendars\">\r\n <monkey-date-range-month\r\n [month]=\"firstCalendar.month\"\r\n [year]=\"firstCalendar.year\"\r\n [startDate]=\"handledStartDate\"\r\n [endDate]=\"handledEndDate\"\r\n (onDate)=\"onHandleDate($event)\"\r\n (onNavigate)=\"onHandleNavigate($event)\"\r\n [hideNext]=\"!hideSecondCalendar\"\r\n [minDate]=\"handledMinDate\"\r\n [maxDate]=\"handledMaxDate\"\r\n >\r\n </monkey-date-range-month>\r\n @if (!hideSecondCalendar) {\r\n <monkey-date-range-month\r\n [month]=\"secondCalendar.month\"\r\n [year]=\"secondCalendar.year\"\r\n [startDate]=\"handledStartDate\"\r\n [endDate]=\"handledEndDate\"\r\n (onDate)=\"onHandleDate($event)\"\r\n (onNavigate)=\"onHandleNavigate($event)\"\r\n hidePrevious\r\n [minDate]=\"handledMinDate\"\r\n [maxDate]=\"handledMaxDate\"\r\n >\r\n </monkey-date-range-month>\r\n }\r\n </div>\r\n </div>\r\n @if (!hideActions) {\r\n <div class=\"actions\">\r\n <monkey-button size=\"sm\" type=\"secondary\" (click)=\"onCancel.next(null)\">\r\n {{ i18n?.ACTIONS?.CANCEL }}\r\n </monkey-button>\r\n <monkey-button\r\n size=\"sm\"\r\n (click)=\"onSubmit()\"\r\n [disabled]=\"!this.handledStartDate || !this.handledEndDate\"\r\n >\r\n {{ i18n?.ACTIONS?.APPLY }}\r\n </monkey-button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:block;border:2px solid var(--mecx-color-gray-200);border-radius:16px}:host .container-date-range-group{width:100%;display:inline-flex}:host .container-date-range-group .quick-actions{width:100%;max-width:172px;border-top-left-radius:16px;border-bottom-left-radius:16px;border-right:2px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}:host .container-date-range-group .container-date-range{width:100%;display:inline-flex;flex-direction:column}:host .header{padding:16px 24px;border-radius:1px 16px 1px 1px;border-bottom:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50)}:host .header .quick-actions{max-width:unset;border:unset}:host .header .quick-actions monkey-date-range-quick-actions{flex-flow:row wrap;padding:unset;justify-content:space-between;background:var(--mecx-color-gray-50)}:host .header.no-quick-action{border-top-left-radius:16px}:host .header .inputs{max-width:400px;display:flex;gap:16px}:host .header monkey-error{margin-top:2px}:host .body{padding:16px 24px}:host .body .calendars{display:inline-flex;width:100%;gap:48px}:host .actions{border-top:1px solid var(--mecx-color-gray-200);padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "directive", type: MonkeyLabelDirective, selector: "monkey-label" }, { kind: "directive", type: MonkeyErrorDirective, selector: "monkey-error" }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyDateRangeMonthComponent, selector: "monkey-date-range-month", inputs: ["month", "year", "startDate", "endDate", "hidePrevious", "hideNext", "minDate", "maxDate", "id"], outputs: ["onNavigate", "onDate"] }, { kind: "component", type: MonkeyDateRangeQuickActionsComponent, selector: "monkey-date-range-quick-actions", inputs: ["id"], outputs: ["onChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
5856
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MonkeyDateRangeComponent, isStandalone: true, selector: "monkey-date-range", inputs: { startDate: "startDate", endDate: "endDate", hideQuickAction: ["hideQuickAction", "hideQuickAction", booleanAttribute], hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], hideSecondCalendar: ["hideSecondCalendar", "hideSecondCalendar", booleanAttribute], allowFastActionOnHeader: ["allowFastActionOnHeader", "allowFastActionOnHeader", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onCancel: "onCancel", onDate: "onDate" }, host: { attributes: { "data-testid": "monkey-date-range" }, listeners: { "window:resize": "onResize($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "@if (i18nDictionary | async; as i18n) {\r\n <div class=\"container-date-range-group\">\r\n @if (!hideQuickAction) {\r\n <div class=\"quick-actions\">\r\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\r\n </monkey-date-range-quick-actions>\r\n </div>\r\n }\r\n <div class=\"container-date-range\">\r\n @if (!hideHeader) {\r\n <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\r\n @if (allowFastActionOnHeader) {\r\n <div class=\"quick-actions\">\r\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\r\n </monkey-date-range-quick-actions>\r\n </div>\r\n } @else {\r\n <div class=\"inputs\">\r\n <monkey-form-field hideAction enableClear size=\"sm\">\r\n <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\r\n <input\r\n type=\"date\"\r\n monkey-input\r\n id=\"startDate\"\r\n [(ngModel)]=\"handledStartDate\"\r\n (ngModelChange)=\"onDataChange($event, true)\"\r\n [min]=\"handledMinDate\"\r\n [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\r\n (change)=\"onChangeInputStartDate($event)\"\r\n />\r\n </monkey-form-field>\r\n <monkey-form-field hideAction enableClear size=\"sm\">\r\n <monkey-label>{{ i18n?.['END-DATE'] }}</monkey-label>\r\n <input\r\n type=\"date\"\r\n monkey-input\r\n id=\"endDate\"\r\n [(ngModel)]=\"handledEndDate\"\r\n (ngModelChange)=\"onDataChange($event, false)\"\r\n [min]=\"handledStartDate ? handledStartDate : ''\"\r\n [max]=\"handledMaxDate\"\r\n (change)=\"onChangeInputEndDate($event)\"\r\n />\r\n </monkey-form-field>\r\n </div>\r\n @if (isInvalidInterval) {\r\n <monkey-error>{{ i18n?.['INVALID'] }}</monkey-error>\r\n }\r\n }\r\n </div>\r\n }\r\n <div class=\"body\">\r\n <div class=\"calendars\">\r\n <monkey-date-range-month\r\n [month]=\"firstCalendar.month\"\r\n [year]=\"firstCalendar.year\"\r\n [startDate]=\"handledStartDate\"\r\n [endDate]=\"handledEndDate\"\r\n (onDate)=\"onHandleDate($event)\"\r\n (onNavigate)=\"onHandleNavigate($event)\"\r\n [hideNext]=\"!hideSecondCalendar\"\r\n [minDate]=\"handledMinDate\"\r\n [maxDate]=\"handledMaxDate\"\r\n >\r\n </monkey-date-range-month>\r\n @if (!hideSecondCalendar) {\r\n <monkey-date-range-month\r\n [month]=\"secondCalendar.month\"\r\n [year]=\"secondCalendar.year\"\r\n [startDate]=\"handledStartDate\"\r\n [endDate]=\"handledEndDate\"\r\n (onDate)=\"onHandleDate($event)\"\r\n (onNavigate)=\"onHandleNavigate($event)\"\r\n hidePrevious\r\n [minDate]=\"handledMinDate\"\r\n [maxDate]=\"handledMaxDate\"\r\n >\r\n </monkey-date-range-month>\r\n }\r\n </div>\r\n </div>\r\n @if (!hideActions) {\r\n <div class=\"actions\">\r\n <monkey-button size=\"sm\" type=\"secondary\" (click)=\"onCancel.next(null)\">\r\n {{ i18n?.ACTIONS?.CANCEL }}\r\n </monkey-button>\r\n <monkey-button\r\n size=\"sm\"\r\n (click)=\"onSubmit()\"\r\n [disabled]=\"!this.handledStartDate || !this.handledEndDate\"\r\n >\r\n {{ i18n?.ACTIONS?.APPLY }}\r\n </monkey-button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:block;border:2px solid var(--mecx-color-gray-200);border-radius:16px}:host .container-date-range-group{width:100%;display:inline-flex}:host .container-date-range-group .quick-actions{width:100%;max-width:172px;border-top-left-radius:16px;border-bottom-left-radius:16px;border-right:2px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}:host .container-date-range-group .container-date-range{width:100%;display:inline-flex;flex-direction:column}:host .header{padding:16px 24px;border-radius:1px 16px 1px 1px;border-bottom:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50)}:host .header .quick-actions{max-width:unset;border:unset}:host .header .quick-actions monkey-date-range-quick-actions{flex-flow:row wrap;padding:unset;justify-content:space-between;background:var(--mecx-color-gray-50)}:host .header.no-quick-action{border-top-left-radius:16px}:host .header .inputs{max-width:400px;display:flex;gap:16px}:host .header monkey-error{margin-top:2px}:host .body{padding:16px 24px}:host .body .calendars{display:inline-flex;width:100%;gap:48px}:host .actions{border-top:1px solid var(--mecx-color-gray-200);padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "directive", type: MonkeyLabelDirective, selector: "monkey-label" }, { kind: "directive", type: MonkeyErrorDirective, selector: "monkey-error" }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "nativeType", "ariaLabel", "ariaExpanded", "ariaHasPopup", "id"] }, { kind: "component", type: MonkeyDateRangeMonthComponent, selector: "monkey-date-range-month", inputs: ["month", "year", "startDate", "endDate", "hidePrevious", "hideNext", "minDate", "maxDate", "id"], outputs: ["onNavigate", "onDate"] }, { kind: "component", type: MonkeyDateRangeQuickActionsComponent, selector: "monkey-date-range-quick-actions", inputs: ["id"], outputs: ["onChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
5845
5857
|
}
|
|
5846
5858
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyDateRangeComponent, decorators: [{
|
|
5847
5859
|
type: Component,
|
|
@@ -6010,7 +6022,7 @@ class MonkeyDownloadButtonComponent {
|
|
|
6010
6022
|
</div>
|
|
6011
6023
|
}
|
|
6012
6024
|
</monkey-button>
|
|
6013
|
-
`, isInline: true, styles: [":host{display:inline-flex}:host .content-download{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}:host .content-download-progress{position:absolute;left:0;top:0;height:100%;color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main);z-index:1;font-weight:500;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:var(--mecx-button-progress);transition:width .01s ease-in-out;text-align:right}:host .content-download-progress:before,:host .content-download-progress:after{content:\"\";position:absolute;width:200px;height:200px;top:50%;right:-8px;background:var(--mecx-color-theme-main);border-radius:45% 47% 43% 46%;transform:translateY(-50%) rotate(0);animation:rotate 7s linear infinite;z-index:-1}:host .content-download-progress:after{content:\"\";border-radius:47% 42% 46% 44%;background:var(--mecx-color-theme-300);transform:translateY(-50%) rotate(0);animation:rotate 9s linear -4s infinite;z-index:-2;width:140px;height:150px}@keyframes rotate{50%{transform:translateY(-50%) rotate(180deg)}to{transform:translateY(-50%) rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }] }); }
|
|
6025
|
+
`, isInline: true, styles: [":host{display:inline-flex}:host .content-download{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}:host .content-download-progress{position:absolute;left:0;top:0;height:100%;color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main);z-index:1;font-weight:500;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:var(--mecx-button-progress);transition:width .01s ease-in-out;text-align:right}:host .content-download-progress:before,:host .content-download-progress:after{content:\"\";position:absolute;width:200px;height:200px;top:50%;right:-8px;background:var(--mecx-color-theme-main);border-radius:45% 47% 43% 46%;transform:translateY(-50%) rotate(0);animation:rotate 7s linear infinite;z-index:-1}:host .content-download-progress:after{content:\"\";border-radius:47% 42% 46% 44%;background:var(--mecx-color-theme-300);transform:translateY(-50%) rotate(0);animation:rotate 9s linear -4s infinite;z-index:-2;width:140px;height:150px}@keyframes rotate{50%{transform:translateY(-50%) rotate(180deg)}to{transform:translateY(-50%) rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "nativeType", "ariaLabel", "ariaExpanded", "ariaHasPopup", "id"] }] }); }
|
|
6014
6026
|
}
|
|
6015
6027
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyDownloadButtonComponent, decorators: [{
|
|
6016
6028
|
type: Component,
|
|
@@ -6777,7 +6789,7 @@ class MonkeyComplexFilterBarComponent {
|
|
|
6777
6789
|
</div>
|
|
6778
6790
|
</div>
|
|
6779
6791
|
</ng-template>
|
|
6780
|
-
`, isInline: true, styles: [":host{width:100%;display:flex;flex-direction:column;gap:0}:host .complex-filter-bar-row{display:flex;align-items:flex-start;gap:8px;width:100%}:host .complex-filter-bar-row monkey-button{flex-shrink:0;max-height:32px}:host .complex-filter-bar-row monkey-icon-button{flex-shrink:0}:host .complex-filter-bar-row .complex-filter-bar-extra-actions{margin-left:auto}:host .complex-filter-bar-input-wrap{flex:1;min-width:0;position:relative}:host .complex-filter-bar-field{width:100%}:host .complex-filter-bar-input{font-family:monospace!important;font-size:13px!important;resize:none;overflow:hidden;line-height:1.5;min-height:20px;max-height:200px;overflow-y:auto;padding:0}:host .complex-filter-bar-field--textarea .mecx-form-field-body{height:auto;min-height:32px;align-items:flex-start;padding-top:6px;padding-bottom:6px}:host .complex-filter-bar-field--invalid .mecx-form-field-body{border-color:var(--mecx-color-error-700)!important}:host .complex-filter-bar-error-msg{margin:3px 0 0;padding:0 4px;font-size:11px;line-height:1.4;color:var(--mecx-color-error-500, #ef4444)}:host .complex-filter-bar-autocomplete{position:absolute;left:0;right:0;top:calc(100% + 2px);background:#fff;border:1px solid var(--mecx-color-gray-200);border-radius:6px;box-shadow:0 4px 16px #0000001a;z-index:200;max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--mecx-color-gray-300) transparent;margin-top:-18px}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:13px;transition:background-color .1s ease}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item:hover,:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item.active{background:var(--mecx-color-primary-50, #eef2ff)}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge{flex-shrink:0;font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge--field{background:var(--mecx-color-gray-100);color:var(--mecx-color-gray-600)}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge--logical{background:var(--mecx-color-primary-100, #e0e7ff);color:var(--mecx-color-primary-700, #4338ca)}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge--value{background:#d1fae5;color:#065f46}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-label{font-weight:500;color:var(--mecx-color-gray-900);flex-shrink:0}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-sublabel{font-family:monospace;font-size:12px;color:var(--mecx-color-gray-500)}.complex-filter-bar-docs-panel{min-width:360px;max-width:480px;display:flex;flex-direction:column}.complex-filter-bar-docs-panel .complex-filter-bar-docs-header{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--mecx-color-gray-200);font-size:14px;font-weight:600;line-height:24px;color:var(--mecx-color-gray-700)}.complex-filter-bar-docs-panel .complex-filter-bar-docs-body{max-height:420px;overflow-y:auto;padding:8px 0;scrollbar-width:thin;scrollbar-color:var(--mecx-color-gray-300) transparent}.complex-filter-bar-docs-panel .complex-filter-bar-docs-field{padding:8px 16px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-field+.complex-filter-bar-docs-field{border-top:1px solid var(--mecx-color-gray-100)}.complex-filter-bar-docs-panel .complex-filter-bar-docs-field-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.complex-filter-bar-docs-panel .complex-filter-bar-docs-key{font-family:monospace;font-size:12px;background:var(--mecx-color-gray-100);color:var(--mecx-color-gray-800);padding:2px 6px;border-radius:4px;flex-shrink:0}.complex-filter-bar-docs-panel .complex-filter-bar-docs-label{font-size:13px;font-weight:600;color:var(--mecx-color-gray-800)}.complex-filter-bar-docs-panel .complex-filter-bar-docs-operators{display:flex;gap:4px;margin-left:auto;flex-shrink:0}.complex-filter-bar-docs-panel .complex-filter-bar-docs-op{font-family:monospace;font-size:12px;font-weight:700;background:var(--mecx-color-primary-50, #eef2ff);color:var(--mecx-color-primary-600, #4f46e5);padding:1px 5px;border-radius:4px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-explanation{margin:4px 0 0;font-size:12px;color:var(--mecx-color-gray-500);line-height:1.5}.complex-filter-bar-docs-panel .complex-filter-bar-docs-values{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-value-badge{font-family:monospace;font-size:11px;background:#d1fae5;color:#065f46;padding:1px 6px;border-radius:4px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-actions{display:flex;justify-content:flex-end;padding:8px 12px;border-top:1px solid var(--mecx-color-gray-200)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "directive", type: MonkeyPrefixDirective, selector: "monkey-prefix" }, { kind: "directive", type: MonkeyInfoDirective, selector: "monkey-info" }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus", "monkeyPopoverCloseOnClick"], outputs: ["monkeyPopoverItemClick"], exportAs: ["monkeyPopover"] }] }); }
|
|
6792
|
+
`, isInline: true, styles: [":host{width:100%;display:flex;flex-direction:column;gap:0}:host .complex-filter-bar-row{display:flex;align-items:flex-start;gap:8px;width:100%}:host .complex-filter-bar-row monkey-button{flex-shrink:0;max-height:32px}:host .complex-filter-bar-row monkey-icon-button{flex-shrink:0}:host .complex-filter-bar-row .complex-filter-bar-extra-actions{margin-left:auto}:host .complex-filter-bar-input-wrap{flex:1;min-width:0;position:relative}:host .complex-filter-bar-field{width:100%}:host .complex-filter-bar-input{font-family:monospace!important;font-size:13px!important;resize:none;overflow:hidden;line-height:1.5;min-height:20px;max-height:200px;overflow-y:auto;padding:0}:host .complex-filter-bar-field--textarea .mecx-form-field-body{height:auto;min-height:32px;align-items:flex-start;padding-top:6px;padding-bottom:6px}:host .complex-filter-bar-field--invalid .mecx-form-field-body{border-color:var(--mecx-color-error-700)!important}:host .complex-filter-bar-error-msg{margin:3px 0 0;padding:0 4px;font-size:11px;line-height:1.4;color:var(--mecx-color-error-500, #ef4444)}:host .complex-filter-bar-autocomplete{position:absolute;left:0;right:0;top:calc(100% + 2px);background:#fff;border:1px solid var(--mecx-color-gray-200);border-radius:6px;box-shadow:0 4px 16px #0000001a;z-index:200;max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--mecx-color-gray-300) transparent;margin-top:-18px}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:13px;transition:background-color .1s ease}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item:hover,:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item.active{background:var(--mecx-color-primary-50, #eef2ff)}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge{flex-shrink:0;font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge--field{background:var(--mecx-color-gray-100);color:var(--mecx-color-gray-600)}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge--logical{background:var(--mecx-color-primary-100, #e0e7ff);color:var(--mecx-color-primary-700, #4338ca)}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge--value{background:#d1fae5;color:#065f46}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-label{font-weight:500;color:var(--mecx-color-gray-900);flex-shrink:0}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-sublabel{font-family:monospace;font-size:12px;color:var(--mecx-color-gray-500)}.complex-filter-bar-docs-panel{min-width:360px;max-width:480px;display:flex;flex-direction:column}.complex-filter-bar-docs-panel .complex-filter-bar-docs-header{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--mecx-color-gray-200);font-size:14px;font-weight:600;line-height:24px;color:var(--mecx-color-gray-700)}.complex-filter-bar-docs-panel .complex-filter-bar-docs-body{max-height:420px;overflow-y:auto;padding:8px 0;scrollbar-width:thin;scrollbar-color:var(--mecx-color-gray-300) transparent}.complex-filter-bar-docs-panel .complex-filter-bar-docs-field{padding:8px 16px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-field+.complex-filter-bar-docs-field{border-top:1px solid var(--mecx-color-gray-100)}.complex-filter-bar-docs-panel .complex-filter-bar-docs-field-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.complex-filter-bar-docs-panel .complex-filter-bar-docs-key{font-family:monospace;font-size:12px;background:var(--mecx-color-gray-100);color:var(--mecx-color-gray-800);padding:2px 6px;border-radius:4px;flex-shrink:0}.complex-filter-bar-docs-panel .complex-filter-bar-docs-label{font-size:13px;font-weight:600;color:var(--mecx-color-gray-800)}.complex-filter-bar-docs-panel .complex-filter-bar-docs-operators{display:flex;gap:4px;margin-left:auto;flex-shrink:0}.complex-filter-bar-docs-panel .complex-filter-bar-docs-op{font-family:monospace;font-size:12px;font-weight:700;background:var(--mecx-color-primary-50, #eef2ff);color:var(--mecx-color-primary-600, #4f46e5);padding:1px 5px;border-radius:4px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-explanation{margin:4px 0 0;font-size:12px;color:var(--mecx-color-gray-500);line-height:1.5}.complex-filter-bar-docs-panel .complex-filter-bar-docs-values{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-value-badge{font-family:monospace;font-size:11px;background:#d1fae5;color:#065f46;padding:1px 6px;border-radius:4px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-actions{display:flex;justify-content:flex-end;padding:8px 12px;border-top:1px solid var(--mecx-color-gray-200)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "nativeType", "ariaLabel", "ariaExpanded", "ariaHasPopup", "id"] }, { kind: "directive", type: MonkeyPrefixDirective, selector: "monkey-prefix" }, { kind: "directive", type: MonkeyInfoDirective, selector: "monkey-info" }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus", "monkeyPopoverCloseOnClick"], outputs: ["monkeyPopoverItemClick"], exportAs: ["monkeyPopover"] }] }); }
|
|
6781
6793
|
}
|
|
6782
6794
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyComplexFilterBarComponent, decorators: [{
|
|
6783
6795
|
type: Component,
|
|
@@ -7616,14 +7628,16 @@ class MonkeyFilterTriggerComponent {
|
|
|
7616
7628
|
if (!this.open())
|
|
7617
7629
|
return;
|
|
7618
7630
|
this.onOpenChange.emit(false);
|
|
7619
|
-
this._hostEl.nativeElement
|
|
7631
|
+
this._hostEl.nativeElement
|
|
7632
|
+
.querySelector('.mecx-filter-trigger-btn button')
|
|
7633
|
+
?.focus();
|
|
7620
7634
|
}
|
|
7621
7635
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyFilterTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7622
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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()
|
|
7636
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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: "<monkey-button\n class=\"mecx-filter-trigger-btn\"\n type=\"secondary\"\n size=\"sm\"\n nativeType=\"button\"\n ariaHasPopup=\"listbox\"\n [disabled]=\"disabled()\"\n [ariaExpanded]=\"open()\"\n [ariaLabel]=\"ariaLabelAttr()\"\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</monkey-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}monkey-button.mecx-filter-trigger-btn{display:inline-flex}monkey-button.mecx-filter-trigger-btn .mecx-button{position:relative;height:var(--mecx-filter-bar-control-height);color:var(--mecx-color-gray-900);border:1px solid var(--mecx-color-gray-500);border-radius:var(--mecx-filter-bar-radius);white-space:nowrap;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)}monkey-button.mecx-filter-trigger-btn .mecx-button: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))}monkey-button.mecx-filter-trigger-btn .mecx-button:disabled{background:transparent!important;border-color:transparent!important;color:var(--mecx-color-gray-400)!important}monkey-button.mecx-filter-trigger-btn .mecx-button:active:not(:disabled) .content{transform:none}monkey-button.mecx-filter-trigger-btn .mecx-button .content{gap:0;padding:0;letter-spacing:normal}monkey-button.mecx-filter-trigger-btn .mecx-button .content>span{display:inline-flex;align-items:center;gap:4px;width:auto}.mecx-filter-trigger--open{z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-trigger--open monkey-button.mecx-filter-trigger-btn .mecx-button{color:var(--mecx-color-theme-main)}.mecx-filter-trigger--text monkey-button.mecx-filter-trigger-btn .mecx-button{padding-inline:7px 11px}.mecx-filter-trigger--icon monkey-button.mecx-filter-trigger-btn .mecx-button{width:var(--mecx-filter-bar-control-height);padding-inline:0}monkey-button.mecx-filter-trigger-btn .mecx-button .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"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "nativeType", "ariaLabel", "ariaExpanded", "ariaHasPopup", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7623
7637
|
}
|
|
7624
7638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyFilterTriggerComponent, decorators: [{
|
|
7625
7639
|
type: Component,
|
|
7626
|
-
args: [{ selector: 'monkey-filter-trigger', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
7640
|
+
args: [{ selector: 'monkey-filter-trigger', imports: [MonkeyButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
7627
7641
|
'data-testid': 'monkey-filter-trigger',
|
|
7628
7642
|
class: 'mecx-filter-trigger',
|
|
7629
7643
|
'[class.mecx-filter-trigger--text]': 'variant() === "text"',
|
|
@@ -7631,7 +7645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
7631
7645
|
'[class.mecx-filter-trigger--open]': 'open()',
|
|
7632
7646
|
'(document:pointerdown)': 'onDocumentPointerdown($event)',
|
|
7633
7647
|
'(document:keydown.escape)': 'onEscape()'
|
|
7634
|
-
}, template: "<button\n class=\"mecx-filter-trigger-btn\"\n type=\"button\"\n [disabled]=\"disabled()
|
|
7648
|
+
}, template: "<monkey-button\n class=\"mecx-filter-trigger-btn\"\n type=\"secondary\"\n size=\"sm\"\n nativeType=\"button\"\n ariaHasPopup=\"listbox\"\n [disabled]=\"disabled()\"\n [ariaExpanded]=\"open()\"\n [ariaLabel]=\"ariaLabelAttr()\"\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</monkey-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}monkey-button.mecx-filter-trigger-btn{display:inline-flex}monkey-button.mecx-filter-trigger-btn .mecx-button{position:relative;height:var(--mecx-filter-bar-control-height);color:var(--mecx-color-gray-900);border:1px solid var(--mecx-color-gray-500);border-radius:var(--mecx-filter-bar-radius);white-space:nowrap;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)}monkey-button.mecx-filter-trigger-btn .mecx-button: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))}monkey-button.mecx-filter-trigger-btn .mecx-button:disabled{background:transparent!important;border-color:transparent!important;color:var(--mecx-color-gray-400)!important}monkey-button.mecx-filter-trigger-btn .mecx-button:active:not(:disabled) .content{transform:none}monkey-button.mecx-filter-trigger-btn .mecx-button .content{gap:0;padding:0;letter-spacing:normal}monkey-button.mecx-filter-trigger-btn .mecx-button .content>span{display:inline-flex;align-items:center;gap:4px;width:auto}.mecx-filter-trigger--open{z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-trigger--open monkey-button.mecx-filter-trigger-btn .mecx-button{color:var(--mecx-color-theme-main)}.mecx-filter-trigger--text monkey-button.mecx-filter-trigger-btn .mecx-button{padding-inline:7px 11px}.mecx-filter-trigger--icon monkey-button.mecx-filter-trigger-btn .mecx-button{width:var(--mecx-filter-bar-control-height);padding-inline:0}monkey-button.mecx-filter-trigger-btn .mecx-button .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"] }]
|
|
7635
7649
|
}], 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"] }] } });
|
|
7636
7650
|
|
|
7637
7651
|
/** ************************
|
|
@@ -7727,6 +7741,7 @@ class MonkeyFilterBarComponent {
|
|
|
7727
7741
|
this.dateFormat = input(DEFAULT_DISPLAY_FORMAT, ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
|
|
7728
7742
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7729
7743
|
this.debounce = input(0, ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
|
|
7744
|
+
this.addLabel = input('', ...(ngDevMode ? [{ debugName: "addLabel" }] : /* istanbul ignore next */ []));
|
|
7730
7745
|
this.appPainted = appPainted;
|
|
7731
7746
|
this.rows = signal([], ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
7732
7747
|
this.openPanel = signal(null, ...(ngDevMode ? [{ debugName: "openPanel" }] : /* istanbul ignore next */ []));
|
|
@@ -7749,9 +7764,10 @@ class MonkeyFilterBarComponent {
|
|
|
7749
7764
|
}, ...(ngDevMode ? [{ debugName: "conditionsByKey" }] : /* istanbul ignore next */ []));
|
|
7750
7765
|
this.labels = computed(() => {
|
|
7751
7766
|
const text = this._text();
|
|
7767
|
+
const add = this.addLabel().trim();
|
|
7752
7768
|
return {
|
|
7753
|
-
add: text?.ADD ?? '',
|
|
7754
|
-
addAria: text?.['ADD-ARIA'] ?? '',
|
|
7769
|
+
add: add || (text?.ADD ?? ''),
|
|
7770
|
+
addAria: add || (text?.['ADD-ARIA'] ?? ''),
|
|
7755
7771
|
clear: text?.CLEAR ?? '',
|
|
7756
7772
|
search: text?.SEARCH ?? '',
|
|
7757
7773
|
selectCondition: text?.['SELECT-CONDITION'] ?? '',
|
|
@@ -8307,7 +8323,7 @@ class MonkeyFilterBarComponent {
|
|
|
8307
8323
|
this.commit();
|
|
8308
8324
|
}
|
|
8309
8325
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8310
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChange: "onFiltersChange" }, host: { attributes: { "data-testid": "monkey-filter-bar" }, properties: { "class.mecx-filter-bar--disabled": "disabled()" }, classAttribute: "mecx-filter-bar" }, providers: [CurrencyPipe], viewQueries: [{ propertyName: "_scrollbar", first: true, predicate: MonkeyScrollbarComponent, descendants: true, isSignal: true }, { propertyName: "_rowEl", first: true, predicate: ["rowEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mecx-filter-bar-line\">\n <div\n #rowEl\n class=\"mecx-filter-bar-row\"\n (animationend)=\"onSlotSettled($event)\"\n (transitionend)=\"onSlotSettled($event)\"\n >\n @for (f of rows(); track f.key) {\n <span\n class=\"mecx-filter-bar-slot\"\n [attr.data-flip-id]=\"f.key\"\n [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\n animate.leave=\"mecx-filter-bar-slot--leaving\"\n >\n <monkey-filter-chip\n [removeLabel]=\"labels().remove\"\n [disabled]=\"disabled()\"\n (onRemove)=\"onRemove(f)\"\n >\n <monkey-filter-segment\n [icon]=\"f.icon ?? null\"\n [text]=\"f.label\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'category')\"\n (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'category')) {\n <monkey-filter-menu\n class=\"mecx-filter-bar-menu-categories\"\n [showSearch]=\"true\"\n [searchPlaceholder]=\"labels().search\"\n (onSearchChange)=\"categorySearch.set($event)\"\n >\n @for (opt of changeOptions(); track opt.key; let i = $index) {\n @if (needsDivider(changeOptions(), i)) {\n <monkey-divider />\n }\n <monkey-filter-menu-item\n [leadIcon]=\"opt.icon ?? null\"\n [label]=\"opt.label\"\n [selected]=\"opt.key === f.key\"\n [disabled]=\"opt.key !== f.key && isFilterActive(opt.key)\"\n (onItemClick)=\"onChangeCategory(f, i)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-segment>\n <monkey-filter-segment\n [placeholder]=\"labels().selectCondition\"\n [text]=\"operatorLabel(f.condition)\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'condition')\"\n (onOpenChange)=\"onConditionOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'condition')) {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\n @for (c of conditionsFor(f); track c) {\n <monkey-filter-menu-item\n [label]=\"operatorLabel(c)\"\n [selected]=\"c === f.condition\"\n (onItemClick)=\"onSelectCondition(f, c)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-segment>\n @if (hasValueSegment(f)) {\n <monkey-filter-segment\n [placeholder]=\"valuePlaceholder(f)\"\n [text]=\"displayOf(f)\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'value')\"\n (onOpenChange)=\"onValueOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'value')) {\n @switch (panelFor(f)) {\n @case ('status') {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-status\" [showSearch]=\"false\">\n @for (s of statusOptionsOf(f); track s.value) {\n <monkey-filter-menu-item\n property=\"checkbox\"\n [label]=\"s.description\"\n [checked]=\"statusValues.includes(s.value)\"\n (onItemClick)=\"onToggleStatus(s.value)\"\n />\n }\n <div class=\"mecx-filter-bar-panel-actions\">\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n\n @case ('date-day') {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n <div class=\"mecx-filter-bar-field\">\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"date\"\n monkey-input\n [(ngModel)]=\"dayValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n\n @case ('date-range') {\n @if (calendarOpen() === f.key) {\n <monkey-date-range\n class=\"mecx-filter-bar-calendar\"\n [startDate]=\"dateRange.startDate\"\n [endDate]=\"dateRange.endDate\"\n [minDate]=\"minDateOf(f)\"\n [maxDate]=\"maxDateOf(f)\"\n (onDate)=\"onDateChange(f, $event)\"\n (onCancel)=\"onBackToShortcuts()\"\n ></monkey-date-range>\n } @else {\n <monkey-filter-menu [showSearch]=\"false\">\n @for (shortcut of dateShortcuts(); track shortcut.key) {\n <monkey-filter-menu-item\n [label]=\"shortcut.label\"\n (onItemClick)=\"onQuickDate(f, shortcut.key)\"\n />\n }\n </monkey-filter-menu>\n }\n }\n\n @default {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n <div class=\"mecx-filter-bar-field\">\n @if (f.type === 'currency') {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">\n {{ isRange(f) ? labels().rangeFrom : f.label }}\n </span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input-currency\n [(ngModel)]=\"currencyValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n @if (isRange(f)) {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{\n labels().rangeTo\n }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input-currency\n [(ngModel)]=\"currencyValue2\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n }\n } @else {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">\n {{ isRange(f) ? labels().rangeFrom : f.label }}\n </span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [placeholder]=\"valuePlaceholder(f)\"\n [(ngModel)]=\"textValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n @if (isRange(f)) {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{\n labels().rangeTo\n }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [(ngModel)]=\"textValue2\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n }\n }\n\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n }\n }\n </monkey-filter-segment>\n }\n </monkey-filter-chip>\n </span>\n }\n\n @if (canAddFilter()) {\n <span\n class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\n [attr.data-flip-id]=\"triggerFlipId()\"\n >\n <monkey-filter-trigger\n [variant]=\"triggerVariant()\"\n [icon]=\"triggerIcon()\"\n [text]=\"labels().add\"\n [ariaLabel]=\"labels().addAria\"\n [disabled]=\"disabled()\"\n [immediateExit]=\"immediateTriggerExit()\"\n [open]=\"triggerOpen()\"\n (onOpenChange)=\"onTriggerOpenChange($event)\"\n >\n @if (triggerOpen()) {\n <monkey-filter-menu\n class=\"mecx-filter-bar-menu-categories\"\n [showSearch]=\"true\"\n [searchPlaceholder]=\"labels().search\"\n (onSearchChange)=\"categorySearch.set($event)\"\n >\n @for (opt of addOptions(); track opt.key; let i = $index) {\n @if (needsDivider(addOptions(), i)) {\n <monkey-divider />\n }\n <monkey-filter-menu-item\n [leadIcon]=\"opt.icon ?? null\"\n [label]=\"opt.label\"\n (onItemClick)=\"onSelectCategory(i)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-trigger>\n </span>\n }\n </div>\n @if (scrollVisible()) {\n <monkey-scrollbar\n class=\"mecx-filter-bar-bar\"\n orientation=\"horizontal\"\n [target]=\"rowEl\"\n [animate.enter]=\"appPainted() ? 'mecx-filter-bar-bar--entering' : ''\"\n animate.leave=\"mecx-filter-bar-bar--leaving\"\n />\n }\n\n <div class=\"mecx-filter-bar-tail\">\n @if (rows().length > 0) {\n <div class=\"mecx-filter-bar-actions\">\n <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\n {{ labels().clear }}\n </monkey-button>\n </div>\n }\n\n <div class=\"mecx-filter-bar-extra\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".mecx-filter-bar{--mecx-filter-bar-duration-state: .15s;--mecx-filter-bar-duration-enter: .2s;--mecx-filter-bar-duration-exit: .15s;--mecx-filter-bar-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-filter-bar-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-filter-bar-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-filter-bar-scale-unfold: .94;--mecx-filter-bar-travel-anchored: 4px;--mecx-filter-bar-travel-slide: 16px;--mecx-filter-bar-stagger: 25ms;--mecx-filter-bar-control-height: 32px;--mecx-filter-bar-pointer-target: 40px;--mecx-filter-bar-reach: calc((var(--mecx-filter-bar-control-height) - var(--mecx-filter-bar-pointer-target)) / 2);--mecx-filter-bar-radius: 8px;--mecx-filter-bar-radius-item: 4px;--mecx-filter-bar-fade-width: 48px;--mecx-filter-bar-focus-reach: 4px;--mecx-filter-bar-delay-settle: .32s;--mecx-filter-bar-z-raised: 1;--mecx-filter-bar-z-sticky: 2;--mecx-filter-bar-z-menu: 1000}@media(prefers-reduced-motion:reduce){.mecx-filter-bar{--mecx-filter-bar-duration-state: 1ms;--mecx-filter-bar-duration-enter: 1ms;--mecx-filter-bar-duration-exit: 1ms;--mecx-filter-bar-scale-unfold: 1;--mecx-filter-bar-travel-anchored: 0px;--mecx-filter-bar-travel-slide: 0px;--mecx-filter-bar-stagger: 0ms}}.mecx-filter-bar{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-extra{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.mecx-filter-bar-extra:empty{display:none}.mecx-filter-bar-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"row tail\" \"bar bar\";align-items:center;width:100%}.mecx-filter-bar-bar{grid-area:bar;min-width:0;display:block;margin-block-start:4px}@keyframes mecx-filter-bar-bar-in{0%{opacity:0}}@keyframes mecx-filter-bar-bar-out{to{opacity:0}}.mecx-filter-bar-bar--entering{animation:mecx-filter-bar-bar-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-bar--leaving{animation:mecx-filter-bar-bar-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-tail{grid-area:tail;display:flex;align-items:center;min-width:0}.mecx-filter-bar-row{grid-area:row;display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-filter-bar-pointer-target);margin-inline-start:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline:var(--mecx-filter-bar-focus-reach) var(--mecx-filter-bar-fade-width);scroll-padding-inline-start:var(--mecx-filter-bar-focus-reach);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar--disabled .mecx-filter-bar-row{cursor:default}.mecx-filter-bar-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-filter-bar-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-slot-in{0%{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-slot-out{to{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}.mecx-filter-bar-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-slot-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-slot--entering{animation:mecx-filter-bar-slot-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter);position:relative;z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-bar-slot:has(.mecx-filter-segment--open),.mecx-filter-bar-slot:has(.mecx-filter-trigger--open){z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-menu.mecx-filter-bar-menu-categories{width:220px}.mecx-filter-menu.mecx-filter-bar-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-menu-field{width:238px}.mecx-filter-bar-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-field monkey-button,.mecx-filter-bar-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-field-row{display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer}.mecx-filter-bar-field-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px}.mecx-filter-bar-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-panel-actions monkey-button,.mecx-filter-bar-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}@media(max-width:767.98px){.mecx-filter-bar-line{grid-template-columns:minmax(0,1fr);grid-template-areas:\"row\" \"bar\" \"tail\";position:relative}.mecx-filter-bar-slot--trigger{position:sticky;right:0;z-index:var(--mecx-filter-bar-z-sticky);background:var(--mecx-color-white)}.mecx-filter-bar-slot--trigger:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-row{margin-inline-end:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline-end:var(--mecx-filter-bar-focus-reach)}.mecx-filter-bar-tail:has(.mecx-filter-bar-actions,.mecx-filter-bar-extra>*){margin-block-start:4px}.mecx-filter-bar-actions{padding-left:0;align-self:auto;background:none;position:static}.mecx-filter-bar-actions:before{content:none}}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }, { kind: "component", type: MonkeyDividerComponent, selector: "monkey-divider", inputs: ["size", "vertical", "id"] }, { kind: "component", type: MonkeyFilterChipComponent, selector: "monkey-filter-chip", inputs: ["removeIcon", "removeLabel", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: MonkeyFilterMenuComponent, selector: "monkey-filter-menu", inputs: ["showSearch", "searchPlaceholder", "showScroll", "maxHeight"], outputs: ["onSearchChange"] }, { kind: "component", type: MonkeyFilterMenuItemComponent, selector: "monkey-filter-menu-item", inputs: ["property", "leadIcon", "label", "description", "checked", "selected", "disabled"], outputs: ["onItemClick"] }, { kind: "component", type: MonkeyFilterSegmentComponent, selector: "monkey-filter-segment", inputs: ["icon", "text", "placeholder", "readonlySegment", "disabled", "open"], outputs: ["onOpenChange", "onSegmentClick"] }, { kind: "component", type: MonkeyFilterTriggerComponent, selector: "monkey-filter-trigger", inputs: ["variant", "icon", "text", "ariaLabel", "disabled", "immediateExit", "open", "alignment"], outputs: ["onOpenChange"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "directive", type: MonkeyInputCurrencyDirective, selector: "input[monkey-input-currency]", inputs: ["name", "disabled", "id", "required", "type"], exportAs: ["monkeyInput"] }, { kind: "component", type: MonkeyScrollbarComponent, selector: "monkey-scrollbar", inputs: ["orientation", "size", "target"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8326
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, addLabel: { classPropertyName: "addLabel", publicName: "addLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChange: "onFiltersChange" }, host: { attributes: { "data-testid": "monkey-filter-bar" }, properties: { "class.mecx-filter-bar--disabled": "disabled()" }, classAttribute: "mecx-filter-bar" }, providers: [CurrencyPipe], viewQueries: [{ propertyName: "_scrollbar", first: true, predicate: MonkeyScrollbarComponent, descendants: true, isSignal: true }, { propertyName: "_rowEl", first: true, predicate: ["rowEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mecx-filter-bar-line\">\n <div\n #rowEl\n class=\"mecx-filter-bar-row\"\n (animationend)=\"onSlotSettled($event)\"\n (transitionend)=\"onSlotSettled($event)\"\n >\n @for (f of rows(); track f.key) {\n <span\n class=\"mecx-filter-bar-slot\"\n [attr.data-flip-id]=\"f.key\"\n [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\n animate.leave=\"mecx-filter-bar-slot--leaving\"\n >\n <monkey-filter-chip\n [removeLabel]=\"labels().remove\"\n [disabled]=\"disabled()\"\n (onRemove)=\"onRemove(f)\"\n >\n <monkey-filter-segment\n [icon]=\"f.icon ?? null\"\n [text]=\"f.label\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'category')\"\n (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'category')) {\n <monkey-filter-menu\n class=\"mecx-filter-bar-menu-categories\"\n [showSearch]=\"true\"\n [searchPlaceholder]=\"labels().search\"\n (onSearchChange)=\"categorySearch.set($event)\"\n >\n @for (opt of changeOptions(); track opt.key; let i = $index) {\n @if (needsDivider(changeOptions(), i)) {\n <monkey-divider />\n }\n <monkey-filter-menu-item\n [leadIcon]=\"opt.icon ?? null\"\n [label]=\"opt.label\"\n [selected]=\"opt.key === f.key\"\n [disabled]=\"opt.key !== f.key && isFilterActive(opt.key)\"\n (onItemClick)=\"onChangeCategory(f, i)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-segment>\n <monkey-filter-segment\n [placeholder]=\"labels().selectCondition\"\n [text]=\"operatorLabel(f.condition)\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'condition')\"\n (onOpenChange)=\"onConditionOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'condition')) {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\n @for (c of conditionsFor(f); track c) {\n <monkey-filter-menu-item\n [label]=\"operatorLabel(c)\"\n [selected]=\"c === f.condition\"\n (onItemClick)=\"onSelectCondition(f, c)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-segment>\n @if (hasValueSegment(f)) {\n <monkey-filter-segment\n [placeholder]=\"valuePlaceholder(f)\"\n [text]=\"displayOf(f)\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'value')\"\n (onOpenChange)=\"onValueOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'value')) {\n @switch (panelFor(f)) {\n @case ('status') {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-status\" [showSearch]=\"false\">\n @for (s of statusOptionsOf(f); track s.value) {\n <monkey-filter-menu-item\n property=\"checkbox\"\n [label]=\"s.description\"\n [checked]=\"statusValues.includes(s.value)\"\n (onItemClick)=\"onToggleStatus(s.value)\"\n />\n }\n <div class=\"mecx-filter-bar-panel-actions\">\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n\n @case ('date-day') {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n <div class=\"mecx-filter-bar-field\">\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"date\"\n monkey-input\n [(ngModel)]=\"dayValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n\n @case ('date-range') {\n @if (calendarOpen() === f.key) {\n <monkey-date-range\n class=\"mecx-filter-bar-calendar\"\n [startDate]=\"dateRange.startDate\"\n [endDate]=\"dateRange.endDate\"\n [minDate]=\"minDateOf(f)\"\n [maxDate]=\"maxDateOf(f)\"\n (onDate)=\"onDateChange(f, $event)\"\n (onCancel)=\"onBackToShortcuts()\"\n ></monkey-date-range>\n } @else {\n <monkey-filter-menu [showSearch]=\"false\">\n @for (shortcut of dateShortcuts(); track shortcut.key) {\n <monkey-filter-menu-item\n [label]=\"shortcut.label\"\n (onItemClick)=\"onQuickDate(f, shortcut.key)\"\n />\n }\n </monkey-filter-menu>\n }\n }\n\n @default {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n <div class=\"mecx-filter-bar-field\">\n @if (f.type === 'currency') {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">\n {{ isRange(f) ? labels().rangeFrom : f.label }}\n </span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input-currency\n [(ngModel)]=\"currencyValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n @if (isRange(f)) {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{\n labels().rangeTo\n }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input-currency\n [(ngModel)]=\"currencyValue2\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n }\n } @else {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">\n {{ isRange(f) ? labels().rangeFrom : f.label }}\n </span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [placeholder]=\"valuePlaceholder(f)\"\n [(ngModel)]=\"textValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n @if (isRange(f)) {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{\n labels().rangeTo\n }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [(ngModel)]=\"textValue2\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n }\n }\n\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n }\n }\n </monkey-filter-segment>\n }\n </monkey-filter-chip>\n </span>\n }\n\n @if (canAddFilter()) {\n <span\n class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\n [attr.data-flip-id]=\"triggerFlipId()\"\n >\n <monkey-filter-trigger\n [variant]=\"triggerVariant()\"\n [icon]=\"triggerIcon()\"\n [text]=\"labels().add\"\n [ariaLabel]=\"labels().addAria\"\n [disabled]=\"disabled()\"\n [immediateExit]=\"immediateTriggerExit()\"\n [open]=\"triggerOpen()\"\n (onOpenChange)=\"onTriggerOpenChange($event)\"\n >\n @if (triggerOpen()) {\n <monkey-filter-menu\n class=\"mecx-filter-bar-menu-categories\"\n [showSearch]=\"true\"\n [searchPlaceholder]=\"labels().search\"\n (onSearchChange)=\"categorySearch.set($event)\"\n >\n @for (opt of addOptions(); track opt.key; let i = $index) {\n @if (needsDivider(addOptions(), i)) {\n <monkey-divider />\n }\n <monkey-filter-menu-item\n [leadIcon]=\"opt.icon ?? null\"\n [label]=\"opt.label\"\n (onItemClick)=\"onSelectCategory(i)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-trigger>\n </span>\n }\n </div>\n @if (scrollVisible()) {\n <monkey-scrollbar\n class=\"mecx-filter-bar-bar\"\n orientation=\"horizontal\"\n [target]=\"rowEl\"\n [animate.enter]=\"appPainted() ? 'mecx-filter-bar-bar--entering' : ''\"\n animate.leave=\"mecx-filter-bar-bar--leaving\"\n />\n }\n\n <div class=\"mecx-filter-bar-tail\">\n @if (rows().length > 0) {\n <div class=\"mecx-filter-bar-actions\">\n <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\n {{ labels().clear }}\n </monkey-button>\n </div>\n }\n\n <div class=\"mecx-filter-bar-extra\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".mecx-filter-bar{--mecx-filter-bar-duration-state: .15s;--mecx-filter-bar-duration-enter: .2s;--mecx-filter-bar-duration-exit: .15s;--mecx-filter-bar-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-filter-bar-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-filter-bar-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-filter-bar-scale-unfold: .94;--mecx-filter-bar-travel-anchored: 4px;--mecx-filter-bar-travel-slide: 16px;--mecx-filter-bar-stagger: 25ms;--mecx-filter-bar-control-height: 32px;--mecx-filter-bar-pointer-target: 40px;--mecx-filter-bar-reach: calc((var(--mecx-filter-bar-control-height) - var(--mecx-filter-bar-pointer-target)) / 2);--mecx-filter-bar-radius: 8px;--mecx-filter-bar-radius-item: 4px;--mecx-filter-bar-fade-width: 48px;--mecx-filter-bar-focus-reach: 4px;--mecx-filter-bar-delay-settle: .32s;--mecx-filter-bar-z-raised: 1;--mecx-filter-bar-z-sticky: 2;--mecx-filter-bar-z-menu: 1000}@media(prefers-reduced-motion:reduce){.mecx-filter-bar{--mecx-filter-bar-duration-state: 1ms;--mecx-filter-bar-duration-enter: 1ms;--mecx-filter-bar-duration-exit: 1ms;--mecx-filter-bar-scale-unfold: 1;--mecx-filter-bar-travel-anchored: 0px;--mecx-filter-bar-travel-slide: 0px;--mecx-filter-bar-stagger: 0ms}}.mecx-filter-bar{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-extra{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.mecx-filter-bar-extra:empty{display:none}.mecx-filter-bar-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"row tail\" \"bar bar\";align-items:center;width:100%}.mecx-filter-bar-bar{grid-area:bar;min-width:0;display:block;margin-block-start:4px}@keyframes mecx-filter-bar-bar-in{0%{opacity:0}}@keyframes mecx-filter-bar-bar-out{to{opacity:0}}.mecx-filter-bar-bar--entering{animation:mecx-filter-bar-bar-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-bar--leaving{animation:mecx-filter-bar-bar-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-tail{grid-area:tail;display:flex;align-items:center;min-width:0}.mecx-filter-bar-row{grid-area:row;display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-filter-bar-pointer-target);margin-inline-start:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline:var(--mecx-filter-bar-focus-reach) var(--mecx-filter-bar-fade-width);scroll-padding-inline-start:var(--mecx-filter-bar-focus-reach);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar--disabled .mecx-filter-bar-row{cursor:default}.mecx-filter-bar-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-filter-bar-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-slot-in{0%{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-slot-out{to{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}.mecx-filter-bar-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-slot-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-slot--entering{animation:mecx-filter-bar-slot-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter);position:relative;z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-bar-slot:has(.mecx-filter-segment--open),.mecx-filter-bar-slot:has(.mecx-filter-trigger--open){z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-menu.mecx-filter-bar-menu-categories{width:220px}.mecx-filter-menu.mecx-filter-bar-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-menu-field{width:238px}.mecx-filter-bar-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-field monkey-button,.mecx-filter-bar-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-field-row{display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer}.mecx-filter-bar-field-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px}.mecx-filter-bar-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-panel-actions monkey-button,.mecx-filter-bar-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}@media(max-width:767.98px){.mecx-filter-bar-line{grid-template-columns:minmax(0,1fr);grid-template-areas:\"row\" \"bar\" \"tail\";position:relative}.mecx-filter-bar-slot--trigger{position:sticky;right:0;z-index:var(--mecx-filter-bar-z-sticky);background:var(--mecx-color-white)}.mecx-filter-bar-slot--trigger:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-row{margin-inline-end:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline-end:var(--mecx-filter-bar-focus-reach)}.mecx-filter-bar-tail:has(.mecx-filter-bar-actions,.mecx-filter-bar-extra>*){margin-block-start:4px}.mecx-filter-bar-actions{padding-left:0;align-self:auto;background:none;position:static}.mecx-filter-bar-actions:before{content:none}}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "nativeType", "ariaLabel", "ariaExpanded", "ariaHasPopup", "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 }); }
|
|
8311
8327
|
}
|
|
8312
8328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
8313
8329
|
type: Component,
|
|
@@ -8329,7 +8345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
8329
8345
|
class: 'mecx-filter-bar',
|
|
8330
8346
|
'[class.mecx-filter-bar--disabled]': 'disabled()'
|
|
8331
8347
|
}, template: "<div class=\"mecx-filter-bar-line\">\n <div\n #rowEl\n class=\"mecx-filter-bar-row\"\n (animationend)=\"onSlotSettled($event)\"\n (transitionend)=\"onSlotSettled($event)\"\n >\n @for (f of rows(); track f.key) {\n <span\n class=\"mecx-filter-bar-slot\"\n [attr.data-flip-id]=\"f.key\"\n [animate.enter]=\"appPainted() ? 'mecx-filter-bar-slot--entering' : ''\"\n animate.leave=\"mecx-filter-bar-slot--leaving\"\n >\n <monkey-filter-chip\n [removeLabel]=\"labels().remove\"\n [disabled]=\"disabled()\"\n (onRemove)=\"onRemove(f)\"\n >\n <monkey-filter-segment\n [icon]=\"f.icon ?? null\"\n [text]=\"f.label\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'category')\"\n (onOpenChange)=\"onCategoryOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'category')) {\n <monkey-filter-menu\n class=\"mecx-filter-bar-menu-categories\"\n [showSearch]=\"true\"\n [searchPlaceholder]=\"labels().search\"\n (onSearchChange)=\"categorySearch.set($event)\"\n >\n @for (opt of changeOptions(); track opt.key; let i = $index) {\n @if (needsDivider(changeOptions(), i)) {\n <monkey-divider />\n }\n <monkey-filter-menu-item\n [leadIcon]=\"opt.icon ?? null\"\n [label]=\"opt.label\"\n [selected]=\"opt.key === f.key\"\n [disabled]=\"opt.key !== f.key && isFilterActive(opt.key)\"\n (onItemClick)=\"onChangeCategory(f, i)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-segment>\n <monkey-filter-segment\n [placeholder]=\"labels().selectCondition\"\n [text]=\"operatorLabel(f.condition)\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'condition')\"\n (onOpenChange)=\"onConditionOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'condition')) {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-conditions\" [showSearch]=\"false\">\n @for (c of conditionsFor(f); track c) {\n <monkey-filter-menu-item\n [label]=\"operatorLabel(c)\"\n [selected]=\"c === f.condition\"\n (onItemClick)=\"onSelectCondition(f, c)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-segment>\n @if (hasValueSegment(f)) {\n <monkey-filter-segment\n [placeholder]=\"valuePlaceholder(f)\"\n [text]=\"displayOf(f)\"\n [disabled]=\"disabled()\"\n [open]=\"isOpen(f.key, 'value')\"\n (onOpenChange)=\"onValueOpenChange(f, $event)\"\n >\n @if (isOpen(f.key, 'value')) {\n @switch (panelFor(f)) {\n @case ('status') {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-status\" [showSearch]=\"false\">\n @for (s of statusOptionsOf(f); track s.value) {\n <monkey-filter-menu-item\n property=\"checkbox\"\n [label]=\"s.description\"\n [checked]=\"statusValues.includes(s.value)\"\n (onItemClick)=\"onToggleStatus(s.value)\"\n />\n }\n <div class=\"mecx-filter-bar-panel-actions\">\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n\n @case ('date-day') {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n <div class=\"mecx-filter-bar-field\">\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{ f.label }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"date\"\n monkey-input\n [(ngModel)]=\"dayValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n\n @case ('date-range') {\n @if (calendarOpen() === f.key) {\n <monkey-date-range\n class=\"mecx-filter-bar-calendar\"\n [startDate]=\"dateRange.startDate\"\n [endDate]=\"dateRange.endDate\"\n [minDate]=\"minDateOf(f)\"\n [maxDate]=\"maxDateOf(f)\"\n (onDate)=\"onDateChange(f, $event)\"\n (onCancel)=\"onBackToShortcuts()\"\n ></monkey-date-range>\n } @else {\n <monkey-filter-menu [showSearch]=\"false\">\n @for (shortcut of dateShortcuts(); track shortcut.key) {\n <monkey-filter-menu-item\n [label]=\"shortcut.label\"\n (onItemClick)=\"onQuickDate(f, shortcut.key)\"\n />\n }\n </monkey-filter-menu>\n }\n }\n\n @default {\n <monkey-filter-menu class=\"mecx-filter-bar-menu-field\" [showSearch]=\"false\">\n <div class=\"mecx-filter-bar-field\">\n @if (f.type === 'currency') {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">\n {{ isRange(f) ? labels().rangeFrom : f.label }}\n </span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input-currency\n [(ngModel)]=\"currencyValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n @if (isRange(f)) {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{\n labels().rangeTo\n }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input-currency\n [(ngModel)]=\"currencyValue2\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n }\n } @else {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">\n {{ isRange(f) ? labels().rangeFrom : f.label }}\n </span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [placeholder]=\"valuePlaceholder(f)\"\n [(ngModel)]=\"textValue\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n @if (isRange(f)) {\n <label class=\"mecx-filter-bar-field-row\">\n <span class=\"mecx-filter-bar-field-label\">{{\n labels().rangeTo\n }}</span>\n <monkey-form-field size=\"sm\" noFooterSpace>\n <input\n type=\"text\"\n monkey-input\n [(ngModel)]=\"textValue2\"\n (keyup.enter)=\"onApply(f)\"\n />\n </monkey-form-field>\n </label>\n }\n }\n\n <monkey-button type=\"secondary\" size=\"sm\" (click)=\"onApply(f)\">\n {{ labels().confirm }}\n </monkey-button>\n </div>\n </monkey-filter-menu>\n }\n }\n }\n </monkey-filter-segment>\n }\n </monkey-filter-chip>\n </span>\n }\n\n @if (canAddFilter()) {\n <span\n class=\"mecx-filter-bar-slot mecx-filter-bar-slot--trigger\"\n [attr.data-flip-id]=\"triggerFlipId()\"\n >\n <monkey-filter-trigger\n [variant]=\"triggerVariant()\"\n [icon]=\"triggerIcon()\"\n [text]=\"labels().add\"\n [ariaLabel]=\"labels().addAria\"\n [disabled]=\"disabled()\"\n [immediateExit]=\"immediateTriggerExit()\"\n [open]=\"triggerOpen()\"\n (onOpenChange)=\"onTriggerOpenChange($event)\"\n >\n @if (triggerOpen()) {\n <monkey-filter-menu\n class=\"mecx-filter-bar-menu-categories\"\n [showSearch]=\"true\"\n [searchPlaceholder]=\"labels().search\"\n (onSearchChange)=\"categorySearch.set($event)\"\n >\n @for (opt of addOptions(); track opt.key; let i = $index) {\n @if (needsDivider(addOptions(), i)) {\n <monkey-divider />\n }\n <monkey-filter-menu-item\n [leadIcon]=\"opt.icon ?? null\"\n [label]=\"opt.label\"\n (onItemClick)=\"onSelectCategory(i)\"\n />\n }\n </monkey-filter-menu>\n }\n </monkey-filter-trigger>\n </span>\n }\n </div>\n @if (scrollVisible()) {\n <monkey-scrollbar\n class=\"mecx-filter-bar-bar\"\n orientation=\"horizontal\"\n [target]=\"rowEl\"\n [animate.enter]=\"appPainted() ? 'mecx-filter-bar-bar--entering' : ''\"\n animate.leave=\"mecx-filter-bar-bar--leaving\"\n />\n }\n\n <div class=\"mecx-filter-bar-tail\">\n @if (rows().length > 0) {\n <div class=\"mecx-filter-bar-actions\">\n <monkey-button type=\"tertiary\" size=\"sm\" [disabled]=\"disabled()\" (click)=\"onClearAll()\">\n {{ labels().clear }}\n </monkey-button>\n </div>\n }\n\n <div class=\"mecx-filter-bar-extra\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".mecx-filter-bar{--mecx-filter-bar-duration-state: .15s;--mecx-filter-bar-duration-enter: .2s;--mecx-filter-bar-duration-exit: .15s;--mecx-filter-bar-ease-state: cubic-bezier(.25, .46, .45, .94);--mecx-filter-bar-ease-enter: cubic-bezier(.32, .72, 0, 1);--mecx-filter-bar-ease-exit: cubic-bezier(.4, 0, 1, 1);--mecx-filter-bar-scale-unfold: .94;--mecx-filter-bar-travel-anchored: 4px;--mecx-filter-bar-travel-slide: 16px;--mecx-filter-bar-stagger: 25ms;--mecx-filter-bar-control-height: 32px;--mecx-filter-bar-pointer-target: 40px;--mecx-filter-bar-reach: calc((var(--mecx-filter-bar-control-height) - var(--mecx-filter-bar-pointer-target)) / 2);--mecx-filter-bar-radius: 8px;--mecx-filter-bar-radius-item: 4px;--mecx-filter-bar-fade-width: 48px;--mecx-filter-bar-focus-reach: 4px;--mecx-filter-bar-delay-settle: .32s;--mecx-filter-bar-z-raised: 1;--mecx-filter-bar-z-sticky: 2;--mecx-filter-bar-z-menu: 1000}@media(prefers-reduced-motion:reduce){.mecx-filter-bar{--mecx-filter-bar-duration-state: 1ms;--mecx-filter-bar-duration-enter: 1ms;--mecx-filter-bar-duration-exit: 1ms;--mecx-filter-bar-scale-unfold: 1;--mecx-filter-bar-travel-anchored: 0px;--mecx-filter-bar-travel-slide: 0px;--mecx-filter-bar-stagger: 0ms}}.mecx-filter-bar{display:flex;flex-direction:column;gap:8px;width:100%;background:var(--mecx-color-white)}.mecx-filter-bar-top{display:flex;align-items:center;gap:8px;width:100%}.mecx-filter-bar-search{flex:1;min-width:0;max-width:400px;display:block}.mecx-filter-bar-extra{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.mecx-filter-bar-extra:empty{display:none}.mecx-filter-bar-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"row tail\" \"bar bar\";align-items:center;width:100%}.mecx-filter-bar-bar{grid-area:bar;min-width:0;display:block;margin-block-start:4px}@keyframes mecx-filter-bar-bar-in{0%{opacity:0}}@keyframes mecx-filter-bar-bar-out{to{opacity:0}}.mecx-filter-bar-bar--entering{animation:mecx-filter-bar-bar-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-bar--leaving{animation:mecx-filter-bar-bar-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-tail{grid-area:tail;display:flex;align-items:center;min-width:0}.mecx-filter-bar-row{grid-area:row;display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;position:relative;min-height:var(--mecx-filter-bar-pointer-target);margin-inline-start:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline:var(--mecx-filter-bar-focus-reach) var(--mecx-filter-bar-fade-width);scroll-padding-inline-start:var(--mecx-filter-bar-focus-reach);scrollbar-width:none;-ms-overflow-style:none}.mecx-filter-bar-row::-webkit-scrollbar{width:0;height:0}.mecx-filter-bar--disabled .mecx-filter-bar-row{cursor:default}.mecx-filter-bar-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex-shrink:0;padding-left:var(--mecx-filter-bar-fade-width);background:var(--mecx-color-white)}.mecx-filter-bar-actions:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-slot{display:inline-flex;flex-shrink:0;transition:translate var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter)}.mecx-filter-bar-slot--frozen{transition-duration:0s}@keyframes mecx-filter-bar-slot-in{0%{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}@keyframes mecx-filter-bar-slot-out{to{opacity:0;translate:calc(var(--mecx-filter-bar-travel-slide) * -1) 0}}.mecx-filter-bar-slot--leaving{position:absolute;pointer-events:none;animation:mecx-filter-bar-slot-out var(--mecx-filter-bar-duration-exit) var(--mecx-filter-bar-ease-exit) both}.mecx-filter-bar-slot--entering{animation:mecx-filter-bar-slot-in var(--mecx-filter-bar-duration-enter) var(--mecx-filter-bar-ease-enter);position:relative;z-index:var(--mecx-filter-bar-z-raised)}.mecx-filter-bar-slot:has(.mecx-filter-segment--open),.mecx-filter-bar-slot:has(.mecx-filter-trigger--open){z-index:var(--mecx-filter-bar-z-menu)}.mecx-filter-menu.mecx-filter-bar-menu-categories{width:220px}.mecx-filter-menu.mecx-filter-bar-menu-status{width:225px}.mecx-filter-menu.mecx-filter-bar-menu-field{width:238px}.mecx-filter-bar-field{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.mecx-filter-bar-field monkey-form-field{display:block;width:100%}.mecx-filter-bar-field monkey-button,.mecx-filter-bar-field monkey-button .mecx-button{width:100%}.mecx-filter-bar-field-row{display:flex;flex-direction:column;gap:4px;width:100%;cursor:pointer}.mecx-filter-bar-field-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px}.mecx-filter-bar-panel-actions{display:flex;margin-top:8px;padding-top:8px;border-top:1px solid var(--mecx-color-gray-200)}.mecx-filter-bar-panel-actions monkey-button,.mecx-filter-bar-panel-actions monkey-button .mecx-button{width:100%}.mecx-filter-bar-calendar{display:block;background:var(--mecx-color-white);border-radius:var(--mecx-filter-bar-radius);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow, rgba(47, 50, 55, .08))}@media(max-width:767.98px){.mecx-filter-bar-line{grid-template-columns:minmax(0,1fr);grid-template-areas:\"row\" \"bar\" \"tail\";position:relative}.mecx-filter-bar-slot--trigger{position:sticky;right:0;z-index:var(--mecx-filter-bar-z-sticky);background:var(--mecx-color-white)}.mecx-filter-bar-slot--trigger:before{content:\"\";position:absolute;inset-block:0;right:100%;width:var(--mecx-filter-bar-fade-width);background:linear-gradient(to right,transparent,var(--mecx-color-white));pointer-events:none}.mecx-filter-bar-row{margin-inline-end:calc(var(--mecx-filter-bar-focus-reach) * -1);padding-inline-end:var(--mecx-filter-bar-focus-reach)}.mecx-filter-bar-tail:has(.mecx-filter-bar-actions,.mecx-filter-bar-extra>*){margin-block-start:4px}.mecx-filter-bar-actions{padding-left:0;align-self:auto;background:none;position:static}.mecx-filter-bar-actions:before{content:none}}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
|
|
8332
|
-
}], ctorParameters: () => [], propDecorators: { _scrollbar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MonkeyScrollbarComponent), { isSignal: true }] }], _rowEl: [{ type: i0.ViewChild, args: ['rowEl', { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], onFiltersChange: [{ type: i0.Output, args: ["onFiltersChange"] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }] } });
|
|
8348
|
+
}], 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 }] }], addLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addLabel", required: false }] }] } });
|
|
8333
8349
|
|
|
8334
8350
|
/** ************************
|
|
8335
8351
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
@@ -10192,7 +10208,7 @@ class MonkeyModalConfirmationComponent {
|
|
|
10192
10208
|
<monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
|
|
10193
10209
|
</monkey-modal-actions>
|
|
10194
10210
|
</monkey-modal>
|
|
10195
|
-
`, isInline: true, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 8px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon i{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning i{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error i{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success i{color:var(--mecx-color-success-500)}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10211
|
+
`, isInline: true, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 8px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon i{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning i{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error i{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success i{color:var(--mecx-color-success-500)}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "nativeType", "ariaLabel", "ariaExpanded", "ariaHasPopup", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10196
10212
|
}
|
|
10197
10213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyModalConfirmationComponent, decorators: [{
|
|
10198
10214
|
type: Component,
|
|
@@ -10249,7 +10265,7 @@ class MonkeyModalDefaultComponent {
|
|
|
10249
10265
|
<monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
|
|
10250
10266
|
</monkey-modal-actions>
|
|
10251
10267
|
</monkey-modal>
|
|
10252
|
-
`, isInline: true, dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]" }, { kind: "directive", type: MonkeyModalSubtitleDirective, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }] }); }
|
|
10268
|
+
`, isInline: true, dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "nativeType", "ariaLabel", "ariaExpanded", "ariaHasPopup", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]" }, { kind: "directive", type: MonkeyModalSubtitleDirective, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }] }); }
|
|
10253
10269
|
}
|
|
10254
10270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyModalDefaultComponent, decorators: [{
|
|
10255
10271
|
type: Component,
|
|
@@ -10538,7 +10554,7 @@ class MonkeyPassNumberComponent {
|
|
|
10538
10554
|
<i class="mk-i mk-i-delete"></i>
|
|
10539
10555
|
</monkey-button>
|
|
10540
10556
|
</div>
|
|
10541
|
-
`, isInline: true, styles: [":host{display:flex;width:100%;max-width:250px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }] }); }
|
|
10557
|
+
`, isInline: true, styles: [":host{display:flex;width:100%;max-width:250px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "nativeType", "ariaLabel", "ariaExpanded", "ariaHasPopup", "id"] }] }); }
|
|
10542
10558
|
}
|
|
10543
10559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyPassNumberComponent, decorators: [{
|
|
10544
10560
|
type: Component,
|
|
@@ -10681,7 +10697,7 @@ class MonkeyPassSecretNumberComponent {
|
|
|
10681
10697
|
<i class="mk-i mk-i-delete"></i>
|
|
10682
10698
|
</monkey-button>
|
|
10683
10699
|
</div>
|
|
10684
|
-
`, isInline: true, styles: [":host{display:flex;width:100%;max-width:250px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
10700
|
+
`, isInline: true, styles: [":host{display:flex;width:100%;max-width:250px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "nativeType", "ariaLabel", "ariaExpanded", "ariaHasPopup", "id"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
10685
10701
|
}
|
|
10686
10702
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyPassSecretNumberComponent, decorators: [{
|
|
10687
10703
|
type: Component,
|
|
@@ -11245,7 +11261,7 @@ class MonkeyPaginationActionComponent {
|
|
|
11245
11261
|
this.id = this.id;
|
|
11246
11262
|
}
|
|
11247
11263
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyPaginationActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11248
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: MonkeyPaginationActionComponent, isStandalone: true, selector: "monkey-pagination-action", inputs: { disabled: "disabled", first: "first", last: "last", next: "next", prev: "prev", id: "id" }, outputs: { onAction: "onAction" }, host: { attributes: { "data-testid": "monkey-pagination-action" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationAction"], ngImport: i0, template: "<monkey-button\r\n type=\"secondary\"\r\n size=\"sm\"\r\n (click)=\"onAction.next('prev')\"\r\n [disabled]=\"disabled || !prev\"\r\n>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\r\n stroke=\"none\"\r\n fill-rule=\"evenodd\"\r\n fill=\"black\"\r\n ></path>\r\n </svg>\r\n</monkey-button>\r\n\r\n<monkey-button\r\n type=\"secondary\"\r\n size=\"sm\"\r\n (click)=\"onAction.next('next')\"\r\n [disabled]=\"disabled || !next\"\r\n>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\r\n stroke=\"none\"\r\n fill-rule=\"evenodd\"\r\n fill=\"black\"\r\n ></path>\r\n </svg>\r\n</monkey-button>\r\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11264
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: MonkeyPaginationActionComponent, isStandalone: true, selector: "monkey-pagination-action", inputs: { disabled: "disabled", first: "first", last: "last", next: "next", prev: "prev", id: "id" }, outputs: { onAction: "onAction" }, host: { attributes: { "data-testid": "monkey-pagination-action" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationAction"], ngImport: i0, template: "<monkey-button\r\n type=\"secondary\"\r\n size=\"sm\"\r\n (click)=\"onAction.next('prev')\"\r\n [disabled]=\"disabled || !prev\"\r\n>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\r\n stroke=\"none\"\r\n fill-rule=\"evenodd\"\r\n fill=\"black\"\r\n ></path>\r\n </svg>\r\n</monkey-button>\r\n\r\n<monkey-button\r\n type=\"secondary\"\r\n size=\"sm\"\r\n (click)=\"onAction.next('next')\"\r\n [disabled]=\"disabled || !next\"\r\n>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\r\n stroke=\"none\"\r\n fill-rule=\"evenodd\"\r\n fill=\"black\"\r\n ></path>\r\n </svg>\r\n</monkey-button>\r\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "nativeType", "ariaLabel", "ariaExpanded", "ariaHasPopup", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
11249
11265
|
}
|
|
11250
11266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyPaginationActionComponent, decorators: [{
|
|
11251
11267
|
type: Component,
|