npm - @natec/mef-dev-ui-kit - Versions diffs - 16.2.4 → 16.2.48 - Mend

@natec/mef-dev-ui-kit 16.2.4 → 16.2.48

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 (56) hide show

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

@@ -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 {
@@ -206,7 +206,7 @@ class CollapseComponent {
         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 ɵ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-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',
@@ -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: [{
@@ -373,11 +373,11 @@ class FilteredFieldItemComponent {
         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 ɵ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-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: [{
             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;
@@ -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 {
     /**
@@ -524,7 +524,7 @@ class HelpBlockComponent {
     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 ɵ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-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',
@@ -552,7 +552,7 @@ 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']
@@ -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;
@@ -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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", 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: [{
             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
@@ -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.1.6", ngImport: i0, type: MefdevInnerCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", 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.1.6", 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;
@@ -2707,11 +2715,11 @@ class CardComponent {
         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 ɵ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: "<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: [{
             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;
@@ -2869,11 +2877,11 @@ class CardLongComponent {
         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 ɵ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: "<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: [{
             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 {
     /**
@@ -2932,11 +2940,11 @@ class CardSimpleComponent {
     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 ɵ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-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: [{
             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"]
@@ -2972,21 +2980,21 @@ 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.1.6", ngImport: i0, type: MefdevInnerCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefdevInnerCardModule, declarations: [MefdevInnerCard], imports: [CommonModule, MefDevProgressModule], exports: [MefdevInnerCard] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", 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.1.6", ngImport: i0, type: MefdevInnerCardModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [pgCard],
-                    exports: [pgCard],
+                    declarations: [MefdevInnerCard],
+                    exports: [MefdevInnerCard],
                     imports: [CommonModule, MefDevProgressModule]
                 }]
         }] });
@@ -2997,11 +3005,11 @@ class MefDevCardModule {
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevCardModule, declarations: [CardComponent, CardLongComponent, CardSimpleComponent], imports: [CommonModule,
             MefDevCollapseModule,
             MefDevSelectModule,
-            pgCardModule], exports: [CardComponent, CardLongComponent, CardSimpleComponent] });
+            MefdevInnerCardModule], exports: [CardComponent, CardLongComponent, CardSimpleComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", 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: [{
             type: NgModule,
@@ -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;
@@ -3110,7 +3118,7 @@ class FillComponent {
         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 ɵ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;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)' }),
@@ -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;
@@ -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;
@@ -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 {
     /**
@@ -3573,11 +3581,11 @@ class ProfileComponent {
         };
     }
     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 ɵ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-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: [{
             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() {
@@ -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 {
     /**
@@ -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 {
     /**
@@ -3774,11 +3782,11 @@ class ManagePageComponent {
     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 ɵ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-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: [{
             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"]
@@ -3821,6 +3829,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 }]
         }] });
+/**
+ * @ignore
+ */
 class StageComponent {
     currentExecutorStep;
     isRightModal;
@@ -3842,18 +3853,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 type: Input
             }] } });
+/**
+ * Wrapper component that represents a specific encapsulated executor.
+ *
+ * Example of usage:
+ *```
+ * <mefdev-step-executor #mainExecutor [view]="'regular'">
+ *
+ *  <ng-template #title>
+ *    <!-- Content for the executor title -->
+ *  </ng-template>
+ *  <ng-template #description>
+ *    <!-- Content for the executor description -->
+ *  </ng-template>
+ *
+ *  <mefdev-executor-page
+ *     [title]="'Description of situation 1'"
+ *     [isActive]="mainExecutor.activePageInd === 0"
+ *     [isCompleted]="mainExecutor.activePageInd >= 0">
+ *      <!-- Content of the first executor step -->
+ *  </mefdev-executor-page>
+ *  <mefdev-executor-page
+ *    [title]="'Description of situation 2'"
+ *    [isActive]="mainExecutor.activePageInd === 1"
+ *    [isCompleted]="mainExecutor.activePageInd >= 1">
+ *     <!-- Content of the second executor step -->
+ *  </mefdev-executor-page>
+ *  <mefdev-executor-page
+ *    [title]="'Description of situation 3'"
+ *    [isActive]="mainExecutor.activePageInd === 2"
+ *    [isCompleted]="mainExecutor.activePageInd >= 2">
+ *      <!-- Content of the third executor step -->
+ *  </mefdev-executor-page>
+ *
+ *  <ng-template #footer>
+ *    <!-- Content for the executor footer -->
+ *  <ng-template>
+ *
+ * </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.
+     *
+     * @usageNotes
+     * ```
+     *  <mefdev-step-executor #mainExecutor [view]="'regular'"></mefdev-step-executor>
+     * ```
+     */
     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.
+     */
     container;
+    /**
+     * Template for displaying the content of the executor title.
+     *
+     * @usageNotes
+     * ```
+     * <ng-template #title>
+     *   <!-- Content for the executor title -->
+     * </ng-template>
+     * ```
+     */
     title;
+    /**
+     * Template for displaying the content of the executor description.
+     *
+     * @usageNotes
+     * ```
+     * <ng-template #description>
+     *  <!-- Content for the executor description -->
+     * </ng-template>
+     * ```
+     */
     description;
+    /**
+     * Template for displaying the content of the executor footer.
+     *
+     * @usageNotes
+     * ```
+     * <ng-template #footer>
+     *    <!-- Content for the executor footer -->
+     * </ng-template>
+     * ```
+     */
     footer;
+    /**
+     * The output parameter that emits the class of the active page - active step.
+     *
+     * @usageNotes
+     * ```
+     *  <mefdev-step-executor #mainExecutor (onActivePageChange)="getActiveStep($event)"></mefdev-step-executor>
+     * ```
+     */
     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;
@@ -3872,18 +4005,52 @@ 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
+     */
     nextBtnIsDisabled() {
         return this._activePageInd === this.pages.length - 1;
     }
+    /**
+     * Check whether there is a next step of the executor. If we are at the last step - disable the 'next' button
+     */
     prev() {
         const newPageInd = this.activePageInd - 1;
         if (newPageInd >= 0) {
             this.activePageInd = newPageInd;
         }
     }
+    /**
+     * Go back to the previous step
+     */
     cancel() {
         this.activePageInd = 0;
         const newPageInd = this.activePageInd - 1;
@@ -3891,21 +4058,33 @@ class StepExecutorComponent {
             this.activePageInd = newPageInd;
         }
     }
+    /**
+     * Go to the next step
+     */
     next() {
         const newPageInd = this.activePageInd + 1;
         if (newPageInd < this.pages.length) {
             this.activePageInd = newPageInd;
         }
     }
+    /**
+     * Set a specific active page
+     */
     setActivePage(pageNumber) {
         pageNumber -= 1;
         if (pageNumber < this.pages.length && pageNumber >= 0) {
             this.activePageInd = pageNumber;
         }
     }
+    /**
+     * Add new page
+     */
     addPage(page) {
         this.pages.push(page);
     }
+    /**
+     * Delete a specific page
+     */
     removeSpecificPage(page) {
         const index = this.pages.indexOf(page);
         if (index !== -1) {
@@ -3915,6 +4094,9 @@ class StepExecutorComponent {
             }
         }
     }
+    /**
+     * Delete a page by its index
+     */
     removePageByIndex(index) {
         if (index >= 0 && index < this.pages.length) {
             this.pages.splice(index, 1);
@@ -3923,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.1.6", 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.1.6", 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: [{
             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']
@@ -3946,14 +4130,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 args: ['footer']
             }], onActivePageChange: [{
                 type: Output
+            }], modalStepExecutorStateChange: [{
+                type: Output
+            }], rightStepExecutorStateChange: [{
+                type: Output
             }] } });
+/**
+ * A component that allows us to create a content page - a step in our executor.
+ * Each individual step can have different styles, content and settings.
+ *
+ * Example of usage:
+ *
+ * ```
+ *  <mefdev-executor-page
+ *     [title]="'Executor title 1'"
+ *     [isActive]="mainExecutor.activePageInd === 0"
+ *     [isCompleted]="mainExecutor.activePageInd >= 0"
+ *     class="yourClass">
+ *      <!-- Content of the first executor step -->
+ *  </mefdev-executor-page>
+ *  <mefdev-executor-page
+ *     [title]="'Executor title 2'"
+ *     [isActive]="mainExecutor.activePageInd === 1"
+ *     [isCompleted]="mainExecutor.activePageInd >= 1"
+ *     class="yourClass">
+ *      <!-- Content of the second executor step -->
+ *  </mefdev-executor-page>
+ *  <mefdev-executor-page
+ *     [title]="'Executor title 3'"
+ *     [isActive]="mainExecutor.activePageInd === 2"
+ *     [isCompleted]="mainExecutor.activePageInd >= 2"
+ *     class="yourClass">
+ *      <!-- Content of the third executor step -->
+ *  </mefdev-executor-page>
+ * ```
+ *
+  */
 class MefdevExecutorPageComponent {
     _mainExecutor;
     _elementRef;
+    /**
+     * The title of the step
+     * @usageNotes
+     * ```
+     *  <mefdev-executor-page [title]="'Description of situation 1'"></mefdev-executor-page>
+     * ```
+     */
     title;
+    /**
+     * The input parameter that corresponds to whether the current step matches the respective page.
+     * The value of the active page is passed by reference from the specific component StepExecutorComponent.
+     *
+     * @usageNotes
+     * ```
+     *  <mefdev-step-executor #mainExecutor>
+     *    <mefdev-executor-page [isActive]="mainExecutor.activePageInd === 0">
+     *    <mefdev-executor-page [isActive]="mainExecutor.activePageInd === 1">
+     *    <mefdev-executor-page [isActive]="mainExecutor.activePageInd === 2">
+     *  </<mefdev-step-executor>
+     *
+     * ```
+     */
     isActive = false;
+    /**
+     * The input parameter that checks whether the step is completed.
+     *
+     * @usageNotes
+     * ```
+     *  <mefdev-executor-page [isCompleted]="mainExecutor.activePageInd >= 0"></mefdev-executor-page>
+     * ```
+     */
     isCompleted = false;
+    /**
+     * The output parameter that emits a boolean value indicating whether our completed step has changed.
+     *
+     * @usageNotes
+     * ```
+     *  <mefdev-executor-page (isCompletedChange)="onStepChanged($event)"></mefdev-executor-page>
+     * ```
+     */
     isCompletedChange = new EventEmitter();
     elRef;
     constructor(_mainExecutor, _elementRef) {
@@ -3993,11 +4249,13 @@ 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,
             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.1.6", ngImport: i0, type: MefDevStepExecutorModule, imports: [MefDevModalModule,
+            CommonModule,
             FormsModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, decorators: [{
@@ -4014,6 +4272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         StageComponent,
                     ],
                     imports: [
+                        MefDevModalModule,
                         CommonModule,
                         FormsModule,
                     ]
@@ -4030,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 };
@@ -4121,11 +4380,11 @@ class MefDevSliderComponent {
         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 ɵ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-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]{-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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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]{-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"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], range: [{
@@ -4219,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
@@ -4983,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;
@@ -5330,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