monkey-front-components 0.0.664 → 0.0.667
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.
- package/esm2020/lib/components/base/base-dynamic-array.mjs +17 -3
- package/esm2020/lib/components/base/base-dynamic.mjs +17 -2
- package/esm2020/lib/components/shared/filter/filter.component.mjs +3 -3
- package/esm2020/lib/components/shared/filter/menu/menu.component.mjs +3 -3
- package/esm2020/lib/components/shared/filter/options/options.component.mjs +3 -3
- package/esm2020/lib/components/shared/filter/options/status/status.component.mjs +3 -3
- package/esm2020/lib/components/shared/filter/selected/item/item.component.mjs +3 -3
- package/fesm2015/monkey-front-components.mjs +40 -12
- package/fesm2015/monkey-front-components.mjs.map +1 -1
- package/fesm2020/monkey-front-components.mjs +40 -12
- package/fesm2020/monkey-front-components.mjs.map +1 -1
- package/lib/components/base/base-dynamic-array.d.ts +4 -2
- package/lib/components/base/base-dynamic.d.ts +4 -2
- package/monkey-front-components-0.0.667.tgz +0 -0
- package/package.json +3 -3
- package/monkey-front-components-0.0.664.tgz +0 -0
|
@@ -372,6 +372,8 @@ class BaseDynamicArray extends BaseComponent {
|
|
|
372
372
|
this.fields = [];
|
|
373
373
|
this.qtd = 1;
|
|
374
374
|
this.disabled = false;
|
|
375
|
+
this.enableListenerFormChange = false;
|
|
376
|
+
this.onFormChange = new EventEmitter();
|
|
375
377
|
this._form = null;
|
|
376
378
|
// eslint-disable-next-line object-curly-newline
|
|
377
379
|
this._plusValidations = [];
|
|
@@ -541,6 +543,14 @@ class BaseDynamicArray extends BaseComponent {
|
|
|
541
543
|
this.onHandleUpdateForm.subscribe(() => {
|
|
542
544
|
this.fillValues();
|
|
543
545
|
});
|
|
546
|
+
if (this.enableListenerFormChange) {
|
|
547
|
+
this._form.markAsUntouched();
|
|
548
|
+
this._form.valueChanges
|
|
549
|
+
.pipe(debounceTime(800), takeUntil(this.__unsubscribeAll))
|
|
550
|
+
.subscribe(() => {
|
|
551
|
+
this.onFormChange.next(this._form);
|
|
552
|
+
});
|
|
553
|
+
}
|
|
544
554
|
}
|
|
545
555
|
ngOnChanges() {
|
|
546
556
|
if (!this._form) {
|
|
@@ -550,7 +560,7 @@ class BaseDynamicArray extends BaseComponent {
|
|
|
550
560
|
}
|
|
551
561
|
}
|
|
552
562
|
BaseDynamicArray.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseDynamicArray, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Directive });
|
|
553
|
-
BaseDynamicArray.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseDynamicArray, selector: "[baseDynamicArray]", inputs: { onHandleSubmit: "onHandleSubmit", onHandleUpdateForm: "onHandleUpdateForm", self: "self", fields: "fields", data: "data", qtd: "qtd", disabled: "disabled" }, outputs: { onHandleSubmitFormReady: "onHandleSubmitFormReady" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
563
|
+
BaseDynamicArray.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseDynamicArray, selector: "[baseDynamicArray]", inputs: { onHandleSubmit: "onHandleSubmit", onHandleUpdateForm: "onHandleUpdateForm", self: "self", fields: "fields", data: "data", qtd: "qtd", disabled: "disabled", enableListenerFormChange: "enableListenerFormChange" }, outputs: { onHandleSubmitFormReady: "onHandleSubmitFormReady", onFormChange: "onFormChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
554
564
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseDynamicArray, decorators: [{
|
|
555
565
|
type: Directive,
|
|
556
566
|
args: [{
|
|
@@ -572,6 +582,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
572
582
|
type: Input
|
|
573
583
|
}], disabled: [{
|
|
574
584
|
type: Input
|
|
585
|
+
}], enableListenerFormChange: [{
|
|
586
|
+
type: Input
|
|
587
|
+
}], onFormChange: [{
|
|
588
|
+
type: Output
|
|
575
589
|
}] } });
|
|
576
590
|
|
|
577
591
|
class BaseDynamic extends BaseComponent {
|
|
@@ -584,6 +598,8 @@ class BaseDynamic extends BaseComponent {
|
|
|
584
598
|
this.fields = [];
|
|
585
599
|
this.disabled = false;
|
|
586
600
|
this.isLoading = false;
|
|
601
|
+
this.enableListenerFormChange = false;
|
|
602
|
+
this.onFormChange = new EventEmitter();
|
|
587
603
|
this._form = null;
|
|
588
604
|
}
|
|
589
605
|
createControl() {
|
|
@@ -636,6 +652,14 @@ class BaseDynamic extends BaseComponent {
|
|
|
636
652
|
this.onHandleUpdateForm.subscribe(() => {
|
|
637
653
|
this.fillValues();
|
|
638
654
|
});
|
|
655
|
+
if (this.enableListenerFormChange) {
|
|
656
|
+
this._form.markAsUntouched();
|
|
657
|
+
this._form.valueChanges
|
|
658
|
+
.pipe(debounceTime(800), takeUntil(this.__unsubscribeAll))
|
|
659
|
+
.subscribe(() => {
|
|
660
|
+
this.onFormChange.next(this._form);
|
|
661
|
+
});
|
|
662
|
+
}
|
|
639
663
|
}
|
|
640
664
|
ngOnChanges() {
|
|
641
665
|
if (!this._form) {
|
|
@@ -645,7 +669,7 @@ class BaseDynamic extends BaseComponent {
|
|
|
645
669
|
}
|
|
646
670
|
}
|
|
647
671
|
BaseDynamic.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseDynamic, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Directive });
|
|
648
|
-
BaseDynamic.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseDynamic, selector: "[baseDynamic]", inputs: { onHandleSubmit: "onHandleSubmit", onHandleUpdateForm: "onHandleUpdateForm", self: "self", fields: "fields", data: "data", disabled: "disabled", isLoading: "isLoading" }, outputs: { onHandleSubmitFormReady: "onHandleSubmitFormReady" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
672
|
+
BaseDynamic.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseDynamic, selector: "[baseDynamic]", inputs: { onHandleSubmit: "onHandleSubmit", onHandleUpdateForm: "onHandleUpdateForm", self: "self", fields: "fields", data: "data", disabled: "disabled", isLoading: "isLoading", enableListenerFormChange: "enableListenerFormChange" }, outputs: { onHandleSubmitFormReady: "onHandleSubmitFormReady", onFormChange: "onFormChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
649
673
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseDynamic, decorators: [{
|
|
650
674
|
type: Directive,
|
|
651
675
|
args: [{
|
|
@@ -667,6 +691,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
667
691
|
type: Input
|
|
668
692
|
}], isLoading: [{
|
|
669
693
|
type: Input
|
|
694
|
+
}], enableListenerFormChange: [{
|
|
695
|
+
type: Input
|
|
696
|
+
}], onFormChange: [{
|
|
697
|
+
type: Output
|
|
670
698
|
}] } });
|
|
671
699
|
|
|
672
700
|
class BaseScrollComponent extends BaseComponent {
|
|
@@ -1847,10 +1875,10 @@ class MECXFilterOptionsStatusComponent {
|
|
|
1847
1875
|
}
|
|
1848
1876
|
}
|
|
1849
1877
|
MECXFilterOptionsStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1850
|
-
MECXFilterOptionsStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let op of option?.values\">\r\n <div class=\"content-status d-flex flex-column\">\r\n <div class=\"d-flex align-items-center gap\">\r\n <monkey-checkbox
|
|
1878
|
+
MECXFilterOptionsStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let op of option?.values\">\r\n <div class=\"content-status d-flex flex-column\">\r\n <div class=\"d-flex align-items-center gap\">\r\n <monkey-checkbox\r\n type=\"multiple\"\r\n [description]=\"op?.description | translate\"\r\n [value]=\"onHandleChecked(op?.value)\"\r\n (click)=\"onChangeFilter($event, op?.value)\"\r\n [attr.data-testid]=\"'mecx-filter-status-btn-' + op?.value?.toLowerCase()\"\r\n >\r\n </monkey-checkbox>\r\n <span class=\"helper\" *ngIf=\"op?.helperMessage\">{{ op?.helperMessage }}</span>\r\n </div>\r\n <span class=\"info\" *ngIf=\"op?.infoMessage\">{{ op?.infoMessage }}</span>\r\n </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host .content-status .gap{gap:6px}:host .content-status .helper{margin-bottom:4px;margin-left:12;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;text-align:right}:host .content-status .info{font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;margin:-8px 24px 8px}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:6px 0!important}\n"], components: [{ type: i1$2.MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["label", "type", "helperMessage", "infoMessage", "errorMessage", "description", "value"], outputs: ["onChange"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$3.TranslatePipe } });
|
|
1851
1879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsStatusComponent, decorators: [{
|
|
1852
1880
|
type: Component,
|
|
1853
|
-
args: [{ selector: 'mecx-filter-options-status', template: "<ng-container *ngFor=\"let op of option?.values\">\r\n <div class=\"content-status d-flex flex-column\">\r\n <div class=\"d-flex align-items-center gap\">\r\n <monkey-checkbox
|
|
1881
|
+
args: [{ selector: 'mecx-filter-options-status', template: "<ng-container *ngFor=\"let op of option?.values\">\r\n <div class=\"content-status d-flex flex-column\">\r\n <div class=\"d-flex align-items-center gap\">\r\n <monkey-checkbox\r\n type=\"multiple\"\r\n [description]=\"op?.description | translate\"\r\n [value]=\"onHandleChecked(op?.value)\"\r\n (click)=\"onChangeFilter($event, op?.value)\"\r\n [attr.data-testid]=\"'mecx-filter-status-btn-' + op?.value?.toLowerCase()\"\r\n >\r\n </monkey-checkbox>\r\n <span class=\"helper\" *ngIf=\"op?.helperMessage\">{{ op?.helperMessage }}</span>\r\n </div>\r\n <span class=\"info\" *ngIf=\"op?.infoMessage\">{{ op?.infoMessage }}</span>\r\n </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host .content-status .gap{gap:6px}:host .content-status .helper{margin-bottom:4px;margin-left:12;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;text-align:right}:host .content-status .info{font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;margin:-8px 24px 8px}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:6px 0!important}\n"] }]
|
|
1854
1882
|
}], ctorParameters: function () { return []; }, propDecorators: { option: [{
|
|
1855
1883
|
type: Input
|
|
1856
1884
|
}], onSubmit: [{
|
|
@@ -1958,10 +1986,10 @@ class MECXFilterOptionsComponent extends BaseComponent {
|
|
|
1958
1986
|
}
|
|
1959
1987
|
}
|
|
1960
1988
|
MECXFilterOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1961
|
-
MECXFilterOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsComponent, selector: "mecx-filter-options", inputs: { option: "option", closeDirectly: "closeDirectly" }, outputs: { onClose: "onClose", onRemove: "onRemove", onSubmit: "onSubmit", onShowFromChildren: "onShowFromChildren" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between header\">\r\n <span class=\"title\">\r\n {{ option?.label | translate }}\r\n </span>\r\n <div
|
|
1989
|
+
MECXFilterOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsComponent, selector: "mecx-filter-options", inputs: { option: "option", closeDirectly: "closeDirectly" }, outputs: { onClose: "onClose", onRemove: "onRemove", onSubmit: "onSubmit", onShowFromChildren: "onShowFromChildren" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between header\">\r\n <span class=\"title\">\r\n {{ option?.label | translate }}\r\n </span>\r\n <div\r\n class=\"close\"\r\n #actionElement\r\n (click)=\"onHandleShowMenu()\"\r\n data-testid=\"mecx-filter-options-btn-handle-show-menu\"\r\n >\r\n <monkey-icon icon=\"close-12\" color=\"#474747\"></monkey-icon>\r\n </div>\r\n</div>\r\n<ng-container *ngIf=\"option?.type as type\">\r\n <ng-container *ngIf=\"option?.children; else withoutChildren\">\r\n <mecx-filter-options-children\r\n [option]=\"option\"\r\n (onSubmit)=\"onHandleSubmitChildren($event)\"\r\n (onShow)=\"onShowFromChildren.next($event)\"\r\n >\r\n </mecx-filter-options-children>\r\n </ng-container>\r\n <ng-template #withoutChildren>\r\n <ng-container [ngSwitch]=\"type\">\r\n <mecx-filter-options-currency\r\n *ngSwitchCase=\"'currency'\"\r\n [option]=\"option\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n >\r\n </mecx-filter-options-currency>\r\n <mecx-filter-options-date-range\r\n *ngSwitchCase=\"'date-range'\"\r\n [option]=\"option\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n >\r\n </mecx-filter-options-date-range>\r\n <mecx-filter-options-input\r\n *ngSwitchCase=\"'input'\"\r\n [option]=\"option\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n >\r\n </mecx-filter-options-input>\r\n <mecx-filter-options-status\r\n *ngSwitchCase=\"'status'\"\r\n [option]=\"option\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n >\r\n </mecx-filter-options-status>\r\n <mecx-filter-options-status-radio\r\n *ngSwitchCase=\"'status-radio'\"\r\n [option]=\"option\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n >\r\n </mecx-filter-options-status-radio>\r\n </ng-container>\r\n </ng-template>\r\n</ng-container>\r\n\r\n<div class=\"box-loading\" *ngIf=\"_isLoading\">\r\n <div class=\"loading\"></div>\r\n <div class=\"loading\"></div>\r\n <div class=\"loading\"></div>\r\n</div>\r\n\r\n<div class=\"footer\" *ngIf=\"_hasMoreValues && !_isLoading\">\r\n <monkey-button\r\n type=\"tertiary\"\r\n color=\"theme\"\r\n [label]=\"'BUTTONS.LOAD-MORE' | translate\"\r\n (click)=\"onHandleLoadMoreValues()\"\r\n >\r\n </monkey-button>\r\n</div>\r\n\r\n<ng-container\r\n *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\"\r\n>\r\n <div class=\"close-menu\">\r\n <monkey-button\r\n type=\"tertiary\"\r\n color=\"error\"\r\n (click)=\"onRemove.next()\"\r\n size=\"sm\"\r\n data-testid=\"mecx-filter-options-btn-remove\"\r\n >\r\n {{ 'BUTTONS.REMOVE' | translate }}\r\n </monkey-button>\r\n <monkey-button\r\n type=\"tertiary\"\r\n color=\"theme\"\r\n (click)=\"onClose.next()\"\r\n size=\"sm\"\r\n data-testid=\"mecx-filter-options-btn-close\"\r\n >\r\n {{ 'BUTTONS.CLOSE' | translate }}\r\n </monkey-button>\r\n </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px}:host .header{border-bottom:1px solid #d6d6d6;padding:8px}:host .header .title{color:#4b4a53;font-style:normal;font-size:14px;line-height:16px;font-weight:500;text-align:left}:host .header .close{cursor:pointer;border-radius:120px;padding:4px}:host .header .close:hover{background-color:#6d6d6d0c}:host .box-loaing{display:flex;flex-direction:column;gap:12px}:host .footer{padding:12px}:host .footer ::ng-deep monkey-button{width:100%}:host .footer ::ng-deep monkey-button button{width:100%}:host .loading:empty{margin-top:4px;height:24px;width:100%}:host .loading:empty{animation:loading 1.1s infinite linear;background:#ebebeb;background-image:linear-gradient(to right,#ebebeb 0%,#f2f3f5 20%,#ebebeb 40%,#ebebeb 100%);background-repeat:no-repeat}@keyframes loading{0%{background-position:-100px}to{background-position:500px}}.close-menu{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px;padding:8px}.close-menu ::ng-deep monkey-button{width:100%}.close-menu ::ng-deep monkey-button button{width:100%}\n"], components: [{ type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }, { type: MECXFilterOptionsChildrenComponent, selector: "mecx-filter-options-children", inputs: ["option"], outputs: ["onSubmit", "onShow"] }, { type: MECXFilterOptionsCurrencyComponent, selector: "mecx-filter-options-currency", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsDateRangeComponent, selector: "mecx-filter-options-date-range", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsInputComponent, selector: "mecx-filter-options-input", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsStatusRadioComponent, selector: "mecx-filter-options-status-radio", inputs: ["option"], outputs: ["onSubmit"] }, { type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }], pipes: { "translate": i1$3.TranslatePipe } });
|
|
1962
1990
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsComponent, decorators: [{
|
|
1963
1991
|
type: Component,
|
|
1964
|
-
args: [{ selector: 'mecx-filter-options', template: "<div class=\"d-flex justify-content-between header\">\r\n <span class=\"title\">\r\n {{ option?.label | translate }}\r\n </span>\r\n <div
|
|
1992
|
+
args: [{ selector: 'mecx-filter-options', template: "<div class=\"d-flex justify-content-between header\">\r\n <span class=\"title\">\r\n {{ option?.label | translate }}\r\n </span>\r\n <div\r\n class=\"close\"\r\n #actionElement\r\n (click)=\"onHandleShowMenu()\"\r\n data-testid=\"mecx-filter-options-btn-handle-show-menu\"\r\n >\r\n <monkey-icon icon=\"close-12\" color=\"#474747\"></monkey-icon>\r\n </div>\r\n</div>\r\n<ng-container *ngIf=\"option?.type as type\">\r\n <ng-container *ngIf=\"option?.children; else withoutChildren\">\r\n <mecx-filter-options-children\r\n [option]=\"option\"\r\n (onSubmit)=\"onHandleSubmitChildren($event)\"\r\n (onShow)=\"onShowFromChildren.next($event)\"\r\n >\r\n </mecx-filter-options-children>\r\n </ng-container>\r\n <ng-template #withoutChildren>\r\n <ng-container [ngSwitch]=\"type\">\r\n <mecx-filter-options-currency\r\n *ngSwitchCase=\"'currency'\"\r\n [option]=\"option\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n >\r\n </mecx-filter-options-currency>\r\n <mecx-filter-options-date-range\r\n *ngSwitchCase=\"'date-range'\"\r\n [option]=\"option\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n >\r\n </mecx-filter-options-date-range>\r\n <mecx-filter-options-input\r\n *ngSwitchCase=\"'input'\"\r\n [option]=\"option\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n >\r\n </mecx-filter-options-input>\r\n <mecx-filter-options-status\r\n *ngSwitchCase=\"'status'\"\r\n [option]=\"option\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n >\r\n </mecx-filter-options-status>\r\n <mecx-filter-options-status-radio\r\n *ngSwitchCase=\"'status-radio'\"\r\n [option]=\"option\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n >\r\n </mecx-filter-options-status-radio>\r\n </ng-container>\r\n </ng-template>\r\n</ng-container>\r\n\r\n<div class=\"box-loading\" *ngIf=\"_isLoading\">\r\n <div class=\"loading\"></div>\r\n <div class=\"loading\"></div>\r\n <div class=\"loading\"></div>\r\n</div>\r\n\r\n<div class=\"footer\" *ngIf=\"_hasMoreValues && !_isLoading\">\r\n <monkey-button\r\n type=\"tertiary\"\r\n color=\"theme\"\r\n [label]=\"'BUTTONS.LOAD-MORE' | translate\"\r\n (click)=\"onHandleLoadMoreValues()\"\r\n >\r\n </monkey-button>\r\n</div>\r\n\r\n<ng-container\r\n *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\"\r\n>\r\n <div class=\"close-menu\">\r\n <monkey-button\r\n type=\"tertiary\"\r\n color=\"error\"\r\n (click)=\"onRemove.next()\"\r\n size=\"sm\"\r\n data-testid=\"mecx-filter-options-btn-remove\"\r\n >\r\n {{ 'BUTTONS.REMOVE' | translate }}\r\n </monkey-button>\r\n <monkey-button\r\n type=\"tertiary\"\r\n color=\"theme\"\r\n (click)=\"onClose.next()\"\r\n size=\"sm\"\r\n data-testid=\"mecx-filter-options-btn-close\"\r\n >\r\n {{ 'BUTTONS.CLOSE' | translate }}\r\n </monkey-button>\r\n </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px}:host .header{border-bottom:1px solid #d6d6d6;padding:8px}:host .header .title{color:#4b4a53;font-style:normal;font-size:14px;line-height:16px;font-weight:500;text-align:left}:host .header .close{cursor:pointer;border-radius:120px;padding:4px}:host .header .close:hover{background-color:#6d6d6d0c}:host .box-loaing{display:flex;flex-direction:column;gap:12px}:host .footer{padding:12px}:host .footer ::ng-deep monkey-button{width:100%}:host .footer ::ng-deep monkey-button button{width:100%}:host .loading:empty{margin-top:4px;height:24px;width:100%}:host .loading:empty{animation:loading 1.1s infinite linear;background:#ebebeb;background-image:linear-gradient(to right,#ebebeb 0%,#f2f3f5 20%,#ebebeb 40%,#ebebeb 100%);background-repeat:no-repeat}@keyframes loading{0%{background-position:-100px}to{background-position:500px}}.close-menu{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px;padding:8px}.close-menu ::ng-deep monkey-button{width:100%}.close-menu ::ng-deep monkey-button button{width:100%}\n"] }]
|
|
1965
1993
|
}], ctorParameters: function () { return []; }, propDecorators: { option: [{
|
|
1966
1994
|
type: Input
|
|
1967
1995
|
}], closeDirectly: [{
|
|
@@ -2026,10 +2054,10 @@ class MECXFilterSelectedItemComponent {
|
|
|
2026
2054
|
}
|
|
2027
2055
|
}
|
|
2028
2056
|
MECXFilterSelectedItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2029
|
-
MECXFilterSelectedItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemComponent, selector: "mecx-filter-selected-item", inputs: { option: "option" }, outputs: { onClose: "onClose", onSubmit: "onSubmit" }, ngImport: i0, template: "<ng-container *ngIf=\"_option?.type as type\">\r\n <ng-container *ngIf=\"_option?.children; else withoutChildren\">\r\n <mecx-filter-selected-item-children\r\n [option]=\"_option\"\r\n (onShow)=\"onHandleShowMenu()\"\r\n (onRemove)=\"onHandleRemove()\"\r\n >\r\n </mecx-filter-selected-item-children>\r\n </ng-container>\r\n <ng-template #withoutChildren>\r\n <div class=\"box\">\r\n <div class=\"data\">\r\n {{ _option.label | translate }}\r\n </div>\r\n <div\r\n class=\"value\"\r\n [id]=\"'mecx-filter-selected-item-' + _option?.field\"\r\n (click)=\"onHandleShowMenu()\"\r\n >\r\n <ng-container [ngSwitch]=\"type\">\r\n <mecx-filter-selected-item-currency
|
|
2057
|
+
MECXFilterSelectedItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemComponent, selector: "mecx-filter-selected-item", inputs: { option: "option" }, outputs: { onClose: "onClose", onSubmit: "onSubmit" }, ngImport: i0, template: "<ng-container *ngIf=\"_option?.type as type\">\r\n <ng-container *ngIf=\"_option?.children; else withoutChildren\">\r\n <mecx-filter-selected-item-children\r\n [option]=\"_option\"\r\n (onShow)=\"onHandleShowMenu()\"\r\n (onRemove)=\"onHandleRemove()\"\r\n >\r\n </mecx-filter-selected-item-children>\r\n </ng-container>\r\n <ng-template #withoutChildren>\r\n <div class=\"box\">\r\n <div class=\"data\">\r\n {{ _option.label | translate }}\r\n </div>\r\n <div\r\n class=\"value\"\r\n [id]=\"'mecx-filter-selected-item-' + _option?.field\"\r\n (click)=\"onHandleShowMenu()\"\r\n [attr.data-testid]=\"'mecx-filter-selected-item-btn-' + _option?.value?.toLowerCase()\"\r\n >\r\n <ng-container [ngSwitch]=\"type\">\r\n <mecx-filter-selected-item-currency *ngSwitchCase=\"'currency'\" [option]=\"_option\">\r\n </mecx-filter-selected-item-currency>\r\n <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-range'\" [option]=\"_option\">\r\n </mecx-filter-selected-item-date-range>\r\n <mecx-filter-selected-item-input *ngSwitchCase=\"'input'\" [option]=\"_option\">\r\n </mecx-filter-selected-item-input>\r\n <mecx-filter-selected-item-status\r\n *ngSwitchCase=\"'status'\"\r\n [option]=\"_option\"\r\n [labelMoreValues]=\"'FIELD.AND-MORE' | translate\"\r\n >\r\n </mecx-filter-selected-item-status>\r\n <mecx-filter-selected-item-status-radio *ngSwitchCase=\"'status-radio'\" [option]=\"_option\">\r\n </mecx-filter-selected-item-status-radio>\r\n </ng-container>\r\n </div>\r\n <div\r\n class=\"action\"\r\n (click)=\"onHandleShowMenu()\"\r\n data-testid=\"mecx-filter-selected-item-btn-arrow-right\"\r\n >\r\n <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</ng-container>\r\n<ng-container\r\n *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\r\n>\r\n <mecx-filter-options\r\n [option]=\"_option\"\r\n (onClose)=\"onHandleClose()\"\r\n (onRemove)=\"onHandleRemove()\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n (onShowFromChildren)=\"onHandleShowFromChildren($event)\"\r\n >\r\n </mecx-filter-options>\r\n</ng-container>\r\n", styles: [":host{display:flex}:host .box{display:flex;justify-content:space-between;align-items:center;background:#ffffff;border:1px solid #d6d6d6;box-sizing:border-box;border-radius:120px;height:40px}:host .box .data{display:flex;align-items:center;padding:12px 8px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e}:host .box .value{cursor:pointer;display:flex;align-items:center;padding:12px 8px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e;background-color:#6d6d6d0a}:host .box .value:hover{background-color:#6d6d6d0c;font-weight:400;text-decoration:underline}:host .box .action{cursor:pointer;border-left:1px solid #d6d6d6;padding:8px;color:#908e9d;font-weight:500;font-size:18px;height:40px;align-items:center;display:flex}:host .box .action:hover{background-color:#6d6d6d0c;border-top-right-radius:120px;border-bottom-right-radius:120px}mecx-filter-options{margin:4px 0}\n"], components: [{ type: MECXFilterSelectedItemChildrenComponent, selector: "mecx-filter-selected-item-children", inputs: ["option"], outputs: ["onShow", "onRemove"] }, { type: MECXFilterSelectedItemCurrencyComponent, selector: "mecx-filter-selected-item-currency", inputs: ["option"] }, { type: MECXFilterSelectedItemDateRangeComponent, selector: "mecx-filter-selected-item-date-range", inputs: ["option"] }, { type: MECXFilterSelectedItemInputComponent, selector: "mecx-filter-selected-item-input", inputs: ["option"] }, { type: MECXFilterSelectedItemStatusComponent, selector: "mecx-filter-selected-item-status", inputs: ["option", "labelMoreValues"] }, { type: MECXFilterSelectedItemStatusRadioComponent, selector: "mecx-filter-selected-item-status-radio", inputs: ["option"] }, { type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }, { type: MECXFilterOptionsComponent, selector: "mecx-filter-options", inputs: ["option", "closeDirectly"], outputs: ["onClose", "onRemove", "onSubmit", "onShowFromChildren"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }], pipes: { "translate": i1$3.TranslatePipe } });
|
|
2030
2058
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemComponent, decorators: [{
|
|
2031
2059
|
type: Component,
|
|
2032
|
-
args: [{ selector: 'mecx-filter-selected-item', template: "<ng-container *ngIf=\"_option?.type as type\">\r\n <ng-container *ngIf=\"_option?.children; else withoutChildren\">\r\n <mecx-filter-selected-item-children\r\n [option]=\"_option\"\r\n (onShow)=\"onHandleShowMenu()\"\r\n (onRemove)=\"onHandleRemove()\"\r\n >\r\n </mecx-filter-selected-item-children>\r\n </ng-container>\r\n <ng-template #withoutChildren>\r\n <div class=\"box\">\r\n <div class=\"data\">\r\n {{ _option.label | translate }}\r\n </div>\r\n <div\r\n class=\"value\"\r\n [id]=\"'mecx-filter-selected-item-' + _option?.field\"\r\n (click)=\"onHandleShowMenu()\"\r\n >\r\n <ng-container [ngSwitch]=\"type\">\r\n <mecx-filter-selected-item-currency
|
|
2060
|
+
args: [{ selector: 'mecx-filter-selected-item', template: "<ng-container *ngIf=\"_option?.type as type\">\r\n <ng-container *ngIf=\"_option?.children; else withoutChildren\">\r\n <mecx-filter-selected-item-children\r\n [option]=\"_option\"\r\n (onShow)=\"onHandleShowMenu()\"\r\n (onRemove)=\"onHandleRemove()\"\r\n >\r\n </mecx-filter-selected-item-children>\r\n </ng-container>\r\n <ng-template #withoutChildren>\r\n <div class=\"box\">\r\n <div class=\"data\">\r\n {{ _option.label | translate }}\r\n </div>\r\n <div\r\n class=\"value\"\r\n [id]=\"'mecx-filter-selected-item-' + _option?.field\"\r\n (click)=\"onHandleShowMenu()\"\r\n [attr.data-testid]=\"'mecx-filter-selected-item-btn-' + _option?.value?.toLowerCase()\"\r\n >\r\n <ng-container [ngSwitch]=\"type\">\r\n <mecx-filter-selected-item-currency *ngSwitchCase=\"'currency'\" [option]=\"_option\">\r\n </mecx-filter-selected-item-currency>\r\n <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-range'\" [option]=\"_option\">\r\n </mecx-filter-selected-item-date-range>\r\n <mecx-filter-selected-item-input *ngSwitchCase=\"'input'\" [option]=\"_option\">\r\n </mecx-filter-selected-item-input>\r\n <mecx-filter-selected-item-status\r\n *ngSwitchCase=\"'status'\"\r\n [option]=\"_option\"\r\n [labelMoreValues]=\"'FIELD.AND-MORE' | translate\"\r\n >\r\n </mecx-filter-selected-item-status>\r\n <mecx-filter-selected-item-status-radio *ngSwitchCase=\"'status-radio'\" [option]=\"_option\">\r\n </mecx-filter-selected-item-status-radio>\r\n </ng-container>\r\n </div>\r\n <div\r\n class=\"action\"\r\n (click)=\"onHandleShowMenu()\"\r\n data-testid=\"mecx-filter-selected-item-btn-arrow-right\"\r\n >\r\n <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</ng-container>\r\n<ng-container\r\n *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\r\n>\r\n <mecx-filter-options\r\n [option]=\"_option\"\r\n (onClose)=\"onHandleClose()\"\r\n (onRemove)=\"onHandleRemove()\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n (onShowFromChildren)=\"onHandleShowFromChildren($event)\"\r\n >\r\n </mecx-filter-options>\r\n</ng-container>\r\n", styles: [":host{display:flex}:host .box{display:flex;justify-content:space-between;align-items:center;background:#ffffff;border:1px solid #d6d6d6;box-sizing:border-box;border-radius:120px;height:40px}:host .box .data{display:flex;align-items:center;padding:12px 8px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e}:host .box .value{cursor:pointer;display:flex;align-items:center;padding:12px 8px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e;background-color:#6d6d6d0a}:host .box .value:hover{background-color:#6d6d6d0c;font-weight:400;text-decoration:underline}:host .box .action{cursor:pointer;border-left:1px solid #d6d6d6;padding:8px;color:#908e9d;font-weight:500;font-size:18px;height:40px;align-items:center;display:flex}:host .box .action:hover{background-color:#6d6d6d0c;border-top-right-radius:120px;border-bottom-right-radius:120px}mecx-filter-options{margin:4px 0}\n"] }]
|
|
2033
2061
|
}], ctorParameters: function () { return []; }, propDecorators: { option: [{
|
|
2034
2062
|
type: Input
|
|
2035
2063
|
}], onClose: [{
|
|
@@ -2219,10 +2247,10 @@ class MECXFilterMenuComponent {
|
|
|
2219
2247
|
}
|
|
2220
2248
|
}
|
|
2221
2249
|
MECXFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2222
|
-
MECXFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterMenuComponent, selector: "mecx-filter-menu", inputs: { model: "model" }, outputs: { onClose: "onClose", onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\" #actionElement>\r\n <ng-container *ngFor=\"let menu of _model; let index = index\">\r\n <ng-container *ngIf=\"menu?.children; else withoutChildren\">\r\n <div class=\"item no-action\">\r\n {{ menu.label | translate }}\r\n </div>\r\n <div class=\"separator\"></div>\r\n <ng-container *ngFor=\"let child of menu?.children\">\r\n <div
|
|
2250
|
+
MECXFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterMenuComponent, selector: "mecx-filter-menu", inputs: { model: "model" }, outputs: { onClose: "onClose", onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\" #actionElement>\r\n <ng-container *ngFor=\"let menu of _model; let index = index\">\r\n <ng-container *ngIf=\"menu?.children; else withoutChildren\">\r\n <div class=\"item no-action\">\r\n {{ menu.label | translate }}\r\n </div>\r\n <div class=\"separator\"></div>\r\n <ng-container *ngFor=\"let child of menu?.children\">\r\n <div\r\n class=\"item children\"\r\n (click)=\"onHandleChildrenAction(menu, child)\"\r\n [attr.data-testid]=\"'mecx-filter-item-children-btn-' + child?.field?.toLowerCase()\"\r\n >\r\n {{ child.label | translate }}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #withoutChildren>\r\n <div\r\n class=\"item\"\r\n (click)=\"onHandleShowMenu(menu)\"\r\n [attr.data-testid]=\"'mecx-filter-menu-btn-' + menu?.label?.toLowerCase()\"\r\n >\r\n {{ menu.label | translate }}\r\n </div>\r\n </ng-template>\r\n <ng-container *ngIf=\"_model[index + 1]?.group as next; _model: [index]?.group as current\">\r\n <div class=\"separator\" *ngIf=\"next !== current\"></div>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n<ng-container\r\n *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'rt'\"\r\n>\r\n <mecx-filter-options\r\n [option]=\"_menuOption\"\r\n (onClose)=\"onHandleClose()\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n [closeDirectly]=\"true\"\r\n ></mecx-filter-options>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:16px!important;min-width:192px;margin:4px 8px;overflow:auto;max-height:500px}:host ::ng-deep monkey-button{width:100%}:host ::ng-deep monkey-button button{justify-content:flex-start!important;width:100%}:host .item{font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#72717e;padding:8px 24px}:host .item.no-action{cursor:not-allowed;padding:8px;margin:0!important;font-weight:500}:host .item:first-child{margin:12px 0 0}:host .item:last-child{margin:0 0 12px}:host .item:not(.no-action){cursor:pointer}:host .item:not(.no-action):hover{background-color:var(--mecx-color-theme-200)!important;color:var(--mecx-color-theme-main)!important;font-weight:400}:host .separator{border-bottom:1px solid #ebebeb}\n"], components: [{ type: MECXFilterOptionsComponent, selector: "mecx-filter-options", inputs: ["option", "closeDirectly"], outputs: ["onClose", "onRemove", "onSubmit", "onShowFromChildren"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }], pipes: { "translate": i1$3.TranslatePipe } });
|
|
2223
2251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterMenuComponent, decorators: [{
|
|
2224
2252
|
type: Component,
|
|
2225
|
-
args: [{ selector: 'mecx-filter-menu', template: "<div class=\"d-flex flex-column\" #actionElement>\r\n <ng-container *ngFor=\"let menu of _model; let index = index\">\r\n <ng-container *ngIf=\"menu?.children; else withoutChildren\">\r\n <div class=\"item no-action\">\r\n {{ menu.label | translate }}\r\n </div>\r\n <div class=\"separator\"></div>\r\n <ng-container *ngFor=\"let child of menu?.children\">\r\n <div
|
|
2253
|
+
args: [{ selector: 'mecx-filter-menu', template: "<div class=\"d-flex flex-column\" #actionElement>\r\n <ng-container *ngFor=\"let menu of _model; let index = index\">\r\n <ng-container *ngIf=\"menu?.children; else withoutChildren\">\r\n <div class=\"item no-action\">\r\n {{ menu.label | translate }}\r\n </div>\r\n <div class=\"separator\"></div>\r\n <ng-container *ngFor=\"let child of menu?.children\">\r\n <div\r\n class=\"item children\"\r\n (click)=\"onHandleChildrenAction(menu, child)\"\r\n [attr.data-testid]=\"'mecx-filter-item-children-btn-' + child?.field?.toLowerCase()\"\r\n >\r\n {{ child.label | translate }}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #withoutChildren>\r\n <div\r\n class=\"item\"\r\n (click)=\"onHandleShowMenu(menu)\"\r\n [attr.data-testid]=\"'mecx-filter-menu-btn-' + menu?.label?.toLowerCase()\"\r\n >\r\n {{ menu.label | translate }}\r\n </div>\r\n </ng-template>\r\n <ng-container *ngIf=\"_model[index + 1]?.group as next; _model: [index]?.group as current\">\r\n <div class=\"separator\" *ngIf=\"next !== current\"></div>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n<ng-container\r\n *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'rt'\"\r\n>\r\n <mecx-filter-options\r\n [option]=\"_menuOption\"\r\n (onClose)=\"onHandleClose()\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n [closeDirectly]=\"true\"\r\n ></mecx-filter-options>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:16px!important;min-width:192px;margin:4px 8px;overflow:auto;max-height:500px}:host ::ng-deep monkey-button{width:100%}:host ::ng-deep monkey-button button{justify-content:flex-start!important;width:100%}:host .item{font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#72717e;padding:8px 24px}:host .item.no-action{cursor:not-allowed;padding:8px;margin:0!important;font-weight:500}:host .item:first-child{margin:12px 0 0}:host .item:last-child{margin:0 0 12px}:host .item:not(.no-action){cursor:pointer}:host .item:not(.no-action):hover{background-color:var(--mecx-color-theme-200)!important;color:var(--mecx-color-theme-main)!important;font-weight:400}:host .separator{border-bottom:1px solid #ebebeb}\n"] }]
|
|
2226
2254
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
2227
2255
|
type: Input
|
|
2228
2256
|
}], onClose: [{
|
|
@@ -2334,10 +2362,10 @@ class MECXFilterComponent {
|
|
|
2334
2362
|
}
|
|
2335
2363
|
}
|
|
2336
2364
|
MECXFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2337
|
-
MECXFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterComponent, selector: "mecx-filter", inputs: { searchPlaceholder: "searchPlaceholder", orderPlaceholder: "orderPlaceholder", menus: "menus", orders: "orders", enableSearch: "enableSearch", enableAddFilter: "enableAddFilter", enableOrder: "enableOrder", complementTemplate: "complementTemplate", search: "search", order: "order", ordersList: "ordersList", isLoading: "isLoading" }, outputs: { onFilter: "onFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex full-width flex-column d-flex-gap-2 filter-content\">\r\n <div class=\"d-flex flex-column flex-md-row justify-content-between full-width\">\r\n <div class=\"d-flex full-width d-flex-gap-2 filter-input\">\r\n <ng-container *ngIf=\"enableSearch\">\r\n <monkey-input-filter\r\n [placeholder]=\"searchPlaceholder | translate\"\r\n (onChange)=\"onSearchFilter($event)\"\r\n icon=\"search-16\"\r\n iconPosition=\"left\"\r\n [(value)]=\"_search\"\r\n >\r\n </monkey-input-filter>\r\n </ng-container>\r\n <ng-container *ngIf=\"!_hasFilterByMenu\">\r\n <div *ngIf=\"enableAddFilter\" class=\"d-flex actions\" id=\"mecx-filters-add-filter\">\r\n <monkey-button\r\n type=\"filter\"\r\n color=\"border\"\r\n (click)=\"onHandleShowMenu()\"\r\n icon=\"more-16\"\r\n iconPosition=\"right\"\r\n >\r\n {{ 'BUTTONS.ADD-FILTER' | translate }}\r\n </monkey-button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order hidden-sm hidden-xs\">\r\n <div class=\"d-flex align-items-center flex-column flex-sm-row\">\r\n <ng-container *ngIf=\"!!complementTemplate\">\r\n <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"enableOrder\">\r\n <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"_hasFilterByMenu\">\r\n <div class=\"separator\"></div>\r\n <div class=\"d-flex full-width d-flex-gap-2 align-items-end\">\r\n <mecx-filter-selected\r\n class=\"d-flex-gap-2\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n (onClose)=\"onHandleClose()\"\r\n [model]=\"menus\"\r\n ></mecx-filter-selected>\r\n <div class=\"more-filters\">\r\n <monkey-button\r\n type=\"filter\"\r\n color=\"border\"\r\n icon=\"more-16\"\r\n id=\"mecx-filters-add-filter\"\r\n (click)=\"onHandleShowMenu()\"\r\n >\r\n </monkey-button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"order hidden-md hidden-lg\">\r\n <div class=\"d-flex align-items-center flex-column flex-sm-row\">\r\n <ng-container *ngIf=\"!!complementTemplate\">\r\n <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"enableOrder\">\r\n <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<mecx-filter-menu\r\n *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n (onClose)=\"onHandleClose()\"\r\n [model]=\"menus\"\r\n>\r\n</mecx-filter-menu>\r\n\r\n<ng-template #orderBy>\r\n <ng-container *ngIf=\"!(_ordersList?.length > 0); else orderByList\">\r\n <div class=\"d-flex align-items-center flex-column flex-sm-row\">\r\n <monkey-select-filter\r\n (onChange)=\"onHandleOrder($event)\"\r\n [placeholder]=\"orderPlaceholder | translate\"\r\n type=\"none\"\r\n [(value)]=\"_order\"\r\n >\r\n <monkey-option\r\n *ngFor=\"let ordBy of orders\"\r\n [label]=\"ordBy?.label | translate\"\r\n [value]=\"ordBy?.value\"\r\n >x\r\n </monkey-option>\r\n </monkey-select-filter>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #orderByList>\r\n <div class=\"d-flex full-width justify-content-end\">\r\n <div #ordersFilterMenu (click)=\"onHandleShowOrders(ordersFilterMenu)\">\r\n <monkey-button type=\"filter\" color=\"border\" icon=\"arrow-down-16\" iconPosition=\"right\">\r\n {{ 'BUTTONS.ORDINATION' | translate }}\r\n </monkey-button>\r\n </div>\r\n </div>\r\n <div\r\n class=\"ml-1\"\r\n *monkeyecxPopover=\"\r\n _showOrder;\r\n target: $any(_actionElementOrder);\r\n closed: closeOrder;\r\n dir: 'rtl'\r\n \"\r\n >\r\n <div class=\"drop-down-orders-filter pt-4\">\r\n <ng-container *ngFor=\"let item of _ordersList\">\r\n <div class=\"px-4\">\r\n <span>{{ item.label | translate }}</span>\r\n <monkey-radiobutton [value]=\"item.value\" (onChange)=\"onHandleOrder($event, item.field)\">\r\n <monkey-option\r\n *ngFor=\"let ordBy of item.values\"\r\n [label]=\"ordBy?.label | translate\"\r\n [value]=\"ordBy?.value\"\r\n >\r\n </monkey-option>\r\n </monkey-radiobutton>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".drop-down-orders-filter{display:flex;flex-direction:column;background:#fafafa;border:1px solid #e9eaec;box-shadow:1px 17px 31px 5px #1d1d1d15;border-radius:16px!important}.drop-down-orders-filter ::ng-deep .mecx-radio-container{margin-top:16px}:host{display:flex;width:100%;align-items:center}@media screen and (max-width: 599px){:host .filter-content,:host .filter-input{flex-direction:column}}:host .filter-input .actions ::ng-deep monkey-button button{justify-content:center;white-space:nowrap}:host .filter-input .actions ::ng-deep monkey-button button monkey-icon{margin-right:0;margin-left:10px}@media screen and (max-width: 599px){:host .filter-input{flex-wrap:wrap}:host .filter-input .actions{flex:1 1}}:host .filter-input .mecx-button-filter{white-space:nowrap;justify-content:center}@media screen and (max-width: 959px){:host{flex-direction:column;max-width:100%}:host ::ng-deep monkey-input-filter{width:100%}:host ::ng-deep monkey-select-filter{width:100%}:host ::ng-deep monkey-button{width:100%}:host ::ng-deep monkey-button button{width:100%}}@media screen and (min-width: 960px){:host .actions ::ng-deep monkey-button button{width:170px}}:host .more-filters ::ng-deep monkey-button monkey-icon{margin-right:unset!important}:host .order{white-space:nowrap;align-self:flex-start}@media screen and (max-width: 599px){:host .order{align-self:unset}}@media screen and (min-width: 960px){:host .order ::ng-deep monkey-select-filter{width:unset}:host .order ::ng-deep monkey-button monkey-icon{margin-left:10px;margin-right:unset}}:host ::ng-deep monkey-button{margin-bottom:0}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:40px;margin:0}:host ::ng-deep monkey-button-dropdown{color:#fff}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger{background:#fff;border-radius:.5rem;border:1px solid #d6d6d6;height:40px;justify-content:center;width:40px}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger mecx-button-dropdown__trigger{justify-content:center}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger mecx-button-dropdown__trigger monkey-icon{margin-left:0}:host .separator{border-bottom:1px solid #ebebeb;margin-top:16px;margin-bottom:16px}\n"], components: [{ type: i1$2.MonkeyInputFilterComponent, selector: "monkey-input-filter", inputs: ["name", "label", "helperMessage", "placeholder", "icon", "type", "infoMessage", "errorMessage", "mask", "prefix", "onlyNumber", "onlyAlphaNumeric", "upperCase", "lowerCase", "capitalize", "currency", "iconPosition", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }, { type: MECXFilterSelectedComponent, selector: "mecx-filter-selected", inputs: ["model"], outputs: ["onOpenFilters", "onClose", "onSubmit"] }, { type: MECXFilterMenuComponent, selector: "mecx-filter-menu", inputs: ["model"], outputs: ["onClose", "onSubmit"] }, { type: i1$2.MonkeySelectFilterComponent, selector: "monkey-select-filter", inputs: ["placeholder", "icon", "type", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }, { type: i1$2.MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "value"], outputs: ["onChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe } });
|
|
2365
|
+
MECXFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterComponent, selector: "mecx-filter", inputs: { searchPlaceholder: "searchPlaceholder", orderPlaceholder: "orderPlaceholder", menus: "menus", orders: "orders", enableSearch: "enableSearch", enableAddFilter: "enableAddFilter", enableOrder: "enableOrder", complementTemplate: "complementTemplate", search: "search", order: "order", ordersList: "ordersList", isLoading: "isLoading" }, outputs: { onFilter: "onFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex full-width flex-column d-flex-gap-2 filter-content\">\r\n <div class=\"d-flex flex-column flex-md-row justify-content-between full-width\">\r\n <div class=\"d-flex full-width d-flex-gap-2 filter-input\">\r\n <ng-container *ngIf=\"enableSearch\">\r\n <monkey-input-filter\r\n [placeholder]=\"searchPlaceholder | translate\"\r\n (onChange)=\"onSearchFilter($event)\"\r\n icon=\"search-16\"\r\n iconPosition=\"left\"\r\n [(value)]=\"_search\"\r\n data-testid=\"mecx-filter-input\"\r\n >\r\n </monkey-input-filter>\r\n </ng-container>\r\n <ng-container *ngIf=\"!_hasFilterByMenu\">\r\n <div *ngIf=\"enableAddFilter\" class=\"d-flex actions\" id=\"mecx-filters-add-filter\">\r\n <monkey-button\r\n type=\"filter\"\r\n color=\"border\"\r\n (click)=\"onHandleShowMenu()\"\r\n icon=\"more-16\"\r\n iconPosition=\"right\"\r\n data-testid=\"mecx-filter-btn-add-filter\"\r\n >\r\n {{ 'BUTTONS.ADD-FILTER' | translate }}\r\n </monkey-button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order hidden-sm hidden-xs\">\r\n <div class=\"d-flex align-items-center flex-column flex-sm-row\">\r\n <ng-container *ngIf=\"!!complementTemplate\">\r\n <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"enableOrder\">\r\n <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"_hasFilterByMenu\">\r\n <div class=\"separator\"></div>\r\n <div class=\"d-flex full-width d-flex-gap-2 align-items-end\">\r\n <mecx-filter-selected\r\n class=\"d-flex-gap-2\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n (onClose)=\"onHandleClose()\"\r\n [model]=\"menus\"\r\n ></mecx-filter-selected>\r\n <div class=\"more-filters\">\r\n <monkey-button\r\n type=\"filter\"\r\n color=\"border\"\r\n icon=\"more-16\"\r\n id=\"mecx-filters-add-filter\"\r\n (click)=\"onHandleShowMenu()\"\r\n >\r\n </monkey-button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"order hidden-md hidden-lg\">\r\n <div class=\"d-flex align-items-center flex-column flex-sm-row\">\r\n <ng-container *ngIf=\"!!complementTemplate\">\r\n <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"enableOrder\">\r\n <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<mecx-filter-menu\r\n *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n (onClose)=\"onHandleClose()\"\r\n [model]=\"menus\"\r\n>\r\n</mecx-filter-menu>\r\n\r\n<ng-template #orderBy>\r\n <ng-container *ngIf=\"!(_ordersList?.length > 0); else orderByList\">\r\n <div class=\"d-flex align-items-center flex-column flex-sm-row\">\r\n <monkey-select-filter\r\n (onChange)=\"onHandleOrder($event)\"\r\n [placeholder]=\"orderPlaceholder | translate\"\r\n type=\"none\"\r\n [(value)]=\"_order\"\r\n data-testid=\"mecx-filter-btn-order\"\r\n >\r\n <monkey-option\r\n *ngFor=\"let ordBy of orders\"\r\n [label]=\"ordBy?.label | translate\"\r\n [value]=\"ordBy?.value\"\r\n [attr.data-testid]=\"'mecx-filter-btn-order-' + ordBy?.value?.toLowerCase()\"\r\n >x\r\n </monkey-option>\r\n </monkey-select-filter>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #orderByList>\r\n <div class=\"d-flex full-width justify-content-end\">\r\n <div #ordersFilterMenu (click)=\"onHandleShowOrders(ordersFilterMenu)\">\r\n <monkey-button\r\n type=\"filter\"\r\n color=\"border\"\r\n icon=\"arrow-down-16\"\r\n iconPosition=\"right\"\r\n data-testid=\"mecx-filter-btn-ordination\"\r\n >\r\n {{ 'BUTTONS.ORDINATION' | translate }}\r\n </monkey-button>\r\n </div>\r\n </div>\r\n <div\r\n class=\"ml-1\"\r\n *monkeyecxPopover=\"\r\n _showOrder;\r\n target: $any(_actionElementOrder);\r\n closed: closeOrder;\r\n dir: 'rtl'\r\n \"\r\n >\r\n <div class=\"drop-down-orders-filter pt-4\">\r\n <ng-container *ngFor=\"let item of _ordersList\">\r\n <div class=\"px-4\">\r\n <span>{{ item.label | translate }}</span>\r\n <monkey-radiobutton [value]=\"item.value\" (onChange)=\"onHandleOrder($event, item.field)\">\r\n <monkey-option\r\n *ngFor=\"let ordBy of item.values\"\r\n [label]=\"ordBy?.label | translate\"\r\n [value]=\"ordBy?.value\"\r\n [attr.data-testid]=\"'mecx-filter-btn-ordination-' + ordBy?.value?.toLowerCase()\"\r\n >\r\n </monkey-option>\r\n </monkey-radiobutton>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".drop-down-orders-filter{display:flex;flex-direction:column;background:#fafafa;border:1px solid #e9eaec;box-shadow:1px 17px 31px 5px #1d1d1d15;border-radius:16px!important}.drop-down-orders-filter ::ng-deep .mecx-radio-container{margin-top:16px}:host{display:flex;width:100%;align-items:center}@media screen and (max-width: 599px){:host .filter-content,:host .filter-input{flex-direction:column}}:host .filter-input .actions ::ng-deep monkey-button button{justify-content:center;white-space:nowrap}:host .filter-input .actions ::ng-deep monkey-button button monkey-icon{margin-right:0;margin-left:10px}@media screen and (max-width: 599px){:host .filter-input{flex-wrap:wrap}:host .filter-input .actions{flex:1 1}}:host .filter-input .mecx-button-filter{white-space:nowrap;justify-content:center}@media screen and (max-width: 959px){:host{flex-direction:column;max-width:100%}:host ::ng-deep monkey-input-filter{width:100%}:host ::ng-deep monkey-select-filter{width:100%}:host ::ng-deep monkey-button{width:100%}:host ::ng-deep monkey-button button{width:100%}}@media screen and (min-width: 960px){:host .actions ::ng-deep monkey-button button{width:170px}}:host .more-filters ::ng-deep monkey-button monkey-icon{margin-right:unset!important}:host .order{white-space:nowrap;align-self:flex-start}@media screen and (max-width: 599px){:host .order{align-self:unset}}@media screen and (min-width: 960px){:host .order ::ng-deep monkey-select-filter{width:unset}:host .order ::ng-deep monkey-button monkey-icon{margin-left:10px;margin-right:unset}}:host ::ng-deep monkey-button{margin-bottom:0}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:40px;margin:0}:host ::ng-deep monkey-button-dropdown{color:#fff}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger{background:#fff;border-radius:.5rem;border:1px solid #d6d6d6;height:40px;justify-content:center;width:40px}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger mecx-button-dropdown__trigger{justify-content:center}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger mecx-button-dropdown__trigger monkey-icon{margin-left:0}:host .separator{border-bottom:1px solid #ebebeb;margin-top:16px;margin-bottom:16px}\n"], components: [{ type: i1$2.MonkeyInputFilterComponent, selector: "monkey-input-filter", inputs: ["name", "label", "helperMessage", "placeholder", "icon", "type", "infoMessage", "errorMessage", "mask", "prefix", "onlyNumber", "onlyAlphaNumeric", "upperCase", "lowerCase", "capitalize", "currency", "iconPosition", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }, { type: MECXFilterSelectedComponent, selector: "mecx-filter-selected", inputs: ["model"], outputs: ["onOpenFilters", "onClose", "onSubmit"] }, { type: MECXFilterMenuComponent, selector: "mecx-filter-menu", inputs: ["model"], outputs: ["onClose", "onSubmit"] }, { type: i1$2.MonkeySelectFilterComponent, selector: "monkey-select-filter", inputs: ["placeholder", "icon", "type", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }, { type: i1$2.MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "value"], outputs: ["onChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe } });
|
|
2338
2366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterComponent, decorators: [{
|
|
2339
2367
|
type: Component,
|
|
2340
|
-
args: [{ selector: 'mecx-filter', template: "<div class=\"d-flex full-width flex-column d-flex-gap-2 filter-content\">\r\n <div class=\"d-flex flex-column flex-md-row justify-content-between full-width\">\r\n <div class=\"d-flex full-width d-flex-gap-2 filter-input\">\r\n <ng-container *ngIf=\"enableSearch\">\r\n <monkey-input-filter\r\n [placeholder]=\"searchPlaceholder | translate\"\r\n (onChange)=\"onSearchFilter($event)\"\r\n icon=\"search-16\"\r\n iconPosition=\"left\"\r\n [(value)]=\"_search\"\r\n >\r\n </monkey-input-filter>\r\n </ng-container>\r\n <ng-container *ngIf=\"!_hasFilterByMenu\">\r\n <div *ngIf=\"enableAddFilter\" class=\"d-flex actions\" id=\"mecx-filters-add-filter\">\r\n <monkey-button\r\n type=\"filter\"\r\n color=\"border\"\r\n (click)=\"onHandleShowMenu()\"\r\n icon=\"more-16\"\r\n iconPosition=\"right\"\r\n >\r\n {{ 'BUTTONS.ADD-FILTER' | translate }}\r\n </monkey-button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order hidden-sm hidden-xs\">\r\n <div class=\"d-flex align-items-center flex-column flex-sm-row\">\r\n <ng-container *ngIf=\"!!complementTemplate\">\r\n <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"enableOrder\">\r\n <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"_hasFilterByMenu\">\r\n <div class=\"separator\"></div>\r\n <div class=\"d-flex full-width d-flex-gap-2 align-items-end\">\r\n <mecx-filter-selected\r\n class=\"d-flex-gap-2\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n (onClose)=\"onHandleClose()\"\r\n [model]=\"menus\"\r\n ></mecx-filter-selected>\r\n <div class=\"more-filters\">\r\n <monkey-button\r\n type=\"filter\"\r\n color=\"border\"\r\n icon=\"more-16\"\r\n id=\"mecx-filters-add-filter\"\r\n (click)=\"onHandleShowMenu()\"\r\n >\r\n </monkey-button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"order hidden-md hidden-lg\">\r\n <div class=\"d-flex align-items-center flex-column flex-sm-row\">\r\n <ng-container *ngIf=\"!!complementTemplate\">\r\n <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"enableOrder\">\r\n <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<mecx-filter-menu\r\n *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n (onClose)=\"onHandleClose()\"\r\n [model]=\"menus\"\r\n>\r\n</mecx-filter-menu>\r\n\r\n<ng-template #orderBy>\r\n <ng-container *ngIf=\"!(_ordersList?.length > 0); else orderByList\">\r\n <div class=\"d-flex align-items-center flex-column flex-sm-row\">\r\n <monkey-select-filter\r\n (onChange)=\"onHandleOrder($event)\"\r\n [placeholder]=\"orderPlaceholder | translate\"\r\n type=\"none\"\r\n [(value)]=\"_order\"\r\n >\r\n <monkey-option\r\n *ngFor=\"let ordBy of orders\"\r\n [label]=\"ordBy?.label | translate\"\r\n [value]=\"ordBy?.value\"\r\n >x\r\n </monkey-option>\r\n </monkey-select-filter>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #orderByList>\r\n <div class=\"d-flex full-width justify-content-end\">\r\n <div #ordersFilterMenu (click)=\"onHandleShowOrders(ordersFilterMenu)\">\r\n <monkey-button
|
|
2368
|
+
args: [{ selector: 'mecx-filter', template: "<div class=\"d-flex full-width flex-column d-flex-gap-2 filter-content\">\r\n <div class=\"d-flex flex-column flex-md-row justify-content-between full-width\">\r\n <div class=\"d-flex full-width d-flex-gap-2 filter-input\">\r\n <ng-container *ngIf=\"enableSearch\">\r\n <monkey-input-filter\r\n [placeholder]=\"searchPlaceholder | translate\"\r\n (onChange)=\"onSearchFilter($event)\"\r\n icon=\"search-16\"\r\n iconPosition=\"left\"\r\n [(value)]=\"_search\"\r\n data-testid=\"mecx-filter-input\"\r\n >\r\n </monkey-input-filter>\r\n </ng-container>\r\n <ng-container *ngIf=\"!_hasFilterByMenu\">\r\n <div *ngIf=\"enableAddFilter\" class=\"d-flex actions\" id=\"mecx-filters-add-filter\">\r\n <monkey-button\r\n type=\"filter\"\r\n color=\"border\"\r\n (click)=\"onHandleShowMenu()\"\r\n icon=\"more-16\"\r\n iconPosition=\"right\"\r\n data-testid=\"mecx-filter-btn-add-filter\"\r\n >\r\n {{ 'BUTTONS.ADD-FILTER' | translate }}\r\n </monkey-button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order hidden-sm hidden-xs\">\r\n <div class=\"d-flex align-items-center flex-column flex-sm-row\">\r\n <ng-container *ngIf=\"!!complementTemplate\">\r\n <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"enableOrder\">\r\n <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"_hasFilterByMenu\">\r\n <div class=\"separator\"></div>\r\n <div class=\"d-flex full-width d-flex-gap-2 align-items-end\">\r\n <mecx-filter-selected\r\n class=\"d-flex-gap-2\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n (onClose)=\"onHandleClose()\"\r\n [model]=\"menus\"\r\n ></mecx-filter-selected>\r\n <div class=\"more-filters\">\r\n <monkey-button\r\n type=\"filter\"\r\n color=\"border\"\r\n icon=\"more-16\"\r\n id=\"mecx-filters-add-filter\"\r\n (click)=\"onHandleShowMenu()\"\r\n >\r\n </monkey-button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"order hidden-md hidden-lg\">\r\n <div class=\"d-flex align-items-center flex-column flex-sm-row\">\r\n <ng-container *ngIf=\"!!complementTemplate\">\r\n <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"enableOrder\">\r\n <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<mecx-filter-menu\r\n *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\r\n (onSubmit)=\"onHandleSubmit($event)\"\r\n (onClose)=\"onHandleClose()\"\r\n [model]=\"menus\"\r\n>\r\n</mecx-filter-menu>\r\n\r\n<ng-template #orderBy>\r\n <ng-container *ngIf=\"!(_ordersList?.length > 0); else orderByList\">\r\n <div class=\"d-flex align-items-center flex-column flex-sm-row\">\r\n <monkey-select-filter\r\n (onChange)=\"onHandleOrder($event)\"\r\n [placeholder]=\"orderPlaceholder | translate\"\r\n type=\"none\"\r\n [(value)]=\"_order\"\r\n data-testid=\"mecx-filter-btn-order\"\r\n >\r\n <monkey-option\r\n *ngFor=\"let ordBy of orders\"\r\n [label]=\"ordBy?.label | translate\"\r\n [value]=\"ordBy?.value\"\r\n [attr.data-testid]=\"'mecx-filter-btn-order-' + ordBy?.value?.toLowerCase()\"\r\n >x\r\n </monkey-option>\r\n </monkey-select-filter>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #orderByList>\r\n <div class=\"d-flex full-width justify-content-end\">\r\n <div #ordersFilterMenu (click)=\"onHandleShowOrders(ordersFilterMenu)\">\r\n <monkey-button\r\n type=\"filter\"\r\n color=\"border\"\r\n icon=\"arrow-down-16\"\r\n iconPosition=\"right\"\r\n data-testid=\"mecx-filter-btn-ordination\"\r\n >\r\n {{ 'BUTTONS.ORDINATION' | translate }}\r\n </monkey-button>\r\n </div>\r\n </div>\r\n <div\r\n class=\"ml-1\"\r\n *monkeyecxPopover=\"\r\n _showOrder;\r\n target: $any(_actionElementOrder);\r\n closed: closeOrder;\r\n dir: 'rtl'\r\n \"\r\n >\r\n <div class=\"drop-down-orders-filter pt-4\">\r\n <ng-container *ngFor=\"let item of _ordersList\">\r\n <div class=\"px-4\">\r\n <span>{{ item.label | translate }}</span>\r\n <monkey-radiobutton [value]=\"item.value\" (onChange)=\"onHandleOrder($event, item.field)\">\r\n <monkey-option\r\n *ngFor=\"let ordBy of item.values\"\r\n [label]=\"ordBy?.label | translate\"\r\n [value]=\"ordBy?.value\"\r\n [attr.data-testid]=\"'mecx-filter-btn-ordination-' + ordBy?.value?.toLowerCase()\"\r\n >\r\n </monkey-option>\r\n </monkey-radiobutton>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".drop-down-orders-filter{display:flex;flex-direction:column;background:#fafafa;border:1px solid #e9eaec;box-shadow:1px 17px 31px 5px #1d1d1d15;border-radius:16px!important}.drop-down-orders-filter ::ng-deep .mecx-radio-container{margin-top:16px}:host{display:flex;width:100%;align-items:center}@media screen and (max-width: 599px){:host .filter-content,:host .filter-input{flex-direction:column}}:host .filter-input .actions ::ng-deep monkey-button button{justify-content:center;white-space:nowrap}:host .filter-input .actions ::ng-deep monkey-button button monkey-icon{margin-right:0;margin-left:10px}@media screen and (max-width: 599px){:host .filter-input{flex-wrap:wrap}:host .filter-input .actions{flex:1 1}}:host .filter-input .mecx-button-filter{white-space:nowrap;justify-content:center}@media screen and (max-width: 959px){:host{flex-direction:column;max-width:100%}:host ::ng-deep monkey-input-filter{width:100%}:host ::ng-deep monkey-select-filter{width:100%}:host ::ng-deep monkey-button{width:100%}:host ::ng-deep monkey-button button{width:100%}}@media screen and (min-width: 960px){:host .actions ::ng-deep monkey-button button{width:170px}}:host .more-filters ::ng-deep monkey-button monkey-icon{margin-right:unset!important}:host .order{white-space:nowrap;align-self:flex-start}@media screen and (max-width: 599px){:host .order{align-self:unset}}@media screen and (min-width: 960px){:host .order ::ng-deep monkey-select-filter{width:unset}:host .order ::ng-deep monkey-button monkey-icon{margin-left:10px;margin-right:unset}}:host ::ng-deep monkey-button{margin-bottom:0}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:40px;margin:0}:host ::ng-deep monkey-button-dropdown{color:#fff}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger{background:#fff;border-radius:.5rem;border:1px solid #d6d6d6;height:40px;justify-content:center;width:40px}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger mecx-button-dropdown__trigger{justify-content:center}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger mecx-button-dropdown__trigger monkey-icon{margin-left:0}:host .separator{border-bottom:1px solid #ebebeb;margin-top:16px;margin-bottom:16px}\n"] }]
|
|
2341
2369
|
}], ctorParameters: function () { return []; }, propDecorators: { searchPlaceholder: [{
|
|
2342
2370
|
type: Input
|
|
2343
2371
|
}], orderPlaceholder: [{
|