monkey-front-components 0.0.297 → 0.0.300

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.
@@ -2041,6 +2041,7 @@ class MECXFilterComponent {
2041
2041
  this.orderPlaceholder = '';
2042
2042
  this.menus = [];
2043
2043
  this.orders = [];
2044
+ this.enableSearch = true;
2044
2045
  this.isLoading = false;
2045
2046
  this.onFilter = new EventEmitter();
2046
2047
  this._order = null;
@@ -2120,10 +2121,10 @@ class MECXFilterComponent {
2120
2121
  }
2121
2122
  }
2122
2123
  MECXFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2123
- 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 } });
2124
+ MECXFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterComponent, selector: "mecx-filter", inputs: { searchPlaceholder: "searchPlaceholder", orderPlaceholder: "orderPlaceholder", menus: "menus", orders: "orders", enableSearch: "enableSearch", 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 <ng-container *ngIf=\"enableSearch\">\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>\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 } });
2124
2125
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterComponent, decorators: [{
2125
2126
  type: Component,
2126
- 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"] }]
2127
+ 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 <ng-container *ngIf=\"enableSearch\">\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>\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"] }]
2127
2128
  }], ctorParameters: function () { return []; }, propDecorators: { searchPlaceholder: [{
2128
2129
  type: Input
2129
2130
  }], orderPlaceholder: [{
@@ -2132,6 +2133,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
2132
2133
  type: Input
2133
2134
  }], orders: [{
2134
2135
  type: Input
2136
+ }], enableSearch: [{
2137
+ type: Input
2135
2138
  }], search: [{
2136
2139
  type: Input
2137
2140
  }], order: [{