@natec/mef-dev-ui-kit 15.1.2 → 15.1.3

package/fesm2015/natec-mef-dev-ui-kit.mjs

@@ -10,10 +10,9 @@ import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { TAB, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes';
-import * as i1$2 from 'ngx-bootstrap/modal';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { auditTime, startWith, map } from 'rxjs/operators';
-import * as i1$3 from '@angular/cdk/bidi';
+import * as i1$2 from '@angular/cdk/bidi';
 
 /**
 * Component representing a set of collapsible panels.
@@ -2205,9 +2204,6 @@ class FillComponent {
      * Input parameter that determines whether to show the modal window.
      */
     set show(val) {
-        if (!this.fadInModal) {
-            return;
-        }
         if (val) {
             this.showModal();
         }
@@ -2217,56 +2213,80 @@ class FillComponent {
     }
     ;
     constructor() {
+        this.visible = false;
         /**
-         * Event emitter triggered when the modal window is closed.
-         * Emits a boolean value indicating whether the modal window is closed.
+         * Event emitted when the modal is change state.
+         * Emits a boolean value indicating if the modal is closed(false), or open(true).
          * Example:
          * ```
-         * <mefdev-fill-modal (isClouse)="onModalClosed($event)"></mefdev-fill-modal>
+         * <mefdev-fill-modal (visibleChange)="onModalClosed($event)"></mefdev-fill-modal>
          * ```
          */
-        this.isClouse = new EventEmitter();
+        this.visibleChange = new EventEmitter();
     }
     ngOnInit() {
     }
     /**
-   * Event emitter for when the modal is closed.
-   */
-    modalIsCloused() {
-        this.isClouse.emit(true);
+     * Shows the modal state.
+     * Return a boolean value indicating if the modal is closed(false), or open(true)
+     */
+    getModalState() {
+        return this.visible;
     }
     /**
-    * Shows the modal window.
-    */
+     * Shows the modal.
+     * Call this method to open the modal window.
+     */
     showModal() {
-        var _a;
-        (_a = this.fadInModal) === null || _a === void 0 ? void 0 : _a.show();
+        this.visible = true;
+        this.visibleChange.emit(this.visible);
     }
     /**
-     * Hides the modal window.
+     * Hides the modal.
+     * Call this method to close the modal window.
      */
     hideModal() {
-        var _a;
-        (_a = this.fadInModal) === null || _a === void 0 ? void 0 : _a.hide();
+        this.visible = false;
+        this.visibleChange.emit(this.visible);
     }
 }
 FillComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FillComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FillComponent, selector: "mefdev-fill-modal", inputs: { show: "show" }, outputs: { isClouse: "isClouse" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "fadInModal", first: true, predicate: ["fadInModal"], descendants: true }], ngImport: i0, template: " <div bsModal #fadInModal=\"bs-modal\" class=\"modal fade fill-in\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" (onHide)=\"modalIsCloused()\">\r\n    <button type=\"button\" class=\"close\" (click)=\"fadInModal.hide()\" aria-hidden=\"true\">\r\n      <i class=\"pg pg-close\"></i>\r\n    </button>\r\n    <div class=\"modal-dialog \">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n        </div>  \r\n        <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n        </div>  \r\n        <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+FillComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FillComponent, selector: "mefdev-fill-modal", inputs: { show: "show" }, outputs: { visibleChange: "visibleChange" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\t<div class=\"modal-content\">\r\n    <div class=\"modal-header clearfix text-left\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n      </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#ffffffd9;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:0;margin-left:auto;margin-right:auto;height:100%;min-width:280px;max-width:720px;background-color:#ffffffd9;padding:12px;overflow-y:auto;display:flex;align-items:center}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+        trigger('dialog', [
+            transition('void => *', [
+                style({ transform: 'scale3d(.3, .3, .3)' }),
+                animate(100)
+            ]),
+            transition('* => void', [
+                animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
+            ])
+        ])
+    ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FillComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-fill-modal', template: " <div bsModal #fadInModal=\"bs-modal\" class=\"modal fade fill-in\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" (onHide)=\"modalIsCloused()\">\r\n    <button type=\"button\" class=\"close\" (click)=\"fadInModal.hide()\" aria-hidden=\"true\">\r\n      <i class=\"pg pg-close\"></i>\r\n    </button>\r\n    <div class=\"modal-dialog \">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n        </div>  \r\n        <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n        </div>  \r\n        <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { modal_header: [{
+            args: [{ selector: 'mefdev-fill-modal', animations: [
+                        trigger('dialog', [
+                            transition('void => *', [
+                                style({ transform: 'scale3d(.3, .3, .3)' }),
+                                animate(100)
+                            ]),
+                            transition('* => void', [
+                                animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
+                            ])
+                        ])
+                    ], template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\t<div class=\"modal-content\">\r\n    <div class=\"modal-header clearfix text-left\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n      </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#ffffffd9;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:0;margin-left:auto;margin-right:auto;height:100%;min-width:280px;max-width:720px;background-color:#ffffffd9;padding:12px;overflow-y:auto;display:flex;align-items:center}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { dialog: [{
+                type: ViewChild,
+                args: ['dialog', { static: false }]
+            }], modal_header: [{
                 type: ContentChild,
                 args: ["modal_header"]
             }], modal_footer: [{
                 type: ContentChild,
                 args: ["modal_footer"]
-            }], fadInModal: [{
-                type: ViewChild,
-                args: ['fadInModal', { static: false }]
             }], show: [{
                 type: Input
-            }], isClouse: [{
+            }], visibleChange: [{
                 type: Output
             }] } });
 
@@ -2296,9 +2316,6 @@ class SlideUpComponent {
      * Set it to `true` to show the modal and `false` to hide it.
      */
     set show(val) {
-        if (!this.mdSlideUp) {
-            return;
-        }
         if (val) {
             this.showModal();
         }
@@ -2308,61 +2325,73 @@ class SlideUpComponent {
     }
     ;
     constructor() {
+        this.visible = false;
         /**
-         * Size of the modal.
-         * Defaults to `ModalSize.md`.
-         * Possible values: `ModalSize.sm`, `ModalSize.md`, `ModalSize.lg`, `ModalSize.xl`.
-         */
-        this.size = "md" /* ModalSize.md */;
-        /**
-         * Event emitted when the modal is closed.
-         * Emits a boolean value indicating if the modal is closed.
+         * Event emitted when the modal is change state.
+         * Emits a boolean value indicating if the modal is closed(false), or open(true).
          */
-        this.isClouse = new EventEmitter();
+        this.visibleChange = new EventEmitter();
     }
     ngOnInit() {
     }
     /**
-    * Event handler for when the modal is closed.
-    * Emits the `isClosed` event with a value of `true`.
-    */
-    modalIsCloused() {
-        this.isClouse.emit(true);
+     * Shows the modal state.
+     * Return a boolean value indicating if the modal is closed(false), or open(true)
+     */
+    getModalState() {
+        return this.visible;
     }
     /**
-       * Shows the modal.
-       * Call this method to open the modal window.
-       */
+     * Shows the modal.
+     * Call this method to open the modal window.
+     */
     showModal() {
-        this.mdSlideUp.show();
+        this.visible = true;
+        this.visibleChange.emit(this.visible);
     }
     /**
      * Hides the modal.
      * Call this method to close the modal window.
      */
     hideModal() {
-        this.mdSlideUp.hide();
+        this.visible = false;
+        this.visibleChange.emit(this.visible);
     }
 }
 SlideUpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SlideUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SlideUpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SlideUpComponent, selector: "mefdev-slide-up-modal", inputs: { size: "size", show: "show" }, outputs: { isClouse: "isClouse" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "mdSlideUp", first: true, predicate: ["mdSlideUp"], descendants: true }], ngImport: i0, template: "<div bsModal #mdSlideUp=\"bs-modal\" class=\"modal fade slide-up disable-scroll\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"false\" (onHide)=\"modalIsCloused()\">\r\n    <div class=\"modal-dialog modal-{{size}}\">\r\n      <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header clearfix text-left\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+SlideUpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SlideUpComponent, selector: "mefdev-slide-up-modal", inputs: { show: "show" }, outputs: { visibleChange: "visibleChange" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], ngImport: i0, template: "<div [@dialog] *ngIf=\"visible\" class=\"dialog\">\r\n\t<button (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n\t<div class=\"modal-content\">\r\n    <div class=\"modal-header clearfix text-left\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n      </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#00000080;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:40px;margin:auto;min-height:200px;width:90%;max-width:520px;background-color:#fff;padding:12px;box-shadow:0 7px 8px -4px #0003,0 13px 19px 2px #00000024,0 5px 24px 4px #0000001f}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+        trigger('dialog', [
+            transition('void => *', [
+                style({ transform: 'scale3d(.3, .3, .3)' }),
+                animate(100)
+            ]),
+            transition('* => void', [
+                animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
+            ])
+        ])
+    ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SlideUpComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-slide-up-modal', template: "<div bsModal #mdSlideUp=\"bs-modal\" class=\"modal fade slide-up disable-scroll\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"false\" (onHide)=\"modalIsCloused()\">\r\n    <div class=\"modal-dialog modal-{{size}}\">\r\n      <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header clearfix text-left\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'mefdev-slide-up-modal', animations: [
+                        trigger('dialog', [
+                            transition('void => *', [
+                                style({ transform: 'scale3d(.3, .3, .3)' }),
+                                animate(100)
+                            ]),
+                            transition('* => void', [
+                                animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
+                            ])
+                        ])
+                    ], template: "<div [@dialog] *ngIf=\"visible\" class=\"dialog\">\r\n\t<button (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n\t<div class=\"modal-content\">\r\n    <div class=\"modal-header clearfix text-left\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n      </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#00000080;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:40px;margin:auto;min-height:200px;width:90%;max-width:520px;background-color:#fff;padding:12px;box-shadow:0 7px 8px -4px #0003,0 13px 19px 2px #00000024,0 5px 24px 4px #0000001f}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { modal_header: [{
                 type: ContentChild,
                 args: ["modal_header"]
             }], modal_footer: [{
                 type: ContentChild,
                 args: ["modal_footer"]
-            }], mdSlideUp: [{
-                type: ViewChild,
-                args: ['mdSlideUp', { static: false }]
-            }], size: [{
-                type: Input
             }], show: [{
                 type: Input
-            }], isClouse: [{
+            }], visibleChange: [{
                 type: Output
             }] } });
 
@@ -2392,9 +2421,6 @@ class SlideRightComponent {
      * Set it to `true` to show the modal and `false` to hide it.
      */
     set show(val) {
-        if (!this.slideRight) {
-            return;
-        }
         if (val) {
             this.showModal();
         }
@@ -2404,6 +2430,7 @@ class SlideRightComponent {
     }
     ;
     constructor() {
+        this.visible = false;
         /**
          * Size of the modal.
          * Defaults to `ModalSize.md`.
@@ -2411,54 +2438,80 @@ class SlideRightComponent {
          */
         this.size = "md" /* ModalSize.md */;
         /**
-         * Event emitted when the modal is closed.
-         * Emits a boolean value indicating if the modal is closed.
+         * Event emitted when the modal is change state.
+         * Emits a boolean value indicating if the modal is closed(false), or open(true).
+         * Example:
+         * ```
+         * <mefdev-fill-modal (visibleChange)="onModalClosed($event)"></mefdev-fill-modal>
+         * ```
          */
-        this.isClouse = new EventEmitter();
+        this.visibleChange = new EventEmitter();
     }
     ngOnInit() {
     }
     /**
-    * Event handler for when the modal is closed.
-    * Emits the `isClosed` event with a value of `true`.
-    */
-    modalIsCloused() {
-        this.isClouse.emit(true);
+     * Shows the modal state.
+     * Return a boolean value indicating if the modal is closed(false), or open(true)
+     */
+    getModalState() {
+        return this.visible;
     }
     /**
-    * Shows the modal.
-    * Call this method to open the modal window.
-    */
+     * Shows the modal.
+     * Call this method to open the modal window.
+     */
     showModal() {
-        this.slideRight.show();
+        this.visible = true;
+        this.visibleChange.emit(this.visible);
     }
     /**
-    * Hides the modal.
-    * Call this method to close the modal window.
-    */
+     * Hides the modal.
+     * Call this method to close the modal window.
+     */
     hideModal() {
-        this.slideRight.hide();
+        this.visible = false;
+        this.visibleChange.emit(this.visible);
     }
 }
 SlideRightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SlideRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SlideRightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SlideRightComponent, selector: "mefdev-slide-right-modal", inputs: { size: "size", show: "show" }, outputs: { isClouse: "isClouse" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "slideRight", first: true, predicate: ["slideRight"], descendants: true }], ngImport: i0, template: "<div bsModal #slideRight=\"bs-modal\" class=\"modal fade slide-right\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" (onHide)=\"modalIsCloused()\">\r\n    <div class=\"modal-dialog modal-{{size}}\">\r\n      <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header clearfix text-left\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+SlideRightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SlideRightComponent, selector: "mefdev-slide-right-modal", inputs: { size: "size", show: "show" }, outputs: { visibleChange: "visibleChange" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\r\n  <div *ngIf=\"modal_header\" class=\"header\">\r\n      <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n  </div>\r\n  <div class=\"body\">\r\n      <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"modal_footer\" class=\"footer\">\r\n      <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#0003;z-index:999}.dialog{z-index:1000;position:fixed;right:0;top:0;height:100%;width:500px;background-color:#fff;padding:16px;overflow-y:auto}@media (max-width: 768px){.dialog{width:300px}}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+        trigger('dialog', [
+            transition('void => *', [
+                style({ transform: 'translate3d(100%,0,0)' }),
+                animate(100)
+            ]),
+            transition('* => void', [
+                animate(100, style({ transform: 'translate3d(100%, 0, 0)' }))
+            ])
+        ])
+    ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SlideRightComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-slide-right-modal', template: "<div bsModal #slideRight=\"bs-modal\" class=\"modal fade slide-right\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" (onHide)=\"modalIsCloused()\">\r\n    <div class=\"modal-dialog modal-{{size}}\">\r\n      <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header clearfix text-left\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { modal_header: [{
+            args: [{ selector: 'mefdev-slide-right-modal', animations: [
+                        trigger('dialog', [
+                            transition('void => *', [
+                                style({ transform: 'translate3d(100%,0,0)' }),
+                                animate(100)
+                            ]),
+                            transition('* => void', [
+                                animate(100, style({ transform: 'translate3d(100%, 0, 0)' }))
+                            ])
+                        ])
+                    ], template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\r\n  <div *ngIf=\"modal_header\" class=\"header\">\r\n      <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n  </div>\r\n  <div class=\"body\">\r\n      <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"modal_footer\" class=\"footer\">\r\n      <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#0003;z-index:999}.dialog{z-index:1000;position:fixed;right:0;top:0;height:100%;width:500px;background-color:#fff;padding:16px;overflow-y:auto}@media (max-width: 768px){.dialog{width:300px}}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { dialog: [{
+                type: ViewChild,
+                args: ['dialog']
+            }], modal_header: [{
                 type: ContentChild,
                 args: ["modal_header"]
             }], modal_footer: [{
                 type: ContentChild,
                 args: ["modal_footer"]
-            }], slideRight: [{
-                type: ViewChild,
-                args: ['slideRight', { static: false }]
             }], size: [{
                 type: Input
             }], show: [{
                 type: Input
-            }], isClouse: [{
+            }], visibleChange: [{
                 type: Output
             }] } });
 
@@ -2495,7 +2548,7 @@ class RightFilterComponent {
     }
 }
 RightFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RightFilterComponent, deps: [{ token: FilteredFieldService }], target: i0.ɵɵFactoryTarget.Component });
-RightFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RightFilterComponent, selector: "mefdev-right-filter", ngImport: i0, template: "<div class=\"filter-btn\">\r\n    <button class=\"btn btn-secondary text-danger\" (click)=\"openModal()\"><i class=\"fa fa-filter\" aria-hidden=\"true\"></i></button>\r\n</div>\r\n\r\n<mefdev-slide-right-modal [show]=\"isOpen\" (isClouse)=\"modalIsCloused()\">\r\n    <ng-content></ng-content>\r\n</mefdev-slide-right-modal>", styles: [".filter-btn{position:fixed;top:60px;z-index:450;right:25px}\n"], dependencies: [{ kind: "component", type: SlideRightComponent, selector: "mefdev-slide-right-modal", inputs: ["size", "show"], outputs: ["isClouse"] }] });
+RightFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RightFilterComponent, selector: "mefdev-right-filter", ngImport: i0, template: "<div class=\"filter-btn\">\r\n    <button class=\"btn btn-secondary text-danger\" (click)=\"openModal()\"><i class=\"fa fa-filter\" aria-hidden=\"true\"></i></button>\r\n</div>\r\n\r\n<mefdev-slide-right-modal [show]=\"isOpen\" (isClouse)=\"modalIsCloused()\">\r\n    <ng-content></ng-content>\r\n</mefdev-slide-right-modal>", styles: [".filter-btn{position:fixed;top:60px;z-index:450;right:25px}\n"], dependencies: [{ kind: "component", type: SlideRightComponent, selector: "mefdev-slide-right-modal", inputs: ["size", "show"], outputs: ["visibleChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RightFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-right-filter', template: "<div class=\"filter-btn\">\r\n    <button class=\"btn btn-secondary text-danger\" (click)=\"openModal()\"><i class=\"fa fa-filter\" aria-hidden=\"true\"></i></button>\r\n</div>\r\n\r\n<mefdev-slide-right-modal [show]=\"isOpen\" (isClouse)=\"modalIsCloused()\">\r\n    <ng-content></ng-content>\r\n</mefdev-slide-right-modal>", styles: [".filter-btn{position:fixed;top:60px;z-index:450;right:25px}\n"] }]
@@ -3553,13 +3606,13 @@ class MefDevTabsNavComponent {
         }
     }
 }
-MefDevTabsNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabsNavComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$3.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MefDevTabsNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabsNavComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 MefDevTabsNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MefDevTabsNavComponent, selector: "mefdev-tabs-nav", inputs: { Size: "Size", Animated: "Animated", Position: "Position", HideBar: "HideBar", Type: "Type", ShowPagination: "ShowPagination", PositionMode: "PositionMode", selectedIndex: "selectedIndex" }, queries: [{ propertyName: "_tabBarExtraContent", first: true, predicate: ["tabBarExtraContent"], descendants: true, static: true }, { propertyName: "_labelWrappers", predicate: MefDevTabLabelDirective }], viewQueries: [{ propertyName: "_inkBar", first: true, predicate: MefDevTabsInkBarDirective, descendants: true, static: true }, { propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"nav-tabs-wrapper\" [class.scrolling]=\"_showPaginationControls\" #tabListContainer>\r\n    <div class=\"nav-wrap\">\r\n      <ul\r\n        class=\"nav nav-tabs nav-tabs-{{ _type }} nav-tabs-{{ _tabPosition }}\"\r\n        [class.tabs-nav-animated]=\"Animated\"\r\n        #tabList\r\n        (cdkObserveContent)=\"_onContentChanges()\"\r\n      >\r\n        <div\r\n          class=\"active-bar\"\r\n          pg-tabs-ink-bar\r\n          [hidden]=\"HideBar\"\r\n          [Animated]=\"Animated\"\r\n          [PositionMode]=\"PositionMode\"\r\n          style=\"display: block;\"\r\n        ></div>\r\n        <ng-content></ng-content>\r\n      </ul>\r\n    </div>\r\n  </div>", dependencies: [{ kind: "directive", type: MefDevTabsInkBarDirective, selector: "[pg-tabs-ink-bar]", inputs: ["Animated", "PositionMode"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabsNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-tabs-nav', encapsulation: ViewEncapsulation.None, template: "<div class=\"nav-tabs-wrapper\" [class.scrolling]=\"_showPaginationControls\" #tabListContainer>\r\n    <div class=\"nav-wrap\">\r\n      <ul\r\n        class=\"nav nav-tabs nav-tabs-{{ _type }} nav-tabs-{{ _tabPosition }}\"\r\n        [class.tabs-nav-animated]=\"Animated\"\r\n        #tabList\r\n        (cdkObserveContent)=\"_onContentChanges()\"\r\n      >\r\n        <div\r\n          class=\"active-bar\"\r\n          pg-tabs-ink-bar\r\n          [hidden]=\"HideBar\"\r\n          [Animated]=\"Animated\"\r\n          [PositionMode]=\"PositionMode\"\r\n          style=\"display: block;\"\r\n        ></div>\r\n        <ng-content></ng-content>\r\n      </ul>\r\n    </div>\r\n  </div>" }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$3.Directionality, decorators: [{
+        return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$2.Directionality, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { Size: [{