@natec/mef-dev-ui-kit 16.0.2 → 16.2.0

package/esm2022/lib/markup-kit/modals/slide-right/slide-right.component.mjs

@@ -1,7 +1,7 @@
 import { Component, ContentChild, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { animate, style, transition, trigger } from '@angular/animations';
 import * as i0 from "@angular/core";
-import * as i1 from "ngx-bootstrap/modal";
-import * as i2 from "@angular/common";
+import * as i1 from "@angular/common";
 /**
    * A component representing a slide-right modal window.
   *
@@ -23,6 +23,8 @@ import * as i2 from "@angular/common";
   * <example-url>https://mef.dev/ui_kit_demo/view/modals/slide-right</example-url>
   */
 export class SlideRightComponent {
+    visible = false;
+    dialog;
     /**
      * Reference to the template for the modal header.
      * Use this template to customize the header of the modal.
@@ -33,10 +35,6 @@ export class SlideRightComponent {
      * Use this template to customize the footer of the modal.
      */
     modal_footer;
-    /**
-    * Reference to the modal directive.
-    */
-    slideRight;
     /**
      * Size of the modal.
      * Defaults to `ModalSize.md`.
@@ -48,9 +46,6 @@ export 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();
         }
@@ -60,54 +55,80 @@ export class SlideRightComponent {
     }
     ;
     /**
-     * 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>
+     * ```
      */
-    isClouse = new EventEmitter();
+    visibleChange = new EventEmitter();
     constructor() { }
     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);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SlideRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", 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.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SlideRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", 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: "<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: "16.1.0", ngImport: i0, type: SlideRightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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: "<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
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGUtcmlnaHQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkta2l0LWxpYi9zcmMvbGliL21hcmt1cC1raXQvbW9kYWxzL3NsaWRlLXJpZ2h0L3NsaWRlLXJpZ2h0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWtpdC1saWIvc3JjL2xpYi9tYXJrdXAta2l0L21vZGFscy9zbGlkZS1yaWdodC9zbGlkZS1yaWdodC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBZSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFNckg7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUFtQkk7QUFNSixNQUFNLE9BQU8sbUJBQW1CO0lBRTlCOzs7T0FHRztJQUMyQixZQUFZLENBQW9CO0lBRTlEOzs7T0FHRztJQUMyQixZQUFZLENBQW9CO0lBRTdEOztNQUVFO0lBQ3lDLFVBQVUsQ0FBaUI7SUFFdkU7Ozs7T0FJRztJQUNNLElBQUksMkJBQTBCO0lBRXZDOzs7T0FHRztJQUNILElBQWEsSUFBSSxDQUFDLEdBQVk7UUFDNUIsSUFBRyxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUM7WUFDbEIsT0FBTztTQUNSO1FBRUQsSUFBRyxHQUFHLEVBQUM7WUFDTCxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7U0FDbEI7YUFDRztZQUNGLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztTQUNsQjtJQUNILENBQUM7SUFBQSxDQUFDO0lBRUY7OztPQUdHO0lBRU8sUUFBUSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7SUFFakQsZ0JBQWdCLENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7SUFFQTs7O01BR0U7SUFDSCxjQUFjO1FBQ1osSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVBOzs7TUFHRTtJQUNJLFNBQVM7UUFDZCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFQTs7O01BR0U7SUFDSSxTQUFTO1FBQ2QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN6QixDQUFDO3VHQTdFVSxtQkFBbUI7MkZBQW5CLG1CQUFtQiw4YkMvQmhDLHl2QkFlTTs7MkZEZ0JPLG1CQUFtQjtrQkFML0IsU0FBUzsrQkFDRSwwQkFBMEI7MEVBVU4sWUFBWTtzQkFBekMsWUFBWTt1QkFBQyxjQUFjO2dCQU1FLFlBQVk7c0JBQXpDLFlBQVk7dUJBQUMsY0FBYztnQkFLZ0IsVUFBVTtzQkFBckQsU0FBUzt1QkFBQyxZQUFZLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFO2dCQU9qQyxJQUFJO3NCQUFaLEtBQUs7Z0JBTU8sSUFBSTtzQkFBaEIsS0FBSztnQkFrQkksUUFBUTtzQkFBakIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVGVtcGxhdGVSZWYsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNb2RhbERpcmVjdGl2ZSB9IGZyb20gJ25neC1ib290c3RyYXAvbW9kYWwnO1xyXG5pbXBvcnQgeyBNb2RhbFNpemUgfSBmcm9tICcuLi9tb2RhbC1zaXplLmVudW0nO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7IC8vIGFkZCBmb3Igc3RhdGljIGFuYWxpemVyIGJ1ZyBmaXhcclxuXHJcblxyXG4vKipcclxuICAgKiBBIGNvbXBvbmVudCByZXByZXNlbnRpbmcgYSBzbGlkZS1yaWdodCBtb2RhbCB3aW5kb3cuXHJcbiAgKlxyXG4gICogRXhhbXBsZSBvZiB1c2FnZTpcclxuICAqXHJcbiAgKiBgYGBcclxuICAqIDxtZWZkZXYtc2xpZGUtcmlnaHQtbW9kYWwgW3NpemVdPVwiTW9kYWxTaXplLmxnXCIgW3Nob3ddPVwic2hvd01vZGFsXCI+XHJcbiAgKiAgIDxuZy10ZW1wbGF0ZSAjbW9kYWxfaGVhZGVyPlxyXG4gICogICAgIDxoND5Nb2RhbCBIZWFkZXI8L2g0PlxyXG4gICogICA8L25nLXRlbXBsYXRlPlxyXG4gICogICA8bmctdGVtcGxhdGUgI21vZGFsX2Zvb3Rlcj5cclxuICAqICAgICA8YnV0dG9uIChjbGljayk9XCJjbG9zZU1vZGFsKClcIj5DbG9zZTwvYnV0dG9uPlxyXG4gICogICA8L25nLXRlbXBsYXRlPlxyXG4gICogICA8ZGl2IGNsYXNzPVwibW9kYWwtYm9keVwiPlxyXG4gICogICAgIENvbnRlbnQgZ29lcyBoZXJlLi4uXHJcbiAgKiAgIDwvZGl2PlxyXG4gICogPC9tZWZkZXYtc2xpZGUtcmlnaHQtbW9kYWw+XHJcbiAgKiBgYGBcclxuICAqIDxleGFtcGxlLXVybD5odHRwczovL21lZi5kZXYvdWlfa2l0X2RlbW8vdmlldy9tb2RhbHMvc2xpZGUtcmlnaHQ8L2V4YW1wbGUtdXJsPlxyXG4gICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbWVmZGV2LXNsaWRlLXJpZ2h0LW1vZGFsJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vc2xpZGUtcmlnaHQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3NsaWRlLXJpZ2h0LmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFNsaWRlUmlnaHRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICAvKipcclxuICAgKiBSZWZlcmVuY2UgdG8gdGhlIHRlbXBsYXRlIGZvciB0aGUgbW9kYWwgaGVhZGVyLlxyXG4gICAqIFVzZSB0aGlzIHRlbXBsYXRlIHRvIGN1c3RvbWl6ZSB0aGUgaGVhZGVyIG9mIHRoZSBtb2RhbC5cclxuICAgKi9cclxuICBAQ29udGVudENoaWxkKFwibW9kYWxfaGVhZGVyXCIpIG1vZGFsX2hlYWRlcjogVGVtcGxhdGVSZWY8dm9pZD47XHJcblxyXG4gIC8qKlxyXG4gICAqIFJlZmVyZW5jZSB0byB0aGUgdGVtcGxhdGUgZm9yIHRoZSBtb2RhbCBmb290ZXIuXHJcbiAgICogVXNlIHRoaXMgdGVtcGxhdGUgdG8gY3VzdG9taXplIHRoZSBmb290ZXIgb2YgdGhlIG1vZGFsLlxyXG4gICAqL1xyXG4gIEBDb250ZW50Q2hpbGQoXCJtb2RhbF9mb290ZXJcIikgbW9kYWxfZm9vdGVyOiBUZW1wbGF0ZVJlZjx2b2lkPjtcclxuIFxyXG4gICAvKipcclxuICAgKiBSZWZlcmVuY2UgdG8gdGhlIG1vZGFsIGRpcmVjdGl2ZS5cclxuICAgKi9cclxuICBAVmlld0NoaWxkKCdzbGlkZVJpZ2h0JywgeyBzdGF0aWM6IGZhbHNlIH0pIHNsaWRlUmlnaHQ6IE1vZGFsRGlyZWN0aXZlO1xyXG5cclxuICAvKipcclxuICAgKiBTaXplIG9mIHRoZSBtb2RhbC5cclxuICAgKiBEZWZhdWx0cyB0byBgTW9kYWxTaXplLm1kYC5cclxuICAgKiBQb3NzaWJsZSB2YWx1ZXM6IGBNb2RhbFNpemUuc21gLCBgTW9kYWxTaXplLm1kYCwgYE1vZGFsU2l6ZS5sZ2AsIGBNb2RhbFNpemUueGxgLlxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIHNpemU6TW9kYWxTaXplID0gTW9kYWxTaXplLm1kO1xyXG5cclxuICAvKipcclxuICAgKiBGbGFnIGluZGljYXRpbmcgd2hldGhlciB0aGUgbW9kYWwgc2hvdWxkIGJlIHNob3duIG9yIGhpZGRlbi5cclxuICAgKiBTZXQgaXQgdG8gYHRydWVgIHRvIHNob3cgdGhlIG1vZGFsIGFuZCBgZmFsc2VgIHRvIGhpZGUgaXQuXHJcbiAgICovXHJcbiAgQElucHV0KCkgc2V0IHNob3codmFsOiBib29sZWFuKXtcclxuICAgIGlmKCF0aGlzLnNsaWRlUmlnaHQpe1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgaWYodmFsKXtcclxuICAgICAgdGhpcy5zaG93TW9kYWwoKTtcclxuICAgIH1cclxuICAgIGVsc2V7XHJcbiAgICAgIHRoaXMuaGlkZU1vZGFsKCk7XHJcbiAgICB9XHJcbiAgfTtcclxuXHJcbiAgLyoqXHJcbiAgICogRXZlbnQgZW1pdHRlZCB3aGVuIHRoZSBtb2RhbCBpcyBjbG9zZWQuXHJcbiAgICogRW1pdHMgYSBib29sZWFuIHZhbHVlIGluZGljYXRpbmcgaWYgdGhlIG1vZGFsIGlzIGNsb3NlZC5cclxuICAgKi9cclxuXHJcbiAgQE91dHB1dCgpIGlzQ2xvdXNlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICB9XHJcblxyXG4gICAvKipcclxuICAgKiBFdmVudCBoYW5kbGVyIGZvciB3aGVuIHRoZSBtb2RhbCBpcyBjbG9zZWQuXHJcbiAgICogRW1pdHMgdGhlIGBpc0Nsb3NlZGAgZXZlbnQgd2l0aCBhIHZhbHVlIG9mIGB0cnVlYC5cclxuICAgKi9cclxuICBtb2RhbElzQ2xvdXNlZCgpe1xyXG4gICAgdGhpcy5pc0Nsb3VzZS5lbWl0KHRydWUpO1xyXG4gIH1cclxuXHJcbiAgIC8qKlxyXG4gICAqIFNob3dzIHRoZSBtb2RhbC5cclxuICAgKiBDYWxsIHRoaXMgbWV0aG9kIHRvIG9wZW4gdGhlIG1vZGFsIHdpbmRvdy5cclxuICAgKi9cclxuICBwdWJsaWMgc2hvd01vZGFsKCl7XHJcbiAgICB0aGlzLnNsaWRlUmlnaHQuc2hvdygpO1xyXG4gIH1cclxuICAgXHJcbiAgIC8qKlxyXG4gICAqIEhpZGVzIHRoZSBtb2RhbC5cclxuICAgKiBDYWxsIHRoaXMgbWV0aG9kIHRvIGNsb3NlIHRoZSBtb2RhbCB3aW5kb3cuXHJcbiAgICovXHJcbiAgcHVibGljIGhpZGVNb2RhbCgpe1xyXG4gICAgdGhpcy5zbGlkZVJpZ2h0LmhpZGUoKTtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBic01vZGFsICNzbGlkZVJpZ2h0PVwiYnMtbW9kYWxcIiBjbGFzcz1cIm1vZGFsIGZhZGUgc2xpZGUtcmlnaHRcIiB0YWJpbmRleD1cIi0xXCIgcm9sZT1cImRpYWxvZ1wiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiIChvbkhpZGUpPVwibW9kYWxJc0Nsb3VzZWQoKVwiPlxyXG4gICAgPGRpdiBjbGFzcz1cIm1vZGFsLWRpYWxvZyBtb2RhbC17e3NpemV9fVwiPlxyXG4gICAgICA8ZGl2IGNsYXNzPVwibW9kYWwtY29udGVudC13cmFwcGVyXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cIm1vZGFsLWNvbnRlbnRcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1oZWFkZXIgY2xlYXJmaXggdGV4dC1sZWZ0XCI+XHJcbiAgICAgICAgICAgICAgICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwibW9kYWxfaGVhZGVyXCI+PC9uZy10ZW1wbGF0ZT5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1ib2R5XCI+XHJcbiAgICAgICAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibW9kYWwtZm9vdGVyXCI+XHJcbiAgICAgICAgICAgICAgICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwibW9kYWxfZm9vdGVyXCI+PC9uZy10ZW1wbGF0ZT5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGUtcmlnaHQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkta2l0LWxpYi9zcmMvbGliL21hcmt1cC1raXQvbW9kYWxzL3NsaWRlLXJpZ2h0L3NsaWRlLXJpZ2h0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWtpdC1saWIvc3JjL2xpYi9tYXJrdXAta2l0L21vZGFscy9zbGlkZS1yaWdodC9zbGlkZS1yaWdodC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBYyxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBZSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHakksT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7QUFHMUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUFtQkk7QUFpQkosTUFBTSxPQUFPLG1CQUFtQjtJQUNwQixPQUFPLEdBQVksS0FBSyxDQUFDO0lBRUosTUFBTSxDQUFhO0lBRWxEOzs7T0FHRztJQUMyQixZQUFZLENBQW9CO0lBRTlEOzs7T0FHRztJQUMyQixZQUFZLENBQW9CO0lBRTlEOzs7O09BSUc7SUFDTSxJQUFJLDJCQUEwQjtJQUV2Qzs7O09BR0c7SUFDSCxJQUFhLElBQUksQ0FBQyxHQUFZO1FBQzVCLElBQUcsR0FBRyxFQUFDO1lBQ0wsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1NBQ2xCO2FBQ0c7WUFDRixJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7U0FDbEI7SUFDSCxDQUFDO0lBQUEsQ0FBQztJQUVGOzs7Ozs7O09BT0c7SUFDTyxhQUFhLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztJQUV0RCxnQkFBZ0IsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQztJQUVEOzs7T0FHRztJQUNILGFBQWE7UUFDWCxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDdEIsQ0FBQztJQUVEOzs7T0FHRztJQUNJLFNBQVM7UUFDZCxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNwQixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUVEOzs7T0FHRztJQUNJLFNBQVM7UUFDZCxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztRQUNyQixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDeEMsQ0FBQzt1R0E1RVUsbUJBQW1COzJGQUFuQixtQkFBbUIsZ2NDMUNoQyxzZkFjQSxtcUJEZ0JjO1lBQ1YsT0FBTyxDQUFDLFFBQVEsRUFBRTtnQkFDaEIsVUFBVSxDQUFDLFdBQVcsRUFBRTtvQkFDdEIsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLHVCQUF1QixFQUFFLENBQUM7b0JBQzdDLE9BQU8sQ0FBQyxHQUFHLENBQUM7aUJBQ2IsQ0FBQztnQkFDRixVQUFVLENBQUMsV0FBVyxFQUFFO29CQUN0QixPQUFPLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSx5QkFBeUIsRUFBRSxDQUFDLENBQUM7aUJBQzlELENBQUM7YUFDSCxDQUFDO1NBQ0g7OzJGQUVVLG1CQUFtQjtrQkFoQi9CLFNBQVM7K0JBQ0UsMEJBQTBCLGNBR3hCO3dCQUNWLE9BQU8sQ0FBQyxRQUFRLEVBQUU7NEJBQ2hCLFVBQVUsQ0FBQyxXQUFXLEVBQUU7Z0NBQ3RCLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSx1QkFBdUIsRUFBRSxDQUFDO2dDQUM3QyxPQUFPLENBQUMsR0FBRyxDQUFDOzZCQUNiLENBQUM7NEJBQ0YsVUFBVSxDQUFDLFdBQVcsRUFBRTtnQ0FDdEIsT0FBTyxDQUFDLEdBQUcsRUFBRSxLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUseUJBQXlCLEVBQUUsQ0FBQyxDQUFDOzZCQUM5RCxDQUFDO3lCQUNILENBQUM7cUJBQ0g7MEVBSzhCLE1BQU07c0JBQXBDLFNBQVM7dUJBQUMsUUFBUTtnQkFNVyxZQUFZO3NCQUF6QyxZQUFZO3VCQUFDLGNBQWM7Z0JBTUUsWUFBWTtzQkFBekMsWUFBWTt1QkFBQyxjQUFjO2dCQU9uQixJQUFJO3NCQUFaLEtBQUs7Z0JBTU8sSUFBSTtzQkFBaEIsS0FBSztnQkFpQkksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVGVtcGxhdGVSZWYsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNb2RhbFNpemUgfSBmcm9tICcuLi9tb2RhbC1zaXplLmVudW0nO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7IC8vIGFkZCBmb3Igc3RhdGljIGFuYWxpemVyIGJ1ZyBmaXhcclxuaW1wb3J0IHsgYW5pbWF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXIgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcclxuXHJcblxyXG4vKipcclxuICAgKiBBIGNvbXBvbmVudCByZXByZXNlbnRpbmcgYSBzbGlkZS1yaWdodCBtb2RhbCB3aW5kb3cuXHJcbiAgKlxyXG4gICogRXhhbXBsZSBvZiB1c2FnZTpcclxuICAqXHJcbiAgKiBgYGBcclxuICAqIDxtZWZkZXYtc2xpZGUtcmlnaHQtbW9kYWwgW3NpemVdPVwiTW9kYWxTaXplLmxnXCIgW3Nob3ddPVwic2hvd01vZGFsXCI+XHJcbiAgKiAgIDxuZy10ZW1wbGF0ZSAjbW9kYWxfaGVhZGVyPlxyXG4gICogICAgIDxoND5Nb2RhbCBIZWFkZXI8L2g0PlxyXG4gICogICA8L25nLXRlbXBsYXRlPlxyXG4gICogICA8bmctdGVtcGxhdGUgI21vZGFsX2Zvb3Rlcj5cclxuICAqICAgICA8YnV0dG9uIChjbGljayk9XCJjbG9zZU1vZGFsKClcIj5DbG9zZTwvYnV0dG9uPlxyXG4gICogICA8L25nLXRlbXBsYXRlPlxyXG4gICogICA8ZGl2IGNsYXNzPVwibW9kYWwtYm9keVwiPlxyXG4gICogICAgIENvbnRlbnQgZ29lcyBoZXJlLi4uXHJcbiAgKiAgIDwvZGl2PlxyXG4gICogPC9tZWZkZXYtc2xpZGUtcmlnaHQtbW9kYWw+XHJcbiAgKiBgYGBcclxuICAqIDxleGFtcGxlLXVybD5odHRwczovL21lZi5kZXYvdWlfa2l0X2RlbW8vdmlldy9tb2RhbHMvc2xpZGUtcmlnaHQ8L2V4YW1wbGUtdXJsPlxyXG4gICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbWVmZGV2LXNsaWRlLXJpZ2h0LW1vZGFsJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vc2xpZGUtcmlnaHQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3NsaWRlLXJpZ2h0LmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgYW5pbWF0aW9uczogW1xyXG4gICAgdHJpZ2dlcignZGlhbG9nJywgW1xyXG4gICAgICB0cmFuc2l0aW9uKCd2b2lkID0+IConLCBbXHJcbiAgICAgICAgc3R5bGUoeyB0cmFuc2Zvcm06ICd0cmFuc2xhdGUzZCgxMDAlLDAsMCknIH0pLFxyXG4gICAgICAgIGFuaW1hdGUoMTAwKVxyXG4gICAgICBdKSxcclxuICAgICAgdHJhbnNpdGlvbignKiA9PiB2b2lkJywgW1xyXG4gICAgICAgIGFuaW1hdGUoMTAwLCBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZTNkKDEwMCUsIDAsIDApJyB9KSlcclxuICAgICAgXSlcclxuICAgIF0pXHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2xpZGVSaWdodENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgcHJvdGVjdGVkIHZpc2libGU6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQFZpZXdDaGlsZCgnZGlhbG9nJykgcHJvdGVjdGVkIGRpYWxvZzogRWxlbWVudFJlZjtcclxuXHJcbiAgLyoqXHJcbiAgICogUmVmZXJlbmNlIHRvIHRoZSB0ZW1wbGF0ZSBmb3IgdGhlIG1vZGFsIGhlYWRlci5cclxuICAgKiBVc2UgdGhpcyB0ZW1wbGF0ZSB0byBjdXN0b21pemUgdGhlIGhlYWRlciBvZiB0aGUgbW9kYWwuXHJcbiAgICovXHJcbiAgQENvbnRlbnRDaGlsZChcIm1vZGFsX2hlYWRlclwiKSBtb2RhbF9oZWFkZXI6IFRlbXBsYXRlUmVmPHZvaWQ+O1xyXG5cclxuICAvKipcclxuICAgKiBSZWZlcmVuY2UgdG8gdGhlIHRlbXBsYXRlIGZvciB0aGUgbW9kYWwgZm9vdGVyLlxyXG4gICAqIFVzZSB0aGlzIHRlbXBsYXRlIHRvIGN1c3RvbWl6ZSB0aGUgZm9vdGVyIG9mIHRoZSBtb2RhbC5cclxuICAgKi9cclxuICBAQ29udGVudENoaWxkKFwibW9kYWxfZm9vdGVyXCIpIG1vZGFsX2Zvb3RlcjogVGVtcGxhdGVSZWY8dm9pZD47XHJcblxyXG4gIC8qKlxyXG4gICAqIFNpemUgb2YgdGhlIG1vZGFsLlxyXG4gICAqIERlZmF1bHRzIHRvIGBNb2RhbFNpemUubWRgLlxyXG4gICAqIFBvc3NpYmxlIHZhbHVlczogYE1vZGFsU2l6ZS5zbWAsIGBNb2RhbFNpemUubWRgLCBgTW9kYWxTaXplLmxnYCwgYE1vZGFsU2l6ZS54bGAuXHJcbiAgICovXHJcbiAgQElucHV0KCkgc2l6ZTpNb2RhbFNpemUgPSBNb2RhbFNpemUubWQ7XHJcblxyXG4gIC8qKlxyXG4gICAqIEZsYWcgaW5kaWNhdGluZyB3aGV0aGVyIHRoZSBtb2RhbCBzaG91bGQgYmUgc2hvd24gb3IgaGlkZGVuLlxyXG4gICAqIFNldCBpdCB0byBgdHJ1ZWAgdG8gc2hvdyB0aGUgbW9kYWwgYW5kIGBmYWxzZWAgdG8gaGlkZSBpdC5cclxuICAgKi9cclxuICBASW5wdXQoKSBzZXQgc2hvdyh2YWw6IGJvb2xlYW4pe1xyXG4gICAgaWYodmFsKXtcclxuICAgICAgdGhpcy5zaG93TW9kYWwoKTtcclxuICAgIH1cclxuICAgIGVsc2V7XHJcbiAgICAgIHRoaXMuaGlkZU1vZGFsKCk7XHJcbiAgICB9XHJcbiAgfTtcclxuXHJcbiAgLyoqXHJcbiAgICogRXZlbnQgZW1pdHRlZCB3aGVuIHRoZSBtb2RhbCBpcyBjaGFuZ2Ugc3RhdGUuXHJcbiAgICogRW1pdHMgYSBib29sZWFuIHZhbHVlIGluZGljYXRpbmcgaWYgdGhlIG1vZGFsIGlzIGNsb3NlZChmYWxzZSksIG9yIG9wZW4odHJ1ZSkuXHJcbiAgICogRXhhbXBsZTpcclxuICAgKiBgYGBcclxuICAgKiA8bWVmZGV2LWZpbGwtbW9kYWwgKHZpc2libGVDaGFuZ2UpPVwib25Nb2RhbENsb3NlZCgkZXZlbnQpXCI+PC9tZWZkZXYtZmlsbC1tb2RhbD5cclxuICAgKiBgYGBcclxuICAgKi9cclxuICBAT3V0cHV0KCkgdmlzaWJsZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBTaG93cyB0aGUgbW9kYWwgc3RhdGUuXHJcbiAgICogUmV0dXJuIGEgYm9vbGVhbiB2YWx1ZSBpbmRpY2F0aW5nIGlmIHRoZSBtb2RhbCBpcyBjbG9zZWQoZmFsc2UpLCBvciBvcGVuKHRydWUpXHJcbiAgICovXHJcbiAgZ2V0TW9kYWxTdGF0ZSgpOiBib29sZWFue1xyXG4gICAgcmV0dXJuIHRoaXMudmlzaWJsZTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFNob3dzIHRoZSBtb2RhbC5cclxuICAgKiBDYWxsIHRoaXMgbWV0aG9kIHRvIG9wZW4gdGhlIG1vZGFsIHdpbmRvdy5cclxuICAgKi9cclxuICBwdWJsaWMgc2hvd01vZGFsKCl7XHJcbiAgICB0aGlzLnZpc2libGUgPSB0cnVlO1xyXG4gICAgdGhpcy52aXNpYmxlQ2hhbmdlLmVtaXQodGhpcy52aXNpYmxlKTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEhpZGVzIHRoZSBtb2RhbC5cclxuICAgKiBDYWxsIHRoaXMgbWV0aG9kIHRvIGNsb3NlIHRoZSBtb2RhbCB3aW5kb3cuXHJcbiAgICovXHJcbiAgcHVibGljIGhpZGVNb2RhbCgpe1xyXG4gICAgdGhpcy52aXNpYmxlID0gZmFsc2U7XHJcbiAgICB0aGlzLnZpc2libGVDaGFuZ2UuZW1pdCh0aGlzLnZpc2libGUpO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IFtAZGlhbG9nXSAqbmdJZj1cInZpc2libGVcIiBjbGFzcz1cImRpYWxvZ1wiICNkaWFsb2c+XHJcblxyXG4gIDxkaXYgKm5nSWY9XCJtb2RhbF9oZWFkZXJcIiBjbGFzcz1cImhlYWRlclwiPlxyXG4gICAgICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwibW9kYWxfaGVhZGVyXCI+PC9uZy10ZW1wbGF0ZT5cclxuICA8L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwiYm9keVwiPlxyXG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgPC9kaXY+XHJcbiAgPGRpdiAqbmdJZj1cIm1vZGFsX2Zvb3RlclwiIGNsYXNzPVwiZm9vdGVyXCI+XHJcbiAgICAgIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJtb2RhbF9mb290ZXJcIj48L25nLXRlbXBsYXRlPlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuXHJcbjxkaXYgKm5nSWY9XCJ2aXNpYmxlXCIgY2xhc3M9XCJvdmVybGF5XCIgKGNsaWNrKT1cImhpZGVNb2RhbCgpXCI+PC9kaXY+XHJcbiJdfQ==

package/esm2022/lib/markup-kit/modals/slide-up/slide-up.component.mjs

@@ -1,14 +1,14 @@
-import { Component, ContentChild, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, ContentChild, EventEmitter, Input, Output } from '@angular/core';
+import { animate, style, transition, trigger } from '@angular/animations';
 import * as i0 from "@angular/core";
-import * as i1 from "ngx-bootstrap/modal";
-import * as i2 from "@angular/common";
+import * as i1 from "@angular/common";
 /**
 * A component representing a slide-up modal window.
 *
 * Example of usage:
 *
 * ```
-* <mefdev-slide-up-modal [size]="ModalSize.lg" [show]="showModal">
+* <mefdev-slide-up-modal [show]="showModal">
 *   <ng-template #modal_header>
 *     <h4>Modal Header</h4>
 *   </ng-template>
@@ -23,6 +23,7 @@ import * as i2 from "@angular/common";
 * <example-url>https://mef.dev/ui_kit_demo/view/modals/slide-up</example-url>
 */
 export class SlideUpComponent {
+    visible = false;
     /**
      * Reference to the template for the modal header.
      * Use this template to customize the header of the modal.
@@ -33,24 +34,11 @@ export class SlideUpComponent {
      * Use this template to customize the footer of the modal.
      */
     modal_footer;
-    /**
-    * Reference to the modal directive.
-    */
-    mdSlideUp;
-    /**
-     * Size of the modal.
-     * Defaults to `ModalSize.md`.
-     * Possible values: `ModalSize.sm`, `ModalSize.md`, `ModalSize.lg`, `ModalSize.xl`.
-     */
-    size = "md" /* ModalSize.md */;
     /**
      * Flag indicating whether the modal should be shown or hidden.
      * Set it to `true` to show the modal and `false` to hide it.
      */
     set show(val) {
-        if (!this.mdSlideUp) {
-            return;
-        }
         if (val) {
             this.showModal();
         }
@@ -60,54 +48,71 @@ export class SlideUpComponent {
     }
     ;
     /**
-     * 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).
      */
-    isClouse = new EventEmitter();
+    visibleChange = new EventEmitter();
     constructor() { }
     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);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SlideUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", 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.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SlideUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", 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;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;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;z-index:10002;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: "16.1.0", ngImport: i0, type: SlideUpComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;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;z-index:10002;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
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGUtdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkta2l0LWxpYi9zcmMvbGliL21hcmt1cC1raXQvbW9kYWxzL3NsaWRlLXVwL3NsaWRlLXVwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWtpdC1saWIvc3JjL2xpYi9tYXJrdXAta2l0L21vZGFscy9zbGlkZS11cC9zbGlkZS11cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBZSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFLbkg7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUFtQkU7QUFNSixNQUFNLE9BQU8sZ0JBQWdCO0lBRTNCOzs7T0FHRztJQUMyQixZQUFZLENBQW9CO0lBRTlEOzs7T0FHRztJQUMyQixZQUFZLENBQW9CO0lBRTVEOztNQUVFO0lBQ3VDLFNBQVMsQ0FBaUI7SUFFckU7Ozs7T0FJRztJQUNNLElBQUksMkJBQTBCO0lBRXZDOzs7T0FHRztJQUNILElBQWEsSUFBSSxDQUFDLEdBQVk7UUFDNUIsSUFBRyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUM7WUFDakIsT0FBTztTQUNSO1FBRUQsSUFBRyxHQUFHLEVBQUM7WUFDTCxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7U0FDbEI7YUFDRztZQUNGLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztTQUNsQjtJQUNILENBQUM7SUFBQSxDQUFDO0lBRUY7OztPQUdHO0lBQ08sUUFBUSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7SUFFakQsZ0JBQWdCLENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7SUFFQTs7O01BR0U7SUFDSCxjQUFjO1FBQ1osSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUNIOzs7U0FHSztJQUNJLFNBQVM7UUFDZCxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3hCLENBQUM7SUFFRDs7O09BR0c7SUFDSSxTQUFTO1FBQ2QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN4QixDQUFDO3VHQTNFVSxnQkFBZ0I7MkZBQWhCLGdCQUFnQix5YkM5QjdCLHF3QkFlTTs7MkZEZU8sZ0JBQWdCO2tCQUw1QixTQUFTOytCQUNFLHVCQUF1QjswRUFVSCxZQUFZO3NCQUF6QyxZQUFZO3VCQUFDLGNBQWM7Z0JBTUUsWUFBWTtzQkFBekMsWUFBWTt1QkFBQyxjQUFjO2dCQUtlLFNBQVM7c0JBQW5ELFNBQVM7dUJBQUMsV0FBVyxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTtnQkFPaEMsSUFBSTtzQkFBWixLQUFLO2dCQU1PLElBQUk7c0JBQWhCLEtBQUs7Z0JBaUJJLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIFRlbXBsYXRlUmVmLCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTW9kYWxEaXJlY3RpdmUgfSBmcm9tICduZ3gtYm9vdHN0cmFwL21vZGFsJztcclxuaW1wb3J0IHsgTW9kYWxTaXplIH0gZnJvbSAnLi4vbW9kYWwtc2l6ZS5lbnVtJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiOyAvLyBhZGQgZm9yIHN0YXRpYyBhbmFsaXplciBidWcgZml4XHJcblxyXG4gIC8qKlxyXG4gICogQSBjb21wb25lbnQgcmVwcmVzZW50aW5nIGEgc2xpZGUtdXAgbW9kYWwgd2luZG93LlxyXG4gICpcclxuICAqIEV4YW1wbGUgb2YgdXNhZ2U6XHJcbiAgKiBcclxuICAqIGBgYFxyXG4gICogPG1lZmRldi1zbGlkZS11cC1tb2RhbCBbc2l6ZV09XCJNb2RhbFNpemUubGdcIiBbc2hvd109XCJzaG93TW9kYWxcIj5cclxuICAqICAgPG5nLXRlbXBsYXRlICNtb2RhbF9oZWFkZXI+XHJcbiAgKiAgICAgPGg0Pk1vZGFsIEhlYWRlcjwvaDQ+XHJcbiAgKiAgIDwvbmctdGVtcGxhdGU+XHJcbiAgKiAgIDxuZy10ZW1wbGF0ZSAjbW9kYWxfZm9vdGVyPlxyXG4gICogICAgIDxidXR0b24gKGNsaWNrKT1cImNsb3NlTW9kYWwoKVwiPkNsb3NlPC9idXR0b24+XHJcbiAgKiAgIDwvbmctdGVtcGxhdGU+XHJcbiAgKiAgIDxkaXYgY2xhc3M9XCJtb2RhbC1ib2R5XCI+XHJcbiAgKiAgICAgQ29udGVudCBnb2VzIGhlcmUuLi5cclxuICAqICAgPC9kaXY+XHJcbiAgKiA8L21lZmRldi1zbGlkZS11cC1tb2RhbD5cclxuICAqIGBgYFxyXG4gICogPGV4YW1wbGUtdXJsPmh0dHBzOi8vbWVmLmRldi91aV9raXRfZGVtby92aWV3L21vZGFscy9zbGlkZS11cDwvZXhhbXBsZS11cmw+XHJcbiAgKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdtZWZkZXYtc2xpZGUtdXAtbW9kYWwnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9zbGlkZS11cC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vc2xpZGUtdXAuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2xpZGVVcENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIC8qKlxyXG4gICAqIFJlZmVyZW5jZSB0byB0aGUgdGVtcGxhdGUgZm9yIHRoZSBtb2RhbCBoZWFkZXIuXHJcbiAgICogVXNlIHRoaXMgdGVtcGxhdGUgdG8gY3VzdG9taXplIHRoZSBoZWFkZXIgb2YgdGhlIG1vZGFsLlxyXG4gICAqL1xyXG4gIEBDb250ZW50Q2hpbGQoXCJtb2RhbF9oZWFkZXJcIikgbW9kYWxfaGVhZGVyOiBUZW1wbGF0ZVJlZjx2b2lkPjtcclxuICBcclxuICAvKipcclxuICAgKiBSZWZlcmVuY2UgdG8gdGhlIHRlbXBsYXRlIGZvciB0aGUgbW9kYWwgZm9vdGVyLlxyXG4gICAqIFVzZSB0aGlzIHRlbXBsYXRlIHRvIGN1c3RvbWl6ZSB0aGUgZm9vdGVyIG9mIHRoZSBtb2RhbC5cclxuICAgKi9cclxuICBAQ29udGVudENoaWxkKFwibW9kYWxfZm9vdGVyXCIpIG1vZGFsX2Zvb3RlcjogVGVtcGxhdGVSZWY8dm9pZD47XHJcblxyXG4gICAgLyoqXHJcbiAgICAqIFJlZmVyZW5jZSB0byB0aGUgbW9kYWwgZGlyZWN0aXZlLlxyXG4gICAgKi9cclxuICBAVmlld0NoaWxkKCdtZFNsaWRlVXAnLCB7IHN0YXRpYzogZmFsc2UgfSkgbWRTbGlkZVVwOiBNb2RhbERpcmVjdGl2ZTtcclxuXHJcbiAgLyoqXHJcbiAgICogU2l6ZSBvZiB0aGUgbW9kYWwuXHJcbiAgICogRGVmYXVsdHMgdG8gYE1vZGFsU2l6ZS5tZGAuXHJcbiAgICogUG9zc2libGUgdmFsdWVzOiBgTW9kYWxTaXplLnNtYCwgYE1vZGFsU2l6ZS5tZGAsIGBNb2RhbFNpemUubGdgLCBgTW9kYWxTaXplLnhsYC5cclxuICAgKi9cclxuICBASW5wdXQoKSBzaXplOk1vZGFsU2l6ZSA9IE1vZGFsU2l6ZS5tZDtcclxuXHJcbiAgLyoqXHJcbiAgICogRmxhZyBpbmRpY2F0aW5nIHdoZXRoZXIgdGhlIG1vZGFsIHNob3VsZCBiZSBzaG93biBvciBoaWRkZW4uXHJcbiAgICogU2V0IGl0IHRvIGB0cnVlYCB0byBzaG93IHRoZSBtb2RhbCBhbmQgYGZhbHNlYCB0byBoaWRlIGl0LlxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIHNldCBzaG93KHZhbDogYm9vbGVhbil7XHJcbiAgICBpZighdGhpcy5tZFNsaWRlVXApe1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgaWYodmFsKXtcclxuICAgICAgdGhpcy5zaG93TW9kYWwoKTtcclxuICAgIH1cclxuICAgIGVsc2V7XHJcbiAgICAgIHRoaXMuaGlkZU1vZGFsKCk7XHJcbiAgICB9XHJcbiAgfTtcclxuXHJcbiAgLyoqXHJcbiAgICogRXZlbnQgZW1pdHRlZCB3aGVuIHRoZSBtb2RhbCBpcyBjbG9zZWQuXHJcbiAgICogRW1pdHMgYSBib29sZWFuIHZhbHVlIGluZGljYXRpbmcgaWYgdGhlIG1vZGFsIGlzIGNsb3NlZC5cclxuICAgKi9cclxuICBAT3V0cHV0KCkgaXNDbG91c2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gIH1cclxuXHJcbiAgIC8qKlxyXG4gICAqIEV2ZW50IGhhbmRsZXIgZm9yIHdoZW4gdGhlIG1vZGFsIGlzIGNsb3NlZC5cclxuICAgKiBFbWl0cyB0aGUgYGlzQ2xvc2VkYCBldmVudCB3aXRoIGEgdmFsdWUgb2YgYHRydWVgLlxyXG4gICAqL1xyXG4gIG1vZGFsSXNDbG91c2VkKCl7XHJcbiAgICB0aGlzLmlzQ2xvdXNlLmVtaXQodHJ1ZSk7XHJcbiAgfVxyXG4vKipcclxuICAgKiBTaG93cyB0aGUgbW9kYWwuXHJcbiAgICogQ2FsbCB0aGlzIG1ldGhvZCB0byBvcGVuIHRoZSBtb2RhbCB3aW5kb3cuXHJcbiAgICovXHJcbiAgcHVibGljIHNob3dNb2RhbCgpe1xyXG4gICAgdGhpcy5tZFNsaWRlVXAuc2hvdygpO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogSGlkZXMgdGhlIG1vZGFsLlxyXG4gICAqIENhbGwgdGhpcyBtZXRob2QgdG8gY2xvc2UgdGhlIG1vZGFsIHdpbmRvdy5cclxuICAgKi9cclxuICBwdWJsaWMgaGlkZU1vZGFsKCl7XHJcbiAgICB0aGlzLm1kU2xpZGVVcC5oaWRlKCk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgYnNNb2RhbCAjbWRTbGlkZVVwPVwiYnMtbW9kYWxcIiBjbGFzcz1cIm1vZGFsIGZhZGUgc2xpZGUtdXAgZGlzYWJsZS1zY3JvbGxcIiB0YWJpbmRleD1cIi0xXCIgcm9sZT1cImRpYWxvZ1wiIGFyaWEtaGlkZGVuPVwiZmFsc2VcIiAob25IaWRlKT1cIm1vZGFsSXNDbG91c2VkKClcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1kaWFsb2cgbW9kYWwte3tzaXplfX1cIj5cclxuICAgICAgPGRpdiBjbGFzcz1cIm1vZGFsLWNvbnRlbnQtd3JhcHBlclwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1jb250ZW50XCI+XHJcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwibW9kYWwtaGVhZGVyIGNsZWFyZml4IHRleHQtbGVmdFwiPlxyXG4gICAgICAgICAgICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cIm1vZGFsX2hlYWRlclwiPjwvbmctdGVtcGxhdGU+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibW9kYWwtYm9keVwiPlxyXG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cIm1vZGFsLWZvb3RlclwiPlxyXG4gICAgICAgICAgICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cIm1vZGFsX2Zvb3RlclwiPjwvbmctdGVtcGxhdGU+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGUtdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkta2l0LWxpYi9zcmMvbGliL21hcmt1cC1raXQvbW9kYWxzL3NsaWRlLXVwL3NsaWRlLXVwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWtpdC1saWIvc3JjL2xpYi9tYXJrdXAta2l0L21vZGFscy9zbGlkZS11cC9zbGlkZS11cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBMEIsTUFBTSxlQUFlLENBQUM7QUFHckgsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7QUFFeEU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUFtQkU7QUFpQkosTUFBTSxPQUFPLGdCQUFnQjtJQUNqQixPQUFPLEdBQVksS0FBSyxDQUFDO0lBQ25DOzs7T0FHRztJQUMyQixZQUFZLENBQW9CO0lBRTlEOzs7T0FHRztJQUMyQixZQUFZLENBQW9CO0lBQzlEOzs7T0FHRztJQUNILElBQWEsSUFBSSxDQUFDLEdBQVk7UUFDNUIsSUFBRyxHQUFHLEVBQUM7WUFDTCxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7U0FDbEI7YUFDRztZQUNGLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztTQUNsQjtJQUNILENBQUM7SUFBQSxDQUFDO0lBRUY7OztPQUdHO0lBQ08sYUFBYSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7SUFFdEQsZ0JBQWdCLENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7SUFFRDs7O09BR0c7SUFDSCxhQUFhO1FBQ1gsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ3RCLENBQUM7SUFFRDs7O09BR0c7SUFDSSxTQUFTO1FBQ2QsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7UUFDcEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFFRDs7O09BR0c7SUFDSSxTQUFTO1FBQ2QsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7UUFDckIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3hDLENBQUM7dUdBN0RVLGdCQUFnQjsyRkFBaEIsZ0JBQWdCLDZVQ3pDN0IsK29CQWVBLGt4QkRjYztZQUNWLE9BQU8sQ0FBQyxRQUFRLEVBQUU7Z0JBQ2hCLFVBQVUsQ0FBQyxXQUFXLEVBQUU7b0JBQ3RCLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxxQkFBcUIsRUFBRSxDQUFDO29CQUMzQyxPQUFPLENBQUMsR0FBRyxDQUFDO2lCQUNiLENBQUM7Z0JBQ0YsVUFBVSxDQUFDLFdBQVcsRUFBRTtvQkFDdEIsT0FBTyxDQUFDLEdBQUcsRUFBRSxLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUscUJBQXFCLEVBQUUsQ0FBQyxDQUFDO2lCQUMxRCxDQUFDO2FBQ0gsQ0FBQztTQUNIOzsyRkFFVSxnQkFBZ0I7a0JBaEI1QixTQUFTOytCQUNFLHVCQUF1QixjQUdyQjt3QkFDVixPQUFPLENBQUMsUUFBUSxFQUFFOzRCQUNoQixVQUFVLENBQUMsV0FBVyxFQUFFO2dDQUN0QixLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUscUJBQXFCLEVBQUUsQ0FBQztnQ0FDM0MsT0FBTyxDQUFDLEdBQUcsQ0FBQzs2QkFDYixDQUFDOzRCQUNGLFVBQVUsQ0FBQyxXQUFXLEVBQUU7Z0NBQ3RCLE9BQU8sQ0FBQyxHQUFHLEVBQUUsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLHFCQUFxQixFQUFFLENBQUMsQ0FBQzs2QkFDMUQsQ0FBQzt5QkFDSCxDQUFDO3FCQUNIOzBFQVE2QixZQUFZO3NCQUF6QyxZQUFZO3VCQUFDLGNBQWM7Z0JBTUUsWUFBWTtzQkFBekMsWUFBWTt1QkFBQyxjQUFjO2dCQUtmLElBQUk7c0JBQWhCLEtBQUs7Z0JBYUksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVGVtcGxhdGVSZWYsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNb2RhbFNpemUgfSBmcm9tICcuLi9tb2RhbC1zaXplLmVudW0nO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7IC8vIGFkZCBmb3Igc3RhdGljIGFuYWxpemVyIGJ1ZyBmaXhcclxuaW1wb3J0IHsgYW5pbWF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXIgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcclxuXHJcbiAgLyoqXHJcbiAgKiBBIGNvbXBvbmVudCByZXByZXNlbnRpbmcgYSBzbGlkZS11cCBtb2RhbCB3aW5kb3cuXHJcbiAgKlxyXG4gICogRXhhbXBsZSBvZiB1c2FnZTpcclxuICAqXHJcbiAgKiBgYGBcclxuICAqIDxtZWZkZXYtc2xpZGUtdXAtbW9kYWwgW3Nob3ddPVwic2hvd01vZGFsXCI+XHJcbiAgKiAgIDxuZy10ZW1wbGF0ZSAjbW9kYWxfaGVhZGVyPlxyXG4gICogICAgIDxoND5Nb2RhbCBIZWFkZXI8L2g0PlxyXG4gICogICA8L25nLXRlbXBsYXRlPlxyXG4gICogICA8bmctdGVtcGxhdGUgI21vZGFsX2Zvb3Rlcj5cclxuICAqICAgICA8YnV0dG9uIChjbGljayk9XCJjbG9zZU1vZGFsKClcIj5DbG9zZTwvYnV0dG9uPlxyXG4gICogICA8L25nLXRlbXBsYXRlPlxyXG4gICogICA8ZGl2IGNsYXNzPVwibW9kYWwtYm9keVwiPlxyXG4gICogICAgIENvbnRlbnQgZ29lcyBoZXJlLi4uXHJcbiAgKiAgIDwvZGl2PlxyXG4gICogPC9tZWZkZXYtc2xpZGUtdXAtbW9kYWw+XHJcbiAgKiBgYGBcclxuICAqIDxleGFtcGxlLXVybD5odHRwczovL21lZi5kZXYvdWlfa2l0X2RlbW8vdmlldy9tb2RhbHMvc2xpZGUtdXA8L2V4YW1wbGUtdXJsPlxyXG4gICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbWVmZGV2LXNsaWRlLXVwLW1vZGFsJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vc2xpZGUtdXAuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3NsaWRlLXVwLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgYW5pbWF0aW9uczogW1xyXG4gICAgdHJpZ2dlcignZGlhbG9nJywgW1xyXG4gICAgICB0cmFuc2l0aW9uKCd2b2lkID0+IConLCBbXHJcbiAgICAgICAgc3R5bGUoeyB0cmFuc2Zvcm06ICdzY2FsZTNkKC4zLCAuMywgLjMpJyB9KSxcclxuICAgICAgICBhbmltYXRlKDEwMClcclxuICAgICAgXSksXHJcbiAgICAgIHRyYW5zaXRpb24oJyogPT4gdm9pZCcsIFtcclxuICAgICAgICBhbmltYXRlKDEwMCwgc3R5bGUoeyB0cmFuc2Zvcm06ICdzY2FsZTNkKC4wLCAuMCwgLjApJyB9KSlcclxuICAgICAgXSlcclxuICAgIF0pXHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2xpZGVVcENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgcHJvdGVjdGVkIHZpc2libGU6IGJvb2xlYW4gPSBmYWxzZTtcclxuICAvKipcclxuICAgKiBSZWZlcmVuY2UgdG8gdGhlIHRlbXBsYXRlIGZvciB0aGUgbW9kYWwgaGVhZGVyLlxyXG4gICAqIFVzZSB0aGlzIHRlbXBsYXRlIHRvIGN1c3RvbWl6ZSB0aGUgaGVhZGVyIG9mIHRoZSBtb2RhbC5cclxuICAgKi9cclxuICBAQ29udGVudENoaWxkKFwibW9kYWxfaGVhZGVyXCIpIG1vZGFsX2hlYWRlcjogVGVtcGxhdGVSZWY8dm9pZD47XHJcblxyXG4gIC8qKlxyXG4gICAqIFJlZmVyZW5jZSB0byB0aGUgdGVtcGxhdGUgZm9yIHRoZSBtb2RhbCBmb290ZXIuXHJcbiAgICogVXNlIHRoaXMgdGVtcGxhdGUgdG8gY3VzdG9taXplIHRoZSBmb290ZXIgb2YgdGhlIG1vZGFsLlxyXG4gICAqL1xyXG4gIEBDb250ZW50Q2hpbGQoXCJtb2RhbF9mb290ZXJcIikgbW9kYWxfZm9vdGVyOiBUZW1wbGF0ZVJlZjx2b2lkPjtcclxuICAvKipcclxuICAgKiBGbGFnIGluZGljYXRpbmcgd2hldGhlciB0aGUgbW9kYWwgc2hvdWxkIGJlIHNob3duIG9yIGhpZGRlbi5cclxuICAgKiBTZXQgaXQgdG8gYHRydWVgIHRvIHNob3cgdGhlIG1vZGFsIGFuZCBgZmFsc2VgIHRvIGhpZGUgaXQuXHJcbiAgICovXHJcbiAgQElucHV0KCkgc2V0IHNob3codmFsOiBib29sZWFuKXtcclxuICAgIGlmKHZhbCl7XHJcbiAgICAgIHRoaXMuc2hvd01vZGFsKCk7XHJcbiAgICB9XHJcbiAgICBlbHNle1xyXG4gICAgICB0aGlzLmhpZGVNb2RhbCgpO1xyXG4gICAgfVxyXG4gIH07XHJcblxyXG4gIC8qKlxyXG4gICAqIEV2ZW50IGVtaXR0ZWQgd2hlbiB0aGUgbW9kYWwgaXMgY2hhbmdlIHN0YXRlLlxyXG4gICAqIEVtaXRzIGEgYm9vbGVhbiB2YWx1ZSBpbmRpY2F0aW5nIGlmIHRoZSBtb2RhbCBpcyBjbG9zZWQoZmFsc2UpLCBvciBvcGVuKHRydWUpLlxyXG4gICAqL1xyXG4gIEBPdXRwdXQoKSB2aXNpYmxlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFNob3dzIHRoZSBtb2RhbCBzdGF0ZS5cclxuICAgKiBSZXR1cm4gYSBib29sZWFuIHZhbHVlIGluZGljYXRpbmcgaWYgdGhlIG1vZGFsIGlzIGNsb3NlZChmYWxzZSksIG9yIG9wZW4odHJ1ZSlcclxuICAgKi9cclxuICBnZXRNb2RhbFN0YXRlKCk6IGJvb2xlYW57XHJcbiAgICByZXR1cm4gdGhpcy52aXNpYmxlO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogU2hvd3MgdGhlIG1vZGFsLlxyXG4gICAqIENhbGwgdGhpcyBtZXRob2QgdG8gb3BlbiB0aGUgbW9kYWwgd2luZG93LlxyXG4gICAqL1xyXG4gIHB1YmxpYyBzaG93TW9kYWwoKXtcclxuICAgIHRoaXMudmlzaWJsZSA9IHRydWU7XHJcbiAgICB0aGlzLnZpc2libGVDaGFuZ2UuZW1pdCh0aGlzLnZpc2libGUpO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogSGlkZXMgdGhlIG1vZGFsLlxyXG4gICAqIENhbGwgdGhpcyBtZXRob2QgdG8gY2xvc2UgdGhlIG1vZGFsIHdpbmRvdy5cclxuICAgKi9cclxuICBwdWJsaWMgaGlkZU1vZGFsKCl7XHJcbiAgICB0aGlzLnZpc2libGUgPSBmYWxzZTtcclxuICAgIHRoaXMudmlzaWJsZUNoYW5nZS5lbWl0KHRoaXMudmlzaWJsZSk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgW0BkaWFsb2ddICpuZ0lmPVwidmlzaWJsZVwiIGNsYXNzPVwiZGlhbG9nXCI+XHJcblx0PGJ1dHRvbiAoY2xpY2spPVwiaGlkZU1vZGFsKClcIiBhcmlhLWxhYmVsPVwiQ2xvc2VcIiBjbGFzcz1cImRpYWxvZ19fY2xvc2UtYnRuXCI+WDwvYnV0dG9uPlxyXG5cdDxkaXYgY2xhc3M9XCJtb2RhbC1jb250ZW50XCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwibW9kYWwtaGVhZGVyIGNsZWFyZml4IHRleHQtbGVmdFwiPlxyXG4gICAgICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cIm1vZGFsX2hlYWRlclwiPjwvbmctdGVtcGxhdGU+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgICA8ZGl2IGNsYXNzPVwibW9kYWwtYm9keVwiPlxyXG4gICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgICA8L2Rpdj5cclxuICAgICAgPGRpdiBjbGFzcz1cIm1vZGFsLWZvb3RlclwiPlxyXG4gICAgICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cIm1vZGFsX2Zvb3RlclwiPjwvbmctdGVtcGxhdGU+XHJcbiAgICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuPGRpdiAqbmdJZj1cInZpc2libGVcIiBjbGFzcz1cIm92ZXJsYXlcIiAoY2xpY2spPVwiaGlkZU1vZGFsKClcIj48L2Rpdj5cclxuIl19

package/esm2022/lib/markup-kit/page-layouts/central-page/central-page.component.mjs

@@ -47,10 +47,10 @@ export class CentralPageComponent {
         catch (ex) { }
         ;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: CentralPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: CentralPageComponent, selector: "mefdev-central-page", inputs: { width: "width" }, ngImport: i0, template: "<div class=\"row align-items-center\" style=\"height: 100%;\" [ngStyle]=\"{'width': width}\">\r\n    <div class=\"col\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n  ", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CentralPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CentralPageComponent, selector: "mefdev-central-page", inputs: { width: "width" }, ngImport: i0, template: "<div class=\"row align-items-center\" style=\"height: 100%;\" [ngStyle]=\"{'width': width}\">\r\n    <div class=\"col\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n  ", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: CentralPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CentralPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-central-page', template: "<div class=\"row align-items-center\" style=\"height: 100%;\" [ngStyle]=\"{'width': width}\">\r\n    <div class=\"col\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n  " }]
         }], ctorParameters: function () { return []; }, propDecorators: { width: [{

package/esm2022/lib/markup-kit/page-layouts/central-page-row/central-page-row.component.mjs

@@ -17,10 +17,10 @@ export class CentralPageRowComponent {
     constructor() { }
     ngOnInit() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: CentralPageRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: CentralPageRowComponent, selector: "mefdev-central-page-row", ngImport: i0, template: "<div class=\"row justify-content-center\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CentralPageRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CentralPageRowComponent, selector: "mefdev-central-page-row", ngImport: i0, template: "<div class=\"row justify-content-center\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: CentralPageRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CentralPageRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-central-page-row', template: "<div class=\"row justify-content-center\">\r\n    <ng-content></ng-content>\r\n</div>" }]
         }], ctorParameters: function () { return []; } });

package/esm2022/lib/markup-kit/page-layouts/manage-page/manage-page.component.mjs

@@ -55,10 +55,10 @@ export class ManagePageComponent {
     constructor() { }
     ngOnInit() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ManagePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ManagePageComponent, selector: "mefdev-manage-page", inputs: { startTabInd: "startTabInd" }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }, { propertyName: "tabs_block", first: true, predicate: ["tabs_block"], descendants: true }], ngImport: i0, template: "<div class=\"card-tabs\">\r\n    <div class=\"row body-1 card-header\" *ngIf=\"card_title\">\r\n        <div class=\"m-2\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"row profile-page-tabs\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.card-tabs .card-header{background-color:#f3f3f3;padding:.5em;border:0}.profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ManagePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ManagePageComponent, selector: "mefdev-manage-page", inputs: { startTabInd: "startTabInd" }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }, { propertyName: "tabs_block", first: true, predicate: ["tabs_block"], descendants: true }], ngImport: i0, template: "<div class=\"card-tabs\">\r\n    <div class=\"row body-1 card-header\" *ngIf=\"card_title\">\r\n        <div class=\"m-2\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"row profile-page-tabs\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.card-tabs .card-header{background-color:#f3f3f3;padding:.5em;border:0}.profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ManagePageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ManagePageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-manage-page', template: "<div class=\"card-tabs\">\r\n    <div class=\"row body-1 card-header\" *ngIf=\"card_title\">\r\n        <div class=\"m-2\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"row profile-page-tabs\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.card-tabs .card-header{background-color:#f3f3f3;padding:.5em;border:0}.profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { card_title: [{

package/esm2022/lib/markup-kit/page-layouts/page-layouts.module.mjs

@@ -15,8 +15,8 @@ let mefDevPageLayoutsModuleComponents = [
     ManagePageComponent
 ];
 export class MefDevPageLayoutsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MefDevPageLayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: MefDevPageLayoutsModule, declarations: [ProfileComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevPageLayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevPageLayoutsModule, declarations: [ProfileComponent,
             CentralPageComponent,
             CentralPageRowComponent,
             TablePageComponent,
@@ -25,9 +25,9 @@ export class MefDevPageLayoutsModule {
             CentralPageRowComponent,
             TablePageComponent,
             ManagePageComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MefDevPageLayoutsModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevPageLayoutsModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MefDevPageLayoutsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevPageLayoutsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: mefDevPageLayoutsModuleComponents,

package/esm2022/lib/markup-kit/page-layouts/profile/profile.component.mjs

@@ -108,12 +108,12 @@ export class ProfileComponent {
             'border-bottom-left-radius': `50%`,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ProfileComponent, selector: "mefdev-profile", inputs: { name: "name", img: "img", shortDescription: "shortDescription", header: "header", circleImg: "circleImg" }, queries: [{ propertyName: "first_colum", first: true, predicate: ["first_colum"], descendants: true }, { propertyName: "second_colum", first: true, predicate: ["second_colum"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], ngImport: i0, template: "<div class=\"row profile-page\">\r\n    <div class=\"col-12 h3 mt-3\">\r\n        {{header}}\r\n    </div>\r\n    <div class=\"col-xl-3 col-lg-3 col-md-4 col-sm-12\">\r\n        <div *ngIf=\"!img || img == ''\" >\r\n            <img src=\"assets/images/md_icon.png\" height=\"124\" width=\"220\" />\r\n        </div>\r\n        <div *ngIf=\"img\" >\r\n            <img src=\"{{img}}\" alt=\"\" class=\"custom-img\" [ngStyle]=\"sizeStyle\"\r\n            />\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"col-xl-3 col-lg-4 col-md-5 col-sm-12 mt-4 mt-md-0\" >\r\n        <div class=\"row profile-name\">\r\n            <div class=\"col\">\r\n                {{name}}\r\n            </div>\r\n        </div>\r\n        <div class=\"row\">\r\n            <div class=\"col profile-description\">\r\n                {{shortDescription}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"col-xl-3 col-lg-4 col-md-5 col-sm-12 body-6 mt-4 mt-md-0\">\r\n        <ng-template [ngTemplateOutlet]=\"first_colum\"></ng-template>\r\n    </div>\r\n\r\n    <div class=\"col-xl-3 col-lg-4 col-md-5 col-sm-12 body-6 mt-4 mt-md-0\" >\r\n        <ng-template [ngTemplateOutlet]=\"second_colum\"></ng-template>\r\n    </div>\r\n\r\n</div>\r\n<div style=\"position: relative;\">\r\n    <div class=\"row profile-page-tabs\">\r\n        <ng-template [ngTemplateOutlet]=\"footer\">\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,:host::ng-deep .profile-name,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,:host::ng-deep .profile-description,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .profile-page{background-color:#f3f3f3;padding-left:10px;color:#000}:host::ng-deep .profile-description{height:7em;word-break:break-all;overflow-y:clip;margin-right:40px}:host::ng-deep .profile-name{height:2em;overflow-y:clip}:host::ng-deep .tab-content-wrapper{background-color:#fff}:host::ng-deep .profile-data-item{display:flex;margin:10px}:host::ng-deep .profile-data-item-value{font-weight:700;margin-left:.25em}:host::ng-deep .profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 53px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 53px,transparent 0%,transparent 100%);padding-top:25px}@media (max-width: 720px){:host::ng-deep .profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 63px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 63px,transparent 0%,transparent 100%);padding-top:35px}}:host::ng-deep .custom-img{max-width:224px;max-height:128px;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}:host::ng-deep .card-img{padding:0;display:flex;align-items:center;justify-content:center;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5);width:224px;height:128px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ProfileComponent, selector: "mefdev-profile", inputs: { name: "name", img: "img", shortDescription: "shortDescription", header: "header", circleImg: "circleImg" }, queries: [{ propertyName: "first_colum", first: true, predicate: ["first_colum"], descendants: true }, { propertyName: "second_colum", first: true, predicate: ["second_colum"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], ngImport: i0, template: "<div class=\"row profile-page\">\r\n    <div class=\"col-12 h3 mt-3\">\r\n        {{header}}\r\n    </div>\r\n    <div class=\"col-xl-3 col-lg-3 col-md-4 col-sm-12\">\r\n        <div *ngIf=\"!img || img == ''\" >\r\n            <img src=\"assets/images/md_icon.png\" height=\"124\" width=\"220\" />\r\n        </div>\r\n        <div *ngIf=\"img\" >\r\n            <img src=\"{{img}}\" alt=\"\" class=\"custom-img\" [ngStyle]=\"sizeStyle\"\r\n            />\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"col-xl-3 col-lg-4 col-md-5 col-sm-12 mt-4 mt-md-0\" >\r\n        <div class=\"row profile-name\">\r\n            <div class=\"col\">\r\n                {{name}}\r\n            </div>\r\n        </div>\r\n        <div class=\"row\">\r\n            <div class=\"col profile-description\">\r\n                {{shortDescription}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"col-xl-3 col-lg-4 col-md-5 col-sm-12 body-6 mt-4 mt-md-0\">\r\n        <ng-template [ngTemplateOutlet]=\"first_colum\"></ng-template>\r\n    </div>\r\n\r\n    <div class=\"col-xl-3 col-lg-4 col-md-5 col-sm-12 body-6 mt-4 mt-md-0\" >\r\n        <ng-template [ngTemplateOutlet]=\"second_colum\"></ng-template>\r\n    </div>\r\n\r\n</div>\r\n<div style=\"position: relative;\">\r\n    <div class=\"row profile-page-tabs\">\r\n        <ng-template [ngTemplateOutlet]=\"footer\">\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,:host::ng-deep .profile-name,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,:host::ng-deep .profile-description,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .profile-page{background-color:#f3f3f3;padding-left:10px;color:#000}:host::ng-deep .profile-description{height:7em;word-break:break-all;overflow-y:clip;margin-right:40px}:host::ng-deep .profile-name{height:2em;overflow-y:clip}:host::ng-deep .tab-content-wrapper{background-color:#fff}:host::ng-deep .profile-data-item{display:flex;margin:10px}:host::ng-deep .profile-data-item-value{font-weight:700;margin-left:.25em}:host::ng-deep .profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 53px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 53px,transparent 0%,transparent 100%);padding-top:25px}@media (max-width: 720px){:host::ng-deep .profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 63px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 63px,transparent 0%,transparent 100%);padding-top:35px}}:host::ng-deep .custom-img{max-width:224px;max-height:128px;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}:host::ng-deep .card-img{padding:0;display:flex;align-items:center;justify-content:center;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5);width:224px;height:128px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ProfileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-profile', template: "<div class=\"row profile-page\">\r\n    <div class=\"col-12 h3 mt-3\">\r\n        {{header}}\r\n    </div>\r\n    <div class=\"col-xl-3 col-lg-3 col-md-4 col-sm-12\">\r\n        <div *ngIf=\"!img || img == ''\" >\r\n            <img src=\"assets/images/md_icon.png\" height=\"124\" width=\"220\" />\r\n        </div>\r\n        <div *ngIf=\"img\" >\r\n            <img src=\"{{img}}\" alt=\"\" class=\"custom-img\" [ngStyle]=\"sizeStyle\"\r\n            />\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"col-xl-3 col-lg-4 col-md-5 col-sm-12 mt-4 mt-md-0\" >\r\n        <div class=\"row profile-name\">\r\n            <div class=\"col\">\r\n                {{name}}\r\n            </div>\r\n        </div>\r\n        <div class=\"row\">\r\n            <div class=\"col profile-description\">\r\n                {{shortDescription}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"col-xl-3 col-lg-4 col-md-5 col-sm-12 body-6 mt-4 mt-md-0\">\r\n        <ng-template [ngTemplateOutlet]=\"first_colum\"></ng-template>\r\n    </div>\r\n\r\n    <div class=\"col-xl-3 col-lg-4 col-md-5 col-sm-12 body-6 mt-4 mt-md-0\" >\r\n        <ng-template [ngTemplateOutlet]=\"second_colum\"></ng-template>\r\n    </div>\r\n\r\n</div>\r\n<div style=\"position: relative;\">\r\n    <div class=\"row profile-page-tabs\">\r\n        <ng-template [ngTemplateOutlet]=\"footer\">\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,:host::ng-deep .profile-name,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,:host::ng-deep .profile-description,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .profile-page{background-color:#f3f3f3;padding-left:10px;color:#000}:host::ng-deep .profile-description{height:7em;word-break:break-all;overflow-y:clip;margin-right:40px}:host::ng-deep .profile-name{height:2em;overflow-y:clip}:host::ng-deep .tab-content-wrapper{background-color:#fff}:host::ng-deep .profile-data-item{display:flex;margin:10px}:host::ng-deep .profile-data-item-value{font-weight:700;margin-left:.25em}:host::ng-deep .profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 53px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 53px,transparent 0%,transparent 100%);padding-top:25px}@media (max-width: 720px){:host::ng-deep .profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 63px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 63px,transparent 0%,transparent 100%);padding-top:35px}}:host::ng-deep .custom-img{max-width:224px;max-height:128px;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}:host::ng-deep .card-img{padding:0;display:flex;align-items:center;justify-content:center;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5);width:224px;height:128px}\n"] }]
+            args: [{ selector: 'mefdev-profile', template: "<div class=\"row profile-page\">\r\n    <div class=\"col-12 h3 mt-3\">\r\n        {{header}}\r\n    </div>\r\n    <div class=\"col-xl-3 col-lg-3 col-md-4 col-sm-12\">\r\n        <div *ngIf=\"!img || img == ''\" >\r\n            <img src=\"assets/images/md_icon.png\" height=\"124\" width=\"220\" />\r\n        </div>\r\n        <div *ngIf=\"img\" >\r\n            <img src=\"{{img}}\" alt=\"\" class=\"custom-img\" [ngStyle]=\"sizeStyle\"\r\n            />\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"col-xl-3 col-lg-4 col-md-5 col-sm-12 mt-4 mt-md-0\" >\r\n        <div class=\"row profile-name\">\r\n            <div class=\"col\">\r\n                {{name}}\r\n            </div>\r\n        </div>\r\n        <div class=\"row\">\r\n            <div class=\"col profile-description\">\r\n                {{shortDescription}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"col-xl-3 col-lg-4 col-md-5 col-sm-12 body-6 mt-4 mt-md-0\">\r\n        <ng-template [ngTemplateOutlet]=\"first_colum\"></ng-template>\r\n    </div>\r\n\r\n    <div class=\"col-xl-3 col-lg-4 col-md-5 col-sm-12 body-6 mt-4 mt-md-0\" >\r\n        <ng-template [ngTemplateOutlet]=\"second_colum\"></ng-template>\r\n    </div>\r\n\r\n</div>\r\n<div style=\"position: relative;\">\r\n    <div class=\"row profile-page-tabs\">\r\n        <ng-template [ngTemplateOutlet]=\"footer\">\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,:host::ng-deep .profile-name,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,:host::ng-deep .profile-description,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .profile-page{background-color:#f3f3f3;padding-left:10px;color:#000}:host::ng-deep .profile-description{height:7em;word-break:break-all;overflow-y:clip;margin-right:40px}:host::ng-deep .profile-name{height:2em;overflow-y:clip}:host::ng-deep .tab-content-wrapper{background-color:#fff}:host::ng-deep .profile-data-item{display:flex;margin:10px}:host::ng-deep .profile-data-item-value{font-weight:700;margin-left:.25em}:host::ng-deep .profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 53px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 53px,transparent 0%,transparent 100%);padding-top:25px}@media (max-width: 720px){:host::ng-deep .profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 63px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 63px,transparent 0%,transparent 100%);padding-top:35px}}:host::ng-deep .custom-img{max-width:224px;max-height:128px;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}:host::ng-deep .card-img{padding:0;display:flex;align-items:center;justify-content:center;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5);width:224px;height:128px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { first_colum: [{
                 type: ContentChild,
                 args: ["first_colum"]

package/esm2022/lib/markup-kit/page-layouts/table-page/table-page.component.mjs

@@ -29,10 +29,10 @@ export class TablePageComponent {
     constructor() { }
     ngOnInit() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TablePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: TablePageComponent, selector: "mefdev-table-page", queries: [{ propertyName: "filter_colum", first: true, predicate: ["filter_colum"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\r\n    <div class=\"col-12 filter-colum\">\r\n        <ng-template [ngTemplateOutlet]=\"filter_colum\"></ng-template> \r\n    </div>\r\n</div>\r\n\r\n<div class=\"table-responsive\" >\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: TablePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: TablePageComponent, selector: "mefdev-table-page", queries: [{ propertyName: "filter_colum", first: true, predicate: ["filter_colum"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\r\n    <div class=\"col-12 filter-colum\">\r\n        <ng-template [ngTemplateOutlet]=\"filter_colum\"></ng-template> \r\n    </div>\r\n</div>\r\n\r\n<div class=\"table-responsive\" >\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TablePageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: TablePageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-table-page', template: "<div class=\"row\">\r\n    <div class=\"col-12 filter-colum\">\r\n        <ng-template [ngTemplateOutlet]=\"filter_colum\"></ng-template> \r\n    </div>\r\n</div>\r\n\r\n<div class=\"table-responsive\" >\r\n    <ng-content></ng-content>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { filter_colum: [{

package/esm2022/lib/markup-kit/utils/filtered-field/filtered-field-container/filtered-field-container.component.mjs

@@ -62,10 +62,10 @@ export class FilteredFieldContainerComponent {
             this.items.push(item);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: FilteredFieldContainerComponent, deps: [{ token: i1.FilteredFieldService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: FilteredFieldContainerComponent, selector: "mefdev-filtered-field-container", ngImport: i0, template: "<div class=\"item-container\">\r\n    <mefdev-filtered-field-item *ngFor=\"let item of items\" [item]=\"item\" (discard)=\"onDiscard(item)\" (openFilter)=\"onOpenFilter(item)\"></mefdev-filtered-field-item>\r\n</div>\r\n", styles: [".item-container{display:flex;cursor:context-menu}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.FilteredFieldItemComponent, selector: "mefdev-filtered-field-item", inputs: ["item"], outputs: ["discard", "openFilter"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FilteredFieldContainerComponent, deps: [{ token: i1.FilteredFieldService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: FilteredFieldContainerComponent, selector: "mefdev-filtered-field-container", ngImport: i0, template: "<div class=\"item-container\">\r\n    <mefdev-filtered-field-item *ngFor=\"let item of items\" [item]=\"item\" (discard)=\"onDiscard(item)\" (openFilter)=\"onOpenFilter(item)\"></mefdev-filtered-field-item>\r\n</div>\r\n", styles: [".item-container{display:flex;cursor:context-menu}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.FilteredFieldItemComponent, selector: "mefdev-filtered-field-item", inputs: ["item"], outputs: ["discard", "openFilter"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: FilteredFieldContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FilteredFieldContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-filtered-field-container', template: "<div class=\"item-container\">\r\n    <mefdev-filtered-field-item *ngFor=\"let item of items\" [item]=\"item\" (discard)=\"onDiscard(item)\" (openFilter)=\"onOpenFilter(item)\"></mefdev-filtered-field-item>\r\n</div>\r\n", styles: [".item-container{display:flex;cursor:context-menu}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FilteredFieldService }]; } });

package/esm2022/lib/markup-kit/utils/filtered-field/filtered-field-item/filtered-field-item.component.mjs

@@ -55,10 +55,10 @@ export class FilteredFieldItemComponent {
     onDiscard() {
         this.discard.next(this.item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: FilteredFieldItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: FilteredFieldItemComponent, selector: "mefdev-filtered-field-item", inputs: { item: "item" }, outputs: { discard: "discard", openFilter: "openFilter" }, ngImport: i0, template: "<div class=\"item\">\r\n    <i class=\"fa fa-times\" (click)=\"onDiscard()\" style=\"margin-right: 3px; cursor: pointer;\"></i> \r\n    <span (click)=\"onOpenFilter()\">{{item.newValue}}</span>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.item{background-color:#4d4d4d;color:#fff;border-radius:5px;margin-right:7px;padding:3px 7px}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FilteredFieldItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: FilteredFieldItemComponent, selector: "mefdev-filtered-field-item", inputs: { item: "item" }, outputs: { discard: "discard", openFilter: "openFilter" }, ngImport: i0, template: "<div class=\"item\">\r\n    <i class=\"fa fa-times\" (click)=\"onDiscard()\" style=\"margin-right: 3px; cursor: pointer;\"></i> \r\n    <span (click)=\"onOpenFilter()\">{{item.newValue}}</span>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.item{background-color:#4d4d4d;color:#fff;border-radius:5px;margin-right:7px;padding:3px 7px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: FilteredFieldItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FilteredFieldItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-filtered-field-item', template: "<div class=\"item\">\r\n    <i class=\"fa fa-times\" (click)=\"onDiscard()\" style=\"margin-right: 3px; cursor: pointer;\"></i> \r\n    <span (click)=\"onOpenFilter()\">{{item.newValue}}</span>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.item{background-color:#4d4d4d;color:#fff;border-radius:5px;margin-right:7px;padding:3px 7px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { item: [{