monkey-front-components 0.0.294 → 0.0.297
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/shared/filter/filter.component.mjs +10 -4
- package/esm2020/lib/components/shared/filter/menu/menu.component.mjs +2 -2
- package/esm2020/lib/components/shared/filter/options/children/children.component.mjs +4 -3
- package/esm2020/lib/components/shared/filter/selected/item/children/children.component.mjs +4 -3
- package/esm2020/lib/components/shared/filter/selected/item/item.component.mjs +3 -3
- package/fesm2015/monkey-front-components.mjs +17 -11
- package/fesm2015/monkey-front-components.mjs.map +1 -1
- package/fesm2020/monkey-front-components.mjs +17 -11
- package/fesm2020/monkey-front-components.mjs.map +1 -1
- package/lib/components/shared/filter/filter.component.d.ts +3 -1
- package/monkey-front-components-0.0.297.tgz +0 -0
- package/package.json +1 -1
- package/monkey-front-components-0.0.294.tgz +0 -0
|
@@ -1466,10 +1466,10 @@ class MECXFilterSelectedItemChildrenComponent {
|
|
|
1466
1466
|
}
|
|
1467
1467
|
}
|
|
1468
1468
|
MECXFilterSelectedItemChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemChildrenComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1469
|
-
MECXFilterSelectedItemChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemChildrenComponent, selector: "mecx-filter-selected-item-children", inputs: { option: "option" }, outputs: { onShow: "onShow", onRemove: "onRemove" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"box\">\n <div class=\"data\">\n {{ option.label }}\n </div>\n <div class=\"value\" [id]=\"'mecx-filter-selected-item-'+option?.field\" (click)=\"onShow.next()\">\n <ng-container *ngIf=\"option?.type as type\">\n <ng-container [ngSwitch]=\"type+'-'+_child?.type\">\n <mecx-filter-selected-item-date-with-action *ngSwitchCase=\"'date-with-action'\"\n [option]=\"_child\">\n </mecx-filter-selected-item-date-with-action>\n <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-date-range'\" [option]=\"_child\">\n </mecx-filter-selected-item-date-range>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"action\" (click)=\"onShow.next()\">\n <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n </div>\n</div>", 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-left:12px;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;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:12px;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}\n"], components: [{ type: MECXFilterSelectedItemDateWithActionComponent, selector: "mecx-filter-selected-item-date-with-action", inputs: ["option"] }, { type: MECXFilterSelectedItemDateRangeComponent, selector: "mecx-filter-selected-item-date-range", inputs: ["option"] }, { type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
|
|
1469
|
+
MECXFilterSelectedItemChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemChildrenComponent, selector: "mecx-filter-selected-item-children", inputs: { option: "option" }, outputs: { onShow: "onShow", onRemove: "onRemove" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"box\">\n <div class=\"data\">\n {{ option.label | translate }}\n </div>\n <div class=\"value\" [id]=\"'mecx-filter-selected-item-'+option?.field\" (click)=\"onShow.next()\">\n <ng-container *ngIf=\"option?.type as type\">\n <ng-container [ngSwitch]=\"type+'-'+_child?.type\">\n <mecx-filter-selected-item-date-with-action *ngSwitchCase=\"'date-with-action'\"\n [option]=\"_child\">\n </mecx-filter-selected-item-date-with-action>\n <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-date-range'\" [option]=\"_child\">\n </mecx-filter-selected-item-date-range>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"action\" (click)=\"onShow.next()\">\n <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n </div>\n</div>", 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-left:12px;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;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:12px;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}\n"], components: [{ type: MECXFilterSelectedItemDateWithActionComponent, selector: "mecx-filter-selected-item-date-with-action", inputs: ["option"] }, { type: MECXFilterSelectedItemDateRangeComponent, selector: "mecx-filter-selected-item-date-range", inputs: ["option"] }, { type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "translate": i1$3.TranslatePipe } });
|
|
1470
1470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemChildrenComponent, decorators: [{
|
|
1471
1471
|
type: Component,
|
|
1472
|
-
args: [{ selector: 'mecx-filter-selected-item-children', template: "<div class=\"box\">\n <div class=\"data\">\n {{ option.label }}\n </div>\n <div class=\"value\" [id]=\"'mecx-filter-selected-item-'+option?.field\" (click)=\"onShow.next()\">\n <ng-container *ngIf=\"option?.type as type\">\n <ng-container [ngSwitch]=\"type+'-'+_child?.type\">\n <mecx-filter-selected-item-date-with-action *ngSwitchCase=\"'date-with-action'\"\n [option]=\"_child\">\n </mecx-filter-selected-item-date-with-action>\n <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-date-range'\" [option]=\"_child\">\n </mecx-filter-selected-item-date-range>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"action\" (click)=\"onShow.next()\">\n <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n </div>\n</div>", 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-left:12px;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;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:12px;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}\n"] }]
|
|
1472
|
+
args: [{ selector: 'mecx-filter-selected-item-children', template: "<div class=\"box\">\n <div class=\"data\">\n {{ option.label | translate }}\n </div>\n <div class=\"value\" [id]=\"'mecx-filter-selected-item-'+option?.field\" (click)=\"onShow.next()\">\n <ng-container *ngIf=\"option?.type as type\">\n <ng-container [ngSwitch]=\"type+'-'+_child?.type\">\n <mecx-filter-selected-item-date-with-action *ngSwitchCase=\"'date-with-action'\"\n [option]=\"_child\">\n </mecx-filter-selected-item-date-with-action>\n <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-date-range'\" [option]=\"_child\">\n </mecx-filter-selected-item-date-range>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"action\" (click)=\"onShow.next()\">\n <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n </div>\n</div>", 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-left:12px;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;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:12px;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}\n"] }]
|
|
1473
1473
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { option: [{
|
|
1474
1474
|
type: Input
|
|
1475
1475
|
}], onShow: [{
|
|
@@ -1574,10 +1574,10 @@ class MECXFilterOptionsChildrenComponent {
|
|
|
1574
1574
|
}
|
|
1575
1575
|
}
|
|
1576
1576
|
MECXFilterOptionsChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsChildrenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1577
|
-
MECXFilterOptionsChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsChildrenComponent, selector: "mecx-filter-options-children", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit", onShow: "onShow" }, ngImport: i0, template: "<ng-container *ngFor=\"let child of option?.children\">\n <div class=\"item\" (click)=\"onHandleChildrenAction(child)\"\n [class.selected]=\"onHandleValidateSelected(child)\">\n {{ child.label }}\n </div>\n</ng-container>", styles: [":host{display:flex;flex-direction:column;min-width:180px}:host .item{cursor:pointer;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#72717e;padding:8px 24px}:host .item.selected{cursor:not-allowed!important;background-color:var(--mecx-color-theme-400)!important;color:var(--mecx-color-theme-contrast-main)!important;font-weight:400}:host .item:hover{background-color:var(--mecx-color-theme-100)!important;color:#72717e!important;font-weight:400}\n"], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
1577
|
+
MECXFilterOptionsChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsChildrenComponent, selector: "mecx-filter-options-children", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit", onShow: "onShow" }, ngImport: i0, template: "<ng-container *ngFor=\"let child of option?.children\">\n <div class=\"item\" (click)=\"onHandleChildrenAction(child)\"\n [class.selected]=\"onHandleValidateSelected(child)\">\n {{ child.label | translate }}\n </div>\n</ng-container>", styles: [":host{display:flex;flex-direction:column;min-width:180px}:host .item{cursor:pointer;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#72717e;padding:8px 24px}:host .item.selected{cursor:not-allowed!important;background-color:var(--mecx-color-theme-400)!important;color:var(--mecx-color-theme-contrast-main)!important;font-weight:400}:host .item:hover{background-color:var(--mecx-color-theme-100)!important;color:#72717e!important;font-weight:400}\n"], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe } });
|
|
1578
1578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsChildrenComponent, decorators: [{
|
|
1579
1579
|
type: Component,
|
|
1580
|
-
args: [{ selector: 'mecx-filter-options-children', template: "<ng-container *ngFor=\"let child of option?.children\">\n <div class=\"item\" (click)=\"onHandleChildrenAction(child)\"\n [class.selected]=\"onHandleValidateSelected(child)\">\n {{ child.label }}\n </div>\n</ng-container>", styles: [":host{display:flex;flex-direction:column;min-width:180px}:host .item{cursor:pointer;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#72717e;padding:8px 24px}:host .item.selected{cursor:not-allowed!important;background-color:var(--mecx-color-theme-400)!important;color:var(--mecx-color-theme-contrast-main)!important;font-weight:400}:host .item:hover{background-color:var(--mecx-color-theme-100)!important;color:#72717e!important;font-weight:400}\n"] }]
|
|
1580
|
+
args: [{ selector: 'mecx-filter-options-children', template: "<ng-container *ngFor=\"let child of option?.children\">\n <div class=\"item\" (click)=\"onHandleChildrenAction(child)\"\n [class.selected]=\"onHandleValidateSelected(child)\">\n {{ child.label | translate }}\n </div>\n</ng-container>", styles: [":host{display:flex;flex-direction:column;min-width:180px}:host .item{cursor:pointer;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#72717e;padding:8px 24px}:host .item.selected{cursor:not-allowed!important;background-color:var(--mecx-color-theme-400)!important;color:var(--mecx-color-theme-contrast-main)!important;font-weight:400}:host .item:hover{background-color:var(--mecx-color-theme-100)!important;color:#72717e!important;font-weight:400}\n"] }]
|
|
1581
1581
|
}], ctorParameters: function () { return []; }, propDecorators: { option: [{
|
|
1582
1582
|
type: Input
|
|
1583
1583
|
}], onSubmit: [{
|
|
@@ -1854,10 +1854,10 @@ class MECXFilterSelectedItemComponent {
|
|
|
1854
1854
|
}
|
|
1855
1855
|
}
|
|
1856
1856
|
MECXFilterSelectedItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1857
|
-
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\">\n <ng-container *ngIf=\"_option?.children; else withoutChildren\">\n <mecx-filter-selected-item-children [option]=\"_option\" (onShow)=\"onHandleShowMenu()\"\n (onRemove)=\"onHandleRemove()\">\n </mecx-filter-selected-item-children>\n </ng-container>\n <ng-template #withoutChildren>\n <div class=\"box\">\n <div class=\"data\">\n {{ _option.label }}\n </div>\n <div class=\"value\" [id]=\"'mecx-filter-selected-item-'+_option?.field\"\n (click)=\"onHandleShowMenu()\">\n <ng-container [ngSwitch]=\"type\">\n <mecx-filter-selected-item-currency *ngSwitchCase=\"'currency'\" [option]=\"_option\">\n </mecx-filter-selected-item-currency>\n <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-range'\" [option]=\"_option\">\n </mecx-filter-selected-item-date-range>\n <mecx-filter-selected-item-status *ngSwitchCase=\"'status'\" [option]=\"_option\"\n [labelMoreValues]=\"'FIELD.AND-MORE' | translate\">\n </mecx-filter-selected-item-status>\n </ng-container>\n </div>\n <div class=\"action\" (click)=\"onHandleShowMenu()\">\n <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n </div>\n </div>\n </ng-template>\n</ng-container>\n<ng-container\n *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\">\n <mecx-filter-options [option]=\"_option\" (onClose)=\"onHandleClose()\"\n (onRemove)=\"onHandleRemove()\" (onSubmit)=\"onHandleSubmit($event)\"\n (onShowFromChildren)=\"onHandleShowFromChildren($event)\">\n </mecx-filter-options>\n</ng-container>", 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: MECXFilterSelectedItemStatusComponent, selector: "mecx-filter-selected-item-status", inputs: ["option", "labelMoreValues"] }, { 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 } });
|
|
1857
|
+
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\">\n <ng-container *ngIf=\"_option?.children; else withoutChildren\">\n <mecx-filter-selected-item-children [option]=\"_option\" (onShow)=\"onHandleShowMenu()\"\n (onRemove)=\"onHandleRemove()\">\n </mecx-filter-selected-item-children>\n </ng-container>\n <ng-template #withoutChildren>\n <div class=\"box\">\n <div class=\"data\">\n {{ _option.label | translate }}\n </div>\n <div class=\"value\" [id]=\"'mecx-filter-selected-item-'+_option?.field\"\n (click)=\"onHandleShowMenu()\">\n <ng-container [ngSwitch]=\"type\">\n <mecx-filter-selected-item-currency *ngSwitchCase=\"'currency'\" [option]=\"_option\">\n </mecx-filter-selected-item-currency>\n <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-range'\" [option]=\"_option\">\n </mecx-filter-selected-item-date-range>\n <mecx-filter-selected-item-status *ngSwitchCase=\"'status'\" [option]=\"_option\"\n [labelMoreValues]=\"'FIELD.AND-MORE' | translate\">\n </mecx-filter-selected-item-status>\n </ng-container>\n </div>\n <div class=\"action\" (click)=\"onHandleShowMenu()\">\n <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n </div>\n </div>\n </ng-template>\n</ng-container>\n<ng-container\n *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\">\n <mecx-filter-options [option]=\"_option\" (onClose)=\"onHandleClose()\"\n (onRemove)=\"onHandleRemove()\" (onSubmit)=\"onHandleSubmit($event)\"\n (onShowFromChildren)=\"onHandleShowFromChildren($event)\">\n </mecx-filter-options>\n</ng-container>", 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: MECXFilterSelectedItemStatusComponent, selector: "mecx-filter-selected-item-status", inputs: ["option", "labelMoreValues"] }, { 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 } });
|
|
1858
1858
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemComponent, decorators: [{
|
|
1859
1859
|
type: Component,
|
|
1860
|
-
args: [{ selector: 'mecx-filter-selected-item', template: "<ng-container *ngIf=\"_option?.type as type\">\n <ng-container *ngIf=\"_option?.children; else withoutChildren\">\n <mecx-filter-selected-item-children [option]=\"_option\" (onShow)=\"onHandleShowMenu()\"\n (onRemove)=\"onHandleRemove()\">\n </mecx-filter-selected-item-children>\n </ng-container>\n <ng-template #withoutChildren>\n <div class=\"box\">\n <div class=\"data\">\n {{ _option.label }}\n </div>\n <div class=\"value\" [id]=\"'mecx-filter-selected-item-'+_option?.field\"\n (click)=\"onHandleShowMenu()\">\n <ng-container [ngSwitch]=\"type\">\n <mecx-filter-selected-item-currency *ngSwitchCase=\"'currency'\" [option]=\"_option\">\n </mecx-filter-selected-item-currency>\n <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-range'\" [option]=\"_option\">\n </mecx-filter-selected-item-date-range>\n <mecx-filter-selected-item-status *ngSwitchCase=\"'status'\" [option]=\"_option\"\n [labelMoreValues]=\"'FIELD.AND-MORE' | translate\">\n </mecx-filter-selected-item-status>\n </ng-container>\n </div>\n <div class=\"action\" (click)=\"onHandleShowMenu()\">\n <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n </div>\n </div>\n </ng-template>\n</ng-container>\n<ng-container\n *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\">\n <mecx-filter-options [option]=\"_option\" (onClose)=\"onHandleClose()\"\n (onRemove)=\"onHandleRemove()\" (onSubmit)=\"onHandleSubmit($event)\"\n (onShowFromChildren)=\"onHandleShowFromChildren($event)\">\n </mecx-filter-options>\n</ng-container>", 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"] }]
|
|
1860
|
+
args: [{ selector: 'mecx-filter-selected-item', template: "<ng-container *ngIf=\"_option?.type as type\">\n <ng-container *ngIf=\"_option?.children; else withoutChildren\">\n <mecx-filter-selected-item-children [option]=\"_option\" (onShow)=\"onHandleShowMenu()\"\n (onRemove)=\"onHandleRemove()\">\n </mecx-filter-selected-item-children>\n </ng-container>\n <ng-template #withoutChildren>\n <div class=\"box\">\n <div class=\"data\">\n {{ _option.label | translate }}\n </div>\n <div class=\"value\" [id]=\"'mecx-filter-selected-item-'+_option?.field\"\n (click)=\"onHandleShowMenu()\">\n <ng-container [ngSwitch]=\"type\">\n <mecx-filter-selected-item-currency *ngSwitchCase=\"'currency'\" [option]=\"_option\">\n </mecx-filter-selected-item-currency>\n <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-range'\" [option]=\"_option\">\n </mecx-filter-selected-item-date-range>\n <mecx-filter-selected-item-status *ngSwitchCase=\"'status'\" [option]=\"_option\"\n [labelMoreValues]=\"'FIELD.AND-MORE' | translate\">\n </mecx-filter-selected-item-status>\n </ng-container>\n </div>\n <div class=\"action\" (click)=\"onHandleShowMenu()\">\n <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n </div>\n </div>\n </ng-template>\n</ng-container>\n<ng-container\n *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\">\n <mecx-filter-options [option]=\"_option\" (onClose)=\"onHandleClose()\"\n (onRemove)=\"onHandleRemove()\" (onSubmit)=\"onHandleSubmit($event)\"\n (onShowFromChildren)=\"onHandleShowFromChildren($event)\">\n </mecx-filter-options>\n</ng-container>", 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"] }]
|
|
1861
1861
|
}], ctorParameters: function () { return []; }, propDecorators: { option: [{
|
|
1862
1862
|
type: Input
|
|
1863
1863
|
}], onClose: [{
|
|
@@ -2034,10 +2034,10 @@ class MECXFilterMenuComponent {
|
|
|
2034
2034
|
}
|
|
2035
2035
|
}
|
|
2036
2036
|
MECXFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2037
|
-
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>\n <ng-container *ngFor=\"let menu of _model; let index = index\">\n <ng-container *ngIf=\"menu?.children; else withoutChildren\">\n <div class=\"item no-action\">\n {{ menu.label | translate }}\n </div>\n <div class=\"separator\"></div>\n <ng-container *ngFor=\"let child of menu?.children\">\n <div class=\"item children\" (click)=\"onHandleChildrenAction(menu, child)\">\n {{ child.label | translate }}\n </div>\n </ng-container>\n </ng-container>\n <ng-template #withoutChildren>\n <div class=\"item\" (click)=\"onHandleShowMenu(menu)\">\n {{ menu.label | translate }}\n </div>\n </ng-template>\n <ng-container *ngIf=\"_model[index+1]?.group as next; _model[index]?.group as current\">\n <div class=\"separator\" *ngIf=\"next !== current\"></div>\n </ng-container>\n </ng-container>\n</div>\n<ng-container\n *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'rt'\">\n <mecx-filter-options [option]=\"_menuOption\" (onClose)=\"onHandleClose()\"\n (onSubmit)=\"onHandleSubmit($event)\" [closeDirectly]=\"true\"></mecx-filter-options>\n</ng-container>", 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;width:192px;margin:4px 8px}: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 } });
|
|
2037
|
+
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>\n <ng-container *ngFor=\"let menu of _model; let index = index\">\n <ng-container *ngIf=\"menu?.children; else withoutChildren\">\n <div class=\"item no-action\">\n {{ menu.label | translate }}\n </div>\n <div class=\"separator\"></div>\n <ng-container *ngFor=\"let child of menu?.children\">\n <div class=\"item children\" (click)=\"onHandleChildrenAction(menu, child)\">\n {{ child.label | translate }}\n </div>\n </ng-container>\n </ng-container>\n <ng-template #withoutChildren>\n <div class=\"item\" (click)=\"onHandleShowMenu(menu)\">\n {{ menu.label | translate }}\n </div>\n </ng-template>\n <ng-container *ngIf=\"_model[index+1]?.group as next; _model[index]?.group as current\">\n <div class=\"separator\" *ngIf=\"next !== current\"></div>\n </ng-container>\n </ng-container>\n</div>\n<ng-container\n *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'rt'\">\n <mecx-filter-options [option]=\"_menuOption\" (onClose)=\"onHandleClose()\"\n (onSubmit)=\"onHandleSubmit($event)\" [closeDirectly]=\"true\"></mecx-filter-options>\n</ng-container>", 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}: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 } });
|
|
2038
2038
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterMenuComponent, decorators: [{
|
|
2039
2039
|
type: Component,
|
|
2040
|
-
args: [{ selector: 'mecx-filter-menu', template: "<div class=\"d-flex flex-column\" #actionElement>\n <ng-container *ngFor=\"let menu of _model; let index = index\">\n <ng-container *ngIf=\"menu?.children; else withoutChildren\">\n <div class=\"item no-action\">\n {{ menu.label | translate }}\n </div>\n <div class=\"separator\"></div>\n <ng-container *ngFor=\"let child of menu?.children\">\n <div class=\"item children\" (click)=\"onHandleChildrenAction(menu, child)\">\n {{ child.label | translate }}\n </div>\n </ng-container>\n </ng-container>\n <ng-template #withoutChildren>\n <div class=\"item\" (click)=\"onHandleShowMenu(menu)\">\n {{ menu.label | translate }}\n </div>\n </ng-template>\n <ng-container *ngIf=\"_model[index+1]?.group as next; _model[index]?.group as current\">\n <div class=\"separator\" *ngIf=\"next !== current\"></div>\n </ng-container>\n </ng-container>\n</div>\n<ng-container\n *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'rt'\">\n <mecx-filter-options [option]=\"_menuOption\" (onClose)=\"onHandleClose()\"\n (onSubmit)=\"onHandleSubmit($event)\" [closeDirectly]=\"true\"></mecx-filter-options>\n</ng-container>", 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;width:192px;margin:4px 8px}: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"] }]
|
|
2040
|
+
args: [{ selector: 'mecx-filter-menu', template: "<div class=\"d-flex flex-column\" #actionElement>\n <ng-container *ngFor=\"let menu of _model; let index = index\">\n <ng-container *ngIf=\"menu?.children; else withoutChildren\">\n <div class=\"item no-action\">\n {{ menu.label | translate }}\n </div>\n <div class=\"separator\"></div>\n <ng-container *ngFor=\"let child of menu?.children\">\n <div class=\"item children\" (click)=\"onHandleChildrenAction(menu, child)\">\n {{ child.label | translate }}\n </div>\n </ng-container>\n </ng-container>\n <ng-template #withoutChildren>\n <div class=\"item\" (click)=\"onHandleShowMenu(menu)\">\n {{ menu.label | translate }}\n </div>\n </ng-template>\n <ng-container *ngIf=\"_model[index+1]?.group as next; _model[index]?.group as current\">\n <div class=\"separator\" *ngIf=\"next !== current\"></div>\n </ng-container>\n </ng-container>\n</div>\n<ng-container\n *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'rt'\">\n <mecx-filter-options [option]=\"_menuOption\" (onClose)=\"onHandleClose()\"\n (onSubmit)=\"onHandleSubmit($event)\" [closeDirectly]=\"true\"></mecx-filter-options>\n</ng-container>", 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}: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"] }]
|
|
2041
2041
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
2042
2042
|
type: Input
|
|
2043
2043
|
}], onClose: [{
|
|
@@ -2048,6 +2048,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2048
2048
|
|
|
2049
2049
|
class MECXFilterComponent {
|
|
2050
2050
|
constructor() {
|
|
2051
|
+
this.searchPlaceholder = '';
|
|
2052
|
+
this.orderPlaceholder = '';
|
|
2051
2053
|
this.menus = [];
|
|
2052
2054
|
this.orders = [];
|
|
2053
2055
|
this.isLoading = false;
|
|
@@ -2131,11 +2133,15 @@ class MECXFilterComponent {
|
|
|
2131
2133
|
}
|
|
2132
2134
|
}
|
|
2133
2135
|
MECXFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2134
|
-
MECXFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterComponent, selector: "mecx-filter", inputs: { menus: "menus", orders: "orders", search: "search", order: "order", isLoading: "isLoading" }, outputs: { onFilter: "onFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column full-width\">\n <div class=\"d-flex flex-column flex-md-row justify-content-between\">\n <div class=\"d-flex full-width\">\n <monkey-input-filter [placeholder]=\"
|
|
2136
|
+
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", search: "search", order: "order", isLoading: "isLoading" }, outputs: { onFilter: "onFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column full-width\">\n <div class=\"d-flex flex-column flex-md-row justify-content-between\">\n <div class=\"d-flex full-width\">\n <monkey-input-filter [placeholder]=\"searchPlaceholder | translate\"\n (onChange)=\"onSearchFilter($event)\" icon=\"search-16\" iconPosition=\"left\"\n [(value)]=\"_search\">\n </monkey-input-filter>\n <ng-container *ngIf=\"!_hasFilterByMenu\">\n <div class=\"d-flex actions\" id=\"mecx-filters-add-filter\">\n <monkey-button type=\"filter\" color=\"border\" (click)=\"onHandleShowMenu()\" icon=\"more-16\"\n iconPosition=\"right\">\n {{ 'BUTTONS.ADD-FILTER' | translate }}\n </monkey-button>\n </div>\n </ng-container>\n </div>\n <div class=\"order hidden-sm hidden-xs\">\n <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"_hasFilterByMenu\">\n <div class=\"separator\"></div>\n <div class=\"d-flex full-width\">\n <mecx-filter-selected (onSubmit)=\"onHandleSubmit($event)\" (onClose)=\"onHandleClose()\"\n [model]=\"menus\"></mecx-filter-selected>\n <div class=\"more-filters\">\n <monkey-button type=\"filter\" color=\"border\" icon=\"more-16\" id=\"mecx-filters-add-filter\"\n (click)=\"onHandleShowMenu()\">\n </monkey-button>\n </div>\n </div>\n </ng-container>\n <div class=\"order hidden-md hidden-lg\">\n <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n </div>\n</div>\n\n<mecx-filter-menu\n *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\n (onSubmit)=\"onHandleSubmit($event)\" (onClose)=\"onHandleClose()\" [model]=\"menus\">\n</mecx-filter-menu>\n\n<ng-template #orderBy>\n <monkey-select-filter (onChange)=\"onHandleOrder($event)\" [placeholder]=\"orderPlaceholder | translate\" type=\"none\"\n [(value)]=\"_order\">\n <monkey-option *ngFor=\"let ordBy of orders\" [label]=\"ordBy?.label\" [value]=\"ordBy?.value\">\n </monkey-option>\n </monkey-select-filter>\n</ng-template>", styles: [":host{display:flex;width:100%;align-items: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{margin-left:8px}:host .actions ::ng-deep monkey-button button{width:170px}}:host .more-filters ::ng-deep monkey-button monkey-icon{margin-right:unset!important}@media screen and (min-width: 960px){:host .order{width:230px}}@media screen and (max-width: 959px){:host .order{margin-top:8px}}:host ::ng-deep monkey-button{margin-bottom:0}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:40px;margin:0}@media screen and (min-width: 960px){:host ::ng-deep monkey-input-filter{width:464px}}: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"] }], 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 } });
|
|
2135
2137
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterComponent, decorators: [{
|
|
2136
2138
|
type: Component,
|
|
2137
|
-
args: [{ selector: 'mecx-filter', template: "<div class=\"d-flex flex-column full-width\">\n <div class=\"d-flex flex-column flex-md-row justify-content-between\">\n <div class=\"d-flex full-width\">\n <monkey-input-filter [placeholder]=\"
|
|
2138
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
2139
|
+
args: [{ selector: 'mecx-filter', template: "<div class=\"d-flex flex-column full-width\">\n <div class=\"d-flex flex-column flex-md-row justify-content-between\">\n <div class=\"d-flex full-width\">\n <monkey-input-filter [placeholder]=\"searchPlaceholder | translate\"\n (onChange)=\"onSearchFilter($event)\" icon=\"search-16\" iconPosition=\"left\"\n [(value)]=\"_search\">\n </monkey-input-filter>\n <ng-container *ngIf=\"!_hasFilterByMenu\">\n <div class=\"d-flex actions\" id=\"mecx-filters-add-filter\">\n <monkey-button type=\"filter\" color=\"border\" (click)=\"onHandleShowMenu()\" icon=\"more-16\"\n iconPosition=\"right\">\n {{ 'BUTTONS.ADD-FILTER' | translate }}\n </monkey-button>\n </div>\n </ng-container>\n </div>\n <div class=\"order hidden-sm hidden-xs\">\n <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"_hasFilterByMenu\">\n <div class=\"separator\"></div>\n <div class=\"d-flex full-width\">\n <mecx-filter-selected (onSubmit)=\"onHandleSubmit($event)\" (onClose)=\"onHandleClose()\"\n [model]=\"menus\"></mecx-filter-selected>\n <div class=\"more-filters\">\n <monkey-button type=\"filter\" color=\"border\" icon=\"more-16\" id=\"mecx-filters-add-filter\"\n (click)=\"onHandleShowMenu()\">\n </monkey-button>\n </div>\n </div>\n </ng-container>\n <div class=\"order hidden-md hidden-lg\">\n <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n </div>\n</div>\n\n<mecx-filter-menu\n *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\n (onSubmit)=\"onHandleSubmit($event)\" (onClose)=\"onHandleClose()\" [model]=\"menus\">\n</mecx-filter-menu>\n\n<ng-template #orderBy>\n <monkey-select-filter (onChange)=\"onHandleOrder($event)\" [placeholder]=\"orderPlaceholder | translate\" type=\"none\"\n [(value)]=\"_order\">\n <monkey-option *ngFor=\"let ordBy of orders\" [label]=\"ordBy?.label\" [value]=\"ordBy?.value\">\n </monkey-option>\n </monkey-select-filter>\n</ng-template>", styles: [":host{display:flex;width:100%;align-items: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{margin-left:8px}:host .actions ::ng-deep monkey-button button{width:170px}}:host .more-filters ::ng-deep monkey-button monkey-icon{margin-right:unset!important}@media screen and (min-width: 960px){:host .order{width:230px}}@media screen and (max-width: 959px){:host .order{margin-top:8px}}:host ::ng-deep monkey-button{margin-bottom:0}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:40px;margin:0}@media screen and (min-width: 960px){:host ::ng-deep monkey-input-filter{width:464px}}:host .separator{border-bottom:1px solid #ebebeb;margin-top:16px;margin-bottom:16px}\n"] }]
|
|
2140
|
+
}], ctorParameters: function () { return []; }, propDecorators: { searchPlaceholder: [{
|
|
2141
|
+
type: Input
|
|
2142
|
+
}], orderPlaceholder: [{
|
|
2143
|
+
type: Input
|
|
2144
|
+
}], menus: [{
|
|
2139
2145
|
type: Input
|
|
2140
2146
|
}], orders: [{
|
|
2141
2147
|
type: Input
|