npm - @natec/mef-dev-ui-kit - Versions diffs - 16.2.5 → 16.3.49 - Mend

@natec/mef-dev-ui-kit 16.2.5 → 16.3.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

package/fesm2022/natec-mef-dev-ui-kit.mjs CHANGED Viewed

@@ -99,10 +99,10 @@ class CollapseSetComponent {
     addTab(collapse) {
         this.panels.push(collapse);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CollapseSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CollapseSetComponent, selector: "mefdev-collapse-set", inputs: { expandAny: "expandAny", Accordion: "Accordion", Horizontal: "Horizontal" }, ngImport: i0, template: "<div class=\"card-group\" [class.horizontal]=\"Horizontal\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [""], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollapseSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CollapseSetComponent, selector: "mefdev-collapse-set", inputs: { expandAny: "expandAny", Accordion: "Accordion", Horizontal: "Horizontal" }, ngImport: i0, template: "<div class=\"card-group\" [class.horizontal]=\"Horizontal\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [""], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CollapseSetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollapseSetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-collapse-set', encapsulation: ViewEncapsulation.None, template: "<div class=\"card-group\" [class.horizontal]=\"Horizontal\">\r\n    <ng-content></ng-content>\r\n</div>" }]
         }], propDecorators: { expandAny: [{
@@ -132,7 +132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
   * </mefdev-collapse>
   *
   *```
-    * <example-url>https://mef.dev/ui_kit_demo/view/collapse/collapse</example-url>
+    * <example-url>https://mef.dev/ui_kit_demo/view/page_components/collapse</example-url>
   */
 class CollapseComponent {
@@ -205,8 +205,8 @@ class CollapseComponent {
         this._el = this._elementRef.nativeElement;
         this._collapseSet.addTab(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CollapseComponent, deps: [{ token: CollapseSetComponent, host: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CollapseComponent, selector: "mefdev-collapse", inputs: { Disabled: "Disabled", Active: "Active" }, outputs: { stateChange: "stateChange" }, host: { properties: { "class.card": "true", "class.card-default": "true", "class.m-b-0": "true", "class.disabled": "this.Disabled" } }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }], ngImport: i0, template: "<div class=\"row w-100 mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n  <div class=\"col\">\r\n    <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n  </div>\r\n  <div class=\"col\">\r\n    <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n    <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n    <div *ngIf=\"_active\"\r\n     class=\"card-body mb-3\">\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}.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,.card-title,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,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,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host{background-color:transparent}.card-title{background-color:#f3f3f3;padding:17px;margin:0;color:#000}.collapse{background-color:#f3f3f3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollapseComponent, deps: [{ token: CollapseSetComponent, host: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CollapseComponent, selector: "mefdev-collapse", inputs: { Disabled: "Disabled", Active: "Active" }, outputs: { stateChange: "stateChange" }, host: { properties: { "class.card": "true", "class.card-default": "true", "class.m-b-0": "true", "class.disabled": "this.Disabled" } }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }], ngImport: i0, template: "<div class=\"row w-100 mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n  <div class=\"col\">\r\n    <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n  </div>\r\n  <div class=\"col\">\r\n    <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n    <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n    <div *ngIf=\"_active\"\r\n     class=\"card-body mb-3\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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,.card-title,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,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,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host{background-color:transparent}.card-title{background-color:#f3f3f3;padding:17px;margin:0;color:#000}.collapse{background-color:#f3f3f3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             trigger('collapseState', [
                 state('inactive', style({
                     opacity: '0',
@@ -221,7 +221,7 @@ class CollapseComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CollapseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CollapseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-collapse', animations: [
                         trigger('collapseState', [
@@ -240,7 +240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         '[class.card]': 'true',
                         '[class.card-default]': 'true',
                         '[class.m-b-0]': 'true'
-                    }, template: "<div class=\"row w-100 mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n  <div class=\"col\">\r\n    <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n  </div>\r\n  <div class=\"col\">\r\n    <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n    <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n    <div *ngIf=\"_active\"\r\n     class=\"card-body mb-3\">\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}.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,.card-title,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,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,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host{background-color:transparent}.card-title{background-color:#f3f3f3;padding:17px;margin:0;color:#000}.collapse{background-color:#f3f3f3}\n"] }]
+                    }, template: "<div class=\"row w-100 mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n  <div class=\"col\">\r\n    <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n  </div>\r\n  <div class=\"col\">\r\n    <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n    <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n    <div *ngIf=\"_active\"\r\n     class=\"card-body mb-3\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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,.card-title,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,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,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host{background-color:transparent}.card-title{background-color:#f3f3f3;padding:17px;margin:0;color:#000}.collapse{background-color:#f3f3f3}\n"] }]
         }], ctorParameters: function () { return [{ type: CollapseSetComponent, decorators: [{
                     type: Host
                 }] }, { type: i0.ElementRef }]; }, propDecorators: { CardTitle: [{
@@ -264,11 +264,11 @@ class MefDevCollapseModule {
             ngModule: MefDevCollapseModule
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevCollapseModule, declarations: [CollapseSetComponent, CollapseComponent], imports: [CommonModule], exports: [CollapseSetComponent, CollapseComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevCollapseModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevCollapseModule, declarations: [CollapseSetComponent, CollapseComponent], imports: [CommonModule], exports: [CollapseSetComponent, CollapseComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevCollapseModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevCollapseModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevCollapseModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: mefDevCollapseModuleComponents,
@@ -307,10 +307,10 @@ class FilteredFieldService {
     sendNewFilterItem(item) {
         this.newFilterItem.next(item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FilteredFieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FilteredFieldService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilteredFieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilteredFieldService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FilteredFieldService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilteredFieldService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -372,12 +372,12 @@ class FilteredFieldItemComponent {
     onDiscard() {
         this.discard.next(this.item);
     }
-    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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilteredFieldItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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.6", ngImport: i0, type: FilteredFieldItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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"] }]
+            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-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!important}.item{background-color:#4d4d4d;color:#fff;border-radius:5px;margin-right:7px;padding:3px 7px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { item: [{
                 type: Input
             }], discard: [{
@@ -399,7 +399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
 * </mefdev-filtered-field-container>
 * ```
 * Example of usage:
-* <example-url>https://mef.dev/ui_kit_demo/view/utils/filtered-field</example-url>
+* <example-url>https://mef.dev/ui_kit_demo/view/utils/filtered_field</example-url>
 */
 class FilteredFieldContainerComponent {
     service;
@@ -445,22 +445,22 @@ class FilteredFieldContainerComponent {
             this.items.push(item);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FilteredFieldContainerComponent, deps: [{ token: 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FilteredFieldItemComponent, selector: "mefdev-filtered-field-item", inputs: ["item"], outputs: ["discard", "openFilter"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilteredFieldContainerComponent, deps: [{ token: FilteredFieldService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FilteredFieldItemComponent, selector: "mefdev-filtered-field-item", inputs: ["item"], outputs: ["discard", "openFilter"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FilteredFieldContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: FilteredFieldService }]; } });
 class MefDevFilteredFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevFilteredFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevFilteredFieldModule, declarations: [FilteredFieldContainerComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevFilteredFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevFilteredFieldModule, declarations: [FilteredFieldContainerComponent,
             FilteredFieldItemComponent], imports: [CommonModule], exports: [FilteredFieldItemComponent,
             FilteredFieldContainerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevFilteredFieldModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevFilteredFieldModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevFilteredFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevFilteredFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -500,7 +500,7 @@ class FiltredItemModel {
 *    <ng-content></ng-content>
 * </mefdev-help-block>
 *```
-* <example-url>https://mef.dev/ui_kit_demo/view/utils/help-block</example-url>
+* <example-url>https://mef.dev/ui_kit_demo/view/utils/help_block</example-url>
 */
 class HelpBlockComponent {
     /**
@@ -523,8 +523,8 @@ class HelpBlockComponent {
     constructor() { }
     ngOnInit() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: HelpBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: HelpBlockComponent, selector: "mefdev-help-block", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"card-simple\" *ngIf=\"isVisible\">\r\n    <div class=\"row m-1 body-1\" (click)=\"expanded = !expanded\" style=\"cursor: pointer;\">\r\n        <div class=\"col-10\" style=\"color: white;\">\r\n            {{ title }}\r\n        </div>\r\n        <div class=\"col-2\">\r\n            <i class=\"fa fa-window-close\" aria-hidden=\"true\" style=\"float: right; margin-left: 20px;\" (click)=\"isVisible = !isVisible;\"></i>\r\n            \r\n            <i class=\"fa fa-angle-down \" *ngIf=\"!expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>\r\n            <i class=\"fa fa-angle-up\" *ngIf=\"expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>      \r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body row\" [@smothExpand]=\"expanded ? 'open' : 'close'\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", 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-simple{opacity:.7;background-color:#28b446;padding:2px;border-radius:5px;margin-top:.3em;margin-bottom:.5em}.card-body{opacity:1;margin-left:2px;margin-right:2px;margin-bottom:2px;border-radius:5px;padding-top:15px;padding-bottom:15px;background-color:#f3f3f3;color:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HelpBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HelpBlockComponent, selector: "mefdev-help-block", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"card-simple\" *ngIf=\"isVisible\">\r\n    <div class=\"row m-1 body-1\" (click)=\"expanded = !expanded\" style=\"cursor: pointer;\">\r\n        <div class=\"col-10\" style=\"color: white;\">\r\n            {{ title }}\r\n        </div>\r\n        <div class=\"col-2\">\r\n            <i class=\"fa fa-window-close\" aria-hidden=\"true\" style=\"float: right; margin-left: 20px;\" (click)=\"isVisible = !isVisible;\"></i>\r\n            \r\n            <i class=\"fa fa-angle-down \" *ngIf=\"!expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>\r\n            <i class=\"fa fa-angle-up\" *ngIf=\"expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>      \r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body row\" [@smothExpand]=\"expanded ? 'open' : 'close'\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!important}.card-simple{opacity:.7;background-color:#28b446;padding:2px;border-radius:5px;margin-top:.3em;margin-bottom:.5em}.card-body{opacity:1;margin-left:2px;margin-right:2px;margin-bottom:2px;border-radius:5px;padding-top:15px;padding-bottom:15px;background-color:#f3f3f3;color:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
             trigger('smothExpand', [
                 state('close', style({
                     height: '0',
@@ -538,7 +538,7 @@ class HelpBlockComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: HelpBlockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HelpBlockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-help-block', animations: [
                         trigger('smothExpand', [
@@ -552,20 +552,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                             state('open', style({})),
                             transition('close<=>open', animate(200))
                         ])
-                    ], template: "<div class=\"card-simple\" *ngIf=\"isVisible\">\r\n    <div class=\"row m-1 body-1\" (click)=\"expanded = !expanded\" style=\"cursor: pointer;\">\r\n        <div class=\"col-10\" style=\"color: white;\">\r\n            {{ title }}\r\n        </div>\r\n        <div class=\"col-2\">\r\n            <i class=\"fa fa-window-close\" aria-hidden=\"true\" style=\"float: right; margin-left: 20px;\" (click)=\"isVisible = !isVisible;\"></i>\r\n            \r\n            <i class=\"fa fa-angle-down \" *ngIf=\"!expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>\r\n            <i class=\"fa fa-angle-up\" *ngIf=\"expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>      \r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body row\" [@smothExpand]=\"expanded ? 'open' : 'close'\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", 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-simple{opacity:.7;background-color:#28b446;padding:2px;border-radius:5px;margin-top:.3em;margin-bottom:.5em}.card-body{opacity:1;margin-left:2px;margin-right:2px;margin-bottom:2px;border-radius:5px;padding-top:15px;padding-bottom:15px;background-color:#f3f3f3;color:#000}\n"] }]
+                    ], template: "<div class=\"card-simple\" *ngIf=\"isVisible\">\r\n    <div class=\"row m-1 body-1\" (click)=\"expanded = !expanded\" style=\"cursor: pointer;\">\r\n        <div class=\"col-10\" style=\"color: white;\">\r\n            {{ title }}\r\n        </div>\r\n        <div class=\"col-2\">\r\n            <i class=\"fa fa-window-close\" aria-hidden=\"true\" style=\"float: right; margin-left: 20px;\" (click)=\"isVisible = !isVisible;\"></i>\r\n            \r\n            <i class=\"fa fa-angle-down \" *ngIf=\"!expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>\r\n            <i class=\"fa fa-angle-up\" *ngIf=\"expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>      \r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body row\" [@smothExpand]=\"expanded ? 'open' : 'close'\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!important}.card-simple{opacity:.7;background-color:#28b446;padding:2px;border-radius:5px;margin-top:.3em;margin-bottom:.5em}.card-body{opacity:1;margin-left:2px;margin-right:2px;margin-bottom:2px;border-radius:5px;padding-top:15px;padding-bottom:15px;background-color:#f3f3f3;color:#000}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input,
                 args: ['title']
             }] } });
 class MefDevHelpBlockModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevHelpBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevHelpBlockModule, declarations: [HelpBlockComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevHelpBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevHelpBlockModule, declarations: [HelpBlockComponent], imports: [CommonModule,
             MefDevCollapseModule], exports: [HelpBlockComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevHelpBlockModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevHelpBlockModule, imports: [CommonModule,
             MefDevCollapseModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevHelpBlockModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevHelpBlockModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [HelpBlockComponent],
@@ -613,10 +613,10 @@ class OptionPipe {
             return options;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: OptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: OptionPipe, name: "OptionPipe" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: OptionPipe, name: "OptionPipe" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: OptionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OptionPipe, decorators: [{
             type: Pipe,
             args: [{ name: "OptionPipe" }]
         }] });
@@ -627,7 +627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
  */
 /**
   * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/select</example-url>
+  * <example-url>https://mef.dev/ui_kit_demo/view/controls/select</example-url>
   */
 class MefDevSelectComponent {
     _elementRef;
@@ -1234,8 +1234,8 @@ class MefDevSelectComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevSelectComponent, selector: "mefdev-select", inputs: { Filter: "Filter", MaxMultiple: "MaxMultiple", FirstDefault: "FirstDefault", AllowClear: "AllowClear", KeepUnListOptions: "KeepUnListOptions", Mode: "Mode", Multiple: "Multiple", PlaceHolder: "PlaceHolder", NotFoundContent: "NotFoundContent", Size: "Size", ShowSearch: "ShowSearch", Tags: "Tags", Disabled: "Disabled", Open: "Open" }, outputs: { SearchChange: "SearchChange", change: "change", OpenChange: "OpenChange", ScrollToBottom: "ScrollToBottom" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MefDevSelectComponent, selector: "mefdev-select", inputs: { Filter: "Filter", MaxMultiple: "MaxMultiple", FirstDefault: "FirstDefault", AllowClear: "AllowClear", KeepUnListOptions: "KeepUnListOptions", Mode: "Mode", Multiple: "Multiple", PlaceHolder: "PlaceHolder", NotFoundContent: "NotFoundContent", Size: "Size", ShowSearch: "ShowSearch", Tags: "Tags", Disabled: "Disabled", Open: "Open" }, outputs: { SearchChange: "SearchChange", change: "change", OpenChange: "OpenChange", ScrollToBottom: "ScrollToBottom" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MefDevSelectComponent),
@@ -1285,7 +1285,7 @@ class MefDevSelectComponent {
                 ])
             ])], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: "mefdev-select", encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -1464,10 +1464,10 @@ class MefDevOptionComponent {
     ngOnDestroy() {
         this._Select.removeOption(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevOptionComponent, deps: [{ token: MefDevSelectComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevOptionComponent, selector: "mefdev-option", inputs: { Value: "Value", Label: "Label", Disabled: "Disabled" }, queries: [{ propertyName: "OptionTemplate", first: true, predicate: ["OptionTemplate"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevOptionComponent, deps: [{ token: MefDevSelectComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MefDevOptionComponent, selector: "mefdev-option", inputs: { Value: "Value", Label: "Label", Disabled: "Disabled" }, queries: [{ propertyName: "OptionTemplate", first: true, predicate: ["OptionTemplate"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: "mefdev-option", encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>" }]
         }], ctorParameters: function () { return [{ type: MefDevSelectComponent }]; }, propDecorators: { OptionTemplate: [{
@@ -1482,77 +1482,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
             }] } });
 /**
-  * Datepicker Component for selecting dates.
-  *
-  * This component allows users to pick a date from a calendar interface.
-  * It supports various configuration options such as language, date format, and date range.
-  *
-  * @example
-  * <mefdev-datepicker
-  *   [lang]="'uk'"
-  *   [dateFormat]="'dd/MM/yyyy'"
-  *   [range]="{startYear: 1900, toYear: 300}"
-  *   [disabled]="false"
-  *   (dateChanged)="onDateChanged($event)"
-  *   [topOffset]="'20'"
-  *   [leftOffset]="'10'">
-  * </mefdev-datepicker>
-  *
-  * <example-url>https://mef.dev/ui_kit_demo/view/utils/datepicker</example-url>
-*/
+ * Datepicker Component for selecting dates.
+ *
+ * This component allows users to pick a date from a calendar interface.
+ * It supports various configuration options such as language, date format, and date range.
+ *
+ * @example
+ * <mefdev-datepicker
+ *   [labelContentText]="'Select your date'"
+ *   [lang]="'uk'"
+ *   [dateFormat]="'dd/MM/yyyy'"
+ *   [range]="{startYear: 1900, toYear: 300}"
+ *   [disabled]="false"
+ *   (dateChanged)="onDateChanged($event)"
+ *   [topOffset]="'20'"
+ *   [leftOffset]="'10'">
+ * </mefdev-datepicker>
+ *
+ * <example-url>https://mef.dev/ui_kit_demo/view/utils/datepicker</example-url>
+ */
 class DatepickerComponent {
     datePipe;
     elementRef;
+    /**
+     * A flag that checks whether a valid date has been entered and whether the entered date exists.
+     * If the two previous conditions are not true, the datepicker will be highlighted in red
+     */
+    isUserDateValid = true;
     /**
      * Flag to determine if the calendar is open or closed.
      * Default value: false (closed).
-    */
+     */
     isCalendarOpen = false;
-    /**
-     * Flag to determine if the component is in editing mode.
-     * Default value: false (not in editing mode).
-    */
-    isEditing = false;
     /**
      * The currently selected date.
      * Default value: Today's date.
-    */
+     */
     selectedDate = new Date();
     /**
-    * The formatted date for display in the input.
-    * Default value: Formatted representation of the selected date.
-   */
+     * The formatted date for display in the input.
+     * Default value: Formatted representation of the selected date.
+     */
     formattedDate;
     /**
-    * Track the edited date separately when in editing mode.
-    * Default value: An empty string.
-   */
+     * Track the edited date separately when in editing mode.
+     * Default value: An empty string.
+     */
     editedDate = '';
     /**
      * Flag to determine if the month dropdown is open or closed.
      * Default value: true (open).
-    */
+     */
     isMonthDropdownOpen = true;
     /**
      * Flag to determine if the year dropdown is open or closed.
      * Default value: true (open).
-    */
+     */
     isYearDropdownOpen = true;
     /**
      * The selected month (0-11).
      * Default value: The month of the selected date.
-    */
+     */
     selectedDateMonth = this.selectedDate.getMonth();
     /**
      * The selected year.
      * Default value: The year of the selected date.
-    */
+     */
     selectedDateYear = this.selectedDate.getFullYear();
     /**
-    * An array of years for the year dropdown.
-    * Default value: An array of years within the specified range.
-   */
+     * An array of years for the year dropdown.
+     * Default value: An array of years within the specified range.
+     */
     years;
+    /**
+     * Label text for the datepicker.
+     * Default value: 'en' (English).
+     * @example
+     * <mefdev-datepicker
+     *   [labelContentText] = "'Chose your date'">
+     * </mefdev-datepicker>
+     */
+    labelContentText;
     /**
      * The language/locale for the datepicker.
      * Default value: 'en' (English).
@@ -1560,7 +1570,7 @@ class DatepickerComponent {
      * <mefdev-datepicker
      *   [lang] = "'uk'">
      * </mefdev-datepicker>
-    */
+     */
     lang = 'en';
     /**
      * The date format for displaying the selected date.
@@ -1569,7 +1579,7 @@ class DatepickerComponent {
      * <mefdev-datepicker
      *   [dateFormat]="'dd/MM/yyyy'">
      * </mefdev-datepicker>
-    */
+     */
     dateFormat = 'EEE MMM dd yyyy';
     /**
      * The range of years available in the year dropdown.
@@ -1578,7 +1588,7 @@ class DatepickerComponent {
      * <mefdev-datepicker
      *   [range]="{startYear: 1900, toYear: 300}">
      * </mefdev-datepicker>
-    */
+     */
     yearsRange = { startYear: 1900, toYear: 300 };
     /**
      * Whether the datepicker is disabled or not.
@@ -1587,7 +1597,7 @@ class DatepickerComponent {
      * <mefdev-datepicker
      *   [disabled]="false">
      * </mefdev-datepicker>
-    */
+     */
     disabled = false;
     /**
      * The top offset for positioning the datepicker.
@@ -1596,7 +1606,7 @@ class DatepickerComponent {
      * <mefdev-datepicker
      *   [topOffset]="'20'">
      * </mefdev-datepicker>
-    */
+     */
     topOffset = '20';
     /**
      * The left offset for positioning the datepicker.
@@ -1605,7 +1615,7 @@ class DatepickerComponent {
      * <mefdev-datepicker
      *   [leftOffset]="'10'">
      * </mefdev-datepicker>
-    */
+     */
     leftOffset = '10'; //Default value
     /**
      * Event emitted when the selected date in the datepicker changes.
@@ -1614,19 +1624,19 @@ class DatepickerComponent {
      * <mefdev-datepicker
      *   (dateChanged)="onDateChanged($event)">
      * </mefdev-datepicker>
-    */
+     */
     dateChanged = new EventEmitter();
     /**
      * Regular expression to validate user input for date in the format "dd/MM/yyyy".
      * - The day (dd) should be between 01 and 31.
      * - The month (MM) should be between 01 and 12.
      * - The year (yyyy) should be a 4-digit number.
-    */
+     */
     dateRegExp = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
     /**
      * The string entered by the user for date input.
      * This variable stores the user's input as they type in the date field.
-    */
+     */
     userInput = '';
     /**
      * Host listener for document click events to handle calendar interaction.
@@ -1634,30 +1644,26 @@ class DatepickerComponent {
      * - If the click occurred within the calendar, no action is taken.
      * - If the click occurred within the input element and the component is not in editing mode,
      *   it opens the calendar.
-     * - If the click occurred outside the calendar and input, it closes the calendar.
      * @param event The MouseEvent object representing the click event.
-    */
+     */
     onClick(event) {
         const targetElement = event.target;
+        const datepickerContainer = this.elementRef.nativeElement.querySelector('.datepicker-container');
         const calendar = this.elementRef.nativeElement.querySelector('.calendar');
         const monthDropdown = this.elementRef.nativeElement.querySelector('.monthDropdown');
         const yearDropdown = this.elementRef.nativeElement.querySelector('.yearDropdown');
         const inputElement = this.elementRef.nativeElement.querySelector('input');
-        if (monthDropdown.contains(targetElement) && yearDropdown.contains(targetElement)) {
-            this.toggleMonthDropdown(event);
-            this.toggleYearDropdown(event);
-        }
-        if (calendar && calendar.contains(targetElement)) {
-            return;
-        }
-        if (inputElement && inputElement.contains(targetElement) && !this.isEditing) {
-            // Клік відбувся на елементі input, відкриваємо календар
-            this.isCalendarOpen = true;
-        }
-        else {
-            // Клік відбувся поза календарем та input, закриваємо календар
-            this.isCalendarOpen = false;
-            this.isEditing = false;
+        if (datepickerContainer && datepickerContainer.contains(calendar)) {
+            if (calendar && calendar.contains(targetElement))
+                return;
+            if (this.isMonthDropdownOpen && !calendar.contains(targetElement))
+                return;
+            if (this.isYearDropdownOpen && !calendar.contains(targetElement))
+                return;
+            if ((monthDropdown && monthDropdown.contains(targetElement)) && (yearDropdown && yearDropdown.contains(targetElement))) {
+                this.toggleMonthDropdown(event);
+                this.toggleYearDropdown(event);
+            }
         }
     }
     /**
@@ -1665,7 +1671,7 @@ class DatepickerComponent {
      * @param datePipe A service for formatting and parsing dates.
      * @param elementRef A reference to the element on which this component is attached.
      * It is used to access DOM elements.
-    */
+     */
     constructor(datePipe, elementRef) {
         this.datePipe = datePipe;
         this.elementRef = elementRef;
@@ -1674,28 +1680,28 @@ class DatepickerComponent {
     /**
      * Lifecycle hook called after the component is initialized.
      * It initializes the years for the year select dropdown.
-    */
+     */
     ngOnInit() {
         this.initializeYears();
     }
     /**
      * Lifecycle hook called whenever the input properties of the component change.
      * It updates the input value.
-    */
+     */
     ngOnChanges() {
         this.updateInputValue();
     }
     /**
      * An array of month names based on the selected language.
      * It provides localized month names for display in the datepicker.
-    */
+     */
     get months() {
         return this.getMonthList(this.lang);
     }
     /**
      * An array of weekday names based on the selected language.
      * It provides localized weekday names for display in the datepicker.
-    */
+     */
     get weekdays() {
         return this.getWeekdayList(this.lang);
     }
@@ -1708,16 +1714,14 @@ class DatepickerComponent {
      * // After calling initializeYears(), 'years' might contain [1900, 1901, ..., 300]
      * this.initializeYears();
      * ```
-    */
+     */
     initializeYears() {
         this.years = Array.from({ length: this.yearsRange.toYear }, (_, index) => index + this.yearsRange.startYear);
     }
     /**
      * Toggle the editing mode for the date input. When enabled, the user can edit the date directly in the input field.
-     * This method sets the 'isEditing' flag to true and stores the current formatted date for editing.
-    */
+     */
     toggleEdit() {
-        this.isEditing = !this.isEditing;
         this.editedDate = this.formatSelectedDate(); // Store the current formatted date for editing
         this.isCalendarOpen = false;
     }
@@ -1730,7 +1734,7 @@ class DatepickerComponent {
      * // Get a list of month names in the default language and long format
      * const months = this.getMonthList(this.lang);
      * ```
-    */
+     */
     getMonthList(locales, format = "long") {
         const year = new Date().getFullYear();
         const monthList = [...Array(12).keys()];
@@ -1747,7 +1751,7 @@ class DatepickerComponent {
      * // Get a list of weekday names in the default language and short format
      * const weekdays = this.getWeekdayList();
      * ```
-    */
+     */
     getWeekdayList(locales, format = "short") {
         const weekdays = [...Array(7).keys()];
         const mondayIndex = weekdays.indexOf(0);
@@ -1759,22 +1763,6 @@ class DatepickerComponent {
         };
         return weekdays.map(getWeekdayName);
     }
-    /**
-     * Toggle the visibility of the calendar component. When called, this method changes the 'isCalendarOpen' flag
-     * to show or hide the calendar interface.
-     * ```
-     * // Toggle the visibility of the calendar
-     * this.toggleCalendar();
-     * ```
-    */
-    toggleCalendar() {
-        if (this.isEditing) {
-            this.isCalendarOpen = false;
-        }
-        else {
-            this.isCalendarOpen = !this.isCalendarOpen;
-        }
-    }
     /**
      * Save the edited date input by the user, provided it matches the specified date format.
      * This method checks if the entered date is in a valid format, disables the editing mode, and applies
@@ -1783,25 +1771,24 @@ class DatepickerComponent {
      * // Save the edited date and update the selected date
      * this.saveEditedDate();
      * ```
-    */
+     */
     saveEditedDate() {
         if (this.isDateValid(this.editedDate)) {
-            this.isEditing = false;
             const [day, month, year] = this.editedDate.split('/');
             this.selectedDate = new Date(+year, +month - 1, +day);
             this.formatDate();
         }
     }
     /**
-      * Handle user input in the editable input field for date editing. This method captures the input value
-      * and stores it in the 'editedDate' variable. If the input matches the valid date format, it updates
-      * 'selectedDateMonth' and 'selectedDateYear' accordingly.
-      * @param event - The input event containing the user's input.
-      * ```
-      * // Handle user input in the editable input field
-      * this.onDateInput(event);
-      * ```
-    */
+     * Handle user input in the editable input field for date editing. This method captures the input value
+     * and stores it in the 'editedDate' variable. If the input matches the valid date format, it updates
+     * 'selectedDateMonth' and 'selectedDateYear' accordingly.
+     * @param event - The input event containing the user's input.
+     * ```
+     * // Handle user input in the editable input field
+     * this.onDateInput(event);
+     * ```
+     */
     onDateInput(event) {
         const inputDate = event.target.value;
         if (this.isDateValid(inputDate)) {
@@ -1809,7 +1796,10 @@ class DatepickerComponent {
             const parsedDate = inputDate.split('/');
             this.selectedDateMonth = +parsedDate[1] - 1;
             this.selectedDateYear = +parsedDate[2];
+            this.selectedDate = new Date(+parsedDate[2], +parsedDate[1] - 1, +parsedDate[0]);
+            this.calculateFirstDayOfCalendar();
         }
+        this.isUserDateValid = this.isDateValid(inputDate);
     }
     /**
      * Toggle the visibility of the month dropdown in the calendar interface.
@@ -1819,19 +1809,19 @@ class DatepickerComponent {
      * // Toggle the visibility of the month dropdown
      * this.toggleMonthDropdown(event);
      * ```
-    */
+     */
     toggleMonthDropdown(event) {
         this.isMonthDropdownOpen = !this.isMonthDropdownOpen;
     }
     /**
-      * Toggle the visibility of the year dropdown in the calendar interface.
-      * This method is used to open or close the dropdown for selecting years.
-      * @param event - The event triggering the toggle action (e.g., a click event).
-      * ```
-      * // Toggle the visibility of the year dropdown
-      * this.toggleYearDropdown(event);
-      * ```
-    */
+     * Toggle the visibility of the year dropdown in the calendar interface.
+     * This method is used to open or close the dropdown for selecting years.
+     * @param event - The event triggering the toggle action (e.g., a click event).
+     * ```
+     * // Toggle the visibility of the year dropdown
+     * this.toggleYearDropdown(event);
+     * ```
+     */
     toggleYearDropdown(event) {
         this.isYearDropdownOpen = !this.isYearDropdownOpen;
     }
@@ -1843,10 +1833,11 @@ class DatepickerComponent {
      * // Handle the change of the selected month
      * this.onMonthChange();
      * ```
-    */
+     */
     onMonthChange() {
         this.updateInputValue();
         this.selectedDate = new Date(this.selectedDateYear, this.selectedDateMonth, 1);
+        this.formatDate();
         this.calculateFirstDayOfCalendar();
     }
     /**
@@ -1857,7 +1848,7 @@ class DatepickerComponent {
      * // Handle the change of the selected year
      * this.onYearChange();
      * ```
-    */
+     */
     onYearChange() {
         this.updateInputValue();
         this.selectedDate = new Date(this.selectedDateYear, this.selectedDateMonth, 1);
@@ -1869,7 +1860,7 @@ class DatepickerComponent {
      * This method sets the selected date, formats it, closes the calendar, and emits a dateChanged event.
      * It also updates the selected month and year dropdown values.
      * @param date - The date to be selected in the calendar.
-    */
+     */
     selectDate(date) {
         this.selectedDate = date;
         this.formatDate();
@@ -1885,7 +1876,7 @@ class DatepickerComponent {
      * // Format the selected date
      * this.formatDate();
      * ```
-    */
+     */
     formatDate() {
         this.formattedDate = this.datePipe.transform(this.selectedDate, this.dateFormat) || '';
     }
@@ -1897,7 +1888,7 @@ class DatepickerComponent {
      * // Format the selected date with language
      * const formatted = this.formatSelectedDate();
      * ```
-    */
+     */
     formatSelectedDate() {
         return this.datePipe.transform(this.selectedDate, this.dateFormat, this.lang) || '';
     }
@@ -1909,9 +1900,9 @@ class DatepickerComponent {
      * // Update the input value
      * this.updateInputValue();
      * ```
-    */
+     */
     updateInputValue() {
-        this.formattedDate = this.isEditing ? this.editedDate : this.formatSelectedDate();
+        this.formattedDate = this.isCalendarOpen ? this.editedDate : this.formatSelectedDate();
     }
     /**
      * Get an array of arrays representing the days of the current month.
@@ -1921,7 +1912,7 @@ class DatepickerComponent {
      * // Get an array of arrays representing the days of the current month
      * const calendar = this.calendarDays;
      * ```
-    */
+     */
     get calendarDays() {
         return this.calculateFirstDayOfCalendar();
     }
@@ -1935,7 +1926,7 @@ class DatepickerComponent {
      * // Get the previous month's date to display in empty cells
      * const previousMonthDate = this.getPreviousMonthDate(new Date(2023, 8, 1));
      * ```
-    */
+     */
     getPreviousMonthDate(date) {
         if (!date) {
             return '';
@@ -1955,7 +1946,7 @@ class DatepickerComponent {
      * // Navigate to the previous month
      * this.getPreviousMonth();
      * ```
-    */
+     */
     getPreviousMonth() {
         const currentMonth = this.selectedDate.getMonth();
         this.selectedDate = new Date(this.selectedDate.getFullYear(), currentMonth - 1, 1);
@@ -1969,7 +1960,7 @@ class DatepickerComponent {
      * // Navigate to the next month
      * this.getNextMonth();
      * ```
-    */
+     */
     getNextMonth() {
         const currentMonth = this.selectedDate.getMonth();
         this.selectedDate = new Date(this.selectedDate.getFullYear(), currentMonth + 1, 1);
@@ -1981,7 +1972,7 @@ class DatepickerComponent {
      * @param year - The year for which you want to determine the number of days.
      * @param month - The month (0-based index) for which you want to determine the number of days.
      * @returns The number of days in the specified month of the given year.
-    */
+     */
     daysInMonth(year, month) {
         return new Date(year, month + 1, 0).getDate();
     }
@@ -1990,7 +1981,7 @@ class DatepickerComponent {
      * This method generates a matrix of day data objects representing the days in the calendar.
      * Each day data object contains the date and whether it belongs to the current month.
      * @returns A matrix of day data objects for the calendar display.
-    */
+     */
     calculateFirstDayOfCalendar() {
         const year = this.selectedDate.getFullYear();
         const month = this.selectedDate.getMonth();
@@ -2022,21 +2013,33 @@ class DatepickerComponent {
      * // Check if a date is selected
      * const isSelected = this.isDateSelected(someDate);
      * ```
-    */
+     */
     isDateSelected(date) {
         return date.toDateString() === this.selectedDate.toDateString();
     }
     /**
      * Check if a date string is valid based on the specified date format.
+     * It also checks whether the specified number, month is correct and whether the specified one exists among calendar years
      * @param inputDate - The date string to validate.
      * @returns `true` if the input date string is valid, otherwise `false`.
      * ```
      * // Check if a date string is valid
      * const isValidDate = this.isDateValid('05/25/2023');
      * ```
-    */
+     */
     isDateValid(inputDate) {
-        return this.dateRegExp.test(inputDate);
+        if (!this.dateRegExp.test(inputDate)) {
+            return false;
+        }
+        const parts = inputDate.split('/');
+        const day = parseInt(parts[0], 10);
+        const month = parseInt(parts[1], 10);
+        const year = parseInt(parts[2], 10);
+        if (year > this.years[this.years.length - 1] || year < this.years[0]) {
+            return false;
+        }
+        const daysInMonth = new Date(year, month, 0).getDate();
+        return day <= daysInMonth;
     }
     /**
      * Check if a given date is today's date.
@@ -2046,18 +2049,20 @@ class DatepickerComponent {
      * // Check if a date is today's date
      * const isToday = this.isDateToday(someDate);
      * ```
-    */
+     */
     isDateToday(date) {
         const today = new Date();
         return date.toDateString() === today.toDateString();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatepickerComponent, deps: [{ token: i1.DatePipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatepickerComponent, selector: "mefdev-datepicker", inputs: { lang: "lang", dateFormat: "dateFormat", yearsRange: ["range", "yearsRange"], disabled: "disabled", topOffset: "topOffset", leftOffset: "leftOffset" }, outputs: { dateChanged: "dateChanged" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"datepicker-container\"\r\n[class.disabled]=\"disabled\"\r\n>\r\n\r\n  <!-- Input, save & edit buttons -->\r\n    <div class=\"input-container\">\r\n\r\n      <div *ngIf=\"!isEditing\">\r\n\r\n        <input\r\n        type=\"text\"\r\n        (click)=\"toggleCalendar()\"\r\n        [value]=\"formattedDate\"\r\n        [readOnly]=\"true\"\r\n        [disabled]=\"isEditing\"\r\n      >\r\n      </div>\r\n        <!-- Edit -->\r\n        <i class=\"fa fa-pencil-square-o edit-button\" aria-hidden=\"true\" (click)=\"toggleEdit()\"></i> \r\n\r\n        <div *ngIf=\"isEditing\">\r\n            <input\r\n            type=\"text\"\r\n            [value]=\"editedDate\"\r\n            (input)=\"onDateInput($event)\"\r\n            class=\"border-3\"\r\n            (click)=\"toggleCalendar()\"\r\n            >\r\n            <i class=\"fa fa-floppy-o edit-button\" (click)=\"saveEditedDate()\" aria-hidden=\"true\"></i>\r\n     </div>     \r\n    </div>\r\n\r\n<!-- Calendar(Dropdowns, dates) -->\r\n  <div *ngIf=\"isCalendarOpen\" class=\"calendar\" #calendarContainer \r\n  [style.top]=\"topOffset\"\r\n  [style.left]=\"leftOffset\">\r\n    <div class=\"calendar-header\">\r\n        <div class=\"monthButtonContainer\">\r\n            <!-- Month dropdown -->\r\n            <ng-container *ngIf=\"isMonthDropdownOpen; else monthLabel\">\r\n              <mefdev-select    \r\n              class=\"monthDropdown\"\r\n              [(ngModel)]=\"selectedDateMonth\" \r\n              (ngModelChange)=\"onMonthChange()\"\r\n              [PlaceHolder]=\"'month'\"\r\n              >\r\n                <mefdev-option \r\n                *ngFor=\"let month of months; let i = index\" \r\n                [Value]=\"i\"\r\n                [Label] = \"month\" \r\n                \r\n                >{{ month }}</mefdev-option>\r\n              </mefdev-select>\r\n            </ng-container>\r\n            <ng-template #monthLabel>\r\n              <span (click)=\"toggleMonthDropdown($event)\"></span>\r\n            </ng-template>\r\n\r\n            <!-- Year dropdown -->\r\n            <ng-container *ngIf=\"isYearDropdownOpen; else yearLabel\">\r\n              <mefdev-select \r\n              class=\"yearDropdown\" \r\n              [(ngModel)]=\"selectedDateYear\" \r\n              (ngModelChange)=\"onYearChange()\"\r\n              [PlaceHolder]=\"'year'\"\r\n              >\r\n                  <mefdev-option \r\n                  *ngFor=\"let year of years\" \r\n                  [Label] = \"year\" \r\n                  [Value]=\"year\" \r\n                  >{{year}}</mefdev-option>\r\n              </mefdev-select>\r\n            </ng-container>\r\n            <ng-template #yearLabel>\r\n              <span (click)=\"toggleYearDropdown($event)\">{{ selectedDateYear }}</span>\r\n            </ng-template>\r\n           </div>\r\n           <!-- Calendar exit button -->\r\n           <div>\r\n            <i class=\"fa fa-times toggleCalendarButton\" (click)=\"toggleCalendar()\" aria-hidden=\"true\"></i>\r\n            </div>\r\n    </div>\r\n    \r\n    <div class=\"calendar-body\">\r\n      <table>\r\n        <tr>\r\n          <th class=\"align-items-center\" *ngFor=\"let weekday of weekdays\">{{ weekday }}</th>\r\n        </tr>\r\n        <tr *ngFor=\"let week of calendarDays\">\r\n          <td *ngFor=\"let dayData of week\" \r\n              (click)=\"selectDate(dayData.date)\"\r\n              [ngClass]=\"{ 'selected': isDateSelected(dayData.date), 'prev-month': !dayData.isCurrentMonth }\">\r\n\r\n            <span class=\"date\" \r\n              [class.prev-month]=\"!dayData.isCurrentMonth\"\r\n              >\r\n              {{ dayData.date.getDate() }}\r\n            </span>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</div>\r\n\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}.datepicker-container{position:relative;display:inline-block}.datepicker-container.disabled{pointer-events:none;opacity:.8}.input-container{position:relative;display:inline-block}.input-container input[type=text]{cursor:pointer;padding:5px;border:1px solid #929292;border-radius:4px}.input-container input[type=text]:hover{border:1px solid #4D4D4D}.input-container .edit-button{position:absolute;top:0;right:0;height:100%;margin:0;padding:5px 10px;background-color:#eaeaea;border:1px solid #929292;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;display:flex;justify-content:center;align-items:center}.calendar{position:absolute;top:35px;left:10%;border:1px solid #929292;background-color:#eaeaea;border-radius:4px;z-index:1}.calendar .calendar-header{background-color:#fff;text-align:center;justify-content:space-between;display:flex;padding:5px 0}.calendar .calendar-header i.fa{display:flex;justify-content:center;align-items:center;width:30px;height:30px;font-size:20px;border-radius:50%;cursor:pointer;background-color:transparent;border:none;color:#cf0106}.calendar .calendar-header .monthButtonContainer{padding-left:10px;height:45px;min-width:140px;display:flex;align-items:center}.calendar .calendar-header .monthDropdown,.calendar .calendar-header .yearDropdown{height:45px;width:105px;cursor:pointer;display:inline-block;padding:6px 5px;border:1px solid #EAEAEA;border-radius:4px;background-color:#fff;color:#4d4d4d}.calendar .calendar-header .monthDropdown{margin:0 8px 0 0;width:130px}.calendar .calendar-header .monthDropdown:hover,.calendar .calendar-header .yearDropdown:hover{border-color:#f3f3f3}.calendar .calendar-body{padding:5px;width:260px}.calendar .calendar-body td{padding:10px;position:relative}.calendar .calendar-body td.selected{position:relative;color:#fff}.calendar .calendar-body td.selected:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:20%;background-color:#cf0106;z-index:-1;width:30px;height:30px;color:#fff;border:1px solid #373737}.calendar .calendar-body td:hover{color:#fff;font-weight:700;background-color:#929292;border-radius:20%;cursor:pointer}.calendar .calendar-body .date{display:flex;justify-content:center}.calendar .calendar-body .date.prev-month{color:#f3f3f3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MefDevOptionComponent, selector: "mefdev-option", inputs: ["Value", "Label", "Disabled"] }, { kind: "component", type: MefDevSelectComponent, selector: "mefdev-select", inputs: ["Filter", "MaxMultiple", "FirstDefault", "AllowClear", "KeepUnListOptions", "Mode", "Multiple", "PlaceHolder", "NotFoundContent", "Size", "ShowSearch", "Tags", "Disabled", "Open"], outputs: ["SearchChange", "change", "OpenChange", "ScrollToBottom"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatepickerComponent, deps: [{ token: i1.DatePipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatepickerComponent, selector: "mefdev-datepicker", inputs: { labelContentText: "labelContentText", lang: "lang", dateFormat: "dateFormat", yearsRange: ["range", "yearsRange"], disabled: "disabled", topOffset: "topOffset", leftOffset: "leftOffset" }, outputs: { dateChanged: "dateChanged" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"datepicker-container\" [class.disabled]=\"disabled\">\r\n\r\n  <!-- Input, save & edit buttons -->\r\n    <div class=\"input-container form-group\">\r\n        <label *ngIf=\"labelContentText\" class=\"form-label\"> {{ labelContentText }} </label>\r\n        <input\r\n          [ngClass]=\"{ 'calendarNotOpened': !isCalendarOpen }\"\r\n          [ngStyle]=\"{ 'border-color': isUserDateValid ? '' : 'red' }\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          (input)=\"onDateInput($event)\"\r\n          (click)=\"isCalendarOpen = true\"\r\n          [value]=\"formattedDate\"\r\n          [readOnly]=\"!isCalendarOpen\"\r\n        >\r\n    </div>\r\n\r\n  <!-- Calendar(Dropdowns, dates) -->\r\n  <div *ngIf=\"isCalendarOpen\" class=\"calendar\" #calendarContainer\r\n       [style.top]=\"topOffset\"\r\n       [style.left]=\"leftOffset\">\r\n    <div class=\"calendar-header\">\r\n      <div class=\"monthButtonContainer\">\r\n        <!-- Month dropdown -->\r\n        <ng-container *ngIf=\"isMonthDropdownOpen; else monthLabel\">\r\n          <mefdev-select\r\n            class=\"monthDropdown\"\r\n            [(ngModel)]=\"selectedDateMonth\"\r\n            (ngModelChange)=\"onMonthChange()\"\r\n            [PlaceHolder]=\"'month'\"\r\n          >\r\n            <mefdev-option\r\n              *ngFor=\"let month of months; let i = index\"\r\n              [Value]=\"i\"\r\n              [Label]=\"month\"\r\n              style=\"z-index: 1\"\r\n            >{{ month }}</mefdev-option>\r\n          </mefdev-select>\r\n        </ng-container>\r\n        <ng-template #monthLabel>\r\n          <span (click)=\"toggleMonthDropdown($event)\"></span>\r\n        </ng-template>\r\n\r\n        <!-- Year dropdown -->\r\n        <ng-container *ngIf=\"isYearDropdownOpen; else yearLabel\">\r\n          <mefdev-select\r\n            class=\"yearDropdown\"\r\n            [(ngModel)]=\"selectedDateYear\"\r\n            (ngModelChange)=\"onYearChange()\"\r\n            [PlaceHolder]=\"'year'\"\r\n          >\r\n            <mefdev-option\r\n              *ngFor=\"let year of years\"\r\n              [Label]=\"year\"\r\n              [Value]=\"year\"\r\n            >{{year}}</mefdev-option>\r\n          </mefdev-select>\r\n        </ng-container>\r\n        <ng-template #yearLabel>\r\n          <span (click)=\"toggleYearDropdown($event)\">{{ selectedDateYear }}</span>\r\n        </ng-template>\r\n      </div>\r\n      <!-- Calendar exit button -->\r\n      <div>\r\n        <i class=\"fa fa-times toggleCalendarButton\" (click)=\"isCalendarOpen = false\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"calendar-body\">\r\n      <table>\r\n        <tr>\r\n          <th class=\"text-center\" *ngFor=\"let weekday of weekdays\">{{ weekday }}</th>\r\n        </tr>\r\n        <tr *ngFor=\"let week of calendarDays\">\r\n          <td *ngFor=\"let dayData of week\"\r\n              (click)=\"selectDate(dayData.date)\"\r\n              [ngClass]=\"{ 'selected': isDateSelected(dayData.date), 'prev-month': !dayData.isCurrentMonth }\">\r\n\r\n            <span class=\"date\" [class.prev-month]=\"!dayData.isCurrentMonth\">\r\n              {{ dayData.date.getDate() }}\r\n            </span>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!important}.datepicker-container{position:relative;display:inline-block}.datepicker-container.disabled{pointer-events:none;opacity:.8}.input-container{position:relative;display:inline-block}.input-container input[type=text]{padding:5px 5px 5px 15px;border:1px solid #929292}.input-container .calendarNotOpened{cursor:pointer}.calendar{position:absolute;border:1px solid #929292;background-color:#eaeaea;z-index:1}.calendar .calendar-header{background-color:#fff;text-align:center;justify-content:space-between;display:flex;padding:5px 0}.calendar .calendar-header i.fa{display:flex;justify-content:center;align-items:center;width:30px;height:30px;font-size:20px;border-radius:50%;cursor:pointer;background-color:transparent;border:none;color:#cf0106}.calendar .calendar-header .monthButtonContainer{padding-left:10px;height:45px;min-width:140px;display:flex;align-items:center}.calendar .calendar-header .monthDropdown,.calendar .calendar-header .yearDropdown{height:45px;width:105px;cursor:pointer;display:inline-block;padding:6px 5px;border:1px solid #EAEAEA;border-radius:4px;background-color:#fff;color:#4d4d4d}.calendar .calendar-header .monthDropdown{margin:0 8px 0 0;width:130px}.calendar .calendar-header .monthDropdown:hover,.calendar .calendar-header .yearDropdown:hover{border-color:#f3f3f3}.calendar .calendar-body{padding:5px}.calendar .calendar-body table{width:100%}.calendar .calendar-body td{padding:10px;position:relative}.calendar .calendar-body td.selected{position:relative;color:#fff}.calendar .calendar-body td.selected:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:20%;background-color:#cf0106;z-index:-1;width:30px;height:30px;color:#fff;border:1px solid #373737}.calendar .calendar-body td:hover{color:#fff;font-weight:700;background-color:#929292;border-radius:20%;cursor:pointer}.calendar .calendar-body .date{display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MefDevOptionComponent, selector: "mefdev-option", inputs: ["Value", "Label", "Disabled"] }, { kind: "component", type: MefDevSelectComponent, selector: "mefdev-select", inputs: ["Filter", "MaxMultiple", "FirstDefault", "AllowClear", "KeepUnListOptions", "Mode", "Multiple", "PlaceHolder", "NotFoundContent", "Size", "ShowSearch", "Tags", "Disabled", "Open"], outputs: ["SearchChange", "change", "OpenChange", "ScrollToBottom"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-datepicker', template: "<div class=\"datepicker-container\"\r\n[class.disabled]=\"disabled\"\r\n>\r\n\r\n  <!-- Input, save & edit buttons -->\r\n    <div class=\"input-container\">\r\n\r\n      <div *ngIf=\"!isEditing\">\r\n\r\n        <input\r\n        type=\"text\"\r\n        (click)=\"toggleCalendar()\"\r\n        [value]=\"formattedDate\"\r\n        [readOnly]=\"true\"\r\n        [disabled]=\"isEditing\"\r\n      >\r\n      </div>\r\n        <!-- Edit -->\r\n        <i class=\"fa fa-pencil-square-o edit-button\" aria-hidden=\"true\" (click)=\"toggleEdit()\"></i> \r\n\r\n        <div *ngIf=\"isEditing\">\r\n            <input\r\n            type=\"text\"\r\n            [value]=\"editedDate\"\r\n            (input)=\"onDateInput($event)\"\r\n            class=\"border-3\"\r\n            (click)=\"toggleCalendar()\"\r\n            >\r\n            <i class=\"fa fa-floppy-o edit-button\" (click)=\"saveEditedDate()\" aria-hidden=\"true\"></i>\r\n     </div>     \r\n    </div>\r\n\r\n<!-- Calendar(Dropdowns, dates) -->\r\n  <div *ngIf=\"isCalendarOpen\" class=\"calendar\" #calendarContainer \r\n  [style.top]=\"topOffset\"\r\n  [style.left]=\"leftOffset\">\r\n    <div class=\"calendar-header\">\r\n        <div class=\"monthButtonContainer\">\r\n            <!-- Month dropdown -->\r\n            <ng-container *ngIf=\"isMonthDropdownOpen; else monthLabel\">\r\n              <mefdev-select    \r\n              class=\"monthDropdown\"\r\n              [(ngModel)]=\"selectedDateMonth\" \r\n              (ngModelChange)=\"onMonthChange()\"\r\n              [PlaceHolder]=\"'month'\"\r\n              >\r\n                <mefdev-option \r\n                *ngFor=\"let month of months; let i = index\" \r\n                [Value]=\"i\"\r\n                [Label] = \"month\" \r\n                \r\n                >{{ month }}</mefdev-option>\r\n              </mefdev-select>\r\n            </ng-container>\r\n            <ng-template #monthLabel>\r\n              <span (click)=\"toggleMonthDropdown($event)\"></span>\r\n            </ng-template>\r\n\r\n            <!-- Year dropdown -->\r\n            <ng-container *ngIf=\"isYearDropdownOpen; else yearLabel\">\r\n              <mefdev-select \r\n              class=\"yearDropdown\" \r\n              [(ngModel)]=\"selectedDateYear\" \r\n              (ngModelChange)=\"onYearChange()\"\r\n              [PlaceHolder]=\"'year'\"\r\n              >\r\n                  <mefdev-option \r\n                  *ngFor=\"let year of years\" \r\n                  [Label] = \"year\" \r\n                  [Value]=\"year\" \r\n                  >{{year}}</mefdev-option>\r\n              </mefdev-select>\r\n            </ng-container>\r\n            <ng-template #yearLabel>\r\n              <span (click)=\"toggleYearDropdown($event)\">{{ selectedDateYear }}</span>\r\n            </ng-template>\r\n           </div>\r\n           <!-- Calendar exit button -->\r\n           <div>\r\n            <i class=\"fa fa-times toggleCalendarButton\" (click)=\"toggleCalendar()\" aria-hidden=\"true\"></i>\r\n            </div>\r\n    </div>\r\n    \r\n    <div class=\"calendar-body\">\r\n      <table>\r\n        <tr>\r\n          <th class=\"align-items-center\" *ngFor=\"let weekday of weekdays\">{{ weekday }}</th>\r\n        </tr>\r\n        <tr *ngFor=\"let week of calendarDays\">\r\n          <td *ngFor=\"let dayData of week\" \r\n              (click)=\"selectDate(dayData.date)\"\r\n              [ngClass]=\"{ 'selected': isDateSelected(dayData.date), 'prev-month': !dayData.isCurrentMonth }\">\r\n\r\n            <span class=\"date\" \r\n              [class.prev-month]=\"!dayData.isCurrentMonth\"\r\n              >\r\n              {{ dayData.date.getDate() }}\r\n            </span>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</div>\r\n\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}.datepicker-container{position:relative;display:inline-block}.datepicker-container.disabled{pointer-events:none;opacity:.8}.input-container{position:relative;display:inline-block}.input-container input[type=text]{cursor:pointer;padding:5px;border:1px solid #929292;border-radius:4px}.input-container input[type=text]:hover{border:1px solid #4D4D4D}.input-container .edit-button{position:absolute;top:0;right:0;height:100%;margin:0;padding:5px 10px;background-color:#eaeaea;border:1px solid #929292;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;display:flex;justify-content:center;align-items:center}.calendar{position:absolute;top:35px;left:10%;border:1px solid #929292;background-color:#eaeaea;border-radius:4px;z-index:1}.calendar .calendar-header{background-color:#fff;text-align:center;justify-content:space-between;display:flex;padding:5px 0}.calendar .calendar-header i.fa{display:flex;justify-content:center;align-items:center;width:30px;height:30px;font-size:20px;border-radius:50%;cursor:pointer;background-color:transparent;border:none;color:#cf0106}.calendar .calendar-header .monthButtonContainer{padding-left:10px;height:45px;min-width:140px;display:flex;align-items:center}.calendar .calendar-header .monthDropdown,.calendar .calendar-header .yearDropdown{height:45px;width:105px;cursor:pointer;display:inline-block;padding:6px 5px;border:1px solid #EAEAEA;border-radius:4px;background-color:#fff;color:#4d4d4d}.calendar .calendar-header .monthDropdown{margin:0 8px 0 0;width:130px}.calendar .calendar-header .monthDropdown:hover,.calendar .calendar-header .yearDropdown:hover{border-color:#f3f3f3}.calendar .calendar-body{padding:5px;width:260px}.calendar .calendar-body td{padding:10px;position:relative}.calendar .calendar-body td.selected{position:relative;color:#fff}.calendar .calendar-body td.selected:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:20%;background-color:#cf0106;z-index:-1;width:30px;height:30px;color:#fff;border:1px solid #373737}.calendar .calendar-body td:hover{color:#fff;font-weight:700;background-color:#929292;border-radius:20%;cursor:pointer}.calendar .calendar-body .date{display:flex;justify-content:center}.calendar .calendar-body .date.prev-month{color:#f3f3f3}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DatePipe }, { type: i0.ElementRef }]; }, propDecorators: { lang: [{
+            args: [{ selector: 'mefdev-datepicker', template: "<div class=\"datepicker-container\" [class.disabled]=\"disabled\">\r\n\r\n  <!-- Input, save & edit buttons -->\r\n    <div class=\"input-container form-group\">\r\n        <label *ngIf=\"labelContentText\" class=\"form-label\"> {{ labelContentText }} </label>\r\n        <input\r\n          [ngClass]=\"{ 'calendarNotOpened': !isCalendarOpen }\"\r\n          [ngStyle]=\"{ 'border-color': isUserDateValid ? '' : 'red' }\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          (input)=\"onDateInput($event)\"\r\n          (click)=\"isCalendarOpen = true\"\r\n          [value]=\"formattedDate\"\r\n          [readOnly]=\"!isCalendarOpen\"\r\n        >\r\n    </div>\r\n\r\n  <!-- Calendar(Dropdowns, dates) -->\r\n  <div *ngIf=\"isCalendarOpen\" class=\"calendar\" #calendarContainer\r\n       [style.top]=\"topOffset\"\r\n       [style.left]=\"leftOffset\">\r\n    <div class=\"calendar-header\">\r\n      <div class=\"monthButtonContainer\">\r\n        <!-- Month dropdown -->\r\n        <ng-container *ngIf=\"isMonthDropdownOpen; else monthLabel\">\r\n          <mefdev-select\r\n            class=\"monthDropdown\"\r\n            [(ngModel)]=\"selectedDateMonth\"\r\n            (ngModelChange)=\"onMonthChange()\"\r\n            [PlaceHolder]=\"'month'\"\r\n          >\r\n            <mefdev-option\r\n              *ngFor=\"let month of months; let i = index\"\r\n              [Value]=\"i\"\r\n              [Label]=\"month\"\r\n              style=\"z-index: 1\"\r\n            >{{ month }}</mefdev-option>\r\n          </mefdev-select>\r\n        </ng-container>\r\n        <ng-template #monthLabel>\r\n          <span (click)=\"toggleMonthDropdown($event)\"></span>\r\n        </ng-template>\r\n\r\n        <!-- Year dropdown -->\r\n        <ng-container *ngIf=\"isYearDropdownOpen; else yearLabel\">\r\n          <mefdev-select\r\n            class=\"yearDropdown\"\r\n            [(ngModel)]=\"selectedDateYear\"\r\n            (ngModelChange)=\"onYearChange()\"\r\n            [PlaceHolder]=\"'year'\"\r\n          >\r\n            <mefdev-option\r\n              *ngFor=\"let year of years\"\r\n              [Label]=\"year\"\r\n              [Value]=\"year\"\r\n            >{{year}}</mefdev-option>\r\n          </mefdev-select>\r\n        </ng-container>\r\n        <ng-template #yearLabel>\r\n          <span (click)=\"toggleYearDropdown($event)\">{{ selectedDateYear }}</span>\r\n        </ng-template>\r\n      </div>\r\n      <!-- Calendar exit button -->\r\n      <div>\r\n        <i class=\"fa fa-times toggleCalendarButton\" (click)=\"isCalendarOpen = false\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"calendar-body\">\r\n      <table>\r\n        <tr>\r\n          <th class=\"text-center\" *ngFor=\"let weekday of weekdays\">{{ weekday }}</th>\r\n        </tr>\r\n        <tr *ngFor=\"let week of calendarDays\">\r\n          <td *ngFor=\"let dayData of week\"\r\n              (click)=\"selectDate(dayData.date)\"\r\n              [ngClass]=\"{ 'selected': isDateSelected(dayData.date), 'prev-month': !dayData.isCurrentMonth }\">\r\n\r\n            <span class=\"date\" [class.prev-month]=\"!dayData.isCurrentMonth\">\r\n              {{ dayData.date.getDate() }}\r\n            </span>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!important}.datepicker-container{position:relative;display:inline-block}.datepicker-container.disabled{pointer-events:none;opacity:.8}.input-container{position:relative;display:inline-block}.input-container input[type=text]{padding:5px 5px 5px 15px;border:1px solid #929292}.input-container .calendarNotOpened{cursor:pointer}.calendar{position:absolute;border:1px solid #929292;background-color:#eaeaea;z-index:1}.calendar .calendar-header{background-color:#fff;text-align:center;justify-content:space-between;display:flex;padding:5px 0}.calendar .calendar-header i.fa{display:flex;justify-content:center;align-items:center;width:30px;height:30px;font-size:20px;border-radius:50%;cursor:pointer;background-color:transparent;border:none;color:#cf0106}.calendar .calendar-header .monthButtonContainer{padding-left:10px;height:45px;min-width:140px;display:flex;align-items:center}.calendar .calendar-header .monthDropdown,.calendar .calendar-header .yearDropdown{height:45px;width:105px;cursor:pointer;display:inline-block;padding:6px 5px;border:1px solid #EAEAEA;border-radius:4px;background-color:#fff;color:#4d4d4d}.calendar .calendar-header .monthDropdown{margin:0 8px 0 0;width:130px}.calendar .calendar-header .monthDropdown:hover,.calendar .calendar-header .yearDropdown:hover{border-color:#f3f3f3}.calendar .calendar-body{padding:5px}.calendar .calendar-body table{width:100%}.calendar .calendar-body td{padding:10px;position:relative}.calendar .calendar-body td.selected{position:relative;color:#fff}.calendar .calendar-body td.selected:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:20%;background-color:#cf0106;z-index:-1;width:30px;height:30px;color:#fff;border:1px solid #373737}.calendar .calendar-body td:hover{color:#fff;font-weight:700;background-color:#929292;border-radius:20%;cursor:pointer}.calendar .calendar-body .date{display:flex;justify-content:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DatePipe }, { type: i0.ElementRef }]; }, propDecorators: { labelContentText: [{
+                type: Input
+            }], lang: [{
                 type: Input
             }], dateFormat: [{
                 type: Input
@@ -2078,11 +2083,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
             }] } });
 class MefDevSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectModule, declarations: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent], imports: [CommonModule, FormsModule, OverlayModule], exports: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectModule, imports: [CommonModule, FormsModule, OverlayModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevSelectModule, declarations: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent], imports: [CommonModule, FormsModule, OverlayModule], exports: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSelectModule, imports: [CommonModule, FormsModule, OverlayModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, OverlayModule],
@@ -2092,11 +2097,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
         }] });
 class MefDevDatepickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevDatepickerModule, declarations: [DatepickerComponent], imports: [CommonModule, FormsModule, DatePipe, MefDevSelectModule], exports: [DatepickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevDatepickerModule, providers: [DatePipe], imports: [CommonModule, FormsModule, MefDevSelectModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevDatepickerModule, declarations: [DatepickerComponent], imports: [CommonModule, FormsModule, DatePipe, MefDevSelectModule], exports: [DatepickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevDatepickerModule, providers: [DatePipe], imports: [CommonModule, FormsModule, MefDevSelectModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DatepickerComponent],
@@ -2165,10 +2170,10 @@ class MefDevProgressComponent {
         return this._value2;
     }
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevProgressComponent, selector: "mefdev-progress", inputs: { type: "type", color: "color", thick: "thick", indeterminate: "indeterminate", value: "value" }, ngImport: i0, template: "<div *ngIf=\"type === 'bar'; else circleBlock\">\r\n  <div *ngIf=\"indeterminate; else determineBarBlock\">\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar-{{ color }}\" [class.progress-bar-indeterminate]=\"indeterminate\"></div>\r\n    </div>\r\n  </div>\r\n  <ng-template #determineBarBlock>\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar progress-bar-{{ color }}\" [ngStyle]=\"{ width: value + '%' }\"></div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<ng-template #circleBlock>\r\n  <div class=\"progress-circle-{{ color }}\" [class.progress-circle-indeterminate]=\"indeterminate\"\r\n    [class.progress-circle]=\"!indeterminate\" [class.progress-circle-thick]=\"thick\">\r\n    <div *ngIf=\"indeterminate; else determineBlock\"></div>\r\n    <ng-template #determineBlock>\r\n      <div class=\"pie\" [ngStyle]=\"_value2 && { clip: 'rect(auto, auto, auto, auto)' }\">\r\n        <div class=\"left-side half-circle\" [ngStyle]=\"_value2 && { transform: 'rotate(' + value + 'deg)' }\"></div>\r\n        <div class=\"right-side half-circle\" [ngStyle]=\"{\r\n            transform:\r\n              _value2 === true ? 'rotate(180deg)' : 'rotate(' + value + 'deg)'\r\n          }\"></div>\r\n      </div>\r\n      <div class=\"shadow\"></div>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MefDevProgressComponent, selector: "mefdev-progress", inputs: { type: "type", color: "color", thick: "thick", indeterminate: "indeterminate", value: "value" }, ngImport: i0, template: "<div *ngIf=\"type === 'bar'; else circleBlock\">\r\n  <div *ngIf=\"indeterminate; else determineBarBlock\">\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar-{{ color }}\" [class.progress-bar-indeterminate]=\"indeterminate\"></div>\r\n    </div>\r\n  </div>\r\n  <ng-template #determineBarBlock>\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar progress-bar-{{ color }}\" [ngStyle]=\"{ width: value + '%' }\"></div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<ng-template #circleBlock>\r\n  <div class=\"progress-circle-{{ color }}\" [class.progress-circle-indeterminate]=\"indeterminate\"\r\n    [class.progress-circle]=\"!indeterminate\" [class.progress-circle-thick]=\"thick\">\r\n    <div *ngIf=\"indeterminate; else determineBlock\"></div>\r\n    <ng-template #determineBlock>\r\n      <div class=\"pie\" [ngStyle]=\"_value2 && { clip: 'rect(auto, auto, auto, auto)' }\">\r\n        <div class=\"left-side half-circle\" [ngStyle]=\"_value2 && { transform: 'rotate(' + value + 'deg)' }\"></div>\r\n        <div class=\"right-side half-circle\" [ngStyle]=\"{\r\n            transform:\r\n              _value2 === true ? 'rotate(180deg)' : 'rotate(' + value + 'deg)'\r\n          }\"></div>\r\n      </div>\r\n      <div class=\"shadow\"></div>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevProgressComponent, decorators: [{
             type: Component,
             args: [{ selector: "mefdev-progress", template: "<div *ngIf=\"type === 'bar'; else circleBlock\">\r\n  <div *ngIf=\"indeterminate; else determineBarBlock\">\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar-{{ color }}\" [class.progress-bar-indeterminate]=\"indeterminate\"></div>\r\n    </div>\r\n  </div>\r\n  <ng-template #determineBarBlock>\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar progress-bar-{{ color }}\" [ngStyle]=\"{ width: value + '%' }\"></div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<ng-template #circleBlock>\r\n  <div class=\"progress-circle-{{ color }}\" [class.progress-circle-indeterminate]=\"indeterminate\"\r\n    [class.progress-circle]=\"!indeterminate\" [class.progress-circle-thick]=\"thick\">\r\n    <div *ngIf=\"indeterminate; else determineBlock\"></div>\r\n    <ng-template #determineBlock>\r\n      <div class=\"pie\" [ngStyle]=\"_value2 && { clip: 'rect(auto, auto, auto, auto)' }\">\r\n        <div class=\"left-side half-circle\" [ngStyle]=\"_value2 && { transform: 'rotate(' + value + 'deg)' }\"></div>\r\n        <div class=\"right-side half-circle\" [ngStyle]=\"{\r\n            transform:\r\n              _value2 === true ? 'rotate(180deg)' : 'rotate(' + value + 'deg)'\r\n          }\"></div>\r\n      </div>\r\n      <div class=\"shadow\"></div>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { type: [{
@@ -2189,12 +2194,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
  *
  * Example usage:
  * ```
- * <pgcard [Title]="'Card Title'" [Type]="'default'" [MinimalHeader]="false" [ProgressType]="'circle'">
+ * <mefdev-inner-card [Title]="'Card Title'" [Type]="'default'" [MinimalHeader]="false" [ProgressType]="'circle'">
  *   Card content goes here...
- * </pgcard>
+ * </mefdev-inner-card>
  * ```
  */
-class pgCard {
+class MefdevInnerCard {
+    // constructor() {
+    //   console.log('1')
+    // }
     /**
      * Indicates whether the card is collapsed or not.
      * Default: false
@@ -2500,8 +2508,8 @@ class pgCard {
     close() {
         this._close_card = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: pgCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: pgCard, selector: "pgcard", inputs: { Title: "Title", Type: "Type", MinimalHeader: "MinimalHeader", ProgressType: "ProgressType", ProgressColor: "ProgressColor", Refresh: "Refresh", RefreshColor: "RefreshColor", Maximize: "Maximize", Close: "Close", Toggle: "Toggle", HeaderClass: "HeaderClass", BodyClass: "BodyClass", AdditionalClasses: "AdditionalClasses", Controls: "Controls", ShowMessage: "ShowMessage", Message: "Message", Loading: "Loading", TimeOut: "TimeOut", CardBorderStyle: "CardBorderStyle" }, outputs: { onRefresh: "onRefresh" }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }, { propertyName: "CardExtraControls", first: true, predicate: ["CardExtraControls"], descendants: true }], viewQueries: [{ propertyName: "_hostContent", first: true, predicate: ["hostContent"], descendants: true }, { propertyName: "minimalCircleLoading", first: true, predicate: ["minimalCircleLoading"], descendants: true }, { propertyName: "minimalCircleLoadingTrigger", first: true, predicate: ["minimalCircleLoadingTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"card card-{{ _type }} {{ _additionalClasses }}\" *ngIf=\"!_close_card\" [class.card-collapsed]=\"_isCollapsed\"\r\n  [class.card-maximized]=\"_isMaximixed\" #hostContent class=\"col-sm-12 col-md-6 col-lg-4\"\r\n  [ngStyle]=\"{'border': _card_border_style}\">\r\n  <div class=\"card-header {{ _extraHeaderClass }}\">\r\n    <div class=\"card-title\">\r\n      <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n    </div>\r\n    <div class=\"card-controls\" *ngIf=\"_showTools == true\">\r\n      <ng-template [ngTemplateOutlet]=\"CardExtraControls\"></ng-template>\r\n      <ul *ngIf=\"_minimalHeader == false; else minimalBlock\">\r\n        <li *ngIf=\"_toggle == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-collapse\" (click)=\"toggle()\"><i\r\n              class=\"pg pg-arrow_maximize\" [class.pg-arrow_minimize]=\"_isCollapsed\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_refresh == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-refresh\" (click)=\"refresh()\"><i\r\n              class=\"card-icon card-icon-refresh\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_maximize == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-maximize\" (click)=\"maximize()\"><i\r\n              class=\"card-icon card-icon-maximize\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_close == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-close\" (click)=\"close()\"><i\r\n              class=\"card-icon card-icon-close\"></i></a>\r\n        </li>\r\n      </ul>\r\n       <!-- <ng-template #minimalBlock>\r\n        <ul>\r\n          <li>\r\n            <a href=\"javascript:void(0);\" (click)=\"refresh()\" class=\"card-refresh minimal\"\r\n              [class.refreshing]=\"_isLoading\">\r\n              <i #minimalCircleLoadingTrigger class=\"card-icon card-icon-refresh-lg-{{\r\n                  _refreshColor == 'light' ? 'white' : 'master'\r\n                }}\" [class.fade]=\"_isLoading\"></i>\r\n             <i #minimalCircleLoading class=\"card-icon-refresh-lg-white-animated\"\r\n                style=\"position: absolute;top:0;left:0\" [class.active]=\"_isLoading\"\r\n                [class.hide]=\"_isLoading != true\"></i>\r\n            </a>\r\n          </li>\r\n        </ul>\r\n      </ng-template> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"card-body {{ _extraBodyClass }}\" [@collapseState]=\"_isCollapsed == true ? 'inactive' : 'active'\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"_messageVisible == true\" class=\"pgn-wrapper\" data-position=\"top\">\r\n    <div class=\"pgn pgn-bar push-on-sidebar-open\">\r\n      <div class=\"alert alert-danger\">\r\n        <span>{{ _message }}</span><button class=\"close\" (click)=\"alertDismiss()\" type=\"button\">\r\n          <span aria-hidden=\"true\">\u00D7</span><span class=\"sr-only\">{{ 'Close' }}</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"_messageVisible == true\" class=\"card-progress\" [style.backgroundColor]=\"\r\n      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'\r\n    \" style=\" display: block;\"></div>\r\n  <div [@fadeAnimation]=\"_isLoading\" class=\"card-progress\" [style.backgroundColor]=\"\r\n      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'\r\n    \" style=\"display: block;pointer-events: none\">\r\n    <mefdev-progress *ngIf=\"_minimalHeader == false\" type=\"{{ _progressType }}\" color=\"{{ _progressColor }}\"\r\n      indeterminate=\"true\" class=\"\"></mefdev-progress>\r\n  </div>\r\n</div>", 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"] }, { kind: "component", type: MefDevProgressComponent, selector: "mefdev-progress", inputs: ["type", "color", "thick", "indeterminate", "value"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefdevInnerCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MefdevInnerCard, selector: "mefdev-inner-card", inputs: { Title: "Title", Type: "Type", MinimalHeader: "MinimalHeader", ProgressType: "ProgressType", ProgressColor: "ProgressColor", Refresh: "Refresh", RefreshColor: "RefreshColor", Maximize: "Maximize", Close: "Close", Toggle: "Toggle", HeaderClass: "HeaderClass", BodyClass: "BodyClass", AdditionalClasses: "AdditionalClasses", Controls: "Controls", ShowMessage: "ShowMessage", Message: "Message", Loading: "Loading", TimeOut: "TimeOut", CardBorderStyle: "CardBorderStyle" }, outputs: { onRefresh: "onRefresh" }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }, { propertyName: "CardExtraControls", first: true, predicate: ["CardExtraControls"], descendants: true }], viewQueries: [{ propertyName: "_hostContent", first: true, predicate: ["hostContent"], descendants: true }, { propertyName: "minimalCircleLoading", first: true, predicate: ["minimalCircleLoading"], descendants: true }, { propertyName: "minimalCircleLoadingTrigger", first: true, predicate: ["minimalCircleLoadingTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"card card-{{ _type }} {{ _additionalClasses }}\" *ngIf=\"!_close_card\" [class.card-collapsed]=\"_isCollapsed\"\r\n  [class.card-maximized]=\"_isMaximixed\" #hostContent class=\"col-sm-12 col-md-6 col-lg-4\"\r\n  [ngStyle]=\"{'border': _card_border_style}\">\r\n  <div class=\"card-header {{ _extraHeaderClass }}\">\r\n    <div class=\"card-title\">\r\n      <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n    </div>\r\n    <div class=\"card-controls\" *ngIf=\"_showTools == true\">\r\n      <ng-template [ngTemplateOutlet]=\"CardExtraControls\"></ng-template>\r\n      <ul *ngIf=\"_minimalHeader == false; else minimalBlock\">\r\n        <li *ngIf=\"_toggle == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-collapse\" (click)=\"toggle()\"><i\r\n              class=\"pg pg-arrow_maximize\" [class.pg-arrow_minimize]=\"_isCollapsed\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_refresh == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-refresh\" (click)=\"refresh()\"><i\r\n              class=\"card-icon card-icon-refresh\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_maximize == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-maximize\" (click)=\"maximize()\"><i\r\n              class=\"card-icon card-icon-maximize\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_close == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-close\" (click)=\"close()\"><i\r\n              class=\"card-icon card-icon-close\"></i></a>\r\n        </li>\r\n      </ul>\r\n       <!-- <ng-template #minimalBlock>\r\n        <ul>\r\n          <li>\r\n            <a href=\"javascript:void(0);\" (click)=\"refresh()\" class=\"card-refresh minimal\"\r\n              [class.refreshing]=\"_isLoading\">\r\n              <i #minimalCircleLoadingTrigger class=\"card-icon card-icon-refresh-lg-{{\r\n                  _refreshColor == 'light' ? 'white' : 'master'\r\n                }}\" [class.fade]=\"_isLoading\"></i>\r\n             <i #minimalCircleLoading class=\"card-icon-refresh-lg-white-animated\"\r\n                style=\"position: absolute;top:0;left:0\" [class.active]=\"_isLoading\"\r\n                [class.hide]=\"_isLoading != true\"></i>\r\n            </a>\r\n          </li>\r\n        </ul>\r\n      </ng-template> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"card-body {{ _extraBodyClass }}\" [@collapseState]=\"_isCollapsed == true ? 'inactive' : 'active'\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"_messageVisible == true\" class=\"pgn-wrapper\" data-position=\"top\">\r\n    <div class=\"pgn pgn-bar push-on-sidebar-open\">\r\n      <div class=\"alert alert-danger\">\r\n        <span>{{ _message }}</span><button class=\"close\" (click)=\"alertDismiss()\" type=\"button\">\r\n          <span aria-hidden=\"true\">\u00D7</span><span class=\"sr-only\">{{ 'Close' }}</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"_messageVisible == true\" class=\"card-progress\" [style.backgroundColor]=\"\r\n      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'\r\n    \" style=\" display: block;\"></div>\r\n  <div [@fadeAnimation]=\"_isLoading\" class=\"card-progress\" [style.backgroundColor]=\"\r\n      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'\r\n    \" style=\"display: block;pointer-events: none\">\r\n    <mefdev-progress *ngIf=\"_minimalHeader == false\" type=\"{{ _progressType }}\" color=\"{{ _progressColor }}\"\r\n      indeterminate=\"true\" class=\"\"></mefdev-progress>\r\n  </div>\r\n</div>", 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"] }, { kind: "component", type: MefDevProgressComponent, selector: "mefdev-progress", inputs: ["type", "color", "thick", "indeterminate", "value"] }], animations: [
             trigger("collapseState", [
                 state("inactive", style({
                     opacity: "0",
@@ -2530,9 +2538,9 @@ class pgCard {
             ])
         ], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: pgCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefdevInnerCard, decorators: [{
             type: Component,
-            args: [{ selector: "pgcard", encapsulation: ViewEncapsulation.None, animations: [
+            args: [{ selector: "mefdev-inner-card", encapsulation: ViewEncapsulation.None, animations: [
                         trigger("collapseState", [
                             state("inactive", style({
                                 opacity: "0",
@@ -2633,7 +2641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
   * </mefdev-card>
   * ```
   *
-  * <example-url>https://mef.dev/ui_kit_demo/view/card</example-url>
+  * <example-url>https://mef.dev/ui_kit_demo/view/page_components/card/card</example-url>
   */
 class CardComponent {
     router;
@@ -2706,12 +2714,12 @@ class CardComponent {
     imgClick() {
         this.router.navigate(['/', this.imgUrl.toString()]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardComponent, selector: "mefdev-card", inputs: { card_type: "card_type", img: "img", imgUrl: "imgUrl", description: "description" }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }, { propertyName: "card_footer", first: true, predicate: ["card_footer"], descendants: true }], ngImport: i0, template: "\r\n    <pgcard\r\n    MinimalHeader=\"true\"\r\n    TimeOut=\"2500\"\r\n    [Refresh]=\"false\"\r\n    [Close]=\"false\">\r\n\r\n      <ng-template #CardTitle>\r\n        <ng-template class=\"card-title body-1\" [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n      </ng-template>\r\n\r\n      <div class=\"plugin-type\">\r\n        {{ card_type }}\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"m-l-2 card-description\">\r\n            <div *ngIf=\"!description || description == ''\" class=\"card-no-description\"> {{'No plugin description'}}</div>\r\n            <p>\r\n              {{description}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 mt-3 text-center card-img\"\r\n        [ngStyle]=\"{'background-color': img ? 'transparent' : '#fff'}\">\r\n          <div *ngIf=\"!img || img == ''\" >\r\n            <img src=\"assets/images/md_icon.png\"\r\n            style=\"max-width: 110px; max-height: 110px;\"/>\r\n          </div>\r\n          <div *ngIf=\"img\" >\r\n            <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n              style=\"max-width: 260px; max-height: 150px;\"\r\n              onclick=\"imgClick()\"\r\n            />\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row mb-3 mt-3\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </pgcard>\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,.plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,::ng-deep .card-title span,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,.card-description,.card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-default{background-color:#eaeaea;border-radius:5px}.card-header{height:72px}::ng-deep .card-title{width:70%}.plugin-type{right:20px;top:25px;position:absolute;background-color:#cf0106;border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}.card-description{height:40px;overflow-y:clip;color:#4d4d4d}.card-no-description{overflow-y:clip;height:60px;color:#929292}.card-img{padding:0;height:130px;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\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"] }, { kind: "component", type: pgCard, selector: "pgcard", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardComponent, selector: "mefdev-card", inputs: { card_type: "card_type", img: "img", imgUrl: "imgUrl", description: "description" }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }, { propertyName: "card_footer", first: true, predicate: ["card_footer"], descendants: true }], ngImport: i0, template: "<mefdev-inner-card\r\n  MinimalHeader=\"true\"\r\n  TimeOut=\"2500\"\r\n  [Refresh]=\"false\"\r\n  [Close]=\"false\">\r\n\r\n  <ng-template #CardTitle>\r\n    <ng-template class=\"card-title body-1\" [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n  </ng-template>\r\n\r\n  <div class=\"plugin-type\">\r\n    {{ card_type }}\r\n  </div>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"col-12\">\r\n      <div class=\"m-l-2 card-description\">\r\n        <div *ngIf=\"!description || description == ''\" class=\"card-no-description\"> {{'No plugin description'}}</div>\r\n        <p>\r\n          {{description}}\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-12 mt-3 text-center card-img\"\r\n         [ngStyle]=\"{'background-color': img ? 'transparent' : '#fff'}\">\r\n      <div *ngIf=\"!img || img == ''\">\r\n        <img src=\"assets/images/md_icon.png\"\r\n             style=\"max-width: 110px; max-height: 110px;\"/>\r\n      </div>\r\n      <div *ngIf=\"img\">\r\n        <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n             style=\"max-width: 260px; max-height: 150px;\"\r\n             onclick=\"imgClick()\"\r\n        />\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"row mb-3 mt-3\">\r\n    <div class=\"col-12\">\r\n      <ng-template [ngTemplateOutlet]=\"card_footer\"></ng-template>\r\n    </div>\r\n  </div>\r\n</mefdev-inner-card>\r\n", styles: [".color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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,.plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,::ng-deep .card-title span,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,.card-description,.card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-default{background-color:#eaeaea;border-radius:5px}.card-header{height:72px}::ng-deep .card-title{width:70%}.plugin-type{right:20px;top:25px;position:absolute;background-color:#cf0106;border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}.card-description{height:40px;overflow-y:clip;color:#4d4d4d}.card-no-description{overflow-y:clip;height:60px;color:#929292}.card-img{padding:0;height:130px;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\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"] }, { kind: "component", type: MefdevInnerCard, selector: "mefdev-inner-card", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-card', template: "\r\n    <pgcard\r\n    MinimalHeader=\"true\"\r\n    TimeOut=\"2500\"\r\n    [Refresh]=\"false\"\r\n    [Close]=\"false\">\r\n\r\n      <ng-template #CardTitle>\r\n        <ng-template class=\"card-title body-1\" [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n      </ng-template>\r\n\r\n      <div class=\"plugin-type\">\r\n        {{ card_type }}\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"m-l-2 card-description\">\r\n            <div *ngIf=\"!description || description == ''\" class=\"card-no-description\"> {{'No plugin description'}}</div>\r\n            <p>\r\n              {{description}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 mt-3 text-center card-img\"\r\n        [ngStyle]=\"{'background-color': img ? 'transparent' : '#fff'}\">\r\n          <div *ngIf=\"!img || img == ''\" >\r\n            <img src=\"assets/images/md_icon.png\"\r\n            style=\"max-width: 110px; max-height: 110px;\"/>\r\n          </div>\r\n          <div *ngIf=\"img\" >\r\n            <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n              style=\"max-width: 260px; max-height: 150px;\"\r\n              onclick=\"imgClick()\"\r\n            />\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row mb-3 mt-3\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </pgcard>\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,.plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,::ng-deep .card-title span,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,.card-description,.card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-default{background-color:#eaeaea;border-radius:5px}.card-header{height:72px}::ng-deep .card-title{width:70%}.plugin-type{right:20px;top:25px;position:absolute;background-color:#cf0106;border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}.card-description{height:40px;overflow-y:clip;color:#4d4d4d}.card-no-description{overflow-y:clip;height:60px;color:#929292}.card-img{padding:0;height:130px;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"] }]
+            args: [{ selector: 'mefdev-card', template: "<mefdev-inner-card\r\n  MinimalHeader=\"true\"\r\n  TimeOut=\"2500\"\r\n  [Refresh]=\"false\"\r\n  [Close]=\"false\">\r\n\r\n  <ng-template #CardTitle>\r\n    <ng-template class=\"card-title body-1\" [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n  </ng-template>\r\n\r\n  <div class=\"plugin-type\">\r\n    {{ card_type }}\r\n  </div>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"col-12\">\r\n      <div class=\"m-l-2 card-description\">\r\n        <div *ngIf=\"!description || description == ''\" class=\"card-no-description\"> {{'No plugin description'}}</div>\r\n        <p>\r\n          {{description}}\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-12 mt-3 text-center card-img\"\r\n         [ngStyle]=\"{'background-color': img ? 'transparent' : '#fff'}\">\r\n      <div *ngIf=\"!img || img == ''\">\r\n        <img src=\"assets/images/md_icon.png\"\r\n             style=\"max-width: 110px; max-height: 110px;\"/>\r\n      </div>\r\n      <div *ngIf=\"img\">\r\n        <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n             style=\"max-width: 260px; max-height: 150px;\"\r\n             onclick=\"imgClick()\"\r\n        />\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"row mb-3 mt-3\">\r\n    <div class=\"col-12\">\r\n      <ng-template [ngTemplateOutlet]=\"card_footer\"></ng-template>\r\n    </div>\r\n  </div>\r\n</mefdev-inner-card>\r\n", styles: [".color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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,.plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,::ng-deep .card-title span,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,.card-description,.card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-default{background-color:#eaeaea;border-radius:5px}.card-header{height:72px}::ng-deep .card-title{width:70%}.plugin-type{right:20px;top:25px;position:absolute;background-color:#cf0106;border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}.card-description{height:40px;overflow-y:clip;color:#4d4d4d}.card-no-description{overflow-y:clip;height:60px;color:#929292}.card-img{padding:0;height:130px;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { card_title: [{
                 type: ContentChild,
                 args: ["card_title"]
@@ -2766,7 +2774,7 @@ var CartTypeColors;
 * </mefdev-card-long>
 * ```
 *
-* <example-url>https://mef.dev/ui_kit_demo/view/card/card-long</example-url>
+* <example-url>https://mef.dev/ui_kit_demo/view/page_components/card/card_long</example-url>
 */
 class CardLongComponent {
     router;
@@ -2868,12 +2876,12 @@ class CardLongComponent {
     imgClick() {
         this.router.navigate(['/', this.imgUrl.toString()]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardLongComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardLongComponent, selector: "mefdev-card-long", inputs: { type_text: "type_text", type_color: "type_color", img: "img", imgUrl: "imgUrl", description: "description" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "params", first: true, predicate: ["params"], descendants: true }, { propertyName: "second_col", first: true, predicate: ["second_col"], descendants: true }, { propertyName: "third_col", first: true, predicate: ["third_col"], descendants: true }], ngImport: i0, template: "\r\n    <pgcard \r\n    MinimalHeader=\"true\" \r\n    TimeOut=\"2500\" \r\n    [Refresh]=\"false\" \r\n    [Close]=\"false\"\r\n    >\r\n      \r\n      <ng-template #CardTitle>\r\n        <ng-template class=\"card-title\" [ngTemplateOutlet]=\"title\"></ng-template>\r\n      </ng-template>\r\n\r\n      <ng-template #CardExtraControls>\r\n        <div class=\"plugin-type\" \r\n        [ngClass] = \"{\r\n            'b-color-Light-Gray-1': type_color === 'UNSET',\r\n            'b-color-Red': type_color === 'RED',\r\n            'b-color-Green': type_color === 'GREEN'}\">\r\n          {{type_text}}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <div class=\"row h-100 m-b-10\">\r\n        <div class=\"col-lg-3 col-12 card-col\">\r\n          <div class=\"row\">\r\n            <div class=\"col-12 card-img m-b-10\">\r\n              <div *ngIf=\"!img || img == ''\" >\r\n                <img src=\"assets/images/md_icon.png\"\r\n                style=\"max-width: 110px; max-height: 110px;\"/>\r\n              </div>\r\n              <div *ngIf=\"img\">\r\n                <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n                  height=\"110px\" \r\n                  style=\"max-width: 110px; max-height: 110px;\"\r\n                  onclick=\"imgClick()\"\r\n                />\r\n              </div>    \r\n            </div>\r\n            <div class=\"col-12 m-t-2 body-6 text-dark params-block\">\r\n              <ng-template [ngTemplateOutlet]=\"params\"></ng-template> \r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"col-lg-5 col-12 card-col\">\r\n          <ng-template [ngTemplateOutlet]=\"second_col\"></ng-template> \r\n        </div>\r\n        \r\n        <div class=\"col-lg-4 col-12 card-col mt-lg-0 mt-5\">\r\n            <ng-template [ngTemplateOutlet]=\"third_col\"></ng-template> \r\n        </div>  \r\n\r\n      </div>\r\n    </pgcard>", 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,:host::ng-deep .card-title span,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,:host::ng-deep .plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,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,:host::ng-deep .card-description,:host::ng-deep .card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .params-block .row{margin-top:.75em}:host::ng-deep .params-block .row:last-child{margin-bottom:.75em}:host::ng-deep .card-col{min-height:220px}:host::ng-deep .header-link{opacity:1}:host::ng-deep .card-default{background-color:#f3f3f3;border-radius:5px}:host::ng-deep .card-title{width:80%;color:#000}:host::ng-deep .plugin-type{border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}:host::ng-deep .card-description{height:40px;overflow-y:clip;color:#4d4d4d}:host::ng-deep .card-no-description{overflow-y:clip;height:60px;color:#929292}:host::ng-deep .card-img{padding:0;height:130px;background-color:#fff;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: pgCard, selector: "pgcard", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardLongComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardLongComponent, selector: "mefdev-card-long", inputs: { type_text: "type_text", type_color: "type_color", img: "img", imgUrl: "imgUrl", description: "description" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "params", first: true, predicate: ["params"], descendants: true }, { propertyName: "second_col", first: true, predicate: ["second_col"], descendants: true }, { propertyName: "third_col", first: true, predicate: ["third_col"], descendants: true }], ngImport: i0, template: "<mefdev-inner-card\r\n  MinimalHeader=\"true\"\r\n  TimeOut=\"2500\"\r\n  [Refresh]=\"false\"\r\n  [Close]=\"false\"\r\n>\r\n\r\n  <ng-template #CardTitle>\r\n    <ng-template class=\"card-title\" [ngTemplateOutlet]=\"title\"></ng-template>\r\n  </ng-template>\r\n\r\n  <ng-template #CardExtraControls>\r\n    <div class=\"plugin-type\"\r\n         [ngClass]=\"{\r\n            'b-color-Light-Gray-1': type_color === 'UNSET',\r\n            'b-color-Red': type_color === 'RED',\r\n            'b-color-Green': type_color === 'GREEN'}\">\r\n      {{type_text}}\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"row h-100 m-b-10\">\r\n    <div class=\"col-lg-3 col-12 card-col\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12 card-img m-b-10\">\r\n          <div *ngIf=\"!img || img == ''\">\r\n            <img src=\"assets/images/md_icon.png\"\r\n                 style=\"max-width: 110px; max-height: 110px;\"/>\r\n          </div>\r\n          <div *ngIf=\"img\">\r\n            <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n                 height=\"110px\"\r\n                 style=\"max-width: 110px; max-height: 110px;\"\r\n                 onclick=\"imgClick()\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 m-t-2 body-6 text-dark params-block\">\r\n          <ng-template [ngTemplateOutlet]=\"params\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-lg-5 col-12 card-col\">\r\n      <ng-template [ngTemplateOutlet]=\"second_col\"></ng-template>\r\n    </div>\r\n\r\n    <div class=\"col-lg-4 col-12 card-col mt-lg-0 mt-5\">\r\n      <ng-template [ngTemplateOutlet]=\"third_col\"></ng-template>\r\n    </div>\r\n\r\n  </div>\r\n</mefdev-inner-card>\r\n", styles: [".color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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,:host::ng-deep .card-title span,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,:host::ng-deep .plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,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,:host::ng-deep .card-description,:host::ng-deep .card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .params-block .row{margin-top:.75em}:host::ng-deep .params-block .row:last-child{margin-bottom:.75em}:host::ng-deep .card-col{min-height:220px}:host::ng-deep .header-link{opacity:1}:host::ng-deep .card-default{background-color:#f3f3f3;border-radius:5px}:host::ng-deep .card-title{width:80%;color:#000}:host::ng-deep .plugin-type{border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}:host::ng-deep .card-description{height:40px;overflow-y:clip;color:#4d4d4d}:host::ng-deep .card-no-description{overflow-y:clip;height:60px;color:#929292}:host::ng-deep .card-img{padding:0;height:130px;background-color:#fff;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MefdevInnerCard, selector: "mefdev-inner-card", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardLongComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardLongComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-card-long', template: "\r\n    <pgcard \r\n    MinimalHeader=\"true\" \r\n    TimeOut=\"2500\" \r\n    [Refresh]=\"false\" \r\n    [Close]=\"false\"\r\n    >\r\n      \r\n      <ng-template #CardTitle>\r\n        <ng-template class=\"card-title\" [ngTemplateOutlet]=\"title\"></ng-template>\r\n      </ng-template>\r\n\r\n      <ng-template #CardExtraControls>\r\n        <div class=\"plugin-type\" \r\n        [ngClass] = \"{\r\n            'b-color-Light-Gray-1': type_color === 'UNSET',\r\n            'b-color-Red': type_color === 'RED',\r\n            'b-color-Green': type_color === 'GREEN'}\">\r\n          {{type_text}}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <div class=\"row h-100 m-b-10\">\r\n        <div class=\"col-lg-3 col-12 card-col\">\r\n          <div class=\"row\">\r\n            <div class=\"col-12 card-img m-b-10\">\r\n              <div *ngIf=\"!img || img == ''\" >\r\n                <img src=\"assets/images/md_icon.png\"\r\n                style=\"max-width: 110px; max-height: 110px;\"/>\r\n              </div>\r\n              <div *ngIf=\"img\">\r\n                <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n                  height=\"110px\" \r\n                  style=\"max-width: 110px; max-height: 110px;\"\r\n                  onclick=\"imgClick()\"\r\n                />\r\n              </div>    \r\n            </div>\r\n            <div class=\"col-12 m-t-2 body-6 text-dark params-block\">\r\n              <ng-template [ngTemplateOutlet]=\"params\"></ng-template> \r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"col-lg-5 col-12 card-col\">\r\n          <ng-template [ngTemplateOutlet]=\"second_col\"></ng-template> \r\n        </div>\r\n        \r\n        <div class=\"col-lg-4 col-12 card-col mt-lg-0 mt-5\">\r\n            <ng-template [ngTemplateOutlet]=\"third_col\"></ng-template> \r\n        </div>  \r\n\r\n      </div>\r\n    </pgcard>", 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,:host::ng-deep .card-title span,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,:host::ng-deep .plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,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,:host::ng-deep .card-description,:host::ng-deep .card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .params-block .row{margin-top:.75em}:host::ng-deep .params-block .row:last-child{margin-bottom:.75em}:host::ng-deep .card-col{min-height:220px}:host::ng-deep .header-link{opacity:1}:host::ng-deep .card-default{background-color:#f3f3f3;border-radius:5px}:host::ng-deep .card-title{width:80%;color:#000}:host::ng-deep .plugin-type{border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}:host::ng-deep .card-description{height:40px;overflow-y:clip;color:#4d4d4d}:host::ng-deep .card-no-description{overflow-y:clip;height:60px;color:#929292}:host::ng-deep .card-img{padding:0;height:130px;background-color:#fff;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"] }]
+            args: [{ selector: 'mefdev-card-long', template: "<mefdev-inner-card\r\n  MinimalHeader=\"true\"\r\n  TimeOut=\"2500\"\r\n  [Refresh]=\"false\"\r\n  [Close]=\"false\"\r\n>\r\n\r\n  <ng-template #CardTitle>\r\n    <ng-template class=\"card-title\" [ngTemplateOutlet]=\"title\"></ng-template>\r\n  </ng-template>\r\n\r\n  <ng-template #CardExtraControls>\r\n    <div class=\"plugin-type\"\r\n         [ngClass]=\"{\r\n            'b-color-Light-Gray-1': type_color === 'UNSET',\r\n            'b-color-Red': type_color === 'RED',\r\n            'b-color-Green': type_color === 'GREEN'}\">\r\n      {{type_text}}\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"row h-100 m-b-10\">\r\n    <div class=\"col-lg-3 col-12 card-col\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12 card-img m-b-10\">\r\n          <div *ngIf=\"!img || img == ''\">\r\n            <img src=\"assets/images/md_icon.png\"\r\n                 style=\"max-width: 110px; max-height: 110px;\"/>\r\n          </div>\r\n          <div *ngIf=\"img\">\r\n            <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n                 height=\"110px\"\r\n                 style=\"max-width: 110px; max-height: 110px;\"\r\n                 onclick=\"imgClick()\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 m-t-2 body-6 text-dark params-block\">\r\n          <ng-template [ngTemplateOutlet]=\"params\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-lg-5 col-12 card-col\">\r\n      <ng-template [ngTemplateOutlet]=\"second_col\"></ng-template>\r\n    </div>\r\n\r\n    <div class=\"col-lg-4 col-12 card-col mt-lg-0 mt-5\">\r\n      <ng-template [ngTemplateOutlet]=\"third_col\"></ng-template>\r\n    </div>\r\n\r\n  </div>\r\n</mefdev-inner-card>\r\n", styles: [".color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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,:host::ng-deep .card-title span,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,:host::ng-deep .plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,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,:host::ng-deep .card-description,:host::ng-deep .card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .params-block .row{margin-top:.75em}:host::ng-deep .params-block .row:last-child{margin-bottom:.75em}:host::ng-deep .card-col{min-height:220px}:host::ng-deep .header-link{opacity:1}:host::ng-deep .card-default{background-color:#f3f3f3;border-radius:5px}:host::ng-deep .card-title{width:80%;color:#000}:host::ng-deep .plugin-type{border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}:host::ng-deep .card-description{height:40px;overflow-y:clip;color:#4d4d4d}:host::ng-deep .card-no-description{overflow-y:clip;height:60px;color:#929292}:host::ng-deep .card-img{padding:0;height:130px;background-color:#fff;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { title: [{
                 type: ContentChild,
                 args: ["title"]
@@ -2910,7 +2918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
   * </mefdev-card-simple>
   *```
   *
-  * <example-url>https://mef.dev/ui_kit_demo/view/card/card-simple</example-url>
+  * <example-url>https://mef.dev/ui_kit_demo/view/page_components/card/card_simple</example-url>
   */
 class CardSimpleComponent {
     /**
@@ -2931,12 +2939,12 @@ class CardSimpleComponent {
     constructor() { }
     ngOnInit() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardSimpleComponent, selector: "mefdev-card-simple", inputs: { isDisabled: ["disabled", "isDisabled"] }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }], ngImport: i0, template: "<div class=\"card-simple\" [ngClass]=\"{ 'unused-block':isDisabled }\">\r\n    <div class=\"row m-2 body-1\" *ngIf=\"card_title\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"row m-2\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\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-simple{background-color:#f3f3f3;padding:.5em;border-radius:5px}.unused-block{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.2.12", ngImport: i0, type: CardSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardSimpleComponent, selector: "mefdev-card-simple", inputs: { isDisabled: ["disabled", "isDisabled"] }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }], ngImport: i0, template: "<div class=\"card-simple\" [ngClass]=\"{ 'unused-block':isDisabled }\">\r\n    <div class=\"row m-2 body-1\" *ngIf=\"card_title\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"row m-2\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!important}.card-simple{background-color:#f3f3f3;padding:.5em;border-radius:5px}.unused-block{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.6", ngImport: i0, type: CardSimpleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardSimpleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-card-simple', template: "<div class=\"card-simple\" [ngClass]=\"{ 'unused-block':isDisabled }\">\r\n    <div class=\"row m-2 body-1\" *ngIf=\"card_title\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"row m-2\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\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-simple{background-color:#f3f3f3;padding:.5em;border-radius:5px}.unused-block{opacity:.6;pointer-events:none}\n"] }]
+            args: [{ selector: 'mefdev-card-simple', template: "<div class=\"card-simple\" [ngClass]=\"{ 'unused-block':isDisabled }\">\r\n    <div class=\"row m-2 body-1\" *ngIf=\"card_title\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"row m-2\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!important}.card-simple{background-color:#f3f3f3;padding:.5em;border-radius:5px}.unused-block{opacity:.6;pointer-events:none}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { isDisabled: [{
                 type: Input,
                 args: ["disabled"]
@@ -2948,10 +2956,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
 class ProgressConfig {
     color = "primary";
     thickness = 1;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ProgressConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ProgressConfig });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressConfig });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ProgressConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressConfig, decorators: [{
             type: Injectable
         }] });
@@ -2959,11 +2967,11 @@ class MefDevProgressModule {
     static forRoot() {
         return { ngModule: MefDevProgressModule, providers: [ProgressConfig] };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevProgressModule, declarations: [MefDevProgressComponent], imports: [CommonModule], exports: [MefDevProgressComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevProgressModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevProgressModule, declarations: [MefDevProgressComponent], imports: [CommonModule], exports: [MefDevProgressComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevProgressModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -2972,38 +2980,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 }]
         }] });
-class pgCardModule {
+class MefdevInnerCardModule {
     static forRoot() {
         return {
-            ngModule: pgCardModule
+            ngModule: MefdevInnerCardModule
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: pgCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: pgCardModule, declarations: [pgCard], imports: [CommonModule, MefDevProgressModule], exports: [pgCard] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: pgCardModule, imports: [CommonModule, MefDevProgressModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefdevInnerCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefdevInnerCardModule, declarations: [MefdevInnerCard], imports: [CommonModule, MefDevProgressModule], exports: [MefdevInnerCard] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefdevInnerCardModule, imports: [CommonModule, MefDevProgressModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: pgCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefdevInnerCardModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [pgCard],
-                    exports: [pgCard],
+                    declarations: [MefdevInnerCard],
+                    exports: [MefdevInnerCard],
                     imports: [CommonModule, MefDevProgressModule]
                 }]
         }] });
 const mefDevCardComponents = [CardComponent, CardLongComponent, CardSimpleComponent];
 class MefDevCardModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevCardModule, declarations: [CardComponent, CardLongComponent, CardSimpleComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevCardModule, declarations: [CardComponent, CardLongComponent, CardSimpleComponent], imports: [CommonModule,
             MefDevCollapseModule,
             MefDevSelectModule,
-            pgCardModule], exports: [CardComponent, CardLongComponent, CardSimpleComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevCardModule, imports: [CommonModule,
+            MefdevInnerCardModule], exports: [CardComponent, CardLongComponent, CardSimpleComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevCardModule, imports: [CommonModule,
             MefDevCollapseModule,
             MefDevSelectModule,
-            pgCardModule] });
+            MefdevInnerCardModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevCardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: mefDevCardComponents,
@@ -3012,7 +3020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         CommonModule,
                         MefDevCollapseModule,
                         MefDevSelectModule,
-                        pgCardModule,
+                        MefdevInnerCardModule,
                     ]
                 }]
         }] });
@@ -3035,7 +3043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
   * </mefdev-fill-modal>
   * ```
   *
-  * <example-url>https://mef.dev/ui_kit_demo/view/modals/fill</example-url>
+  * <example-url>https://mef.dev/ui_kit_demo/view/page_components/modals/fill</example-url>
   */
 class FillComponent {
     visible = false;
@@ -3109,8 +3117,8 @@ class FillComponent {
         this.visible = false;
         this.visibleChange.emit(this.visible);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: FillComponent, selector: "mefdev-fill-modal", inputs: { show: "show" }, outputs: { visibleChange: "visibleChange" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\t<div class=\"modal-content\">\r\n    <div class=\"modal-header clearfix text-left\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n      </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#ffffffd9;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:0;margin-left:auto;margin-right:auto;height:100%;min-height:200px;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;background-color:#ffffffd9;padding:12px;overflow-y:auto;display:flex;align-items:center}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}.modal-footer{padding-top:10px}\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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FillComponent, selector: "mefdev-fill-modal", inputs: { show: "show" }, outputs: { visibleChange: "visibleChange" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\t<div class=\"modal-content\">\r\n    <div class=\"modal-header clearfix text-left\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n      </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#ffffffd9;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:0;margin-left:auto;margin-right:auto;height:100%;min-height:200px;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;padding:12px;overflow-y:auto;display:flex;align-items:center}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}.modal-footer{padding-top:10px}\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)' }),
@@ -3122,7 +3130,7 @@ class FillComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: FillComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FillComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-fill-modal', animations: [
                         trigger('dialog', [
@@ -3134,7 +3142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                                 animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
                             ])
                         ])
-                    ], template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\t<div class=\"modal-content\">\r\n    <div class=\"modal-header clearfix text-left\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n      </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#ffffffd9;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:0;margin-left:auto;margin-right:auto;height:100%;min-height:200px;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;background-color:#ffffffd9;padding:12px;overflow-y:auto;display:flex;align-items:center}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}.modal-footer{padding-top:10px}\n"] }]
+                    ], template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\t<div class=\"modal-content\">\r\n    <div class=\"modal-header clearfix text-left\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n      </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#ffffffd9;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:0;margin-left:auto;margin-right:auto;height:100%;min-height:200px;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;padding:12px;overflow-y:auto;display:flex;align-items:center}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}.modal-footer{padding-top:10px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { dialog: [{
                 type: ViewChild,
                 args: ['dialog', { static: false }]
@@ -3168,7 +3176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
 *   </div>
 * </mefdev-slide-up-modal>
 * ```
-* <example-url>https://mef.dev/ui_kit_demo/view/modals/slide-up</example-url>
+* <example-url>https://mef.dev/ui_kit_demo/view/page_components/modals/slide_up</example-url>
 */
 class SlideUpComponent {
     visible = false;
@@ -3226,8 +3234,8 @@ class SlideUpComponent {
         this.visible = false;
         this.visibleChange.emit(this.visible);
     }
-    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;inset:50% 0;margin:auto;min-height:200px;max-height:90%;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;overflow:auto;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}.modal-content .modal-body{min-height:120px;padding-bottom:10px}\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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlideUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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;inset:50% 0;margin:auto;min-height:200px;max-height:90%;min-width:520px;max-width:90%;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;overflow:auto;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}.modal-content .modal-body{min-height:120px;padding-bottom:10px}\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)' }),
@@ -3239,7 +3247,7 @@ class SlideUpComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SlideUpComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlideUpComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-slide-up-modal', animations: [
                         trigger('dialog', [
@@ -3282,7 +3290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
   *   </div>
   * </mefdev-slide-right-modal>
   * ```
-  * <example-url>https://mef.dev/ui_kit_demo/view/modals/slide-right</example-url>
+  * <example-url>https://mef.dev/ui_kit_demo/view/page_components/modals/slide_right</example-url>
   */
 class SlideRightComponent {
     visible = false;
@@ -3351,8 +3359,8 @@ class SlideRightComponent {
         this.visible = false;
         this.visibleChange.emit(this.visible);
     }
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlideRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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)' }),
@@ -3364,7 +3372,7 @@ class SlideRightComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SlideRightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlideRightComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-slide-right-modal', animations: [
                         trigger('dialog', [
@@ -3426,10 +3434,10 @@ class RightFilterComponent {
     modalIsCloused() {
         this.isOpen = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: RightFilterComponent, deps: [{ token: FilteredFieldService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: RightFilterComponent, selector: "mefdev-right-filter", ngImport: i0, template: "<div class=\"filter-btn\">\r\n    <button class=\"btn btn-secondary text-danger\" (click)=\"openModal()\"><i class=\"fa fa-filter\" aria-hidden=\"true\"></i></button>\r\n</div>\r\n\r\n<mefdev-slide-right-modal [show]=\"isOpen\" (isClouse)=\"modalIsCloused()\">\r\n    <ng-content></ng-content>\r\n</mefdev-slide-right-modal>", styles: [".filter-btn{position:fixed;top:60px;z-index:450;right:25px}\n"], dependencies: [{ kind: "component", type: SlideRightComponent, selector: "mefdev-slide-right-modal", inputs: ["size", "show"], outputs: ["visibleChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RightFilterComponent, deps: [{ token: FilteredFieldService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RightFilterComponent, selector: "mefdev-right-filter", ngImport: i0, template: "<div class=\"filter-btn\">\r\n    <button class=\"btn btn-secondary text-danger\" (click)=\"openModal()\"><i class=\"fa fa-filter\" aria-hidden=\"true\"></i></button>\r\n</div>\r\n\r\n<mefdev-slide-right-modal [show]=\"isOpen\" (isClouse)=\"modalIsCloused()\">\r\n    <ng-content></ng-content>\r\n</mefdev-slide-right-modal>", styles: [".filter-btn{position:fixed;top:60px;z-index:450;right:25px}\n"], dependencies: [{ kind: "component", type: SlideRightComponent, selector: "mefdev-slide-right-modal", inputs: ["size", "show"], outputs: ["visibleChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: RightFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RightFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-right-filter', template: "<div class=\"filter-btn\">\r\n    <button class=\"btn btn-secondary text-danger\" (click)=\"openModal()\"><i class=\"fa fa-filter\" aria-hidden=\"true\"></i></button>\r\n</div>\r\n\r\n<mefdev-slide-right-modal [show]=\"isOpen\" (isClouse)=\"modalIsCloused()\">\r\n    <ng-content></ng-content>\r\n</mefdev-slide-right-modal>", styles: [".filter-btn{position:fixed;top:60px;z-index:450;right:25px}\n"] }]
         }], ctorParameters: function () { return [{ type: FilteredFieldService }]; } });
@@ -3441,8 +3449,8 @@ let mefDevModalModuleComponents = [
     RightFilterComponent
 ];
 class MefDevModalModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevModalModule, declarations: [FillComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevModalModule, declarations: [FillComponent,
             SlideUpComponent,
             SlideRightComponent,
             RightFilterComponent], imports: [CommonModule,
@@ -3450,10 +3458,10 @@ class MefDevModalModule {
             SlideUpComponent,
             SlideRightComponent,
             RightFilterComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevModalModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevModalModule, imports: [CommonModule,
             MefDevSelectModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3489,7 +3497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
  * </mefdev-profile>
  * ```
  *
-  * <example-url>https://mef.dev/ui_kit_demo/view/page-layouts/profile</example-url>
+  * <example-url>https://mef.dev/ui_kit_demo/view/page_layouts/profile</example-url>
   */
 class ProfileComponent {
     /**
@@ -3572,12 +3580,12 @@ class ProfileComponent {
             'border-bottom-left-radius': `50%`,
         };
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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.6", ngImport: i0, type: ProfileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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"]
@@ -3610,7 +3618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
   * </mefdev-central-page>
   * ```
   *
-  * <example-url>https://mef.dev/ui_kit_demo/view/page-layouts/central-page</example-url>
+  * <example-url>https://mef.dev/ui_kit_demo/view/page_layouts/central_page</example-url>
   */
 class CentralPageComponent {
     constructor() {
@@ -3645,10 +3653,10 @@ class CentralPageComponent {
         catch (ex) { }
         ;
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CentralPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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.6", ngImport: i0, type: CentralPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -3672,10 +3680,10 @@ class CentralPageRowComponent {
     constructor() { }
     ngOnInit() {
     }
-    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: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CentralPageRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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.6", ngImport: i0, type: CentralPageRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 []; } });
@@ -3693,7 +3701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
 * </mefdev-table-page>
 * ```
 *
-* <example-url>https://mef.dev/ui_kit_demo/view/page-layouts/table-page</example-url>
+* <example-url>https://mef.dev/ui_kit_demo/view/page_layouts/table_page</example-url>
 */
 class TablePageComponent {
     /**
@@ -3708,10 +3716,10 @@ class TablePageComponent {
     constructor() { }
     ngOnInit() {
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TablePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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.6", ngImport: i0, type: TablePageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -3736,7 +3744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
 * ```
 *
 * Example of usage:
-* <example-url>https://mef.dev/ui_kit_demo/view/page-layouts/menage-page</example-url>
+* <example-url>https://mef.dev/ui_kit_demo/view/page_layouts/manage_page</example-url>
 */
 class ManagePageComponent {
     /**
@@ -3773,12 +3781,12 @@ class ManagePageComponent {
     constructor() { }
     ngOnInit() {
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ManagePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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.6", ngImport: i0, type: ManagePageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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"] }]
+            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-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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: [{
                 type: ContentChild,
                 args: ["card_title"]
@@ -3797,8 +3805,8 @@ let mefDevPageLayoutsModuleComponents = [
     ManagePageComponent
 ];
 class MefDevPageLayoutsModule {
-    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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevPageLayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevPageLayoutsModule, declarations: [ProfileComponent,
             CentralPageComponent,
             CentralPageRowComponent,
             TablePageComponent,
@@ -3807,9 +3815,9 @@ class MefDevPageLayoutsModule {
             CentralPageRowComponent,
             TablePageComponent,
             ManagePageComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevPageLayoutsModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevPageLayoutsModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevPageLayoutsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevPageLayoutsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: mefDevPageLayoutsModuleComponents,
@@ -3829,10 +3837,10 @@ class StageComponent {
     isRightModal;
     isCompleted;
     title;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: StageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: StageComponent, selector: "mefdev-stage", inputs: { currentExecutorStep: "currentExecutorStep", isRightModal: "isRightModal", isCompleted: "isCompleted", title: "title" }, ngImport: i0, template: "<div class=\"step\">\r\n    <ng-container *ngIf=\"!isCompleted else done\">\r\n        <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" [ngStyle]=\"isRightModal ? { 'fill': '#FFFFFF' } : { 'fill': '#F3F3F3' }\">\r\n            <rect width=\"36\" height=\"36\" rx=\"18\" />\r\n            <text class=\"body-3\" x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-size=\"16\" fill=\"black\">\r\n                {{ currentExecutorStep }}\r\n            </text>\r\n        </svg>\r\n        <div class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n            {{ title }}\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n<ng-template #done>\r\n    <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <rect x=\"0.5\" y=\"0.5\" width=\"35\" height=\"35\" rx=\"17.5\" stroke=\"#929292\"/>\r\n        <path d=\"M24.7373 10L14.5466 20.3769L11.2415 17.0114L8 20.3122L11.3051 23.6777L14.5678 27L17.8093 23.6992L28 13.3224L24.7373 10Z\"\r\n              fill=\"#28B446\"/>\r\n    </svg>\r\n    <span class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n        {{ title }}\r\n    </span>\r\n</ng-template>\r\n", styles: [".step{display:flex;align-items:center;column-gap:11px}.step .descriptionStepText{width:77px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StageComponent, selector: "mefdev-stage", inputs: { currentExecutorStep: "currentExecutorStep", isRightModal: "isRightModal", isCompleted: "isCompleted", title: "title" }, ngImport: i0, template: "<div class=\"step\">\r\n    <ng-container *ngIf=\"!isCompleted else done\">\r\n        <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" [ngStyle]=\"isRightModal ? { 'fill': '#FFFFFF' } : { 'fill': '#F3F3F3' }\">\r\n            <rect width=\"36\" height=\"36\" rx=\"18\" />\r\n            <text class=\"body-3\" x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-size=\"16\" fill=\"black\">\r\n                {{ currentExecutorStep }}\r\n            </text>\r\n        </svg>\r\n        <div class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n            {{ title }}\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n<ng-template #done>\r\n    <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <rect x=\"0.5\" y=\"0.5\" width=\"35\" height=\"35\" rx=\"17.5\" stroke=\"#929292\"/>\r\n        <path d=\"M24.7373 10L14.5466 20.3769L11.2415 17.0114L8 20.3122L11.3051 23.6777L14.5678 27L17.8093 23.6992L28 13.3224L24.7373 10Z\"\r\n              fill=\"#28B446\"/>\r\n    </svg>\r\n    <span class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n        {{ title }}\r\n    </span>\r\n</ng-template>\r\n", styles: [".step{display:flex;align-items:center;column-gap:11px}.step .descriptionStepText{width:77px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: StageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-stage', template: "<div class=\"step\">\r\n    <ng-container *ngIf=\"!isCompleted else done\">\r\n        <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" [ngStyle]=\"isRightModal ? { 'fill': '#FFFFFF' } : { 'fill': '#F3F3F3' }\">\r\n            <rect width=\"36\" height=\"36\" rx=\"18\" />\r\n            <text class=\"body-3\" x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-size=\"16\" fill=\"black\">\r\n                {{ currentExecutorStep }}\r\n            </text>\r\n        </svg>\r\n        <div class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n            {{ title }}\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n<ng-template #done>\r\n    <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <rect x=\"0.5\" y=\"0.5\" width=\"35\" height=\"35\" rx=\"17.5\" stroke=\"#929292\"/>\r\n        <path d=\"M24.7373 10L14.5466 20.3769L11.2415 17.0114L8 20.3122L11.3051 23.6777L14.5678 27L17.8093 23.6992L28 13.3224L24.7373 10Z\"\r\n              fill=\"#28B446\"/>\r\n    </svg>\r\n    <span class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n        {{ title }}\r\n    </span>\r\n</ng-template>\r\n", styles: [".step{display:flex;align-items:center;column-gap:11px}.step .descriptionStepText{width:77px}\n"] }]
         }], propDecorators: { currentExecutorStep: [{
@@ -3885,9 +3893,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
  * </mefdev-step-executor>
  *
  *```
+ * <example-url>https://mef.dev/ui_kit_demo/view/utils/main_executor</example-url>
  */
 class StepExecutorComponent {
     renderer;
+    changeDetectorRef;
     /**
      * Mandatory input parameter that specifies the type of the step-by-step wizard.
      * It can have three options: regular, modal, right.
@@ -3898,6 +3908,16 @@ class StepExecutorComponent {
      * ```
      */
     view;
+    /**
+     * An optional input parameter that specifies whether to show your executor.
+     * Usually used when you have a slideup or right executor view
+     *
+     * @usageNotes
+     * ```
+     *  <mefdev-step-executor [show]="true" [view]="'right'" #mainExecutor></mefdev-step-executor>
+     * ```
+     */
+    show;
     /**
      * ViewChild reference to the host executor content.
      */
@@ -3944,10 +3964,29 @@ class StepExecutorComponent {
      * ```
      */
     onActivePageChange = new EventEmitter();
+    /**
+     * An output parameter that conveys the current state of the stepper in modal view
+     *
+     * @usageNotes
+     * ```
+     * <mefdev-step-executor [view]="'modal'" (modalStepExecutorStateChange)="getModalExecutorStateValue($event)" #modalExecutor></mefdev-step-executor>
+     * ```
+     */
+    modalStepExecutorStateChange = new EventEmitter();
+    /**
+     * An output parameter that conveys the current state of the stepper in right view
+     *
+     * @usageNotes
+     * ```
+     * <mefdev-step-executor [view]="'right'" (modalStepExecutorStateChange)="getModalExecutorStateValue($event)" #rightExecutor></mefdev-step-executor>
+     * ```
+     */
+    rightStepExecutorStateChange = new EventEmitter();
     _activePageInd = 0;
     pages = [];
-    constructor(renderer) {
+    constructor(renderer, changeDetectorRef) {
         this.renderer = renderer;
+        this.changeDetectorRef = changeDetectorRef;
     }
     set activePageInd(activePageNumber) {
         this._activePageInd = activePageNumber;
@@ -3966,9 +4005,34 @@ class StepExecutorComponent {
         return this.activePageInd == -1 ? null : this.pages[this.activePageInd];
     }
     ngAfterViewInit() {
-        this.renderer.appendChild(this.container.nativeElement, this.activePage?.elRef.nativeElement);
+        this.renderer?.appendChild(this.container.nativeElement, this.activePage?.elRef.nativeElement);
         this.onActivePageChange.emit(this.pages.find((el) => el.isActive));
     }
+    /**
+     * A function that is allows to track the status of your executor in the modal view
+     */
+    modalStepExecutorVisibleChange(value) {
+        if (this.view === 'modal') {
+            this.show = value;
+            this.modalStepExecutorStateChange.emit(value);
+        }
+    }
+    /**
+     * A function that is allows to track the status of your executor in the right view
+     */
+    rightStepExecutorVisibleChange(value) {
+        if (this.view === 'right') {
+            this.show = value;
+            this.rightStepExecutorStateChange.emit(value);
+        }
+    }
+    /**
+     * A function that allows you to close your executor
+     */
+    closeExecutor() {
+        this.show = false;
+        this.changeDetectorRef.detectChanges();
+    }
     /**
      * Check whether there is a next step of the executor. If we are at the last step - disable the 'next' button
      */
@@ -4041,15 +4105,17 @@ class StepExecutorComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: StepExecutorComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: StepExecutorComponent, selector: "mefdev-step-executor", inputs: { view: "view" }, outputs: { onActivePageChange: "onActivePageChange" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<!--view == regular-->\r\n\r\n<div class=\"stepExecutorBlock\" *ngIf=\"view === 'regular'\">\r\n  <header class=\"stepExecutorHeader\">\r\n    <div class=\"stepExecutorHeaderText\">\r\n      <h1 class=\"title\">\r\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n      </h1>\r\n      <p class=\"body-5\">\r\n        <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <div class=\"steps\">\r\n      <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                    [isRightModal]=\"false\"\r\n                    [title]=\"page.title\"\r\n                    [currentExecutorStep]=\"pageIndex + 1\"\r\n                    [isCompleted]=\"page.isCompleted\">\r\n      </mefdev-stage>\r\n    </div>\r\n  </header>\r\n\r\n  <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n    <div #container></div>\r\n  </div>\r\n\r\n  <div class=\"footerButtons\">\r\n    <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!--view == modal-->\r\n\r\n<div class=\"modalStepExecutor\" *ngIf=\"view === 'modal'\">\r\n\r\n  <header class=\"modalHeader\">\r\n    <div class=\"headerModalText\">\r\n      <div class=\"textAndCloseButton\">\r\n        <h1 class=\"title\">\r\n          <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n        </h1>\r\n        <p class=\"body-5\">\r\n          <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n        </p>\r\n      </div>\r\n      <article class=\"closeBtn\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.26735 7.68135L0.610352 2.02435L2.02435 0.610352L7.68135 6.26735L13.3384 0.610352L14.7524 2.02435L9.09535 7.68135L14.7524 13.3384L13.3384 14.7524L7.68135 9.09535L2.02435 14.7524L0.610352 13.3384L6.26735 7.68135Z\" fill=\"#4D4D4D\"/>\r\n        </svg>\r\n      </article>\r\n    </div>\r\n    <div class=\"modalSteps\">\r\n      <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                    [isRightModal]=\"false\"\r\n                    [title]=\"page.title\"\r\n                    [currentExecutorStep]=\"pageIndex + 1\"\r\n                    [isCompleted]=\"page.isCompleted\">\r\n      </mefdev-stage>\r\n    </div>\r\n  </header>\r\n\r\n  <main *ngIf=\"activePage\" class=\"modalExecutorMainContent\">\r\n    <div #container></div>\r\n  </main>\r\n\r\n  <footer class=\"modalFooter\">\r\n    <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n  </footer>\r\n\r\n</div>\r\n\r\n<!--view == right-->\r\n\r\n<div class=\"rightExecutorBlock\" *ngIf=\"view === 'right'\">\r\n\r\n  <header class=\"rightExecutorHeader\">\r\n    <div class=\"rightExecutorTextAndCloseButton\">\r\n      <span class=\"body-1\">\r\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n      </span>\r\n      <p class=\"body-5\">\r\n        <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <div class=\"closeButton\">\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.0566 1.59971L14.6566 0.199707L8.05664 6.79971L1.45664 0.199707L0.0566406 1.59971L6.65664 8.19971L0.0566406 14.7997L1.45664 16.1997L8.05664 9.59971L14.6566 16.1997L16.0566 14.7997L9.45664 8.19971L16.0566 1.59971Z\" fill=\"#525252\"/>\r\n      </svg>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"line\">\r\n    <svg width=\"363\" height=\"1\" viewBox=\"0 0 363 1\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <line x1=\"-4.37114e-08\" y1=\"0.5\" x2=\"362.674\" y2=\"0.499968\" stroke=\"#4D4D4D\"/>\r\n    </svg>\r\n  </div>\r\n\r\n  <div class=\"contentExecutor\">\r\n    <div class=\"rightChangeContent\">\r\n      <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n        <div #container></div>\r\n      </div>\r\n      <div class=\"rightSteps\">\r\n        <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                      [isRightModal]=\"true\"\r\n                      [title]=\"page.title\"\r\n                      [currentExecutorStep]=\"pageIndex + 1\"\r\n                      [isCompleted]=\"page.isCompleted\">\r\n        </mefdev-stage>\r\n      </div>\r\n    </div>\r\n\r\n    <footer class=\"rightFooter\">\r\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n    </footer>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".stepExecutorBlock{height:auto;display:flex;flex-direction:column}.stepExecutorBlock .stepExecutorHeader{padding:49px 71px 40px 154px;display:flex;flex-direction:column;row-gap:23px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText{display:flex;flex-direction:column;row-gap:8px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText .title{color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText p{display:block;width:234px;height:auto;color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .steps{display:flex;flex-wrap:wrap;column-gap:23px;row-gap:17px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 154px;width:100%;min-height:359px;height:auto;background-color:#f3f3f3}.stepExecutorBlock .footerButtons{margin-top:46px;padding-left:154px;padding-bottom:74px}.modalStepExecutor{max-width:898px;width:auto;box-shadow:0 0 10px #0000001c}.modalStepExecutor .modalHeader{height:auto;padding:36px 25px 32px 33px;display:flex;flex-direction:column;row-gap:13px}.modalStepExecutor .modalHeader .headerModalText{display:flex;justify-content:space-between}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;column-gap:23px}.modalStepExecutor .modalHeader .headerModalText .closeBtn{width:33px;height:33px;border-radius:5px;background-color:#f3f3f3;display:flex;justify-content:center;align-items:center;cursor:pointer}.modalStepExecutor .modalHeader .headerModalText .closeBtn:hover svg path{fill:#cf0106}.modalStepExecutor .modalHeader .headerModalText p{width:235px;color:#4d4d4d}.modalStepExecutor .modalHeader .modalSteps{max-width:724px;width:auto;display:flex;flex-wrap:wrap;column-gap:23px}.modalStepExecutor .modalExecutorMainContent{padding:29px 45px 31px 33px;background-color:#f3f3f3;min-height:345px;height:auto}.modalStepExecutor .modalFooter{padding:32px 0 35px 33px;display:flex;column-gap:17px}.rightExecutorBlock{padding:25px 19px 43px;max-width:401px;height:auto;background-color:#f3f3f3;border-radius:5px}.rightExecutorBlock .rightExecutorHeader{display:flex;justify-content:space-between}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton{display:flex;flex-direction:column;row-gap:8px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton span,.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{height:auto;width:225px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{color:#4d4d4d}.rightExecutorBlock .rightExecutorHeader .closeButton svg{cursor:pointer}.rightExecutorBlock .rightExecutorHeader .closeButton svg:hover path{fill:#cf0106}.rightExecutorBlock .line{margin-top:9px;margin-bottom:37px}.rightExecutorBlock .contentExecutor .rightChangeContent{display:flex;justify-content:space-between}.rightExecutorBlock .contentExecutor .rightChangeContent .executorChangeContent{max-width:291px;height:auto}.rightExecutorBlock .contentExecutor .rightChangeContent .rightSteps{display:flex;flex-direction:column;row-gap:22px}.rightExecutorBlock .rightFooter{margin-top:67px;display:flex;column-gap:16px}@media screen and (max-width: 768px){.stepExecutorBlock .stepExecutorHeader{padding:21px 41px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 54px}.stepExecutorBlock .footerButtons{padding:41px}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;flex-direction:column}.modalStepExecutor .modalHeader .modalSteps{row-gap:21px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StageComponent, selector: "mefdev-stage", inputs: ["currentExecutorStep", "isRightModal", "isCompleted", "title"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepExecutorComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepExecutorComponent, selector: "mefdev-step-executor", inputs: { view: "view", show: "show" }, outputs: { onActivePageChange: "onActivePageChange", modalStepExecutorStateChange: "modalStepExecutorStateChange", rightStepExecutorStateChange: "rightStepExecutorStateChange" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<!--view == regular-->\r\n\r\n<div class=\"stepExecutorBlock\" *ngIf=\"view === 'regular'\">\r\n  <header class=\"stepExecutorHeader\">\r\n    <div class=\"stepExecutorHeaderText\">\r\n      <h1 class=\"title\">\r\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n      </h1>\r\n      <p class=\"body-5\">\r\n        <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <div class=\"steps\">\r\n      <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                    [isRightModal]=\"false\"\r\n                    [title]=\"page.title\"\r\n                    [currentExecutorStep]=\"pageIndex + 1\"\r\n                    [isCompleted]=\"page.isCompleted\">\r\n      </mefdev-stage>\r\n    </div>\r\n  </header>\r\n\r\n  <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n    <div #container></div>\r\n  </div>\r\n\r\n  <div class=\"footerButtons\">\r\n    <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!--view == modal-->\r\n\r\n<mefdev-slide-up-modal [show]=\"show\" (visibleChange)=\"modalStepExecutorVisibleChange($event)\" *ngIf=\"view === 'modal'\">\r\n  <div class=\"modalStepExecutor\">\r\n\r\n    <header class=\"modalHeader\">\r\n      <div class=\"headerModalText\">\r\n        <div class=\"textAndCloseButton\">\r\n          <h1 class=\"title\">\r\n            <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n          </h1>\r\n          <p class=\"body-5\">\r\n            <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n          </p>\r\n        </div>\r\n        <article class=\"closeBtn\" (click)=\"closeExecutor()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                  d=\"M6.26735 7.68135L0.610352 2.02435L2.02435 0.610352L7.68135 6.26735L13.3384 0.610352L14.7524 2.02435L9.09535 7.68135L14.7524 13.3384L13.3384 14.7524L7.68135 9.09535L2.02435 14.7524L0.610352 13.3384L6.26735 7.68135Z\"\r\n                  fill=\"#4D4D4D\"/>\r\n          </svg>\r\n        </article>\r\n      </div>\r\n      <div class=\"modalSteps\">\r\n        <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                      [isRightModal]=\"false\"\r\n                      [title]=\"page.title\"\r\n                      [currentExecutorStep]=\"pageIndex + 1\"\r\n                      [isCompleted]=\"page.isCompleted\">\r\n        </mefdev-stage>\r\n      </div>\r\n    </header>\r\n\r\n    <main *ngIf=\"activePage\" class=\"modalExecutorMainContent\">\r\n      <div #container></div>\r\n    </main>\r\n\r\n    <footer class=\"modalFooter\">\r\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n    </footer>\r\n\r\n  </div>\r\n</mefdev-slide-up-modal>\r\n\r\n<!--view == right-->\r\n\r\n<mefdev-slide-right-modal [show]=\"show\" (visibleChange)=\"rightStepExecutorVisibleChange($event)\" *ngIf=\"view === 'right'\">\r\n  <div class=\"rightExecutorBlock\">\r\n\r\n    <header class=\"rightExecutorHeader\">\r\n      <div class=\"rightExecutorTextAndCloseButton\">\r\n      <span class=\"body-1\">\r\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n      </span>\r\n        <p class=\"body-5\">\r\n          <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n        </p>\r\n      </div>\r\n      <div class=\"closeButton\" (click)=\"closeExecutor()\">\r\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                d=\"M16.0566 1.59971L14.6566 0.199707L8.05664 6.79971L1.45664 0.199707L0.0566406 1.59971L6.65664 8.19971L0.0566406 14.7997L1.45664 16.1997L8.05664 9.59971L14.6566 16.1997L16.0566 14.7997L9.45664 8.19971L16.0566 1.59971Z\"\r\n                fill=\"#525252\"/>\r\n        </svg>\r\n      </div>\r\n    </header>\r\n\r\n    <div class=\"line\">\r\n      <svg width=\"100%\" height=\"1\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <rect width=\"100%\" height=\"1\" fill=\"#4D4D4D\"></rect>\r\n      </svg>\r\n    </div>\r\n\r\n    <div class=\"contentExecutor\">\r\n      <div class=\"rightChangeContent\">\r\n        <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n          <div #container></div>\r\n        </div>\r\n        <div class=\"rightSteps\">\r\n          <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                        [isRightModal]=\"true\"\r\n                        [title]=\"page.title\"\r\n                        [currentExecutorStep]=\"pageIndex + 1\"\r\n                        [isCompleted]=\"page.isCompleted\">\r\n          </mefdev-stage>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <footer class=\"rightFooter\">\r\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n    </footer>\r\n\r\n  </div>\r\n</mefdev-slide-right-modal>\r\n", styles: [".stepExecutorBlock{height:auto;display:flex;flex-direction:column}.stepExecutorBlock .stepExecutorHeader{padding:49px 71px 40px 154px;display:flex;flex-direction:column;row-gap:23px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText{display:flex;flex-direction:column;row-gap:8px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText .title{color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText p{display:block;width:234px;height:auto;color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .steps{display:flex;flex-wrap:wrap;column-gap:23px;row-gap:17px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 154px;width:100%;min-height:359px;height:auto;background-color:#f3f3f3}.stepExecutorBlock .footerButtons{margin-top:46px;padding-left:154px;padding-bottom:74px}.modalStepExecutor{min-width:898px;max-width:898px;width:auto;box-shadow:0 0 10px #0000001c}.modalStepExecutor .modalHeader{height:auto;padding:36px 25px 32px 33px;display:flex;flex-direction:column;row-gap:13px}.modalStepExecutor .modalHeader .headerModalText{display:flex;justify-content:space-between}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;column-gap:23px}.modalStepExecutor .modalHeader .headerModalText .closeBtn{width:33px;height:33px;border-radius:5px;background-color:#f3f3f3;display:flex;justify-content:center;align-items:center;cursor:pointer}.modalStepExecutor .modalHeader .headerModalText .closeBtn:hover svg path{fill:#cf0106}.modalStepExecutor .modalHeader .headerModalText p{width:235px;color:#4d4d4d}.modalStepExecutor .modalHeader .modalSteps{max-width:724px;width:auto;display:flex;flex-wrap:wrap;column-gap:23px}.modalStepExecutor .modalExecutorMainContent{padding:29px 45px 31px 33px;background-color:#f3f3f3;min-height:345px;height:auto}.modalStepExecutor .modalFooter{padding:32px 0 35px 33px;display:flex;column-gap:17px}.rightExecutorBlock{position:relative;padding:25px 19px 43px;width:100%;min-height:100vh;height:auto;background-color:#f3f3f3;border-radius:5px}.rightExecutorBlock .rightExecutorHeader{display:flex;justify-content:space-between}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton{display:flex;flex-direction:column;row-gap:8px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton span,.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{height:auto;width:225px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{color:#4d4d4d}.rightExecutorBlock .rightExecutorHeader .closeButton svg{cursor:pointer}.rightExecutorBlock .rightExecutorHeader .closeButton svg:hover path{fill:#cf0106}.rightExecutorBlock .line{margin-top:9px;margin-bottom:37px}.rightExecutorBlock .contentExecutor .rightChangeContent{display:flex;justify-content:space-between;margin-bottom:25px}.rightExecutorBlock .contentExecutor .rightChangeContent .executorChangeContent{width:100%;max-width:75%;height:auto}.rightExecutorBlock .contentExecutor .rightChangeContent .rightSteps{display:flex;flex-direction:column;row-gap:22px}.rightExecutorBlock .rightFooter{margin-top:15px;position:absolute;bottom:15px;right:15px;display:flex;column-gap:16px}@media screen and (max-width: 768px){.stepExecutorBlock .stepExecutorHeader{padding:21px 41px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 54px}.stepExecutorBlock .footerButtons{padding:41px}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;flex-direction:column}.modalStepExecutor .modalHeader .modalSteps{row-gap:21px}}\n"], dependencies: [{ kind: "component", type: SlideUpComponent, selector: "mefdev-slide-up-modal", inputs: ["show"], outputs: ["visibleChange"] }, { kind: "component", type: SlideRightComponent, selector: "mefdev-slide-right-modal", inputs: ["size", "show"], outputs: ["visibleChange"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StageComponent, selector: "mefdev-stage", inputs: ["currentExecutorStep", "isRightModal", "isCompleted", "title"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: StepExecutorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepExecutorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-step-executor', template: "<!--view == regular-->\r\n\r\n<div class=\"stepExecutorBlock\" *ngIf=\"view === 'regular'\">\r\n  <header class=\"stepExecutorHeader\">\r\n    <div class=\"stepExecutorHeaderText\">\r\n      <h1 class=\"title\">\r\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n      </h1>\r\n      <p class=\"body-5\">\r\n        <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <div class=\"steps\">\r\n      <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                    [isRightModal]=\"false\"\r\n                    [title]=\"page.title\"\r\n                    [currentExecutorStep]=\"pageIndex + 1\"\r\n                    [isCompleted]=\"page.isCompleted\">\r\n      </mefdev-stage>\r\n    </div>\r\n  </header>\r\n\r\n  <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n    <div #container></div>\r\n  </div>\r\n\r\n  <div class=\"footerButtons\">\r\n    <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!--view == modal-->\r\n\r\n<div class=\"modalStepExecutor\" *ngIf=\"view === 'modal'\">\r\n\r\n  <header class=\"modalHeader\">\r\n    <div class=\"headerModalText\">\r\n      <div class=\"textAndCloseButton\">\r\n        <h1 class=\"title\">\r\n          <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n        </h1>\r\n        <p class=\"body-5\">\r\n          <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n        </p>\r\n      </div>\r\n      <article class=\"closeBtn\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.26735 7.68135L0.610352 2.02435L2.02435 0.610352L7.68135 6.26735L13.3384 0.610352L14.7524 2.02435L9.09535 7.68135L14.7524 13.3384L13.3384 14.7524L7.68135 9.09535L2.02435 14.7524L0.610352 13.3384L6.26735 7.68135Z\" fill=\"#4D4D4D\"/>\r\n        </svg>\r\n      </article>\r\n    </div>\r\n    <div class=\"modalSteps\">\r\n      <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                    [isRightModal]=\"false\"\r\n                    [title]=\"page.title\"\r\n                    [currentExecutorStep]=\"pageIndex + 1\"\r\n                    [isCompleted]=\"page.isCompleted\">\r\n      </mefdev-stage>\r\n    </div>\r\n  </header>\r\n\r\n  <main *ngIf=\"activePage\" class=\"modalExecutorMainContent\">\r\n    <div #container></div>\r\n  </main>\r\n\r\n  <footer class=\"modalFooter\">\r\n    <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n  </footer>\r\n\r\n</div>\r\n\r\n<!--view == right-->\r\n\r\n<div class=\"rightExecutorBlock\" *ngIf=\"view === 'right'\">\r\n\r\n  <header class=\"rightExecutorHeader\">\r\n    <div class=\"rightExecutorTextAndCloseButton\">\r\n      <span class=\"body-1\">\r\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n      </span>\r\n      <p class=\"body-5\">\r\n        <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <div class=\"closeButton\">\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.0566 1.59971L14.6566 0.199707L8.05664 6.79971L1.45664 0.199707L0.0566406 1.59971L6.65664 8.19971L0.0566406 14.7997L1.45664 16.1997L8.05664 9.59971L14.6566 16.1997L16.0566 14.7997L9.45664 8.19971L16.0566 1.59971Z\" fill=\"#525252\"/>\r\n      </svg>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"line\">\r\n    <svg width=\"363\" height=\"1\" viewBox=\"0 0 363 1\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <line x1=\"-4.37114e-08\" y1=\"0.5\" x2=\"362.674\" y2=\"0.499968\" stroke=\"#4D4D4D\"/>\r\n    </svg>\r\n  </div>\r\n\r\n  <div class=\"contentExecutor\">\r\n    <div class=\"rightChangeContent\">\r\n      <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n        <div #container></div>\r\n      </div>\r\n      <div class=\"rightSteps\">\r\n        <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                      [isRightModal]=\"true\"\r\n                      [title]=\"page.title\"\r\n                      [currentExecutorStep]=\"pageIndex + 1\"\r\n                      [isCompleted]=\"page.isCompleted\">\r\n        </mefdev-stage>\r\n      </div>\r\n    </div>\r\n\r\n    <footer class=\"rightFooter\">\r\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n    </footer>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".stepExecutorBlock{height:auto;display:flex;flex-direction:column}.stepExecutorBlock .stepExecutorHeader{padding:49px 71px 40px 154px;display:flex;flex-direction:column;row-gap:23px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText{display:flex;flex-direction:column;row-gap:8px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText .title{color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText p{display:block;width:234px;height:auto;color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .steps{display:flex;flex-wrap:wrap;column-gap:23px;row-gap:17px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 154px;width:100%;min-height:359px;height:auto;background-color:#f3f3f3}.stepExecutorBlock .footerButtons{margin-top:46px;padding-left:154px;padding-bottom:74px}.modalStepExecutor{max-width:898px;width:auto;box-shadow:0 0 10px #0000001c}.modalStepExecutor .modalHeader{height:auto;padding:36px 25px 32px 33px;display:flex;flex-direction:column;row-gap:13px}.modalStepExecutor .modalHeader .headerModalText{display:flex;justify-content:space-between}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;column-gap:23px}.modalStepExecutor .modalHeader .headerModalText .closeBtn{width:33px;height:33px;border-radius:5px;background-color:#f3f3f3;display:flex;justify-content:center;align-items:center;cursor:pointer}.modalStepExecutor .modalHeader .headerModalText .closeBtn:hover svg path{fill:#cf0106}.modalStepExecutor .modalHeader .headerModalText p{width:235px;color:#4d4d4d}.modalStepExecutor .modalHeader .modalSteps{max-width:724px;width:auto;display:flex;flex-wrap:wrap;column-gap:23px}.modalStepExecutor .modalExecutorMainContent{padding:29px 45px 31px 33px;background-color:#f3f3f3;min-height:345px;height:auto}.modalStepExecutor .modalFooter{padding:32px 0 35px 33px;display:flex;column-gap:17px}.rightExecutorBlock{padding:25px 19px 43px;max-width:401px;height:auto;background-color:#f3f3f3;border-radius:5px}.rightExecutorBlock .rightExecutorHeader{display:flex;justify-content:space-between}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton{display:flex;flex-direction:column;row-gap:8px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton span,.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{height:auto;width:225px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{color:#4d4d4d}.rightExecutorBlock .rightExecutorHeader .closeButton svg{cursor:pointer}.rightExecutorBlock .rightExecutorHeader .closeButton svg:hover path{fill:#cf0106}.rightExecutorBlock .line{margin-top:9px;margin-bottom:37px}.rightExecutorBlock .contentExecutor .rightChangeContent{display:flex;justify-content:space-between}.rightExecutorBlock .contentExecutor .rightChangeContent .executorChangeContent{max-width:291px;height:auto}.rightExecutorBlock .contentExecutor .rightChangeContent .rightSteps{display:flex;flex-direction:column;row-gap:22px}.rightExecutorBlock .rightFooter{margin-top:67px;display:flex;column-gap:16px}@media screen and (max-width: 768px){.stepExecutorBlock .stepExecutorHeader{padding:21px 41px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 54px}.stepExecutorBlock .footerButtons{padding:41px}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;flex-direction:column}.modalStepExecutor .modalHeader .modalSteps{row-gap:21px}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { view: [{
+            args: [{ selector: 'mefdev-step-executor', template: "<!--view == regular-->\r\n\r\n<div class=\"stepExecutorBlock\" *ngIf=\"view === 'regular'\">\r\n  <header class=\"stepExecutorHeader\">\r\n    <div class=\"stepExecutorHeaderText\">\r\n      <h1 class=\"title\">\r\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n      </h1>\r\n      <p class=\"body-5\">\r\n        <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <div class=\"steps\">\r\n      <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                    [isRightModal]=\"false\"\r\n                    [title]=\"page.title\"\r\n                    [currentExecutorStep]=\"pageIndex + 1\"\r\n                    [isCompleted]=\"page.isCompleted\">\r\n      </mefdev-stage>\r\n    </div>\r\n  </header>\r\n\r\n  <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n    <div #container></div>\r\n  </div>\r\n\r\n  <div class=\"footerButtons\">\r\n    <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!--view == modal-->\r\n\r\n<mefdev-slide-up-modal [show]=\"show\" (visibleChange)=\"modalStepExecutorVisibleChange($event)\" *ngIf=\"view === 'modal'\">\r\n  <div class=\"modalStepExecutor\">\r\n\r\n    <header class=\"modalHeader\">\r\n      <div class=\"headerModalText\">\r\n        <div class=\"textAndCloseButton\">\r\n          <h1 class=\"title\">\r\n            <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n          </h1>\r\n          <p class=\"body-5\">\r\n            <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n          </p>\r\n        </div>\r\n        <article class=\"closeBtn\" (click)=\"closeExecutor()\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                  d=\"M6.26735 7.68135L0.610352 2.02435L2.02435 0.610352L7.68135 6.26735L13.3384 0.610352L14.7524 2.02435L9.09535 7.68135L14.7524 13.3384L13.3384 14.7524L7.68135 9.09535L2.02435 14.7524L0.610352 13.3384L6.26735 7.68135Z\"\r\n                  fill=\"#4D4D4D\"/>\r\n          </svg>\r\n        </article>\r\n      </div>\r\n      <div class=\"modalSteps\">\r\n        <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                      [isRightModal]=\"false\"\r\n                      [title]=\"page.title\"\r\n                      [currentExecutorStep]=\"pageIndex + 1\"\r\n                      [isCompleted]=\"page.isCompleted\">\r\n        </mefdev-stage>\r\n      </div>\r\n    </header>\r\n\r\n    <main *ngIf=\"activePage\" class=\"modalExecutorMainContent\">\r\n      <div #container></div>\r\n    </main>\r\n\r\n    <footer class=\"modalFooter\">\r\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n    </footer>\r\n\r\n  </div>\r\n</mefdev-slide-up-modal>\r\n\r\n<!--view == right-->\r\n\r\n<mefdev-slide-right-modal [show]=\"show\" (visibleChange)=\"rightStepExecutorVisibleChange($event)\" *ngIf=\"view === 'right'\">\r\n  <div class=\"rightExecutorBlock\">\r\n\r\n    <header class=\"rightExecutorHeader\">\r\n      <div class=\"rightExecutorTextAndCloseButton\">\r\n      <span class=\"body-1\">\r\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n      </span>\r\n        <p class=\"body-5\">\r\n          <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n        </p>\r\n      </div>\r\n      <div class=\"closeButton\" (click)=\"closeExecutor()\">\r\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                d=\"M16.0566 1.59971L14.6566 0.199707L8.05664 6.79971L1.45664 0.199707L0.0566406 1.59971L6.65664 8.19971L0.0566406 14.7997L1.45664 16.1997L8.05664 9.59971L14.6566 16.1997L16.0566 14.7997L9.45664 8.19971L16.0566 1.59971Z\"\r\n                fill=\"#525252\"/>\r\n        </svg>\r\n      </div>\r\n    </header>\r\n\r\n    <div class=\"line\">\r\n      <svg width=\"100%\" height=\"1\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <rect width=\"100%\" height=\"1\" fill=\"#4D4D4D\"></rect>\r\n      </svg>\r\n    </div>\r\n\r\n    <div class=\"contentExecutor\">\r\n      <div class=\"rightChangeContent\">\r\n        <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n          <div #container></div>\r\n        </div>\r\n        <div class=\"rightSteps\">\r\n          <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                        [isRightModal]=\"true\"\r\n                        [title]=\"page.title\"\r\n                        [currentExecutorStep]=\"pageIndex + 1\"\r\n                        [isCompleted]=\"page.isCompleted\">\r\n          </mefdev-stage>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <footer class=\"rightFooter\">\r\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n    </footer>\r\n\r\n  </div>\r\n</mefdev-slide-right-modal>\r\n", styles: [".stepExecutorBlock{height:auto;display:flex;flex-direction:column}.stepExecutorBlock .stepExecutorHeader{padding:49px 71px 40px 154px;display:flex;flex-direction:column;row-gap:23px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText{display:flex;flex-direction:column;row-gap:8px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText .title{color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText p{display:block;width:234px;height:auto;color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .steps{display:flex;flex-wrap:wrap;column-gap:23px;row-gap:17px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 154px;width:100%;min-height:359px;height:auto;background-color:#f3f3f3}.stepExecutorBlock .footerButtons{margin-top:46px;padding-left:154px;padding-bottom:74px}.modalStepExecutor{min-width:898px;max-width:898px;width:auto;box-shadow:0 0 10px #0000001c}.modalStepExecutor .modalHeader{height:auto;padding:36px 25px 32px 33px;display:flex;flex-direction:column;row-gap:13px}.modalStepExecutor .modalHeader .headerModalText{display:flex;justify-content:space-between}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;column-gap:23px}.modalStepExecutor .modalHeader .headerModalText .closeBtn{width:33px;height:33px;border-radius:5px;background-color:#f3f3f3;display:flex;justify-content:center;align-items:center;cursor:pointer}.modalStepExecutor .modalHeader .headerModalText .closeBtn:hover svg path{fill:#cf0106}.modalStepExecutor .modalHeader .headerModalText p{width:235px;color:#4d4d4d}.modalStepExecutor .modalHeader .modalSteps{max-width:724px;width:auto;display:flex;flex-wrap:wrap;column-gap:23px}.modalStepExecutor .modalExecutorMainContent{padding:29px 45px 31px 33px;background-color:#f3f3f3;min-height:345px;height:auto}.modalStepExecutor .modalFooter{padding:32px 0 35px 33px;display:flex;column-gap:17px}.rightExecutorBlock{position:relative;padding:25px 19px 43px;width:100%;min-height:100vh;height:auto;background-color:#f3f3f3;border-radius:5px}.rightExecutorBlock .rightExecutorHeader{display:flex;justify-content:space-between}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton{display:flex;flex-direction:column;row-gap:8px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton span,.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{height:auto;width:225px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{color:#4d4d4d}.rightExecutorBlock .rightExecutorHeader .closeButton svg{cursor:pointer}.rightExecutorBlock .rightExecutorHeader .closeButton svg:hover path{fill:#cf0106}.rightExecutorBlock .line{margin-top:9px;margin-bottom:37px}.rightExecutorBlock .contentExecutor .rightChangeContent{display:flex;justify-content:space-between;margin-bottom:25px}.rightExecutorBlock .contentExecutor .rightChangeContent .executorChangeContent{width:100%;max-width:75%;height:auto}.rightExecutorBlock .contentExecutor .rightChangeContent .rightSteps{display:flex;flex-direction:column;row-gap:22px}.rightExecutorBlock .rightFooter{margin-top:15px;position:absolute;bottom:15px;right:15px;display:flex;column-gap:16px}@media screen and (max-width: 768px){.stepExecutorBlock .stepExecutorHeader{padding:21px 41px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 54px}.stepExecutorBlock .footerButtons{padding:41px}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;flex-direction:column}.modalStepExecutor .modalHeader .modalSteps{row-gap:21px}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { view: [{
                 type: Input,
                 args: [{ required: true }]
+            }], show: [{
+                type: Input
             }], container: [{
                 type: ViewChild,
                 args: ['container']
@@ -4064,6 +4130,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 args: ['footer']
             }], onActivePageChange: [{
                 type: Output
+            }], modalStepExecutorStateChange: [{
+                type: Output
+            }], rightStepExecutorStateChange: [{
+                type: Output
             }] } });
 /**
@@ -4154,10 +4224,10 @@ class MefdevExecutorPageComponent {
     ngOnChanges(changes) {
         this.isCompletedChange.emit(changes['isCompleted']?.currentValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefdevExecutorPageComponent, deps: [{ token: StepExecutorComponent, host: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefdevExecutorPageComponent, selector: "mefdev-executor-page", inputs: { title: "title", isActive: "isActive", isCompleted: "isCompleted" }, outputs: { isCompletedChange: "isCompletedChange" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefdevExecutorPageComponent, deps: [{ token: StepExecutorComponent, host: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MefdevExecutorPageComponent, selector: "mefdev-executor-page", inputs: { title: "title", isActive: "isActive", isCompleted: "isCompleted" }, outputs: { isCompletedChange: "isCompletedChange" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefdevExecutorPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefdevExecutorPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mefdev-executor-page',
@@ -4176,17 +4246,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
             }] } });
 class MefDevStepExecutorModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, declarations: [StepExecutorComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevStepExecutorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevStepExecutorModule, declarations: [StepExecutorComponent,
             MefdevExecutorPageComponent,
-            StageComponent], imports: [CommonModule,
+            StageComponent], imports: [MefDevModalModule,
+            CommonModule,
             FormsModule], exports: [StepExecutorComponent,
             MefdevExecutorPageComponent,
             StageComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevStepExecutorModule, imports: [MefDevModalModule,
+            CommonModule,
             FormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevStepExecutorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4200,6 +4272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         StageComponent,
                     ],
                     imports: [
+                        MefDevModalModule,
                         CommonModule,
                         FormsModule,
                     ]
@@ -4216,7 +4289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
  *  (valueChange)="onChildValueChange($event)"
  *  ></mefdev-slider>
  *
- * <example-url>https://mef.dev/ui_kit_demo/view/typography/slider</example-url>
+ * <example-url>https://mef.dev/ui_kit_demo/view/controls/slider</example-url>
 */
 class MefDevSliderComponent {
     _range = { min: 1, max: 1000 };
@@ -4306,12 +4379,12 @@ class MefDevSliderComponent {
         this.valueChange.emit({ minValue: this.minValue, maxValue: this.maxValue });
         const toSlider = document.getElementById(`toSlider-${this.id}`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevSliderComponent, selector: "mefdev-slider", inputs: { id: "id", range: "range", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"range_container row\">\r\n    <div class=\"inputs_control \">\r\n      <input class=\"form_control_container__time__input h3\"  [(ngModel)]=\"'\u20B4'+ minValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMinValueChange()\">\r\n      <input class=\"form_control_container__time__input h3\"  [(ngModel)]=\"'\u20B4'+ maxValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMaxValueChange()\">\r\n    </div>\r\n    <div class=\"sliders_control\">\r\n      <input id=\"fromSlider\" type=\"range\"  [(ngModel)]=\"minValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\">\r\n      <input id=\"toSlider\" type=\"range\"  [(ngModel)]=\"maxValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\" \r\n          [style]=\"{'--minValue': minValue,  '--maxValue': maxValue, '--minFromValue': range.min, '--maxToValue': range.max}\">\r\n    </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.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,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,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.sliders_control{position:relative;min-height:50px}.inputs_control{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}.inputs_control .form_control_container__time__input{width:80px;height:28px;border-radius:5px;border:none;background:#FFF;text-align:center;box-shadow:2px 2px 2px #0000001a}#fromSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:13px}#toSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:-7px}input[type=range]::-moz-range-thumb{pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-moz-range-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #cf0106,0 0 9px #cf0106;-webkit-box-shadow:inset 0 0 3px #CF0106,0 0 9px #CF0106}input[type=number]{color:red;width:50px;height:30px;font-size:20px;border:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:.2}input[type=range]{-webkit-appearance:none;appearance:none;height:3px;width:100%;position:relative;background-color:#cf0106;pointer-events:none}input[type=range]::-moz-range-progress{background-color:transparent;height:3px}#fromSlider{height:0;z-index:9999}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MefDevSliderComponent, selector: "mefdev-slider", inputs: { id: "id", range: "range", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"range_container row\">\r\n    <div class=\"inputs_control \">\r\n      <input class=\"form_control_container__time__input h3\"  [(ngModel)]=\"'\u20B4'+ minValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMinValueChange()\">\r\n      <input class=\"form_control_container__time__input h3\"  [(ngModel)]=\"'\u20B4'+ maxValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMaxValueChange()\">\r\n    </div>\r\n    <div class=\"sliders_control\">\r\n      <input id=\"fromSlider\" type=\"range\"  [(ngModel)]=\"minValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\">\r\n      <input id=\"toSlider\" type=\"range\"  [(ngModel)]=\"maxValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\" \r\n          [style]=\"{'--minValue': minValue,  '--maxValue': maxValue, '--minFromValue': range.min, '--maxToValue': range.max}\">\r\n    </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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,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,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.sliders_control{position:relative;min-height:50px}.inputs_control{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}.inputs_control .form_control_container__time__input{width:80px;height:28px;border-radius:5px;border:none;background:#FFF;text-align:center;box-shadow:2px 2px 2px #0000001a}#fromSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:13px}#toSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:-7px}input[type=range]::-moz-range-thumb{pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-moz-range-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #cf0106,0 0 9px #cf0106;-webkit-box-shadow:inset 0 0 3px #CF0106,0 0 9px #CF0106}input[type=number]{color:red;width:50px;height:30px;font-size:20px;border:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:.2}input[type=range]{appearance:none;height:3px;width:100%;position:relative;background-color:#cf0106;pointer-events:none}input[type=range]::-moz-range-progress{background-color:transparent;height:3px}#fromSlider{height:0;z-index:9999}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-slider', template: "<div class=\"range_container row\">\r\n    <div class=\"inputs_control \">\r\n      <input class=\"form_control_container__time__input h3\"  [(ngModel)]=\"'\u20B4'+ minValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMinValueChange()\">\r\n      <input class=\"form_control_container__time__input h3\"  [(ngModel)]=\"'\u20B4'+ maxValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMaxValueChange()\">\r\n    </div>\r\n    <div class=\"sliders_control\">\r\n      <input id=\"fromSlider\" type=\"range\"  [(ngModel)]=\"minValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\">\r\n      <input id=\"toSlider\" type=\"range\"  [(ngModel)]=\"maxValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\" \r\n          [style]=\"{'--minValue': minValue,  '--maxValue': maxValue, '--minFromValue': range.min, '--maxToValue': range.max}\">\r\n    </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.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,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,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.sliders_control{position:relative;min-height:50px}.inputs_control{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}.inputs_control .form_control_container__time__input{width:80px;height:28px;border-radius:5px;border:none;background:#FFF;text-align:center;box-shadow:2px 2px 2px #0000001a}#fromSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:13px}#toSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:-7px}input[type=range]::-moz-range-thumb{pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-moz-range-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #cf0106,0 0 9px #cf0106;-webkit-box-shadow:inset 0 0 3px #CF0106,0 0 9px #CF0106}input[type=number]{color:red;width:50px;height:30px;font-size:20px;border:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:.2}input[type=range]{-webkit-appearance:none;appearance:none;height:3px;width:100%;position:relative;background-color:#cf0106;pointer-events:none}input[type=range]::-moz-range-progress{background-color:transparent;height:3px}#fromSlider{height:0;z-index:9999}\n"] }]
+            args: [{ selector: 'mefdev-slider', template: "<div class=\"range_container row\">\r\n    <div class=\"inputs_control \">\r\n      <input class=\"form_control_container__time__input h3\"  [(ngModel)]=\"'\u20B4'+ minValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMinValueChange()\">\r\n      <input class=\"form_control_container__time__input h3\"  [(ngModel)]=\"'\u20B4'+ maxValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMaxValueChange()\">\r\n    </div>\r\n    <div class=\"sliders_control\">\r\n      <input id=\"fromSlider\" type=\"range\"  [(ngModel)]=\"minValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\">\r\n      <input id=\"toSlider\" type=\"range\"  [(ngModel)]=\"maxValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\" \r\n          [style]=\"{'--minValue': minValue,  '--maxValue': maxValue, '--minFromValue': range.min, '--maxToValue': range.max}\">\r\n    </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.color-black{color:#000!important}.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}.color-dark-link{color:#50c0ff!important}.b-color-black{background-color:#000!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}.b-color-dark-link{background-color:#50c0ff!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,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,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.sliders_control{position:relative;min-height:50px}.inputs_control{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}.inputs_control .form_control_container__time__input{width:80px;height:28px;border-radius:5px;border:none;background:#FFF;text-align:center;box-shadow:2px 2px 2px #0000001a}#fromSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:13px}#toSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:-7px}input[type=range]::-moz-range-thumb{pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-moz-range-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #cf0106,0 0 9px #cf0106;-webkit-box-shadow:inset 0 0 3px #CF0106,0 0 9px #CF0106}input[type=number]{color:red;width:50px;height:30px;font-size:20px;border:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:.2}input[type=range]{appearance:none;height:3px;width:100%;position:relative;background-color:#cf0106;pointer-events:none}input[type=range]::-moz-range-progress{background-color:transparent;height:3px}#fromSlider{height:0;z-index:9999}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], range: [{
@@ -4324,13 +4397,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
             }] } });
 class MefDevSliderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevSliderModule, declarations: [MefDevSliderComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevSliderModule, declarations: [MefDevSliderComponent], imports: [CommonModule,
             FormsModule], exports: [MefDevSliderComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSliderModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSliderModule, imports: [CommonModule,
             FormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4372,10 +4445,10 @@ class MefDevSpecFlowTestComponent {
         this.ResponseError = 0;
         this.ReportError = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSpecFlowTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevSpecFlowTestComponent, selector: "mefdev-spec-flow-test", ngImport: i0, template: "<!-- Block for test -->\r\n<div style=\"display: none;\">\r\n  <input id=\"ResponseTimestamp\" type=\"hidden\" value=\"{{ResponseTimestamp}}\" />\r\n  <input id=\"ResponseError\" type=\"hidden\" value=\"{{ResponseError}}\" />\r\n  <input id=\"ReportError\" type=\"hidden\" value=\"{{ReportError}}\" />\r\n</div>", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSpecFlowTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MefDevSpecFlowTestComponent, selector: "mefdev-spec-flow-test", ngImport: i0, template: "<!-- Block for test -->\r\n<div style=\"display: none;\">\r\n  <input id=\"ResponseTimestamp\" type=\"hidden\" value=\"{{ResponseTimestamp}}\" />\r\n  <input id=\"ResponseError\" type=\"hidden\" value=\"{{ResponseError}}\" />\r\n  <input id=\"ReportError\" type=\"hidden\" value=\"{{ReportError}}\" />\r\n</div>", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSpecFlowTestComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSpecFlowTestComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-spec-flow-test', template: "<!-- Block for test -->\r\n<div style=\"display: none;\">\r\n  <input id=\"ResponseTimestamp\" type=\"hidden\" value=\"{{ResponseTimestamp}}\" />\r\n  <input id=\"ResponseError\" type=\"hidden\" value=\"{{ResponseError}}\" />\r\n  <input id=\"ReportError\" type=\"hidden\" value=\"{{ReportError}}\" />\r\n</div>" }]
         }], ctorParameters: function () { return []; } });
@@ -4386,11 +4459,11 @@ class MefDevSpecFlowTestModule {
             ngModule: MefDevSpecFlowTestModule
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSpecFlowTestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevSpecFlowTestModule, declarations: [MefDevSpecFlowTestComponent], imports: [CommonModule], exports: [MefDevSpecFlowTestComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSpecFlowTestModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSpecFlowTestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevSpecFlowTestModule, declarations: [MefDevSpecFlowTestComponent], imports: [CommonModule], exports: [MefDevSpecFlowTestComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSpecFlowTestModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSpecFlowTestModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSpecFlowTestModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MefDevSpecFlowTestComponent],
@@ -4405,7 +4478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
   * @component
   * @skipTemplateDoc: true
   * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/switch</example-url>
+  * <example-url>https://mef.dev/ui_kit_demo/view/controls/switch</example-url>
 */
 class MefDevSwitchComponent {
     // Private variables
@@ -4633,8 +4706,8 @@ class MefDevSwitchComponent {
     ngOnInit() {
         this.setClassMap();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevSwitchComponent, selector: "mefdev-switch", inputs: { Value: "Value", Size: "Size", Color: "Color", Disabled: "Disabled" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MefDevSwitchComponent, selector: "mefdev-switch", inputs: { Value: "Value", Size: "Size", Color: "Color", Disabled: "Disabled" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MefDevSwitchComponent),
@@ -4642,7 +4715,7 @@ class MefDevSwitchComponent {
             }
         ], ngImport: i0, template: "<span [ngClass]=\"_classMap\" tabindex=\"0\">\r\n    <span [ngClass]=\"_innerPrefixCls\">\r\n        <ng-template [ngIf]=\"_checked\">\r\n            <ng-content select=\"[checked]\"></ng-content>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"!_checked\">\r\n            <ng-content select=\"[unchecked]\"></ng-content>\r\n        </ng-template>\r\n    </span>\r\n</span>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: "mefdev-switch", encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -4690,11 +4763,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
             }] } });
 class MefDevSwitchModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevSwitchModule, declarations: [MefDevSwitchComponent], imports: [CommonModule], exports: [MefDevSwitchComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSwitchModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevSwitchModule, declarations: [MefDevSwitchComponent], imports: [CommonModule], exports: [MefDevSwitchComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSwitchModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSwitchModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevSwitchModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [MefDevSwitchComponent],
@@ -4711,10 +4784,10 @@ class MefDevTabBodyComponent {
    * The content of the tab, which can be passed as a template.
    */
     content;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevTabBodyComponent, selector: "mefdev-tab-body", inputs: { content: "content" }, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"content\"></ng-template>", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MefDevTabBodyComponent, selector: "mefdev-tab-body", inputs: { content: "content" }, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"content\"></ng-template>", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-tab-body', encapsulation: ViewEncapsulation.None, template: "<ng-template [ngTemplateOutlet]=\"content\"></ng-template>" }]
         }], propDecorators: { content: [{
@@ -4745,10 +4818,10 @@ class MefDevTabLabelDirective {
     getOffsetHeight() {
         return this.elementRef.nativeElement.offsetHeight;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabLabelDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.6", type: MefDevTabLabelDirective, selector: "[mefdev-tab-label]", inputs: { disabled: "disabled" }, host: { properties: { "class.nav-item": "true", "class.nav-item-disabled": "this.disabled" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabLabelDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MefDevTabLabelDirective, selector: "[mefdev-tab-label]", inputs: { disabled: "disabled" }, host: { properties: { "class.nav-item": "true", "class.nav-item-disabled": "this.disabled" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mefdev-tab-label]',
@@ -4846,10 +4919,10 @@ class MefDevTabsInkBarDirective {
     _getElementHeight(element) {
         return element ? element.offsetHeight + 'px' : '0';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabsInkBarDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.6", type: MefDevTabsInkBarDirective, selector: "[mefdev-tabs-ink-bar]", inputs: { Animated: "Animated", PositionMode: "PositionMode" }, host: { properties: { "class.nav-item": "true", "class.nav-item-animated": "this.Animated" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabsInkBarDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MefDevTabsInkBarDirective, selector: "[mefdev-tabs-ink-bar]", inputs: { Animated: "Animated", PositionMode: "PositionMode" }, host: { properties: { "class.nav-item": "true", "class.nav-item-animated": "this.Animated" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabsInkBarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabsInkBarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mefdev-tabs-ink-bar]',
@@ -5114,10 +5187,10 @@ class MefDevTabsNavComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabsNavComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevTabsNavComponent, selector: "mefdev-tabs-nav", inputs: { Size: "Size", Animated: "Animated", Position: "Position", HideBar: "HideBar", Type: "Type", ShowPagination: "ShowPagination", PositionMode: "PositionMode", selectedIndex: "selectedIndex" }, queries: [{ propertyName: "_tabBarExtraContent", first: true, predicate: ["tabBarExtraContent"], descendants: true, static: true }, { propertyName: "_labelWrappers", predicate: MefDevTabLabelDirective }], viewQueries: [{ propertyName: "_inkBar", first: true, predicate: MefDevTabsInkBarDirective, descendants: true, static: true }, { propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"nav-tabs-wrapper\" [class.scrolling]=\"_showPaginationControls\" #tabListContainer>\r\n    <div class=\"nav-wrap\">\r\n      <ul\r\n        class=\"nav nav-tabs nav-tabs-{{ _type }} nav-tabs-{{ _tabPosition }}\"\r\n        [class.tabs-nav-animated]=\"Animated\"\r\n        #tabList\r\n        (cdkObserveContent)=\"_onContentChanges()\"\r\n      >\r\n        <div\r\n          class=\"active-bar\"\r\n          mefdev-tabs-ink-bar\r\n          [hidden]=\"HideBar\"\r\n          [Animated]=\"Animated\"\r\n          [PositionMode]=\"PositionMode\"\r\n          style=\"display: block;\"\r\n        ></div>\r\n        <ng-content></ng-content>\r\n      </ul>\r\n    </div>\r\n  </div>", dependencies: [{ kind: "directive", type: MefDevTabsInkBarDirective, selector: "[mefdev-tabs-ink-bar]", inputs: ["Animated", "PositionMode"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabsNavComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MefDevTabsNavComponent, selector: "mefdev-tabs-nav", inputs: { Size: "Size", Animated: "Animated", Position: "Position", HideBar: "HideBar", Type: "Type", ShowPagination: "ShowPagination", PositionMode: "PositionMode", selectedIndex: "selectedIndex" }, queries: [{ propertyName: "_tabBarExtraContent", first: true, predicate: ["tabBarExtraContent"], descendants: true, static: true }, { propertyName: "_labelWrappers", predicate: MefDevTabLabelDirective }], viewQueries: [{ propertyName: "_inkBar", first: true, predicate: MefDevTabsInkBarDirective, descendants: true, static: true }, { propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"nav-tabs-wrapper\" [class.scrolling]=\"_showPaginationControls\" #tabListContainer>\r\n    <div class=\"nav-wrap\">\r\n      <ul\r\n        class=\"nav nav-tabs nav-tabs-{{ _type }} nav-tabs-{{ _tabPosition }}\"\r\n        [class.tabs-nav-animated]=\"Animated\"\r\n        #tabList\r\n        (cdkObserveContent)=\"_onContentChanges()\"\r\n      >\r\n        <div\r\n          class=\"active-bar\"\r\n          mefdev-tabs-ink-bar\r\n          [hidden]=\"HideBar\"\r\n          [Animated]=\"Animated\"\r\n          [PositionMode]=\"PositionMode\"\r\n          style=\"display: block;\"\r\n        ></div>\r\n        <ng-content></ng-content>\r\n      </ul>\r\n    </div>\r\n  </div>", dependencies: [{ kind: "directive", type: MefDevTabsInkBarDirective, selector: "[mefdev-tabs-ink-bar]", inputs: ["Animated", "PositionMode"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabsNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabsNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-tabs-nav', encapsulation: ViewEncapsulation.None, template: "<div class=\"nav-tabs-wrapper\" [class.scrolling]=\"_showPaginationControls\" #tabListContainer>\r\n    <div class=\"nav-wrap\">\r\n      <ul\r\n        class=\"nav nav-tabs nav-tabs-{{ _type }} nav-tabs-{{ _tabPosition }}\"\r\n        [class.tabs-nav-animated]=\"Animated\"\r\n        #tabList\r\n        (cdkObserveContent)=\"_onContentChanges()\"\r\n      >\r\n        <div\r\n          class=\"active-bar\"\r\n          mefdev-tabs-ink-bar\r\n          [hidden]=\"HideBar\"\r\n          [Animated]=\"Animated\"\r\n          [PositionMode]=\"PositionMode\"\r\n          style=\"display: block;\"\r\n        ></div>\r\n        <ng-content></ng-content>\r\n      </ul>\r\n    </div>\r\n  </div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$2.Directionality, decorators: [{
@@ -5169,7 +5242,7 @@ class TabChangeEvent {
   * </mefdev-tabset>
   *
   * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/tabset</example-url>
+  * <example-url>https://mef.dev/ui_kit_demo/view/page_components/tabset</example-url>
   */
 class MefDevTabSetComponent {
     _renderer;
@@ -5354,10 +5427,10 @@ class MefDevTabSetComponent {
     constructor(_renderer) {
         this._renderer = _renderer;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabSetComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevTabSetComponent, selector: "mefdev-tabset", inputs: { TabBarExtraTemplate: "TabBarExtraTemplate", Animated: "Animated", ShowPagination: "ShowPagination", Hide: "Hide", SelectedIndex: "SelectedIndex", Size: "Size", TabPosition: "TabPosition", extraTabClass: "extraTabClass", extraTabContentClass: "extraTabContentClass", Type: "Type", tabAnimation: "tabAnimation" }, outputs: { SelectedIndexChange: "SelectedIndexChange", SelectChange: "SelectChange" }, queries: [{ propertyName: "TabBarExtraContent", first: true, predicate: ["TabBarExtraContent"], descendants: true, static: true }], viewQueries: [{ propertyName: "_tabNav", first: true, predicate: ["tabNav"], descendants: true, static: true }, { propertyName: "_tabContent", first: true, predicate: ["tabContent"], descendants: true, static: true }, { propertyName: "_hostContent", first: true, predicate: ["hostContent"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"tab-wrapper tab-{{ _tabPositionMode }} {{ _tabPosition }} {{ _type }} {{ _extra_tab_class }}\" #hostContent>\r\n    <mefdev-tabs-nav\r\n      #tabNav\r\n      [Size]=\"Size\"\r\n      [Type]=\"Type\"\r\n      [ShowPagination]=\"ShowPagination\"\r\n      [PositionMode]=\"_tabPositionMode\"\r\n      [Position]=\"_tabPosition\"\r\n      [Animated]=\"inkBarAnimated\"\r\n      [HideBar]=\"Hide\"\r\n      [selectedIndex]=\"SelectedIndex\"\r\n    >\r\n      <ng-template #tabBarExtraContent>\r\n        <ng-template [ngTemplateOutlet]=\"TabBarExtraTemplate || TabBarExtraContent\"></ng-template>\r\n      </ng-template>\r\n      <li mefdev-tab-label [disabled]=\"tab.disabled\" (click)=\"clickLabel(i)\" *ngFor=\"let tab of _tabs; let i = index\">\r\n        <a href=\"javascript:void(0);\" class=\"\" [class.active]=\"SelectedIndex == i && !Hide\">\r\n          <ng-template [ngTemplateOutlet]=\"tab._tabHeading\"></ng-template>\r\n        </a>\r\n      </mefdev-tabs-nav>\r\n    <div class=\"tab-content-wrapper {{ _extra_tabcontent_class }}\">\r\n      <div\r\n        class=\"tab-content {{ _tabAnimation }}\"\r\n        #tabContent\r\n        [class.animated]=\"tabPaneAnimated\"\r\n        [class.not-animated]=\"!tabPaneAnimated\"\r\n        [style.margin-left.%]=\"tabPaneAnimated && -(SelectedIndex ?? -1) * 100\"\r\n      >\r\n        <mefdev-tab-body\r\n          class=\"tab-pane\"\r\n          [class.active]=\"SelectedIndex == i && !Hide\"\r\n          [class.inactive]=\"SelectedIndex != i || Hide\"\r\n          [content]=\"tab.content\"\r\n          *ngFor=\"let tab of _tabs; let i = index\"\r\n        >\r\n        </mefdev-tab-body>\r\n      </div>\r\n    </div>\r\n  </div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MefDevTabsNavComponent, selector: "mefdev-tabs-nav", inputs: ["Size", "Animated", "Position", "HideBar", "Type", "ShowPagination", "PositionMode", "selectedIndex"] }, { kind: "directive", type: MefDevTabLabelDirective, selector: "[mefdev-tab-label]", inputs: ["disabled"] }, { kind: "component", type: MefDevTabBodyComponent, selector: "mefdev-tab-body", inputs: ["content"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabSetComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MefDevTabSetComponent, selector: "mefdev-tabset", inputs: { TabBarExtraTemplate: "TabBarExtraTemplate", Animated: "Animated", ShowPagination: "ShowPagination", Hide: "Hide", SelectedIndex: "SelectedIndex", Size: "Size", TabPosition: "TabPosition", extraTabClass: "extraTabClass", extraTabContentClass: "extraTabContentClass", Type: "Type", tabAnimation: "tabAnimation" }, outputs: { SelectedIndexChange: "SelectedIndexChange", SelectChange: "SelectChange" }, queries: [{ propertyName: "TabBarExtraContent", first: true, predicate: ["TabBarExtraContent"], descendants: true, static: true }], viewQueries: [{ propertyName: "_tabNav", first: true, predicate: ["tabNav"], descendants: true, static: true }, { propertyName: "_tabContent", first: true, predicate: ["tabContent"], descendants: true, static: true }, { propertyName: "_hostContent", first: true, predicate: ["hostContent"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"tab-wrapper tab-{{ _tabPositionMode }} {{ _tabPosition }} {{ _type }} {{ _extra_tab_class }}\" #hostContent>\r\n    <mefdev-tabs-nav\r\n      #tabNav\r\n      [Size]=\"Size\"\r\n      [Type]=\"Type\"\r\n      [ShowPagination]=\"ShowPagination\"\r\n      [PositionMode]=\"_tabPositionMode\"\r\n      [Position]=\"_tabPosition\"\r\n      [Animated]=\"inkBarAnimated\"\r\n      [HideBar]=\"Hide\"\r\n      [selectedIndex]=\"SelectedIndex\"\r\n    >\r\n      <ng-template #tabBarExtraContent>\r\n        <ng-template [ngTemplateOutlet]=\"TabBarExtraTemplate || TabBarExtraContent\"></ng-template>\r\n      </ng-template>\r\n      <li mefdev-tab-label [disabled]=\"tab.disabled\" (click)=\"clickLabel(i)\" *ngFor=\"let tab of _tabs; let i = index\">\r\n        <a href=\"javascript:void(0);\" class=\"\" [class.active]=\"SelectedIndex == i && !Hide\">\r\n          <ng-template [ngTemplateOutlet]=\"tab._tabHeading\"></ng-template>\r\n        </a>\r\n      </mefdev-tabs-nav>\r\n    <div class=\"tab-content-wrapper {{ _extra_tabcontent_class }}\">\r\n      <div\r\n        class=\"tab-content {{ _tabAnimation }}\"\r\n        #tabContent\r\n        [class.animated]=\"tabPaneAnimated\"\r\n        [class.not-animated]=\"!tabPaneAnimated\"\r\n        [style.margin-left.%]=\"tabPaneAnimated && -(SelectedIndex ?? -1) * 100\"\r\n      >\r\n        <mefdev-tab-body\r\n          class=\"tab-pane\"\r\n          [class.active]=\"SelectedIndex == i && !Hide\"\r\n          [class.inactive]=\"SelectedIndex != i || Hide\"\r\n          [content]=\"tab.content\"\r\n          *ngFor=\"let tab of _tabs; let i = index\"\r\n        >\r\n        </mefdev-tab-body>\r\n      </div>\r\n    </div>\r\n  </div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MefDevTabsNavComponent, selector: "mefdev-tabs-nav", inputs: ["Size", "Animated", "Position", "HideBar", "Type", "ShowPagination", "PositionMode", "selectedIndex"] }, { kind: "directive", type: MefDevTabLabelDirective, selector: "[mefdev-tab-label]", inputs: ["disabled"] }, { kind: "component", type: MefDevTabBodyComponent, selector: "mefdev-tab-body", inputs: ["content"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabSetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabSetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-tabset', encapsulation: ViewEncapsulation.None, template: "<div class=\"tab-wrapper tab-{{ _tabPositionMode }} {{ _tabPosition }} {{ _type }} {{ _extra_tab_class }}\" #hostContent>\r\n    <mefdev-tabs-nav\r\n      #tabNav\r\n      [Size]=\"Size\"\r\n      [Type]=\"Type\"\r\n      [ShowPagination]=\"ShowPagination\"\r\n      [PositionMode]=\"_tabPositionMode\"\r\n      [Position]=\"_tabPosition\"\r\n      [Animated]=\"inkBarAnimated\"\r\n      [HideBar]=\"Hide\"\r\n      [selectedIndex]=\"SelectedIndex\"\r\n    >\r\n      <ng-template #tabBarExtraContent>\r\n        <ng-template [ngTemplateOutlet]=\"TabBarExtraTemplate || TabBarExtraContent\"></ng-template>\r\n      </ng-template>\r\n      <li mefdev-tab-label [disabled]=\"tab.disabled\" (click)=\"clickLabel(i)\" *ngFor=\"let tab of _tabs; let i = index\">\r\n        <a href=\"javascript:void(0);\" class=\"\" [class.active]=\"SelectedIndex == i && !Hide\">\r\n          <ng-template [ngTemplateOutlet]=\"tab._tabHeading\"></ng-template>\r\n        </a>\r\n      </mefdev-tabs-nav>\r\n    <div class=\"tab-content-wrapper {{ _extra_tabcontent_class }}\">\r\n      <div\r\n        class=\"tab-content {{ _tabAnimation }}\"\r\n        #tabContent\r\n        [class.animated]=\"tabPaneAnimated\"\r\n        [class.not-animated]=\"!tabPaneAnimated\"\r\n        [style.margin-left.%]=\"tabPaneAnimated && -(SelectedIndex ?? -1) * 100\"\r\n      >\r\n        <mefdev-tab-body\r\n          class=\"tab-pane\"\r\n          [class.active]=\"SelectedIndex == i && !Hide\"\r\n          [class.inactive]=\"SelectedIndex != i || Hide\"\r\n          [content]=\"tab.content\"\r\n          *ngFor=\"let tab of _tabs; let i = index\"\r\n        >\r\n        </mefdev-tab-body>\r\n      </div>\r\n    </div>\r\n  </div>" }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { TabBarExtraTemplate: [{
@@ -5474,10 +5547,10 @@ class MefDevTabComponent {
         // Remove the tab from the parent tabset component when destroyed
         this.MefDevTabSetComponent._tabs.splice(this.MefDevTabSetComponent._tabs.indexOf(this), 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabComponent, deps: [{ token: MefDevTabSetComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevTabComponent, selector: "mefdev-tab", inputs: { Disabled: "Disabled" }, outputs: { pgSelect: "pgSelect", pgClick: "pgClick", pgDeselect: "pgDeselect" }, host: { properties: { "class.ant-tabs-tabpane": "true" } }, queries: [{ propertyName: "_tabHeading", first: true, predicate: ["TabHeading"], descendants: true, static: true }], viewQueries: [{ propertyName: "_content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template>\r\n    <ng-content></ng-content>\r\n  </ng-template>" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabComponent, deps: [{ token: MefDevTabSetComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MefDevTabComponent, selector: "mefdev-tab", inputs: { Disabled: "Disabled" }, outputs: { pgSelect: "pgSelect", pgClick: "pgClick", pgDeselect: "pgDeselect" }, host: { properties: { "class.ant-tabs-tabpane": "true" } }, queries: [{ propertyName: "_tabHeading", first: true, predicate: ["TabHeading"], descendants: true, static: true }], viewQueries: [{ propertyName: "_content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template>\r\n    <ng-content></ng-content>\r\n  </ng-template>" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-tab', host: {
                         '[class.ant-tabs-tabpane]': 'true'
@@ -5499,11 +5572,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
             }] } });
 class MefDevTabsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabsModule, declarations: [MefDevTabComponent, MefDevTabSetComponent, MefDevTabsNavComponent, MefDevTabLabelDirective, MefDevTabsInkBarDirective, MefDevTabBodyComponent], imports: [CommonModule], exports: [MefDevTabComponent, MefDevTabSetComponent, MefDevTabsNavComponent, MefDevTabLabelDirective, MefDevTabsInkBarDirective, MefDevTabBodyComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabsModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabsModule, declarations: [MefDevTabComponent, MefDevTabSetComponent, MefDevTabsNavComponent, MefDevTabLabelDirective, MefDevTabsInkBarDirective, MefDevTabBodyComponent], imports: [CommonModule], exports: [MefDevTabComponent, MefDevTabSetComponent, MefDevTabsNavComponent, MefDevTabLabelDirective, MefDevTabsInkBarDirective, MefDevTabBodyComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabsModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MefDevTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MefDevTabComponent, MefDevTabSetComponent, MefDevTabsNavComponent, MefDevTabLabelDirective, MefDevTabsInkBarDirective, MefDevTabBodyComponent],
@@ -5516,5 +5589,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { CardComponent, CardLongComponent, CardSimpleComponent, CartTypeColors, CentralPageComponent, CentralPageRowComponent, CollapseComponent, CollapseSetComponent, DatepickerComponent, FillComponent, FilteredFieldContainerComponent, FilteredFieldItemComponent, FilteredFieldService, FiltredItemModel, HelpBlockComponent, ManagePageComponent, MefDevCardModule, MefDevCollapseModule, MefDevDatepickerModule, MefDevFilteredFieldModule, MefDevHelpBlockModule, MefDevModalModule, MefDevOptionComponent, MefDevPageLayoutsModule, MefDevProgressComponent, MefDevProgressModule, MefDevSelectComponent, MefDevSelectModule, MefDevSliderComponent, MefDevSliderModule, MefDevSpecFlowTestComponent, MefDevSpecFlowTestModule, MefDevStepExecutorModule, MefDevSwitchComponent, MefDevSwitchModule, MefDevTabBodyComponent, MefDevTabComponent, MefDevTabLabelDirective, MefDevTabSetComponent, MefDevTabsInkBarDirective, MefDevTabsModule, MefDevTabsNavComponent, MefdevExecutorPageComponent, OptionPipe, ProfileComponent, ProgressConfig, RightFilterComponent, SlideRightComponent, SlideUpComponent, StageComponent, StepExecutorComponent, TabChangeEvent, TablePageComponent, mefDevCardComponents, mefDevCollapseModuleComponents, pgCard, pgCardModule };
+export { CardComponent, CardLongComponent, CardSimpleComponent, CartTypeColors, CentralPageComponent, CentralPageRowComponent, CollapseComponent, CollapseSetComponent, DatepickerComponent, FillComponent, FilteredFieldContainerComponent, FilteredFieldItemComponent, FilteredFieldService, FiltredItemModel, HelpBlockComponent, ManagePageComponent, MefDevCardModule, MefDevCollapseModule, MefDevDatepickerModule, MefDevFilteredFieldModule, MefDevHelpBlockModule, MefDevModalModule, MefDevOptionComponent, MefDevPageLayoutsModule, MefDevProgressComponent, MefDevProgressModule, MefDevSelectComponent, MefDevSelectModule, MefDevSliderComponent, MefDevSliderModule, MefDevSpecFlowTestComponent, MefDevSpecFlowTestModule, MefDevStepExecutorModule, MefDevSwitchComponent, MefDevSwitchModule, MefDevTabBodyComponent, MefDevTabComponent, MefDevTabLabelDirective, MefDevTabSetComponent, MefDevTabsInkBarDirective, MefDevTabsModule, MefDevTabsNavComponent, MefdevExecutorPageComponent, MefdevInnerCard, MefdevInnerCardModule, OptionPipe, ProfileComponent, ProgressConfig, RightFilterComponent, SlideRightComponent, SlideUpComponent, StageComponent, StepExecutorComponent, TabChangeEvent, TablePageComponent, mefDevCardComponents, mefDevCollapseModuleComponents };
 //# sourceMappingURL=natec-mef-dev-ui-kit.mjs.map