monkey-front-components 0.0.445 → 0.0.447

package/fesm2020/monkey-front-components.mjs

@@ -1655,10 +1655,10 @@ class MECXFilterOptionsStatusComponent {
     }
 }
 MECXFilterOptionsStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterOptionsStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let op of option?.values\">\r\n  <div class=\"content-status d-flex flex-column\">\r\n    <div class=\"d-flex justify-content-center align-items-center\">\r\n      <monkey-checkbox type=\"multiple\"\r\n        [description]=\"op?.description | translate\" [value]=\"onHandleChecked(op?.value)\"\r\n        (click)=\"onChangeFilter($event, op?.value)\">\r\n      </monkey-checkbox>\r\n      <span class=\"helper\" *ngIf=\"op?.helperMessage\">{{ op?.helperMessage }}</span>\r\n    </div>\r\n    <span class=\"info\" *ngIf=\"op?.infoMessage\">{{ op?.infoMessage }}</span>\r\n  </div>\r\n</ng-container>", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host .content-status{margin:6px 0}:host .content-status .helper{margin-bottom:4px;margin-left:12;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6}:host .content-status .info{margin-left:24px;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:6px 0!important}\n"], components: [{ type: i1$2.MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["label", "type", "helperMessage", "infoMessage", "errorMessage", "description", "value"], outputs: ["onChange"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$3.TranslatePipe } });
+MECXFilterOptionsStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let op of option?.values\">\r\n  <div class=\"content-status d-flex flex-column\">\r\n    <div class=\"d-flex justify-content-center align-items-center gap\">\r\n      <monkey-checkbox type=\"multiple\"\r\n        [description]=\"op?.description | translate\" [value]=\"onHandleChecked(op?.value)\"\r\n        (click)=\"onChangeFilter($event, op?.value)\">\r\n      </monkey-checkbox>\r\n      <span class=\"helper\" *ngIf=\"op?.helperMessage\">{{ op?.helperMessage }}</span>\r\n    </div>\r\n    <span class=\"info\" *ngIf=\"op?.infoMessage\">{{ op?.infoMessage }}</span>\r\n  </div>\r\n</ng-container>", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host .content-status{margin:6px 0}:host .content-status .gap{gap:6px}:host .content-status .helper{margin-bottom:4px;margin-left:12;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;text-align:right}:host .content-status .info{margin-left:24px;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;margin-top:-8px}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:6px 0!important}\n"], components: [{ type: i1$2.MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["label", "type", "helperMessage", "infoMessage", "errorMessage", "description", "value"], outputs: ["onChange"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mecx-filter-options-status', template: "<ng-container *ngFor=\"let op of option?.values\">\r\n  <div class=\"content-status d-flex flex-column\">\r\n    <div class=\"d-flex justify-content-center align-items-center\">\r\n      <monkey-checkbox type=\"multiple\"\r\n        [description]=\"op?.description | translate\" [value]=\"onHandleChecked(op?.value)\"\r\n        (click)=\"onChangeFilter($event, op?.value)\">\r\n      </monkey-checkbox>\r\n      <span class=\"helper\" *ngIf=\"op?.helperMessage\">{{ op?.helperMessage }}</span>\r\n    </div>\r\n    <span class=\"info\" *ngIf=\"op?.infoMessage\">{{ op?.infoMessage }}</span>\r\n  </div>\r\n</ng-container>", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host .content-status{margin:6px 0}:host .content-status .helper{margin-bottom:4px;margin-left:12;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6}:host .content-status .info{margin-left:24px;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:6px 0!important}\n"] }]
+            args: [{ selector: 'mecx-filter-options-status', template: "<ng-container *ngFor=\"let op of option?.values\">\r\n  <div class=\"content-status d-flex flex-column\">\r\n    <div class=\"d-flex justify-content-center align-items-center gap\">\r\n      <monkey-checkbox type=\"multiple\"\r\n        [description]=\"op?.description | translate\" [value]=\"onHandleChecked(op?.value)\"\r\n        (click)=\"onChangeFilter($event, op?.value)\">\r\n      </monkey-checkbox>\r\n      <span class=\"helper\" *ngIf=\"op?.helperMessage\">{{ op?.helperMessage }}</span>\r\n    </div>\r\n    <span class=\"info\" *ngIf=\"op?.infoMessage\">{{ op?.infoMessage }}</span>\r\n  </div>\r\n</ng-container>", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host .content-status{margin:6px 0}:host .content-status .gap{gap:6px}:host .content-status .helper{margin-bottom:4px;margin-left:12;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;text-align:right}:host .content-status .info{margin-left:24px;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;margin-top:-8px}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:6px 0!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { option: [{
                 type: Input
             }], onSubmit: [{
@@ -1837,13 +1837,13 @@ class MECXFilterOptionsComponent extends BaseComponent {
     }
     ngOnInit() {
         const { option } = this;
-        option?.values$()?.pipe(takeUntil(this.__unsubscribeAll)).subscribe((data) => {
+        option?.values$?.()?.pipe(takeUntil(this.__unsubscribeAll)).subscribe((data) => {
             this.option.values = data;
         });
-        option?.pagination$()?.pipe(takeUntil(this.__unsubscribeAll)).subscribe((data) => {
+        option?.pagination$?.()?.pipe(takeUntil(this.__unsubscribeAll)).subscribe((data) => {
             this._hasMoreValues = !!(data?.next);
         });
-        option?.control$()?.pipe(takeUntil(this.__unsubscribeAll)).subscribe((data) => {
+        option?.control$?.()?.pipe(takeUntil(this.__unsubscribeAll)).subscribe((data) => {
             this.onHandleLoading(data?.isLoading);
         });
     }
@@ -1878,10 +1878,10 @@ class MECXFilterOptionsComponent extends BaseComponent {
     }
 }
 MECXFilterOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsComponent, selector: "mecx-filter-options", inputs: { option: "option", closeDirectly: "closeDirectly" }, outputs: { onClose: "onClose", onRemove: "onRemove", onSubmit: "onSubmit", onShowFromChildren: "onShowFromChildren" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between header\">\r\n  <span class=\"title\">\r\n    {{ option?.label | translate }}\r\n  </span>\r\n  <div class=\"close\" #actionElement (click)=\"onHandleShowMenu()\">\r\n    <monkey-icon icon=\"close-12\" color=\"#474747\"></monkey-icon>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"option?.type as type\">\r\n  <ng-container *ngIf=\"option?.children; else withoutChildren\">\r\n    <mecx-filter-options-children [option]=\"option\" (onSubmit)=\"onHandleSubmitChildren($event)\"\r\n      (onShow)=\"onShowFromChildren.next($event)\">\r\n    </mecx-filter-options-children>\r\n  </ng-container>\r\n  <ng-template #withoutChildren>\r\n    <ng-container [ngSwitch]=\"type\">\r\n      <mecx-filter-options-status *ngSwitchCase=\"'status'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-status>\r\n      <mecx-filter-options-date-range *ngSwitchCase=\"'date-range'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-date-range>\r\n      <mecx-filter-options-currency *ngSwitchCase=\"'currency'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-currency>\r\n      <mecx-filter-options-input *ngSwitchCase=\"'input'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-input>\r\n    </ng-container>\r\n  </ng-template>\r\n</ng-container>\r\n\r\n<div class=\"box-loading\" *ngIf=\"_isLoading\">\r\n  <div class=\"loading\"></div>\r\n  <div class=\"loading\"></div>\r\n  <div class=\"loading\"></div>\r\n</div>\r\n\r\n<div class=\"footer\" *ngIf=\"_hasMoreValues && !_isLoading\">\r\n  <monkey-button type=\"tertiary\" color=\"theme\" [label]=\"'BUTTONS.LOAD-MORE' | translate\"\r\n    (click)=\"onHandleLoadMoreValues()\">\r\n  </monkey-button>\r\n</div>\r\n\r\n<ng-container\r\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\">\r\n  <div class=\"close-menu\">\r\n    <monkey-button type=\"tertiary\" color=\"error\" (click)=\"onRemove.next()\" size=\"sm\">\r\n      {{ 'BUTTONS.REMOVE' | translate }}\r\n    </monkey-button>\r\n    <monkey-button type=\"tertiary\" color=\"theme\" (click)=\"onClose.next()\" size=\"sm\">\r\n      {{ 'BUTTONS.CLOSE' | translate }}\r\n    </monkey-button>\r\n  </div>\r\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:8px!important;margin:0 8px}:host .header{border-bottom:1px solid #d6d6d6;padding:8px}:host .header .title{color:#4b4a53;font-style:normal;font-size:14px;line-height:16px;font-weight:500;text-align:left}:host .header .close{cursor:pointer;border-radius:120px;padding:4px}:host .header .close:hover{background-color:#6d6d6d0c}:host .box-loaing{display:flex;flex-direction:column;gap:12px}:host .footer ::ng-deep monkey-button{width:100%}:host .footer ::ng-deep monkey-button button{width:100%}:host .loading:empty{margin-top:4px;height:24px;width:100%}:host .loading:empty{animation:loading 1.1s infinite linear;background:#ebebeb;background-image:linear-gradient(to right,#ebebeb 0%,#f2f3f5 20%,#ebebeb 40%,#ebebeb 100%);background-repeat:no-repeat}@keyframes loading{0%{background-position:-100px}to{background-position:500px}}.close-menu{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px;padding:8px}.close-menu ::ng-deep monkey-button{width:100%}.close-menu ::ng-deep monkey-button button{width:100%}\n"], components: [{ type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }, { type: MECXFilterOptionsChildrenComponent, selector: "mecx-filter-options-children", inputs: ["option"], outputs: ["onSubmit", "onShow"] }, { type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsDateRangeComponent, selector: "mecx-filter-options-date-range", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsCurrencyComponent, selector: "mecx-filter-options-currency", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsInputComponent, selector: "mecx-filter-options-input", inputs: ["option"], outputs: ["onSubmit"] }, { type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }], pipes: { "translate": i1$3.TranslatePipe } });
+MECXFilterOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsComponent, selector: "mecx-filter-options", inputs: { option: "option", closeDirectly: "closeDirectly" }, outputs: { onClose: "onClose", onRemove: "onRemove", onSubmit: "onSubmit", onShowFromChildren: "onShowFromChildren" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between header\">\r\n  <span class=\"title\">\r\n    {{ option?.label | translate }}\r\n  </span>\r\n  <div class=\"close\" #actionElement (click)=\"onHandleShowMenu()\">\r\n    <monkey-icon icon=\"close-12\" color=\"#474747\"></monkey-icon>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"option?.type as type\">\r\n  <ng-container *ngIf=\"option?.children; else withoutChildren\">\r\n    <mecx-filter-options-children [option]=\"option\" (onSubmit)=\"onHandleSubmitChildren($event)\"\r\n      (onShow)=\"onShowFromChildren.next($event)\">\r\n    </mecx-filter-options-children>\r\n  </ng-container>\r\n  <ng-template #withoutChildren>\r\n    <ng-container [ngSwitch]=\"type\">\r\n      <mecx-filter-options-status *ngSwitchCase=\"'status'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-status>\r\n      <mecx-filter-options-date-range *ngSwitchCase=\"'date-range'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-date-range>\r\n      <mecx-filter-options-currency *ngSwitchCase=\"'currency'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-currency>\r\n      <mecx-filter-options-input *ngSwitchCase=\"'input'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-input>\r\n    </ng-container>\r\n  </ng-template>\r\n</ng-container>\r\n\r\n<div class=\"box-loading\" *ngIf=\"_isLoading\">\r\n  <div class=\"loading\"></div>\r\n  <div class=\"loading\"></div>\r\n  <div class=\"loading\"></div>\r\n</div>\r\n\r\n<div class=\"footer\" *ngIf=\"_hasMoreValues && !_isLoading\">\r\n  <monkey-button type=\"tertiary\" color=\"theme\" [label]=\"'BUTTONS.LOAD-MORE' | translate\"\r\n    (click)=\"onHandleLoadMoreValues()\">\r\n  </monkey-button>\r\n</div>\r\n\r\n<ng-container\r\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\">\r\n  <div class=\"close-menu\">\r\n    <monkey-button type=\"tertiary\" color=\"error\" (click)=\"onRemove.next()\" size=\"sm\">\r\n      {{ 'BUTTONS.REMOVE' | translate }}\r\n    </monkey-button>\r\n    <monkey-button type=\"tertiary\" color=\"theme\" (click)=\"onClose.next()\" size=\"sm\">\r\n      {{ 'BUTTONS.CLOSE' | translate }}\r\n    </monkey-button>\r\n  </div>\r\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:8px!important;margin:0 8px}:host .header{border-bottom:1px solid #d6d6d6;padding:8px}:host .header .title{color:#4b4a53;font-style:normal;font-size:14px;line-height:16px;font-weight:500;text-align:left}:host .header .close{cursor:pointer;border-radius:120px;padding:4px}:host .header .close:hover{background-color:#6d6d6d0c}:host .box-loaing{display:flex;flex-direction:column;gap:12px}:host .footer{padding:12px}:host .footer ::ng-deep monkey-button{width:100%}:host .footer ::ng-deep monkey-button button{width:100%}:host .loading:empty{margin-top:4px;height:24px;width:100%}:host .loading:empty{animation:loading 1.1s infinite linear;background:#ebebeb;background-image:linear-gradient(to right,#ebebeb 0%,#f2f3f5 20%,#ebebeb 40%,#ebebeb 100%);background-repeat:no-repeat}@keyframes loading{0%{background-position:-100px}to{background-position:500px}}.close-menu{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px;padding:8px}.close-menu ::ng-deep monkey-button{width:100%}.close-menu ::ng-deep monkey-button button{width:100%}\n"], components: [{ type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }, { type: MECXFilterOptionsChildrenComponent, selector: "mecx-filter-options-children", inputs: ["option"], outputs: ["onSubmit", "onShow"] }, { type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsDateRangeComponent, selector: "mecx-filter-options-date-range", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsCurrencyComponent, selector: "mecx-filter-options-currency", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsInputComponent, selector: "mecx-filter-options-input", inputs: ["option"], outputs: ["onSubmit"] }, { type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }], pipes: { "translate": i1$3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mecx-filter-options', template: "<div class=\"d-flex justify-content-between header\">\r\n  <span class=\"title\">\r\n    {{ option?.label | translate }}\r\n  </span>\r\n  <div class=\"close\" #actionElement (click)=\"onHandleShowMenu()\">\r\n    <monkey-icon icon=\"close-12\" color=\"#474747\"></monkey-icon>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"option?.type as type\">\r\n  <ng-container *ngIf=\"option?.children; else withoutChildren\">\r\n    <mecx-filter-options-children [option]=\"option\" (onSubmit)=\"onHandleSubmitChildren($event)\"\r\n      (onShow)=\"onShowFromChildren.next($event)\">\r\n    </mecx-filter-options-children>\r\n  </ng-container>\r\n  <ng-template #withoutChildren>\r\n    <ng-container [ngSwitch]=\"type\">\r\n      <mecx-filter-options-status *ngSwitchCase=\"'status'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-status>\r\n      <mecx-filter-options-date-range *ngSwitchCase=\"'date-range'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-date-range>\r\n      <mecx-filter-options-currency *ngSwitchCase=\"'currency'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-currency>\r\n      <mecx-filter-options-input *ngSwitchCase=\"'input'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-input>\r\n    </ng-container>\r\n  </ng-template>\r\n</ng-container>\r\n\r\n<div class=\"box-loading\" *ngIf=\"_isLoading\">\r\n  <div class=\"loading\"></div>\r\n  <div class=\"loading\"></div>\r\n  <div class=\"loading\"></div>\r\n</div>\r\n\r\n<div class=\"footer\" *ngIf=\"_hasMoreValues && !_isLoading\">\r\n  <monkey-button type=\"tertiary\" color=\"theme\" [label]=\"'BUTTONS.LOAD-MORE' | translate\"\r\n    (click)=\"onHandleLoadMoreValues()\">\r\n  </monkey-button>\r\n</div>\r\n\r\n<ng-container\r\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\">\r\n  <div class=\"close-menu\">\r\n    <monkey-button type=\"tertiary\" color=\"error\" (click)=\"onRemove.next()\" size=\"sm\">\r\n      {{ 'BUTTONS.REMOVE' | translate }}\r\n    </monkey-button>\r\n    <monkey-button type=\"tertiary\" color=\"theme\" (click)=\"onClose.next()\" size=\"sm\">\r\n      {{ 'BUTTONS.CLOSE' | translate }}\r\n    </monkey-button>\r\n  </div>\r\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:8px!important;margin:0 8px}:host .header{border-bottom:1px solid #d6d6d6;padding:8px}:host .header .title{color:#4b4a53;font-style:normal;font-size:14px;line-height:16px;font-weight:500;text-align:left}:host .header .close{cursor:pointer;border-radius:120px;padding:4px}:host .header .close:hover{background-color:#6d6d6d0c}:host .box-loaing{display:flex;flex-direction:column;gap:12px}:host .footer ::ng-deep monkey-button{width:100%}:host .footer ::ng-deep monkey-button button{width:100%}:host .loading:empty{margin-top:4px;height:24px;width:100%}:host .loading:empty{animation:loading 1.1s infinite linear;background:#ebebeb;background-image:linear-gradient(to right,#ebebeb 0%,#f2f3f5 20%,#ebebeb 40%,#ebebeb 100%);background-repeat:no-repeat}@keyframes loading{0%{background-position:-100px}to{background-position:500px}}.close-menu{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px;padding:8px}.close-menu ::ng-deep monkey-button{width:100%}.close-menu ::ng-deep monkey-button button{width:100%}\n"] }]
+            args: [{ selector: 'mecx-filter-options', template: "<div class=\"d-flex justify-content-between header\">\r\n  <span class=\"title\">\r\n    {{ option?.label | translate }}\r\n  </span>\r\n  <div class=\"close\" #actionElement (click)=\"onHandleShowMenu()\">\r\n    <monkey-icon icon=\"close-12\" color=\"#474747\"></monkey-icon>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"option?.type as type\">\r\n  <ng-container *ngIf=\"option?.children; else withoutChildren\">\r\n    <mecx-filter-options-children [option]=\"option\" (onSubmit)=\"onHandleSubmitChildren($event)\"\r\n      (onShow)=\"onShowFromChildren.next($event)\">\r\n    </mecx-filter-options-children>\r\n  </ng-container>\r\n  <ng-template #withoutChildren>\r\n    <ng-container [ngSwitch]=\"type\">\r\n      <mecx-filter-options-status *ngSwitchCase=\"'status'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-status>\r\n      <mecx-filter-options-date-range *ngSwitchCase=\"'date-range'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-date-range>\r\n      <mecx-filter-options-currency *ngSwitchCase=\"'currency'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-currency>\r\n      <mecx-filter-options-input *ngSwitchCase=\"'input'\" [option]=\"option\"\r\n        (onSubmit)=\"onHandleSubmit($event)\">\r\n      </mecx-filter-options-input>\r\n    </ng-container>\r\n  </ng-template>\r\n</ng-container>\r\n\r\n<div class=\"box-loading\" *ngIf=\"_isLoading\">\r\n  <div class=\"loading\"></div>\r\n  <div class=\"loading\"></div>\r\n  <div class=\"loading\"></div>\r\n</div>\r\n\r\n<div class=\"footer\" *ngIf=\"_hasMoreValues && !_isLoading\">\r\n  <monkey-button type=\"tertiary\" color=\"theme\" [label]=\"'BUTTONS.LOAD-MORE' | translate\"\r\n    (click)=\"onHandleLoadMoreValues()\">\r\n  </monkey-button>\r\n</div>\r\n\r\n<ng-container\r\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\">\r\n  <div class=\"close-menu\">\r\n    <monkey-button type=\"tertiary\" color=\"error\" (click)=\"onRemove.next()\" size=\"sm\">\r\n      {{ 'BUTTONS.REMOVE' | translate }}\r\n    </monkey-button>\r\n    <monkey-button type=\"tertiary\" color=\"theme\" (click)=\"onClose.next()\" size=\"sm\">\r\n      {{ 'BUTTONS.CLOSE' | translate }}\r\n    </monkey-button>\r\n  </div>\r\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:8px!important;margin:0 8px}:host .header{border-bottom:1px solid #d6d6d6;padding:8px}:host .header .title{color:#4b4a53;font-style:normal;font-size:14px;line-height:16px;font-weight:500;text-align:left}:host .header .close{cursor:pointer;border-radius:120px;padding:4px}:host .header .close:hover{background-color:#6d6d6d0c}:host .box-loaing{display:flex;flex-direction:column;gap:12px}:host .footer{padding:12px}:host .footer ::ng-deep monkey-button{width:100%}:host .footer ::ng-deep monkey-button button{width:100%}:host .loading:empty{margin-top:4px;height:24px;width:100%}:host .loading:empty{animation:loading 1.1s infinite linear;background:#ebebeb;background-image:linear-gradient(to right,#ebebeb 0%,#f2f3f5 20%,#ebebeb 40%,#ebebeb 100%);background-repeat:no-repeat}@keyframes loading{0%{background-position:-100px}to{background-position:500px}}.close-menu{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px;padding:8px}.close-menu ::ng-deep monkey-button{width:100%}.close-menu ::ng-deep monkey-button button{width:100%}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { option: [{
                 type: Input
             }], closeDirectly: [{