monkey-front-components 0.0.295 → 0.0.298
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/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 +8 -8
- package/fesm2015/monkey-front-components.mjs.map +1 -1
- package/fesm2020/monkey-front-components.mjs +8 -8
- package/fesm2020/monkey-front-components.mjs.map +1 -1
- package/monkey-front-components-0.0.298.tgz +0 -0
- package/package.json +3 -3
- package/monkey-front-components-0.0.295.tgz +0 -0
|
@@ -1448,10 +1448,10 @@ class MECXFilterSelectedItemChildrenComponent {
|
|
|
1448
1448
|
}
|
|
1449
1449
|
}
|
|
1450
1450
|
MECXFilterSelectedItemChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemChildrenComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1451
|
-
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"] }] });
|
|
1451
|
+
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 } });
|
|
1452
1452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemChildrenComponent, decorators: [{
|
|
1453
1453
|
type: Component,
|
|
1454
|
-
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"] }]
|
|
1454
|
+
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"] }]
|
|
1455
1455
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { option: [{
|
|
1456
1456
|
type: Input
|
|
1457
1457
|
}], onShow: [{
|
|
@@ -1555,10 +1555,10 @@ class MECXFilterOptionsChildrenComponent {
|
|
|
1555
1555
|
}
|
|
1556
1556
|
}
|
|
1557
1557
|
MECXFilterOptionsChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsChildrenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1558
|
-
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"] }] });
|
|
1558
|
+
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 } });
|
|
1559
1559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsChildrenComponent, decorators: [{
|
|
1560
1560
|
type: Component,
|
|
1561
|
-
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"] }]
|
|
1561
|
+
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"] }]
|
|
1562
1562
|
}], ctorParameters: function () { return []; }, propDecorators: { option: [{
|
|
1563
1563
|
type: Input
|
|
1564
1564
|
}], onSubmit: [{
|
|
@@ -1835,10 +1835,10 @@ class MECXFilterSelectedItemComponent {
|
|
|
1835
1835
|
}
|
|
1836
1836
|
}
|
|
1837
1837
|
MECXFilterSelectedItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1838
|
-
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 } });
|
|
1838
|
+
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 } });
|
|
1839
1839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemComponent, decorators: [{
|
|
1840
1840
|
type: Component,
|
|
1841
|
-
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"] }]
|
|
1841
|
+
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"] }]
|
|
1842
1842
|
}], ctorParameters: function () { return []; }, propDecorators: { option: [{
|
|
1843
1843
|
type: Input
|
|
1844
1844
|
}], onClose: [{
|
|
@@ -2023,10 +2023,10 @@ class MECXFilterMenuComponent {
|
|
|
2023
2023
|
}
|
|
2024
2024
|
}
|
|
2025
2025
|
MECXFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2026
|
-
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 } });
|
|
2026
|
+
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 } });
|
|
2027
2027
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterMenuComponent, decorators: [{
|
|
2028
2028
|
type: Component,
|
|
2029
|
-
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"] }]
|
|
2029
|
+
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"] }]
|
|
2030
2030
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
2031
2031
|
type: Input
|
|
2032
2032
|
}], onClose: [{
|