@natec/mef-dev-ui-kit 0.0.67 → 0.0.69

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

@@ -0,0 +1,3190 @@
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation, Input, Host, ContentChild, HostBinding, NgModule, Injectable, EventEmitter, Output, ViewChild, Pipe, forwardRef, HostListener, Directive, Optional, ContentChildren, TemplateRef } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { Subject, of, fromEvent, merge } from 'rxjs';
+import * as i2 from 'ngx-ui-loader';
+import { NgxUiLoaderModule } from 'ngx-ui-loader';
+import * as i1$1 from '@angular/router';
+import * as i1$2 from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import * as i3 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { TAB, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes';
+import * as i1$3 from 'ngx-bootstrap/modal';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import * as i2$1 from '@angular/cdk/observers';
+import { ObserversModule } from '@angular/cdk/observers';
+import { auditTime, startWith, map } from 'rxjs/operators';
+import * as i1$4 from '@angular/cdk/bidi';
+
+class CollapseSetComponent {
+    constructor() {
+        this._accordion = false;
+        this._horizontal = true;
+        this._expandAny = true;
+        this.panels = [];
+    }
+    set expandAny(value) {
+        this._accordion = value;
+    }
+    get expandAny() {
+        return this._accordion;
+    }
+    set Accordion(value) {
+        this._accordion = value;
+    }
+    get Accordion() {
+        return this._accordion;
+    }
+    set Horizontal(value) {
+        this._horizontal = value;
+    }
+    get Horizontal() {
+        return this._horizontal;
+    }
+    pgClick(collapse) {
+        if (this.Accordion && !this.expandAny) {
+            this.panels.map((item, index) => {
+                const curIndex = this.panels.indexOf(collapse);
+                if (index !== curIndex) {
+                    item.Active = false;
+                }
+            });
+        }
+    }
+    addTab(collapse) {
+        this.panels.push(collapse);
+    }
+}
+CollapseSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CollapseSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CollapseSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CollapseSetComponent, selector: "mefdev-collapse-set", inputs: { expandAny: "expandAny", Accordion: "Accordion", Horizontal: "Horizontal" }, ngImport: i0, template: "<div class=\"card-group\" [class.horizontal]=\"Horizontal\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [""], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CollapseSetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-collapse-set', encapsulation: ViewEncapsulation.None, template: "<div class=\"card-group\" [class.horizontal]=\"Horizontal\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [""] }]
+        }], propDecorators: { expandAny: [{
+                type: Input
+            }], Accordion: [{
+                type: Input
+            }], Horizontal: [{
+                type: Input
+            }] } });
+
+class CollapseComponent {
+    constructor(_collapseSet, _elementRef) {
+        this._collapseSet = _collapseSet;
+        this._elementRef = _elementRef;
+        this._disabled = false;
+        this._active = false;
+        this._el = this._elementRef.nativeElement;
+        this._collapseSet.addTab(this);
+    }
+    set Disabled(value) {
+        this._disabled = value;
+    }
+    get Disabled() {
+        return this._disabled;
+    }
+    set Active(value) {
+        const active = value;
+        if (this._active === active) {
+            return;
+        }
+        if (!this.Disabled) {
+            this._active = active;
+        }
+    }
+    get Active() {
+        return this._active;
+    }
+    clickHeader($event) {
+        this.Active = !this.Active;
+        /** trigger host collapseSet click event */
+        this._collapseSet.pgClick(this);
+    }
+}
+CollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CollapseComponent, deps: [{ token: CollapseSetComponent, host: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+CollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CollapseComponent, selector: "mefdev-collapse", inputs: { Disabled: "Disabled", Active: "Active" }, 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 mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n  <div class=\"col-11\">\r\n    <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n  </div>\r\n  <div class=\"col-1 align-self-center\">\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 class=\"card-body\">\r\n      <ng-content></ng-content>\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}.h1,h1{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,.card-title,h3{font-family:montserrat-regular;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat-light;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat-semibold;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:montserrat-medium;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato-Bold;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato-Regular;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato-Bold;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato-Regular;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato-Bold;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato-Regular;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-title{background-color:#f3f3f3;padding:17px;margin:0;color:#000}.collapse{background-color:#f3f3f3}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+        trigger('collapseState', [
+            state('inactive', style({
+                opacity: '0',
+                height: 0
+            })),
+            state('active', style({
+                opacity: '1',
+                height: '*'
+            })),
+            transition('inactive => active', animate('125ms ease-in')),
+            transition('active => inactive', animate('125ms ease-out'))
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CollapseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-collapse', animations: [
+                        trigger('collapseState', [
+                            state('inactive', style({
+                                opacity: '0',
+                                height: 0
+                            })),
+                            state('active', style({
+                                opacity: '1',
+                                height: '*'
+                            })),
+                            transition('inactive => active', animate('125ms ease-in')),
+                            transition('active => inactive', animate('125ms ease-out'))
+                        ])
+                    ], host: {
+                        '[class.card]': 'true',
+                        '[class.card-default]': 'true',
+                        '[class.m-b-0]': 'true'
+                    }, template: "<div class=\"row mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n  <div class=\"col-11\">\r\n    <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n  </div>\r\n  <div class=\"col-1 align-self-center\">\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 class=\"card-body\">\r\n      <ng-content></ng-content>\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}.h1,h1{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,.card-title,h3{font-family:montserrat-regular;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat-light;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat-semibold;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:montserrat-medium;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato-Bold;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato-Regular;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato-Bold;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato-Regular;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato-Bold;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato-Regular;font-size:13px;line-height:16px;font-weight:400;color:#000}.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: [{
+                type: ContentChild,
+                args: ["CardTitle"]
+            }], Disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.disabled']
+            }], Active: [{
+                type: Input
+            }] } });
+
+const mefDevCollapseModuleComponents = [CollapseSetComponent, CollapseComponent];
+class MefDevCollapseModule {
+    static forRoot() {
+        return {
+            ngModule: MefDevCollapseModule
+        };
+    }
+}
+MefDevCollapseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MefDevCollapseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevCollapseModule, declarations: [CollapseSetComponent, CollapseComponent], imports: [CommonModule], exports: [CollapseSetComponent, CollapseComponent] });
+MefDevCollapseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevCollapseModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevCollapseModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: mefDevCollapseModuleComponents,
+                    exports: mefDevCollapseModuleComponents,
+                    imports: [CommonModule]
+                }]
+        }] });
+
+var RequestEvent;
+(function (RequestEvent) {
+    RequestEvent[RequestEvent["TX"] = 0] = "TX";
+    RequestEvent[RequestEvent["RX_OK"] = 1] = "RX_OK";
+    RequestEvent[RequestEvent["RX_ERR"] = 2] = "RX_ERR";
+})(RequestEvent || (RequestEvent = {}));
+
+class LoaderService {
+    constructor() {
+        this.stream = new Subject();
+        this.loaderIsShow = new Subject();
+        this._lastVal = false;
+        this.requestCnt = 0;
+        this.RX_EventCout = 1;
+        this.stream.subscribe(e => {
+            switch (e) {
+                case RequestEvent.TX:
+                    this.requestCnt++;
+                    break;
+                case RequestEvent.RX_OK:
+                case RequestEvent.RX_ERR:
+                    this.requestCnt -= 1.0 * this.RX_EventCout;
+                    // console.log('LoaderService request', this.requestCnt) 
+                    break;
+            }
+            if (this.requestCnt < 0) {
+                this.requestCnt = 0;
+            }
+            let isZero = this.requestCnt == 0;
+            if (this._lastVal != isZero) {
+                this._lastVal = isZero;
+                this.loaderIsShow.next(!isZero);
+            }
+        });
+    }
+    newEvent(e) {
+        this.stream.next(e);
+    }
+    getLoaderIsShow() {
+        return this.loaderIsShow;
+    }
+    update() {
+        this.requestCnt = 0;
+    }
+}
+LoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class LoaderComponent {
+    constructor(loaderService, ngxLoader) {
+        this.loaderService = loaderService;
+        this.ngxLoader = ngxLoader;
+    }
+    ngOnInit() {
+        this.loaderService.getLoaderIsShow().subscribe((isEnable) => {
+            if (isEnable) {
+                this.ngxLoader.startBackground();
+            }
+            else {
+                this.ngxLoader.stopBackground();
+            }
+        });
+    }
+}
+LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, deps: [{ token: LoaderService }, { token: i2.NgxUiLoaderService }], target: i0.ɵɵFactoryTarget.Component });
+LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LoaderComponent, selector: "mefdev-loader", ngImport: i0, template: "<ngx-ui-loader></ngx-ui-loader>", styles: [""], components: [{ type: i2.NgxUiLoaderComponent, selector: "ngx-ui-loader", inputs: ["bgsColor", "bgsOpacity", "bgsPosition", "bgsSize", "bgsTemplate", "bgsType", "fgsColor", "fgsPosition", "fgsSize", "fgsTemplate", "fgsType", "gap", "loaderId", "logoPosition", "logoSize", "logoUrl", "overlayBorderRadius", "overlayColor", "pbColor", "pbDirection", "pbThickness", "hasProgressBar", "text", "textColor", "textPosition"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-loader', template: "<ngx-ui-loader></ngx-ui-loader>", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: LoaderService }, { type: i2.NgxUiLoaderService }]; } });
+
+const ngxUiLoaderConfig = {
+    "bgsColor": "#CF0106",
+    "fgsColor": "#CF0106",
+    "bgsOpacity": 0.5,
+    "bgsPosition": "center-center",
+    "bgsSize": 50,
+    "bgsType": "ball-spin-clockwise",
+    "blur": 5,
+    "delay": 0,
+    "fastFadeOut": true,
+    "fgsPosition": "center-center",
+    "fgsSize": 60,
+    "fgsType": "ball-spin-clockwise",
+    "gap": 57,
+    "logoPosition": "center-center",
+    "logoSize": 120,
+    "logoUrl": "",
+    "masterLoaderId": "master",
+    "overlayBorderRadius": "0",
+    "overlayColor": "rgba(40, 40, 40, 0.8)",
+    "pbColor": "red",
+    "pbDirection": "ltr",
+    "pbThickness": 3,
+    "hasProgressBar": false,
+    "text": "",
+    "textColor": "#FFFFFF",
+    "textPosition": "center-center",
+    "maxTime": -1,
+    "minTime": 300
+};
+class MefDevLoaderModule {
+}
+MefDevLoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MefDevLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevLoaderModule, declarations: [LoaderComponent], imports: [CommonModule, i2.NgxUiLoaderModule], exports: [LoaderComponent] });
+MefDevLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevLoaderModule, providers: [LoaderService], imports: [[
+            CommonModule,
+            NgxUiLoaderModule.forRoot(ngxUiLoaderConfig),
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevLoaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LoaderComponent],
+                    exports: [LoaderComponent],
+                    imports: [
+                        CommonModule,
+                        NgxUiLoaderModule.forRoot(ngxUiLoaderConfig),
+                    ],
+                    providers: [LoaderService]
+                }]
+        }] });
+
+class FilteredFieldService {
+    constructor() {
+        this.newFilterItem = new Subject();
+        this.openFilter = new Subject();
+    }
+    getOpenFilter() {
+        return this.openFilter;
+    }
+    sendOpenFilter(item) {
+        this.openFilter.next(item);
+    }
+    getNewFilterItem() {
+        return this.newFilterItem;
+    }
+    sendNewFilterItem(item) {
+        this.newFilterItem.next(item);
+    }
+}
+FilteredFieldService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilteredFieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FilteredFieldService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilteredFieldService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilteredFieldService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class FilteredFieldItemComponent {
+    constructor() {
+        this.discard = new EventEmitter();
+        this.openFilter = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    onOpenFilter() {
+        this.openFilter.next({});
+    }
+    onDiscard() {
+        this.discard.next(this.item);
+    }
+}
+FilteredFieldItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilteredFieldItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilteredFieldItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FilteredFieldItemComponent, selector: "mefdev-filtered-field-item", inputs: { item: "item" }, outputs: { discard: "discard", openFilter: "openFilter" }, ngImport: i0, template: "<div class=\"item\">\n    <i class=\"fa fa-times\" (click)=\"onDiscard()\" style=\"margin-right: 3px; cursor: pointer;\"></i> \n    <span (click)=\"onOpenFilter()\">{{item.newValue}}</span>\n</div>\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.item{background-color:#4d4d4d;color:#fff;border-radius:5px;margin-right:7px;padding:3px 7px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilteredFieldItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-filtered-field-item', template: "<div class=\"item\">\n    <i class=\"fa fa-times\" (click)=\"onDiscard()\" style=\"margin-right: 3px; cursor: pointer;\"></i> \n    <span (click)=\"onOpenFilter()\">{{item.newValue}}</span>\n</div>\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.item{background-color:#4d4d4d;color:#fff;border-radius:5px;margin-right:7px;padding:3px 7px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                type: Input
+            }], discard: [{
+                type: Output
+            }], openFilter: [{
+                type: Output
+            }] } });
+
+class FilteredFieldContainerComponent {
+    constructor(service) {
+        this.service = service;
+        this.items = [];
+    }
+    onOpenFilter(item) {
+        this.service.sendOpenFilter(item);
+    }
+    onDiscard(item) {
+        item.discard(item.standartValue);
+        this.items.splice(this.items.findIndex(x => x.id == item.id), 1);
+    }
+    ngOnInit() {
+        this.service.getNewFilterItem().subscribe(item => {
+            let i = this.items.findIndex(x => x.id == item.id);
+            if (item.newValue == item.standartValue) {
+                this.items[i] = item;
+                this.items.splice(i, 1);
+                return;
+            }
+            if (i != -1) {
+                this.items[i] = item;
+                return;
+            }
+            this.items.push(item);
+        });
+    }
+}
+FilteredFieldContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilteredFieldContainerComponent, deps: [{ token: FilteredFieldService }], target: i0.ɵɵFactoryTarget.Component });
+FilteredFieldContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FilteredFieldContainerComponent, selector: "mefdev-filtered-field-container", ngImport: i0, template: "<div class=\"item-container\">\n    <mefdev-filtered-field-item *ngFor=\"let item of items\" [item]=\"item\" (discard)=\"onDiscard(item)\" (openFilter)=\"onOpenFilter(item)\"></mefdev-filtered-field-item>\n</div>\n", styles: [".item-container{display:flex;cursor:context-menu}\n"], components: [{ type: FilteredFieldItemComponent, selector: "mefdev-filtered-field-item", inputs: ["item"], outputs: ["discard", "openFilter"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilteredFieldContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-filtered-field-container', template: "<div class=\"item-container\">\n    <mefdev-filtered-field-item *ngFor=\"let item of items\" [item]=\"item\" (discard)=\"onDiscard(item)\" (openFilter)=\"onOpenFilter(item)\"></mefdev-filtered-field-item>\n</div>\n", styles: [".item-container{display:flex;cursor:context-menu}\n"] }]
+        }], ctorParameters: function () { return [{ type: FilteredFieldService }]; } });
+
+class MefDevFilteredFieldModule {
+}
+MefDevFilteredFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevFilteredFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MefDevFilteredFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevFilteredFieldModule, declarations: [FilteredFieldContainerComponent,
+        FilteredFieldItemComponent], imports: [CommonModule], exports: [FilteredFieldItemComponent,
+        FilteredFieldContainerComponent] });
+MefDevFilteredFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevFilteredFieldModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevFilteredFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FilteredFieldContainerComponent,
+                        FilteredFieldItemComponent,
+                    ],
+                    exports: [
+                        FilteredFieldItemComponent,
+                        FilteredFieldContainerComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class FiltredItemModel {
+    constructor(id, newValue, standartValue, discard) {
+        this.id = id;
+        this.newValue = newValue;
+        this.standartValue = standartValue;
+        this.discard = discard;
+    }
+}
+
+class HelpBlockComponent {
+    constructor() {
+        this.isVisible = true;
+        this.expanded = false;
+        this.title = "Help";
+    }
+    ngOnInit() {
+    }
+}
+HelpBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HelpBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HelpBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: HelpBlockComponent, selector: "mefdev-help-block", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"card-simple\" *ngIf=\"isVisible\">\n    <div class=\"row m-1 body-1\" (click)=\"expanded = !expanded\" style=\"cursor: pointer;\">\n        <div class=\"col-10\" style=\"color: white;\">\n            {{ title }}\n        </div>\n        <div class=\"col-2\">\n            <i class=\"fa fa-window-close\" aria-hidden=\"true\" style=\"float: right; margin-left: 20px;\" (click)=\"isVisible = !isVisible;\"></i>\n            \n            <i class=\"fa fa-angle-down \" *ngIf=\"!expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>\n            <i class=\"fa fa-angle-up\" *ngIf=\"expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>      \n        </div>\n    </div>\n\n    <div class=\"card-body row\" [@smothExpand]=\"expanded ? 'open' : 'close'\">\n        <div class=\"col-12\">\n            <ng-content></ng-content>\n        </div>\n    </div>\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"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+        trigger('smothExpand', [
+            state('close', style({
+                height: '0',
+                margin: '0',
+                padding: '0',
+                opacity: '0',
+                visibility: 'hidden',
+            })),
+            state('open', style({})),
+            transition('close<=>open', animate(200))
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HelpBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-help-block', animations: [
+                        trigger('smothExpand', [
+                            state('close', style({
+                                height: '0',
+                                margin: '0',
+                                padding: '0',
+                                opacity: '0',
+                                visibility: 'hidden',
+                            })),
+                            state('open', style({})),
+                            transition('close<=>open', animate(200))
+                        ])
+                    ], template: "<div class=\"card-simple\" *ngIf=\"isVisible\">\n    <div class=\"row m-1 body-1\" (click)=\"expanded = !expanded\" style=\"cursor: pointer;\">\n        <div class=\"col-10\" style=\"color: white;\">\n            {{ title }}\n        </div>\n        <div class=\"col-2\">\n            <i class=\"fa fa-window-close\" aria-hidden=\"true\" style=\"float: right; margin-left: 20px;\" (click)=\"isVisible = !isVisible;\"></i>\n            \n            <i class=\"fa fa-angle-down \" *ngIf=\"!expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>\n            <i class=\"fa fa-angle-up\" *ngIf=\"expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>      \n        </div>\n    </div>\n\n    <div class=\"card-body row\" [@smothExpand]=\"expanded ? 'open' : 'close'\">\n        <div class=\"col-12\">\n            <ng-content></ng-content>\n        </div>\n    </div>\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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input,
+                args: ['title']
+            }] } });
+
+class MefDevHelpBlockModule {
+}
+MefDevHelpBlockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevHelpBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MefDevHelpBlockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevHelpBlockModule, declarations: [HelpBlockComponent], imports: [CommonModule,
+        MefDevCollapseModule], exports: [HelpBlockComponent] });
+MefDevHelpBlockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevHelpBlockModule, imports: [[
+            CommonModule,
+            MefDevCollapseModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevHelpBlockModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [HelpBlockComponent],
+                    exports: [HelpBlockComponent],
+                    imports: [
+                        CommonModule,
+                        MefDevCollapseModule
+                    ]
+                }]
+        }] });
+
+class ProgressComponent {
+    constructor() { }
+    set value(value) {
+        if (this.type == "circle") {
+            this._value = (value / 100) * 360;
+            if (this.value >= 50) {
+                this._value2 = true;
+            }
+        }
+        else
+            this._value = value;
+    }
+    get value() {
+        return this._value;
+    }
+    get value2() {
+        return this._value2;
+    }
+}
+ProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressComponent, selector: "pg-progress", inputs: { type: "type", color: "color", thick: "thick", indeterminate: "indeterminate", value: "value" }, ngImport: i0, template: "<div *ngIf=\"type === 'bar'; else circleBlock\">\r\n  <div *ngIf=\"indeterminate; else determineBarBlock\">\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar-{{ color }}\" [class.progress-bar-indeterminate]=\"indeterminate\"></div>\r\n    </div>\r\n  </div>\r\n  <ng-template #determineBarBlock>\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar progress-bar-{{ color }}\" [ngStyle]=\"{ width: value + '%' }\"></div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<ng-template #circleBlock>\r\n  <div class=\"progress-circle-{{ color }}\" [class.progress-circle-indeterminate]=\"indeterminate\"\r\n    [class.progress-circle]=\"!indeterminate\" [class.progress-circle-thick]=\"thick\">\r\n    <div *ngIf=\"indeterminate; else determineBlock\"></div>\r\n    <ng-template #determineBlock>\r\n      <div class=\"pie\" [ngStyle]=\"_value2 && { clip: 'rect(auto, auto, auto, auto)' }\">\r\n        <div class=\"left-side half-circle\" [ngStyle]=\"_value2 && { transform: 'rotate(' + value + 'deg)' }\"></div>\r\n        <div class=\"right-side half-circle\" [ngStyle]=\"{\r\n            transform:\r\n              _value2 === true ? 'rotate(180deg)' : 'rotate(' + value + 'deg)'\r\n          }\"></div>\r\n      </div>\r\n      <div class=\"shadow\"></div>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "pg-progress", template: "<div *ngIf=\"type === 'bar'; else circleBlock\">\r\n  <div *ngIf=\"indeterminate; else determineBarBlock\">\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar-{{ color }}\" [class.progress-bar-indeterminate]=\"indeterminate\"></div>\r\n    </div>\r\n  </div>\r\n  <ng-template #determineBarBlock>\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar progress-bar-{{ color }}\" [ngStyle]=\"{ width: value + '%' }\"></div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<ng-template #circleBlock>\r\n  <div class=\"progress-circle-{{ color }}\" [class.progress-circle-indeterminate]=\"indeterminate\"\r\n    [class.progress-circle]=\"!indeterminate\" [class.progress-circle-thick]=\"thick\">\r\n    <div *ngIf=\"indeterminate; else determineBlock\"></div>\r\n    <ng-template #determineBlock>\r\n      <div class=\"pie\" [ngStyle]=\"_value2 && { clip: 'rect(auto, auto, auto, auto)' }\">\r\n        <div class=\"left-side half-circle\" [ngStyle]=\"_value2 && { transform: 'rotate(' + value + 'deg)' }\"></div>\r\n        <div class=\"right-side half-circle\" [ngStyle]=\"{\r\n            transform:\r\n              _value2 === true ? 'rotate(180deg)' : 'rotate(' + value + 'deg)'\r\n          }\"></div>\r\n      </div>\r\n      <div class=\"shadow\"></div>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], thick: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class pgCard {
+    constructor() {
+        this._isCollapsed = false;
+        this._isMaximixed = false;
+        this._isLoading = false;
+        this._minimalHeader = false;
+        this._message = "";
+        this._messageType = "danger";
+        this._messageVisible = false;
+        this._progressType = "circle";
+        this._progressColor = "";
+        this._showTools = true;
+        this._close_card = false;
+        this._refresh = false;
+        this._refreshColor = "light";
+        this._close = true;
+        this._toggle = true;
+        this._maximize = true;
+        this._timeout = 0;
+        this._titleText = "";
+        this._card_border_style = "";
+        this._type = "default";
+        this._extraHeaderClass = "";
+        this._extraBodyClass = "";
+        this._additionalClasses = "";
+        this.onRefresh = new EventEmitter();
+    }
+    set Title(value) {
+        this._titleText = value;
+    }
+    get Title() {
+        return this._titleText;
+    }
+    set Type(value) {
+        this._type = value;
+    }
+    set MinimalHeader(value) {
+        this._minimalHeader = value;
+    }
+    set ProgressType(value) {
+        this._progressType = value;
+    }
+    set ProgressColor(value) {
+        this._progressColor = value;
+    }
+    set Refresh(value) {
+        this._refresh = value;
+    }
+    set RefreshColor(value) {
+        this._refreshColor = value;
+    }
+    set Maximize(value) {
+        this._maximize = value;
+    }
+    set Close(value) {
+        this._close = value;
+    }
+    set Toggle(value) {
+        this._toggle = value;
+    }
+    set HeaderClass(value) {
+        this._extraHeaderClass = value;
+    }
+    set BodyClass(value) {
+        this._extraBodyClass = value;
+    }
+    set AdditionalClasses(value) {
+        this._additionalClasses = value;
+    }
+    set Controls(value) {
+        this._showTools = value;
+    }
+    set ShowMessage(value) {
+        this._messageVisible = value;
+    }
+    set Message(value) {
+        this._message = value;
+    }
+    set Loading(value) {
+        this._isLoading = value;
+    }
+    set TimeOut(value) {
+        this._timeout = value;
+    }
+    set CardBorderStyle(value) {
+        this._card_border_style = value;
+    }
+    toggle() {
+        this._isCollapsed = this._isCollapsed === true ? false : true;
+    }
+    maximize() {
+        var _a;
+        let nativeElement = this._hostContent.nativeElement;
+        if (this._isMaximixed) {
+            this._isMaximixed = false;
+            nativeElement.style.left = null;
+            nativeElement.style.top = null;
+        }
+        else {
+            this._isMaximixed = true;
+            let pagecontainer = (_a = document.querySelector(".content")) !== null && _a !== void 0 ? _a : new Element();
+            console.log(pagecontainer);
+            let rect = pagecontainer.getBoundingClientRect();
+            let elementRect = nativeElement.getBoundingClientRect();
+            let style = window.getComputedStyle(pagecontainer);
+            nativeElement.style.left =
+                parseFloat(style["marginLeft"]) +
+                    parseFloat(style["paddingLeft"]) +
+                    rect.left +
+                    "px";
+            nativeElement.style.top =
+                parseFloat(style["padding-top"]) + rect.top + "px";
+        }
+    }
+    alertDismiss() {
+        this._messageVisible = false;
+    }
+    refresh() {
+        if (!this._isLoading) {
+            this._isLoading = true;
+            this.onRefresh.emit();
+        }
+        if (this._timeout > 0) {
+            setTimeout(() => {
+                this._isLoading = false;
+            }, this._timeout);
+        }
+    }
+    close() {
+        this._close_card = true;
+    }
+}
+pgCard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+pgCard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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    <pg-progress *ngIf=\"_minimalHeader == false\" type=\"{{ _progressType }}\" color=\"{{ _progressColor }}\"\r\n      indeterminate=\"true\" class=\"\"></pg-progress>\r\n  </div>\r\n</div>", components: [{ type: ProgressComponent, selector: "pg-progress", inputs: ["type", "color", "thick", "indeterminate", "value"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+        trigger("collapseState", [
+            state("inactive", style({
+                opacity: "0",
+                height: 0,
+                paddingBottom: "0"
+            })),
+            state("active", style({
+                opacity: "1",
+                height: "*",
+                paddingBottom: "*"
+            })),
+            transition("inactive => active", animate("125ms ease-in")),
+            transition("active => inactive", animate("125ms ease-out"))
+        ]),
+        trigger("fadeAnimation", [
+            state("false", style({
+                opacity: "0",
+                visibility: "hidden"
+            })),
+            state("true", style({
+                opacity: "1",
+                visibility: "visible"
+            })),
+            transition("false => true", animate("500ms ease-in")),
+            transition("true => false", animate("500ms ease-out"))
+        ])
+    ], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgCard, decorators: [{
+            type: Component,
+            args: [{ selector: "pgcard", encapsulation: ViewEncapsulation.None, animations: [
+                        trigger("collapseState", [
+                            state("inactive", style({
+                                opacity: "0",
+                                height: 0,
+                                paddingBottom: "0"
+                            })),
+                            state("active", style({
+                                opacity: "1",
+                                height: "*",
+                                paddingBottom: "*"
+                            })),
+                            transition("inactive => active", animate("125ms ease-in")),
+                            transition("active => inactive", animate("125ms ease-out"))
+                        ]),
+                        trigger("fadeAnimation", [
+                            state("false", style({
+                                opacity: "0",
+                                visibility: "hidden"
+                            })),
+                            state("true", style({
+                                opacity: "1",
+                                visibility: "visible"
+                            })),
+                            transition("false => true", animate("500ms ease-in")),
+                            transition("true => false", animate("500ms ease-out"))
+                        ])
+                    ], 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    <pg-progress *ngIf=\"_minimalHeader == false\" type=\"{{ _progressType }}\" color=\"{{ _progressColor }}\"\r\n      indeterminate=\"true\" class=\"\"></pg-progress>\r\n  </div>\r\n</div>" }]
+        }], propDecorators: { _hostContent: [{
+                type: ViewChild,
+                args: ["hostContent"]
+            }], minimalCircleLoading: [{
+                type: ViewChild,
+                args: ["minimalCircleLoading"]
+            }], minimalCircleLoadingTrigger: [{
+                type: ViewChild,
+                args: ["minimalCircleLoadingTrigger"]
+            }], CardTitle: [{
+                type: ContentChild,
+                args: ["CardTitle"]
+            }], CardExtraControls: [{
+                type: ContentChild,
+                args: ["CardExtraControls"]
+            }], Title: [{
+                type: Input
+            }], Type: [{
+                type: Input
+            }], MinimalHeader: [{
+                type: Input
+            }], ProgressType: [{
+                type: Input
+            }], ProgressColor: [{
+                type: Input
+            }], Refresh: [{
+                type: Input
+            }], RefreshColor: [{
+                type: Input
+            }], Maximize: [{
+                type: Input
+            }], Close: [{
+                type: Input
+            }], Toggle: [{
+                type: Input
+            }], HeaderClass: [{
+                type: Input
+            }], BodyClass: [{
+                type: Input
+            }], AdditionalClasses: [{
+                type: Input
+            }], Controls: [{
+                type: Input
+            }], ShowMessage: [{
+                type: Input
+            }], Message: [{
+                type: Input
+            }], Loading: [{
+                type: Input
+            }], TimeOut: [{
+                type: Input
+            }], CardBorderStyle: [{
+                type: Input
+            }], onRefresh: [{
+                type: Output
+            }] } });
+
+class CardComponent {
+    constructor(router) {
+        this.router = router;
+    }
+    ngOnInit() {
+    }
+    imgClick() {
+        this.router.navigate(['/', this.imgUrl.toString()]);
+    }
+}
+CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CardComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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          \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\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>", 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-bold;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:montserrat-regular;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat-light;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat-semibold;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,.plugin-type,h6{font-family:montserrat-medium;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,.card-title span,body-1{font-family:Lato-Bold;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato-Regular;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato-Bold;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato-Regular;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,.card-description,.card-no-description,body-5{font-family:Lato-Bold;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato-Regular;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-default{background-color:#eaeaea;border-radius:5px}.card-header{height:72px}.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;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"], components: [{ 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"] }], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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          \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\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>", 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-bold;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:montserrat-regular;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat-light;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat-semibold;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,.plugin-type,h6{font-family:montserrat-medium;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,.card-title span,body-1{font-family:Lato-Bold;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato-Regular;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato-Bold;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato-Regular;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,.card-description,.card-no-description,body-5{font-family:Lato-Bold;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato-Regular;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-default{background-color:#eaeaea;border-radius:5px}.card-header{height:72px}.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;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: { card_title: [{
+                type: ContentChild,
+                args: ["card_title"]
+            }], card_footer: [{
+                type: ContentChild,
+                args: ["card_footer"]
+            }], card_type: [{
+                type: Input
+            }], img: [{
+                type: Input
+            }], imgUrl: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }] } });
+
+var CartTypeColors;
+(function (CartTypeColors) {
+    CartTypeColors["UNSET"] = "UNSET";
+    CartTypeColors["RED"] = "RED";
+    CartTypeColors["GREEN"] = "GREEN";
+})(CartTypeColors || (CartTypeColors = {}));
+
+class CardLongComponent {
+    constructor(router) {
+        this.router = router;
+        this.type_color = CartTypeColors.UNSET;
+    }
+    ngOnInit() {
+    }
+    imgClick() {
+        this.router.navigate(['/', this.imgUrl.toString()]);
+    }
+}
+CardLongComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CardLongComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+CardLongComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CardLongComponent, selector: "medev-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-bold;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,:host::ng-deep .card-title span,h3{font-family:montserrat-regular;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat-light;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat-semibold;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,:host::ng-deep .plugin-type,h6{font-family:montserrat-medium;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato-Bold;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato-Regular;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato-Bold;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato-Regular;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-Bold;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato-Regular;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"], components: [{ 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"] }], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CardLongComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'medev-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-bold;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,:host::ng-deep .card-title span,h3{font-family:montserrat-regular;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat-light;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat-semibold;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,:host::ng-deep .plugin-type,h6{font-family:montserrat-medium;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato-Bold;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato-Regular;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato-Bold;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato-Regular;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-Bold;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato-Regular;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"]
+            }], params: [{
+                type: ContentChild,
+                args: ["params"]
+            }], second_col: [{
+                type: ContentChild,
+                args: ["second_col"]
+            }], third_col: [{
+                type: ContentChild,
+                args: ["third_col"]
+            }], type_text: [{
+                type: Input
+            }], type_color: [{
+                type: Input
+            }], img: [{
+                type: Input
+            }], imgUrl: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }] } });
+
+class CardSimpleComponent {
+    constructor() {
+        this.isDisabled = false;
+    }
+    ngOnInit() {
+    }
+}
+CardSimpleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CardSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardSimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CardSimpleComponent, selector: "medev-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"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CardSimpleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'medev-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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { isDisabled: [{
+                type: Input,
+                args: ["disabled"]
+            }], card_title: [{
+                type: ContentChild,
+                args: ["card_title"]
+            }] } });
+
+function toBoolean(value) {
+    return value === '' || (value && value !== 'false');
+}
+
+/* tslint:disable:no-any */
+class OptionPipe {
+    // TODO: enable type checking for this method
+    transform(options, value) {
+        if (value.searchText) {
+            let _options = options.filter(option => option.Label &&
+                option.Label.toLowerCase().indexOf(value.searchText.toLowerCase()) !==
+                    -1);
+            if (value.tags) {
+                _options = options.filter(option => option.Label &&
+                    option.Label.toLowerCase() === value.searchText.toLowerCase());
+            }
+            if (_options.length) {
+                return _options;
+            }
+            else {
+                return [
+                    {
+                        Value: value.value,
+                        _value: value.value,
+                        Disabled: value.disabled,
+                        _disabled: value.disabled,
+                        Label: value.notFoundContent,
+                        _label: value.notFoundContent
+                    }
+                ];
+            }
+        }
+        else {
+            return options;
+        }
+    }
+}
+OptionPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: OptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+OptionPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: OptionPipe, name: "OptionPipe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: OptionPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: "OptionPipe" }]
+        }] });
+
+/**
+ * complex but work well
+ * TODO: rebuild latter
+ */
+class pgSelectComponent {
+    constructor(_elementRef, _renderer, cDRef) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this.cDRef = cDRef;
+        this._allowClear = false;
+        this._disabled = false;
+        this._isTags = false;
+        this._isMultiple = false;
+        this._keepUnListOptions = false;
+        this._showSearch = false;
+        this._isOpen = false;
+        this._prefixCls = "pg-select";
+        this._classList = [];
+        this._dropDownPrefixCls = `${this._prefixCls}-dropdown`;
+        this._selectionPrefixCls = `${this._prefixCls}-selection`;
+        this._placeholder = "placeholder";
+        this._notFoundContent = "No Content";
+        this._searchText = "";
+        this._triggerWidth = 0;
+        this._selectedOptions = new Set();
+        this._options = [];
+        this._cacheOptions = [];
+        this._filterOptions = [];
+        this._tagsOptions = [];
+        this._isMultiInit = false;
+        this._dropDownPosition = "bottom";
+        this._composing = false;
+        // ngModel Access
+        this.onChange = () => null;
+        this.onTouched = () => null;
+        this.SearchChange = new EventEmitter();
+        this.change = new EventEmitter();
+        this.OpenChange = new EventEmitter();
+        this.ScrollToBottom = new EventEmitter();
+        this.Filter = true;
+        this.MaxMultiple = Infinity;
+        this.FirstDefault = false;
+        /** new -option insert or new tags insert */
+        // @ts-ignore
+        this.addOption = option => {
+            this._options.push(option);
+            if (!this._isTags) {
+                if (option.Value) {
+                    this.updateSelectedOption(this._value);
+                }
+                else {
+                    this.forceUpdateSelectedOption(this._value);
+                }
+            }
+        };
+        /** cancel select multiple option */ // @ts-ignore
+        this.unSelectMultipleOption = (option, $event, emitChange = true) => {
+            this._operatingMultipleOption = option;
+            this._selectedOptions.delete(option);
+            if (emitChange) {
+                this.emitMultipleOptions();
+            }
+            // 对Tag进行特殊处理
+            if (this._isTags &&
+                this._options.indexOf(option) !== -1 &&
+                this._tagsOptions.indexOf(option) !== -1) {
+                this.removeOption(option);
+                this._tagsOptions.splice(this._tagsOptions.indexOf(option), 1);
+            }
+            if ($event) {
+                $event.preventDefault();
+                $event.stopPropagation();
+            }
+        };
+        this._el = this._elementRef.nativeElement;
+    }
+    set AllowClear(value) {
+        this._allowClear = toBoolean(value);
+    }
+    get AllowClear() {
+        return this._allowClear;
+    }
+    set KeepUnListOptions(value) {
+        this._keepUnListOptions = toBoolean(value);
+    }
+    get KeepUnListOptions() {
+        return this._keepUnListOptions;
+    }
+    set Mode(value) {
+        this._mode = value;
+        if (this._mode === "multiple") {
+            this.Multiple = true;
+        }
+        else if (this._mode === "tags") {
+            this.Tags = true;
+        }
+        else if (this._mode === "combobox") {
+            this.ShowSearch = true;
+        }
+    }
+    set Multiple(value) {
+        this._isMultiple = toBoolean(value);
+        if (this._isMultiple) {
+            this.ShowSearch = true;
+        }
+    }
+    get Multiple() {
+        return this._isMultiple;
+    }
+    set PlaceHolder(value) {
+        this._placeholder = value;
+    }
+    get PlaceHolder() {
+        return this._placeholder;
+    }
+    set NotFoundContent(value) {
+        this._notFoundContent = value;
+    }
+    get NotFoundContent() {
+        return this._notFoundContent;
+    }
+    set Size(value) {
+        // @ts-ignore
+        this._size = { large: "lg", small: "sm" }[value];
+        this.setClassMap();
+    }
+    get Size() {
+        return this._size;
+    }
+    set ShowSearch(value) {
+        this._showSearch = toBoolean(value);
+    }
+    get ShowSearch() {
+        return this._showSearch;
+    }
+    set Tags(value) {
+        const isTags = toBoolean(value);
+        this._isTags = isTags;
+        this.Multiple = isTags;
+    }
+    get Tags() {
+        return this._isTags;
+    }
+    set Disabled(value) {
+        this._disabled = toBoolean(value);
+        this.closeDropDown();
+        this.setClassMap();
+    }
+    get Disabled() {
+        return this._disabled;
+    }
+    set Open(value) {
+        const isOpen = toBoolean(value);
+        if (this._isOpen === isOpen) {
+            return;
+        }
+        if (isOpen) {
+            this.scrollToActive();
+            this._setTriggerWidth();
+        }
+        this._isOpen = isOpen;
+        this.OpenChange.emit(this._isOpen);
+        this.setClassMap();
+        if (this._isOpen) {
+            setTimeout(() => {
+                this.checkDropDownScroll();
+            });
+        }
+    }
+    get Open() {
+        return this._isOpen;
+    }
+    /** -option remove or tags remove */
+    removeOption(option) {
+        this._options.splice(this._options.indexOf(option), 1);
+        if (!this._isTags) {
+            this.forceUpdateSelectedOption(this._value);
+        }
+    }
+    /** dropdown position changed */
+    onPositionChange(position) {
+        this._dropDownPosition = position.connectionPair.originY;
+    }
+    compositionStart() {
+        this._composing = true;
+    }
+    compositionEnd() {
+        this._composing = false;
+    }
+    /** clear single selected option */
+    clearSelect($event) {
+        if ($event) {
+            $event.preventDefault();
+            $event.stopPropagation();
+        } // @ts-ignore
+        this._selectedOption = null; // @ts-ignore
+        this.Value = null; // @ts-ignore
+        this.onChange(null);
+    }
+    /** click dropdown option by user */
+    clickOption(option, $event) {
+        if (!option) {
+            return;
+        }
+        this.chooseOption(option, true, $event);
+        this.clearSearchText();
+        if (!this._isMultiple) {
+            this.Open = false;
+        }
+    }
+    /** choose option */
+    chooseOption(option, isUserClick = false, $event) {
+        if ($event) {
+            $event.preventDefault();
+            $event.stopPropagation();
+        }
+        this._activeFilterOption = option;
+        if (option && !option.Disabled) {
+            if (!this.Multiple) {
+                this._selectedOption = option;
+                this._value = option.Value;
+                if (isUserClick) {
+                    this.change.next(this._value);
+                    this.onChange(option.Value);
+                }
+            }
+            else {
+                if (isUserClick) {
+                    this.isInSet(this._selectedOptions, option)
+                        ? this.unSelectMultipleOption(option)
+                        : this.selectMultipleOption(option);
+                }
+            }
+        }
+    }
+    updateWidth(element, text) {
+        if (text) {
+            /** wait for scroll width change */ // @ts-ignore
+            setTimeout(_ => {
+                this._renderer.setStyle(element, "width", `${element.scrollWidth}px`);
+            });
+        }
+        else {
+            this._renderer.removeStyle(element, "width");
+        }
+    }
+    /** determine if option in set */
+    isInSet(set, option) {
+        return Array.from(set).find((data) => data.Value === option.Value);
+    }
+    /** select multiple option */
+    selectMultipleOption(option, $event) {
+        /** if tags do push to tag option */
+        if (this._isTags &&
+            this._options.indexOf(option) === -1 &&
+            this._tagsOptions.indexOf(option) === -1) {
+            this.addOption(option);
+            this._tagsOptions.push(option);
+        }
+        this._operatingMultipleOption = option;
+        if (this._selectedOptions.size < this.MaxMultiple) {
+            this._selectedOptions.add(option);
+        }
+        this.emitMultipleOptions();
+        if ($event) {
+            $event.preventDefault();
+            $event.stopPropagation();
+        }
+    }
+    /** emit multiple options */
+    emitMultipleOptions() {
+        if (this._isMultiInit) {
+            return;
+        }
+        const arrayOptions = Array.from(this._selectedOptions);
+        this._value = arrayOptions.map(item => item.Value);
+        this.onChange(this._value);
+    }
+    /** update selected option when add remove option etc */
+    updateSelectedOption(currentModelValue, triggerByNgModel = false) {
+        if (currentModelValue == null) {
+            return;
+        }
+        if (this.Multiple) {
+            const selectedOptions = this._options.filter(item => {
+                return item != null && currentModelValue.indexOf(item.Value) !== -1;
+            });
+            if ((this.KeepUnListOptions || this.Tags) && !triggerByNgModel) {
+                const _selectedOptions = Array.from(this._selectedOptions);
+                selectedOptions.forEach(option => {
+                    const _exist = _selectedOptions.some(item => item._value === option._value);
+                    if (!_exist) {
+                        this._selectedOptions.add(option);
+                    }
+                });
+            }
+            else {
+                this._selectedOptions = new Set();
+                selectedOptions.forEach(option => {
+                    this._selectedOptions.add(option);
+                });
+            }
+        }
+        else {
+            const selectedOption = this._options.filter(item => {
+                return item != null && item.Value === currentModelValue;
+            });
+            this.chooseOption(selectedOption[0]);
+        }
+    }
+    forceUpdateSelectedOption(value) {
+        /** trigger dirty check */ // @ts-ignore
+        setTimeout(_ => {
+            this.updateSelectedOption(value);
+        });
+    }
+    get Value() {
+        return this._value;
+    }
+    set Value(value) {
+        this._updateValue(value);
+    }
+    clearAllSelectedOption(emitChange = true) {
+        this._selectedOptions.forEach(item => {
+            this.unSelectMultipleOption(item, null, emitChange);
+        });
+    }
+    handleKeyEnterEvent(event) {
+        /** when composing end */
+        if (!this._composing && this._isOpen) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.updateFilterOption(false);
+            this.clickOption(this._activeFilterOption);
+        }
+    }
+    handleKeyBackspaceEvent(event) {
+        if (!this._searchText && !this._composing && this._isMultiple) {
+            event.preventDefault();
+            const lastOption = Array.from(this._selectedOptions).pop();
+            this.unSelectMultipleOption(lastOption);
+        }
+    }
+    handleKeyDownEvent($event) {
+        if (this._isOpen) {
+            $event.preventDefault();
+            $event.stopPropagation();
+            this._activeFilterOption = this.nextOption(this._activeFilterOption, this._filterOptions.filter(w => !w.Disabled));
+            this.scrollToActive();
+        }
+    }
+    handleKeyUpEvent($event) {
+        if (this._isOpen) {
+            $event.preventDefault();
+            $event.stopPropagation();
+            this._activeFilterOption = this.preOption(this._activeFilterOption, this._filterOptions.filter(w => !w.Disabled));
+            this.scrollToActive();
+        }
+    }
+    preOption(option, options) {
+        return options[options.indexOf(option) - 1] || options[options.length - 1];
+    }
+    nextOption(option, options) {
+        return options[options.indexOf(option) + 1] || options[0];
+    }
+    clearSearchText() {
+        this._searchText = "";
+        this.updateFilterOption();
+    }
+    updateFilterOption(updateActiveFilter = true) {
+        if (this.Filter) {
+            this._filterOptions = new OptionPipe().transform(this._options, {
+                searchText: this._searchText,
+                tags: this._isTags,
+                notFoundContent: this._isTags
+                    ? this._searchText
+                    : this._notFoundContent,
+                disabled: !this._isTags,
+                value: this._isTags ? this._searchText : "disabled"
+            });
+        }
+        else {
+            this._filterOptions = this._options;
+        }
+        /** TODO: cause pre & next key selection not work */
+        if (updateActiveFilter && !this._selectedOption) {
+            this._activeFilterOption = this._filterOptions[0];
+        }
+    }
+    onSearchChange(searchValue) {
+        this.SearchChange.emit(searchValue);
+    }
+    onClick(e) {
+        e.preventDefault();
+        if (!this._disabled) {
+            this.Open = !this.Open;
+            if (this.ShowSearch) {
+                /** wait for search display */ // @ts-ignore
+                setTimeout(_ => {
+                    this.searchInputElementRef.nativeElement.focus();
+                });
+            }
+        }
+    }
+    onKeyDown(e) {
+        const keyCode = e.keyCode;
+        if (keyCode === TAB && this.Open) {
+            this.Open = false;
+            return;
+        }
+        if ((keyCode !== DOWN_ARROW && keyCode !== ENTER) || this.Open) {
+            return;
+        }
+        e.preventDefault();
+        if (!this._disabled) {
+            this.Open = true;
+            if (this.ShowSearch) {
+                /** wait for search display */ // @ts-ignore
+                setTimeout(_ => {
+                    this.searchInputElementRef.nativeElement.focus();
+                });
+            }
+        }
+    }
+    closeDropDown() {
+        if (!this.Open) {
+            return;
+        }
+        this.onTouched();
+        if (this.Multiple) {
+            this._renderer.removeStyle(this.searchInputElementRef.nativeElement, "width");
+        }
+        this.clearSearchText();
+        this.Open = false;
+    }
+    setClassMap() {
+        this._classList.forEach(_className => {
+            this._renderer.removeClass(this._el, _className);
+        }); // @ts-ignore
+        this._classList = [
+            this._prefixCls,
+            this._mode === "combobox" && `${this._prefixCls}-combobox`,
+            !this._disabled && `${this._prefixCls}-enabled`,
+            this._disabled && `${this._prefixCls}-disabled`,
+            this._isOpen && `${this._prefixCls}-open`,
+            this._showSearch && `${this._prefixCls}-show-search`,
+            this._size && `${this._prefixCls}-${this._size}`
+        ].filter(item => {
+            return !!item;
+        });
+        this._classList.forEach(_className => {
+            this._renderer.addClass(this._el, _className);
+        });
+        this._selectionClassMap = {
+            [this._selectionPrefixCls]: true,
+            [`${this._selectionPrefixCls}--single`]: !this.Multiple,
+            [`${this._selectionPrefixCls}--multiple`]: this.Multiple
+        };
+    }
+    setDropDownClassMap() {
+        this._dropDownClassMap = {
+            [this._dropDownPrefixCls]: true,
+            ["component-select"]: this._mode === "combobox",
+            [`${this._dropDownPrefixCls}--single`]: !this.Multiple,
+            [`${this._dropDownPrefixCls}--multiple`]: this.Multiple,
+            [`${this._dropDownPrefixCls}-placement-bottomLeft`]: this._dropDownPosition === "bottom",
+            [`${this._dropDownPrefixCls}-placement-topLeft`]: this._dropDownPosition === "top"
+        };
+    }
+    scrollToActive() {
+        /** wait for dropdown display */ // @ts-ignore
+        setTimeout(_ => {
+            if (this._activeFilterOption && this._activeFilterOption.Value) {
+                const index = this._filterOptions.findIndex(option => option.Value === this._activeFilterOption.Value);
+                try {
+                    const scrollPane = this.dropdownUl.nativeElement.children[index];
+                    // TODO: scrollIntoViewIfNeeded is not a standard API, why doing so?
+                    /* tslint:disable-next-line:no-any */
+                    scrollPane.scrollIntoViewIfNeeded(false);
+                }
+                catch (e) { }
+            }
+        });
+    }
+    flushComponentState() {
+        this.updateFilterOption();
+        if (!this.Multiple) {
+            this.updateSelectedOption(this._value);
+        }
+        else {
+            if (this._value) {
+                this.updateSelectedOption(this._value);
+            }
+        }
+    }
+    _setTriggerWidth() {
+        this._triggerWidth = this._getTriggerRect().width;
+        /** should remove after after https://github.com/angular/material2/pull/8765 merged **/
+        if (this._cdkOverlay && this._cdkOverlay.overlayRef) {
+            this._cdkOverlay.overlayRef.updateSize({
+                width: this._triggerWidth
+            });
+        }
+    }
+    _getTriggerRect() {
+        return this.trigger.nativeElement.getBoundingClientRect();
+    }
+    writeValue(value) {
+        this._updateValue(value, false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.Disabled = isDisabled;
+    }
+    dropDownScroll(ul) {
+        if (ul && ul.scrollHeight - ul.scrollTop === ul.clientHeight) {
+            this.ScrollToBottom.emit(true);
+        }
+    }
+    checkDropDownScroll() {
+        if (this.dropdownUl &&
+            this.dropdownUl.nativeElement.scrollHeight ===
+                this.dropdownUl.nativeElement.clientHeight) {
+            this.ScrollToBottom.emit(true);
+        }
+    }
+    ngAfterContentInit() {
+        if (this._value != null) {
+            this.flushComponentState();
+        }
+    }
+    ngOnInit() {
+        this.updateFilterOption();
+        this.setClassMap();
+        this.setDropDownClassMap();
+    }
+    ngAfterContentChecked() {
+        if (this._cacheOptions !== this._options) {
+            /** update filter option after every content check cycle */
+            this.updateFilterOption();
+            this._cacheOptions = this._options;
+        }
+        else {
+            this.updateFilterOption(false);
+        }
+        if (this.FirstDefault) {
+            if (!this._value && this._options) {
+                if (this._options[0] !== undefined && this._options[0].Value) {
+                    this.chooseOption(this._options[0], false);
+                    setTimeout(() => {
+                        this.onChange(this._options[0].Value);
+                    });
+                }
+            }
+        }
+    }
+    _updateValue(value, emitChange = true) {
+        if (this._value === value) {
+            return;
+        }
+        if (value == null && this.Multiple) {
+            this._value = [];
+        }
+        else {
+            this._value = value;
+        }
+        if (!this.Multiple) {
+            if (value == null) { // @ts-ignore
+                this._selectedOption = null;
+            }
+            else {
+                this.updateSelectedOption(value);
+            }
+        }
+        else {
+            if (value) {
+                if (value.length === 0) {
+                    this.clearAllSelectedOption(emitChange);
+                }
+                else {
+                    this.updateSelectedOption(value, true);
+                }
+            }
+            else if (value == null) {
+                this.clearAllSelectedOption(emitChange);
+            }
+        }
+    }
+}
+pgSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+pgSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: pgSelectComponent, selector: "pg-select", inputs: { Filter: "Filter", MaxMultiple: "MaxMultiple", FirstDefault: "FirstDefault", AllowClear: "AllowClear", KeepUnListOptions: "KeepUnListOptions", Mode: "Mode", Multiple: "Multiple", PlaceHolder: "PlaceHolder", NotFoundContent: "NotFoundContent", Size: "Size", ShowSearch: "ShowSearch", Tags: "Tags", Disabled: "Disabled", Open: "Open" }, outputs: { SearchChange: "SearchChange", change: "change", OpenChange: "OpenChange", ScrollToBottom: "ScrollToBottom" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => pgSelectComponent),
+            multi: true
+        }
+    ], viewQueries: [{ propertyName: "searchInputElementRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownUl", first: true, predicate: ["dropdownUl"], descendants: true }, { propertyName: "_cdkOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: "<div tabindex=\"0\" #trigger cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" [ngClass]=\"_selectionClassMap\"\r\n  (keydown.Enter)=\"handleKeyEnterEvent($event)\" (keydown.Backspace)=\"handleKeyBackspaceEvent($event)\"\r\n  (keydown.ArrowUp)=\"handleKeyUpEvent($event)\" (keydown.ArrowDown)=\"handleKeyDownEvent($event)\">\r\n  <div class=\"pg-select-selection__rendered\" *ngIf=\"!ShowSearch\">\r\n    <div class=\"pg-select-selection__placeholder\">\r\n      <ng-template [ngIf]=\"!_selectedOption\">\r\n        {{ PlaceHolder }}\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"pg-select-selection-selected-value\">\r\n      {{ _selectedOption?.Label }}\r\n    </div>\r\n  </div>\r\n  <div class=\"pg-select-selection__rendered\" *ngIf=\"ShowSearch\">\r\n    <div [hidden]=\"_searchText||(!Open&&_selectedOption)||_selectedOptions.size\"\r\n      class=\"pg-select-selection__placeholder\">\r\n      <ng-template [ngIf]=\"(!_composing)&&_selectedOption\">\r\n        {{ _selectedOption.Label }}\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"(!_composing)&&(!_selectedOption)\">\r\n        {{ PlaceHolder }}\r\n      </ng-template>\r\n    </div>\r\n    <ul *ngIf=\"Multiple\">\r\n      <li *ngFor=\"let option of _selectedOptions\" [@tagAnimation] [attr.title]=\"option?.Label || option?.Value\"\r\n        class=\"pg-select-selection__choice\" style=\"-webkit-user-select: none;\">\r\n        <span class=\"pg-select-selection__choice__remove\" (click)=\"unSelectMultipleOption(option,$event)\"></span>\r\n        <div class=\"pg-select-selection__choice__content\">{{ option?.Label }}</div>\r\n      </li>\r\n      <li class=\"pg-select-search pg-select-search--inline\">\r\n        <div class=\"pg-select-search__field__wrap\">\r\n          <input class=\"pg-select-search__field\" (compositionstart)=\"compositionStart()\"\r\n            (compositionend)=\"compositionEnd();updateWidth(searchInput,_searchText);\" [(ngModel)]=\"_searchText\"\r\n            (ngModelChange)=\"updateFilterOption();onSearchChange($event);\"\r\n            (keydown)=\"updateWidth(searchInput,_searchText)\" (input)=\"updateWidth(searchInput,_searchText)\"\r\n            (blur)=\"onTouched()\" #searchInput>\r\n          <span class=\"pg-select-search__field__mirror\"></span></div>\r\n      </li>\r\n    </ul>\r\n    <div *ngIf=\"!Multiple\" class=\"pg-select-selection-selected-value\" [hidden]=\"!(_selectedOption?.Label)||Open\">\r\n      {{ _selectedOption?.Label }}\r\n    </div>\r\n    <div *ngIf=\"!Multiple\" [hidden]=\"!Open\" class=\"pg-select-search pg-select-search--inline\">\r\n      <div class=\"pg-select-search__field__wrap\">\r\n        <input class=\"pg-select-search__field\" (blur)=\"onTouched()\" (compositionstart)=\"compositionStart()\"\r\n          (compositionend)=\"compositionEnd()\" [(ngModel)]=\"_searchText\"\r\n          (ngModelChange)=\"updateFilterOption();onSearchChange($event);\" #searchInput>\r\n        <span class=\"pg-select-search__field__mirror\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span (click)=\"onTouched();clearSelect($event)\" class=\"pg-select-selection__clear\" style=\"-webkit-user-select: none;\"\r\n    *ngIf=\"_selectedOption?.Label&&AllowClear&&!Multiple\">\r\n  </span>\r\n  <span class=\"pg-select-arrow\"><b></b></span>\r\n</div>\r\n<ng-template cdkConnectedOverlay cdkConnectedOverlayHasBackdrop [cdkConnectedOverlayOrigin]=\"origin\"\r\n  (backdropClick)=\"closeDropDown()\" (detach)=\"closeDropDown();\" (positionChange)=\"onPositionChange($event)\"\r\n  [cdkConnectedOverlayWidth]=\"_triggerWidth\" [cdkConnectedOverlayOpen]=\"_isOpen\">\r\n  <div [ngClass]=\"_dropDownClassMap\" [@dropDownAnimation]=\"_dropDownPosition\">\r\n    <div style=\"overflow: auto;\">\r\n      <ul class=\"pg-select-dropdown-menu pg-select-dropdown-menu-vertical pg-select-dropdown-menu-root\" #dropdownUl\r\n        (scroll)=\"dropDownScroll(dropdownUl)\">\r\n        <li *ngFor=\"let option of _filterOptions\" [class.pg-select-dropdown-menu-item-disabled]=\"option.Disabled\"\r\n          [class.pg-select-dropdown-menu-item-active]=\"option.Value == _activeFilterOption?.Value\"\r\n          [class.pg-select-dropdown-menu-item-selected]=\"(option.Value==(_selectedOption?.Value))||(isInSet(_selectedOptions,option))\"\r\n          class=\"pg-select-dropdown-menu-item\" (click)=\"clickOption(option,$event)\">\r\n          <ng-template *ngIf=\"option.OptionTemplate\" [ngTemplateOutlet]=\"option.OptionTemplate\">\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"!option.OptionTemplate\">\r\n            {{ option.Label }}\r\n          </ng-template>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</ng-template>", directives: [{ type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [trigger('dropDownAnimation', [
+            state('bottom', style({
+                opacity: 1,
+                transform: 'scaleY(1)',
+                transformOrigin: '0% 0%'
+            })),
+            transition('void => bottom', [
+                style({
+                    opacity: 0,
+                    transform: 'scaleY(0)',
+                    transformOrigin: '0% 0%'
+                }),
+                animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
+            ]),
+            state('top', style({
+                opacity: 1,
+                transform: 'scaleY(1)',
+                transformOrigin: '0% 100%'
+            })),
+            transition('void => top', [
+                style({
+                    opacity: 0,
+                    transform: 'scaleY(0)',
+                    transformOrigin: '0% 100%'
+                }),
+                animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
+            ]),
+            transition('* => void', [
+                animate('250ms 100ms linear', style({ opacity: 0 }))
+            ])
+        ]),
+        trigger('tagAnimation', [
+            state('*', style({ opacity: 1, transform: 'scale(1)' })),
+            transition('void => *', [
+                style({ opacity: 0, transform: 'scale(0)' }),
+                animate('150ms linear')
+            ]),
+            state('void', style({ opacity: 0, transform: 'scale(0)' })),
+            transition('* => void', [
+                style({ opacity: 1, transform: 'scale(1)' }),
+                animate('150ms linear')
+            ])
+        ])], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "pg-select", encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => pgSelectComponent),
+                            multi: true
+                        }
+                    ], animations: [trigger('dropDownAnimation', [
+                            state('bottom', style({
+                                opacity: 1,
+                                transform: 'scaleY(1)',
+                                transformOrigin: '0% 0%'
+                            })),
+                            transition('void => bottom', [
+                                style({
+                                    opacity: 0,
+                                    transform: 'scaleY(0)',
+                                    transformOrigin: '0% 0%'
+                                }),
+                                animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
+                            ]),
+                            state('top', style({
+                                opacity: 1,
+                                transform: 'scaleY(1)',
+                                transformOrigin: '0% 100%'
+                            })),
+                            transition('void => top', [
+                                style({
+                                    opacity: 0,
+                                    transform: 'scaleY(0)',
+                                    transformOrigin: '0% 100%'
+                                }),
+                                animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
+                            ]),
+                            transition('* => void', [
+                                animate('250ms 100ms linear', style({ opacity: 0 }))
+                            ])
+                        ]),
+                        trigger('tagAnimation', [
+                            state('*', style({ opacity: 1, transform: 'scale(1)' })),
+                            transition('void => *', [
+                                style({ opacity: 0, transform: 'scale(0)' }),
+                                animate('150ms linear')
+                            ]),
+                            state('void', style({ opacity: 0, transform: 'scale(0)' })),
+                            transition('* => void', [
+                                style({ opacity: 1, transform: 'scale(1)' }),
+                                animate('150ms linear')
+                            ])
+                        ])], template: "<div tabindex=\"0\" #trigger cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" [ngClass]=\"_selectionClassMap\"\r\n  (keydown.Enter)=\"handleKeyEnterEvent($event)\" (keydown.Backspace)=\"handleKeyBackspaceEvent($event)\"\r\n  (keydown.ArrowUp)=\"handleKeyUpEvent($event)\" (keydown.ArrowDown)=\"handleKeyDownEvent($event)\">\r\n  <div class=\"pg-select-selection__rendered\" *ngIf=\"!ShowSearch\">\r\n    <div class=\"pg-select-selection__placeholder\">\r\n      <ng-template [ngIf]=\"!_selectedOption\">\r\n        {{ PlaceHolder }}\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"pg-select-selection-selected-value\">\r\n      {{ _selectedOption?.Label }}\r\n    </div>\r\n  </div>\r\n  <div class=\"pg-select-selection__rendered\" *ngIf=\"ShowSearch\">\r\n    <div [hidden]=\"_searchText||(!Open&&_selectedOption)||_selectedOptions.size\"\r\n      class=\"pg-select-selection__placeholder\">\r\n      <ng-template [ngIf]=\"(!_composing)&&_selectedOption\">\r\n        {{ _selectedOption.Label }}\r\n      </ng-template>\r\n      <ng-template [ngIf]=\"(!_composing)&&(!_selectedOption)\">\r\n        {{ PlaceHolder }}\r\n      </ng-template>\r\n    </div>\r\n    <ul *ngIf=\"Multiple\">\r\n      <li *ngFor=\"let option of _selectedOptions\" [@tagAnimation] [attr.title]=\"option?.Label || option?.Value\"\r\n        class=\"pg-select-selection__choice\" style=\"-webkit-user-select: none;\">\r\n        <span class=\"pg-select-selection__choice__remove\" (click)=\"unSelectMultipleOption(option,$event)\"></span>\r\n        <div class=\"pg-select-selection__choice__content\">{{ option?.Label }}</div>\r\n      </li>\r\n      <li class=\"pg-select-search pg-select-search--inline\">\r\n        <div class=\"pg-select-search__field__wrap\">\r\n          <input class=\"pg-select-search__field\" (compositionstart)=\"compositionStart()\"\r\n            (compositionend)=\"compositionEnd();updateWidth(searchInput,_searchText);\" [(ngModel)]=\"_searchText\"\r\n            (ngModelChange)=\"updateFilterOption();onSearchChange($event);\"\r\n            (keydown)=\"updateWidth(searchInput,_searchText)\" (input)=\"updateWidth(searchInput,_searchText)\"\r\n            (blur)=\"onTouched()\" #searchInput>\r\n          <span class=\"pg-select-search__field__mirror\"></span></div>\r\n      </li>\r\n    </ul>\r\n    <div *ngIf=\"!Multiple\" class=\"pg-select-selection-selected-value\" [hidden]=\"!(_selectedOption?.Label)||Open\">\r\n      {{ _selectedOption?.Label }}\r\n    </div>\r\n    <div *ngIf=\"!Multiple\" [hidden]=\"!Open\" class=\"pg-select-search pg-select-search--inline\">\r\n      <div class=\"pg-select-search__field__wrap\">\r\n        <input class=\"pg-select-search__field\" (blur)=\"onTouched()\" (compositionstart)=\"compositionStart()\"\r\n          (compositionend)=\"compositionEnd()\" [(ngModel)]=\"_searchText\"\r\n          (ngModelChange)=\"updateFilterOption();onSearchChange($event);\" #searchInput>\r\n        <span class=\"pg-select-search__field__mirror\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span (click)=\"onTouched();clearSelect($event)\" class=\"pg-select-selection__clear\" style=\"-webkit-user-select: none;\"\r\n    *ngIf=\"_selectedOption?.Label&&AllowClear&&!Multiple\">\r\n  </span>\r\n  <span class=\"pg-select-arrow\"><b></b></span>\r\n</div>\r\n<ng-template cdkConnectedOverlay cdkConnectedOverlayHasBackdrop [cdkConnectedOverlayOrigin]=\"origin\"\r\n  (backdropClick)=\"closeDropDown()\" (detach)=\"closeDropDown();\" (positionChange)=\"onPositionChange($event)\"\r\n  [cdkConnectedOverlayWidth]=\"_triggerWidth\" [cdkConnectedOverlayOpen]=\"_isOpen\">\r\n  <div [ngClass]=\"_dropDownClassMap\" [@dropDownAnimation]=\"_dropDownPosition\">\r\n    <div style=\"overflow: auto;\">\r\n      <ul class=\"pg-select-dropdown-menu pg-select-dropdown-menu-vertical pg-select-dropdown-menu-root\" #dropdownUl\r\n        (scroll)=\"dropDownScroll(dropdownUl)\">\r\n        <li *ngFor=\"let option of _filterOptions\" [class.pg-select-dropdown-menu-item-disabled]=\"option.Disabled\"\r\n          [class.pg-select-dropdown-menu-item-active]=\"option.Value == _activeFilterOption?.Value\"\r\n          [class.pg-select-dropdown-menu-item-selected]=\"(option.Value==(_selectedOption?.Value))||(isInSet(_selectedOptions,option))\"\r\n          class=\"pg-select-dropdown-menu-item\" (click)=\"clickOption(option,$event)\">\r\n          <ng-template *ngIf=\"option.OptionTemplate\" [ngTemplateOutlet]=\"option.OptionTemplate\">\r\n          </ng-template>\r\n          <ng-template [ngIf]=\"!option.OptionTemplate\">\r\n            {{ option.Label }}\r\n          </ng-template>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { searchInputElementRef: [{
+                type: ViewChild,
+                args: ["searchInput"]
+            }], trigger: [{
+                type: ViewChild,
+                args: ["trigger"]
+            }], dropdownUl: [{
+                type: ViewChild,
+                args: ["dropdownUl"]
+            }], SearchChange: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], OpenChange: [{
+                type: Output
+            }], ScrollToBottom: [{
+                type: Output
+            }], Filter: [{
+                type: Input
+            }], MaxMultiple: [{
+                type: Input
+            }], FirstDefault: [{
+                type: Input
+            }], _cdkOverlay: [{
+                type: ViewChild,
+                args: [CdkConnectedOverlay]
+            }], AllowClear: [{
+                type: Input
+            }], KeepUnListOptions: [{
+                type: Input
+            }], Mode: [{
+                type: Input
+            }], Multiple: [{
+                type: Input
+            }], PlaceHolder: [{
+                type: Input
+            }], NotFoundContent: [{
+                type: Input
+            }], Size: [{
+                type: Input
+            }], ShowSearch: [{
+                type: Input
+            }], Tags: [{
+                type: Input
+            }], Disabled: [{
+                type: Input
+            }], Open: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ["click", ["$event"]]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ["keydown", ["$event"]]
+            }] } });
+
+class pgOptionComponent {
+    constructor(_Select) {
+        this._Select = _Select;
+        this._disabled = false;
+    }
+    set Value(value) {
+        if (this._value === value) {
+            return;
+        }
+        this._value = value;
+    }
+    get Value() {
+        return this._value;
+    }
+    set Label(value) {
+        if (this._label === value) {
+            return;
+        }
+        this._label = value;
+    }
+    get Label() {
+        return this._label;
+    }
+    set Disabled(value) {
+        this._disabled = toBoolean(value);
+    }
+    get Disabled() {
+        return this._disabled;
+    }
+    ngOnInit() {
+        this._Select.addOption(this);
+    }
+    ngOnDestroy() {
+        this._Select.removeOption(this);
+    }
+}
+pgOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgOptionComponent, deps: [{ token: pgSelectComponent }], target: i0.ɵɵFactoryTarget.Component });
+pgOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: pgOptionComponent, selector: "pg-option", inputs: { Value: "Value", Label: "Label", Disabled: "Disabled" }, queries: [{ propertyName: "OptionTemplate", first: true, predicate: ["OptionTemplate"], descendants: true }], ngImport: i0, template: `
+		<ng-content></ng-content>
+	`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "pg-option", encapsulation: ViewEncapsulation.None, template: `
+		<ng-content></ng-content>
+	`, styles: [] }]
+        }], ctorParameters: function () { return [{ type: pgSelectComponent }]; }, propDecorators: { OptionTemplate: [{
+                type: ContentChild,
+                args: ["OptionTemplate"]
+            }], Value: [{
+                type: Input
+            }], Label: [{
+                type: Input
+            }], Disabled: [{
+                type: Input
+            }] } });
+
+class PgSelectModule {
+}
+PgSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PgSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PgSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PgSelectModule, declarations: [OptionPipe, pgOptionComponent, pgSelectComponent], imports: [CommonModule, FormsModule, OverlayModule], exports: [OptionPipe, pgOptionComponent, pgSelectComponent] });
+PgSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PgSelectModule, imports: [[CommonModule, FormsModule, OverlayModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PgSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, OverlayModule],
+                    declarations: [OptionPipe, pgOptionComponent, pgSelectComponent],
+                    exports: [OptionPipe, pgOptionComponent, pgSelectComponent]
+                }]
+        }] });
+
+class ProgressConfig {
+    constructor() {
+        this.color = "primary";
+        this.thickness = 1;
+    }
+}
+ProgressConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ProgressConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressConfig });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressConfig, decorators: [{
+            type: Injectable
+        }] });
+
+class ProgressModule {
+    static forRoot() {
+        return { ngModule: ProgressModule, providers: [ProgressConfig] };
+    }
+}
+ProgressModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ProgressModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressModule, declarations: [ProgressComponent], imports: [CommonModule], exports: [ProgressComponent] });
+ProgressModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [ProgressComponent],
+                    exports: [ProgressComponent]
+                }]
+        }] });
+
+class pgCardModule {
+    static forRoot() {
+        return {
+            ngModule: pgCardModule
+        };
+    }
+}
+pgCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+pgCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgCardModule, declarations: [pgCard], imports: [CommonModule, ProgressModule], exports: [pgCard] });
+pgCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgCardModule, imports: [[CommonModule, ProgressModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [pgCard],
+                    exports: [pgCard],
+                    imports: [CommonModule, ProgressModule]
+                }]
+        }] });
+
+const mefDevCardComponents = [CardComponent, CardLongComponent, CardSimpleComponent];
+class MefDevCardModule {
+}
+MefDevCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MefDevCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevCardModule, declarations: [CardComponent, CardLongComponent, CardSimpleComponent], imports: [CommonModule,
+        MefDevCollapseModule,
+        // PerfectScrollbarModule,
+        PgSelectModule,
+        pgCardModule], exports: [CardComponent, CardLongComponent, CardSimpleComponent] });
+MefDevCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevCardModule, imports: [[
+            CommonModule,
+            MefDevCollapseModule,
+            // PerfectScrollbarModule,
+            PgSelectModule,
+            pgCardModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: mefDevCardComponents,
+                    exports: mefDevCardComponents,
+                    imports: [
+                        CommonModule,
+                        MefDevCollapseModule,
+                        // PerfectScrollbarModule,
+                        PgSelectModule,
+                        pgCardModule,
+                    ]
+                }]
+        }] });
+
+class FillComponent {
+    constructor() {
+        this.isClouse = new EventEmitter();
+    }
+    set show(val) {
+        if (!this.fadInModal) {
+            return;
+        }
+        if (val) {
+            this.showModal();
+        }
+        else {
+            this.hideModal();
+        }
+    }
+    ;
+    ngOnInit() {
+    }
+    modalIsCloused() {
+        this.isClouse.emit(true);
+    }
+    showModal() {
+        var _a;
+        (_a = this.fadInModal) === null || _a === void 0 ? void 0 : _a.show();
+    }
+    hideModal() {
+        var _a;
+        (_a = this.fadInModal) === null || _a === void 0 ? void 0 : _a.hide();
+    }
+}
+FillComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FillComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FillComponent, selector: "mefdev-fill-modal", inputs: { show: "show" }, outputs: { isClouse: "isClouse" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "fadInModal", first: true, predicate: ["fadInModal"], descendants: true }], ngImport: i0, template: " <div bsModal #fadInModal=\"bs-modal\" class=\"modal fade fill-in\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" (onHide)=\"modalIsCloused()\">\r\n    <button type=\"button\" class=\"close\" (click)=\"fadInModal.hide()\" aria-hidden=\"true\">\r\n      <i class=\"pg pg-close\"></i>\r\n    </button>\r\n    <div class=\"modal-dialog \">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n        </div>  \r\n        <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n        </div>  \r\n        <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>", styles: [""], directives: [{ type: i1$3.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FillComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-fill-modal', template: " <div bsModal #fadInModal=\"bs-modal\" class=\"modal fade fill-in\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" (onHide)=\"modalIsCloused()\">\r\n    <button type=\"button\" class=\"close\" (click)=\"fadInModal.hide()\" aria-hidden=\"true\">\r\n      <i class=\"pg pg-close\"></i>\r\n    </button>\r\n    <div class=\"modal-dialog \">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n        </div>  \r\n        <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n        </div>  \r\n        <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { modal_header: [{
+                type: ContentChild,
+                args: ["modal_header"]
+            }], modal_footer: [{
+                type: ContentChild,
+                args: ["modal_footer"]
+            }], fadInModal: [{
+                type: ViewChild,
+                args: ['fadInModal', { static: false }]
+            }], show: [{
+                type: Input
+            }], isClouse: [{
+                type: Output
+            }] } });
+
+class SlideUpComponent {
+    constructor() {
+        this.size = "md" /* md */;
+        this.isClouse = new EventEmitter();
+    }
+    set show(val) {
+        if (!this.mdSlideUp) {
+            return;
+        }
+        if (val) {
+            this.showModal();
+        }
+        else {
+            this.hideModal();
+        }
+    }
+    ;
+    ngOnInit() {
+    }
+    modalIsCloused() {
+        this.isClouse.emit(true);
+    }
+    showModal() {
+        this.mdSlideUp.show();
+    }
+    hideModal() {
+        this.mdSlideUp.hide();
+    }
+}
+SlideUpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SlideUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SlideUpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SlideUpComponent, selector: "mefdev-slide-up-modal", inputs: { size: "size", show: "show" }, outputs: { isClouse: "isClouse" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "mdSlideUp", first: true, predicate: ["mdSlideUp"], descendants: true }], ngImport: i0, template: "<div bsModal #mdSlideUp=\"bs-modal\" class=\"modal fade slide-up disable-scroll\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"false\" (onHide)=\"modalIsCloused()\">\r\n    <div class=\"modal-dialog modal-{{size}}\">\r\n      <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header clearfix text-left\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], directives: [{ type: i1$3.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SlideUpComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-slide-up-modal', template: "<div bsModal #mdSlideUp=\"bs-modal\" class=\"modal fade slide-up disable-scroll\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"false\" (onHide)=\"modalIsCloused()\">\r\n    <div class=\"modal-dialog modal-{{size}}\">\r\n      <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header clearfix text-left\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { modal_header: [{
+                type: ContentChild,
+                args: ["modal_header"]
+            }], modal_footer: [{
+                type: ContentChild,
+                args: ["modal_footer"]
+            }], mdSlideUp: [{
+                type: ViewChild,
+                args: ['mdSlideUp', { static: false }]
+            }], size: [{
+                type: Input
+            }], show: [{
+                type: Input
+            }], isClouse: [{
+                type: Output
+            }] } });
+
+class SlideRightComponent {
+    constructor() {
+        this.size = "md" /* md */;
+        this.isClouse = new EventEmitter();
+    }
+    set show(val) {
+        if (!this.slideRight) {
+            return;
+        }
+        if (val) {
+            this.showModal();
+        }
+        else {
+            this.hideModal();
+        }
+    }
+    ;
+    ngOnInit() {
+    }
+    modalIsCloused() {
+        this.isClouse.emit(true);
+    }
+    showModal() {
+        this.slideRight.show();
+    }
+    hideModal() {
+        this.slideRight.hide();
+    }
+}
+SlideRightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SlideRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SlideRightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SlideRightComponent, selector: "mefdev-slide-right-modal", inputs: { size: "size", show: "show" }, outputs: { isClouse: "isClouse" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "slideRight", first: true, predicate: ["slideRight"], descendants: true }], ngImport: i0, template: "<div bsModal #slideRight=\"bs-modal\" class=\"modal fade slide-right\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" (onHide)=\"modalIsCloused()\">\r\n    <div class=\"modal-dialog modal-{{size}}\">\r\n      <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header clearfix text-left\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], directives: [{ type: i1$3.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SlideRightComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-slide-right-modal', template: "<div bsModal #slideRight=\"bs-modal\" class=\"modal fade slide-right\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" (onHide)=\"modalIsCloused()\">\r\n    <div class=\"modal-dialog modal-{{size}}\">\r\n      <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header clearfix text-left\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { modal_header: [{
+                type: ContentChild,
+                args: ["modal_header"]
+            }], modal_footer: [{
+                type: ContentChild,
+                args: ["modal_footer"]
+            }], slideRight: [{
+                type: ViewChild,
+                args: ['slideRight', { static: false }]
+            }], size: [{
+                type: Input
+            }], show: [{
+                type: Input
+            }], isClouse: [{
+                type: Output
+            }] } });
+
+class RightFilterComponent {
+    constructor(filteredFieldService) {
+        this.filteredFieldService = filteredFieldService;
+        this.isOpen = false;
+    }
+    ngOnInit() {
+        this.filteredFieldService.getOpenFilter().subscribe(() => {
+            this.isOpen = true;
+        });
+    }
+    openModal() {
+        this.isOpen = !this.isOpen;
+    }
+    modalIsCloused() {
+        this.isOpen = false;
+    }
+}
+RightFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: RightFilterComponent, deps: [{ token: FilteredFieldService }], target: i0.ɵɵFactoryTarget.Component });
+RightFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: RightFilterComponent, selector: "mefdev-right-filter", ngImport: i0, template: "<div class=\"filter-btn\">\r\n    <button class=\"btn btn-secondary text-danger\" (click)=\"openModal()\"><i class=\"fa fa-filter\" aria-hidden=\"true\"></i></button>\r\n</div>\r\n\r\n<mefdev-slide-right-modal [show]=\"isOpen\" (isClouse)=\"modalIsCloused()\">\r\n    <ng-content></ng-content>\r\n</mefdev-slide-right-modal>", styles: [".filter-btn{position:fixed;top:60px;z-index:450;right:25px}\n"], components: [{ type: SlideRightComponent, selector: "mefdev-slide-right-modal", inputs: ["size", "show"], outputs: ["isClouse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: RightFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-right-filter', template: "<div class=\"filter-btn\">\r\n    <button class=\"btn btn-secondary text-danger\" (click)=\"openModal()\"><i class=\"fa fa-filter\" aria-hidden=\"true\"></i></button>\r\n</div>\r\n\r\n<mefdev-slide-right-modal [show]=\"isOpen\" (isClouse)=\"modalIsCloused()\">\r\n    <ng-content></ng-content>\r\n</mefdev-slide-right-modal>", styles: [".filter-btn{position:fixed;top:60px;z-index:450;right:25px}\n"] }]
+        }], ctorParameters: function () { return [{ type: FilteredFieldService }]; } });
+
+let mefDevModalModuleComponents = [
+    FillComponent,
+    SlideUpComponent,
+    SlideRightComponent,
+    RightFilterComponent
+];
+class MefDevModalModule {
+}
+MefDevModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MefDevModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevModalModule, declarations: [FillComponent,
+        SlideUpComponent,
+        SlideRightComponent,
+        RightFilterComponent], imports: [ModalModule,
+        CommonModule,
+        PgSelectModule], exports: [FillComponent,
+        SlideUpComponent,
+        SlideRightComponent,
+        RightFilterComponent] });
+MefDevModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevModalModule, imports: [[
+            ModalModule,
+            CommonModule,
+            PgSelectModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ModalModule,
+                        CommonModule,
+                        PgSelectModule
+                    ],
+                    exports: mefDevModalModuleComponents,
+                    declarations: mefDevModalModuleComponents
+                }]
+        }] });
+
+class ProfileComponent {
+    constructor() {
+        this.img = '';
+        this.circleImg = false;
+    }
+    ngOnInit() {
+    }
+    get sizeStyle() {
+        // return { 'width.px': this.width, 'height.px': this.height };
+        if (!this.circleImg) {
+            return {};
+        }
+        return {
+            'border-top-left-radius': `50%`,
+            'border-top-right-radius': `50%`,
+            'border-bottom-right-radius': `50%`,
+            'border-bottom-left-radius': `50%`,
+        };
+    }
+}
+ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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-bold;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:montserrat-regular;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat-light;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat-semibold;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:montserrat-medium;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-Bold;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato-Regular;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato-Bold;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato-Regular;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato-Bold;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,:host::ng-deep .profile-description,body-6{font-family:Lato-Regular;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(top,#F3F3F3 53px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(top,#F3F3F3 53px,transparent 0%,transparent 100%);padding-top:25px}@media (max-width: 720px){:host::ng-deep .profile-page-tabs{background-image:linear-gradient(top,#F3F3F3 63px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(top,#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"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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-bold;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:montserrat-bold;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:montserrat-regular;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:montserrat-light;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:montserrat-semibold;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,h6{font-family:montserrat-medium;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-Bold;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato-Regular;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato-Bold;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato-Regular;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Lato-Bold;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,:host::ng-deep .profile-description,body-6{font-family:Lato-Regular;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(top,#F3F3F3 53px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(top,#F3F3F3 53px,transparent 0%,transparent 100%);padding-top:25px}@media (max-width: 720px){:host::ng-deep .profile-page-tabs{background-image:linear-gradient(top,#F3F3F3 63px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(top,#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"]
+            }], second_colum: [{
+                type: ContentChild,
+                args: ["second_colum"]
+            }], footer: [{
+                type: ContentChild,
+                args: ["footer"]
+            }], name: [{
+                type: Input
+            }], img: [{
+                type: Input
+            }], shortDescription: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], circleImg: [{
+                type: Input
+            }] } });
+
+class CentralPageComponent {
+    constructor() {
+        this.width = '100%';
+    }
+    ngOnDestroy() {
+        document.getElementById('dataMainContent').style.height = '';
+    }
+    ngOnInit() {
+    }
+    ngAfterViewChecked() {
+        document.getElementById('dataMainContent').style.height = '100%';
+    }
+}
+CentralPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CentralPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CentralPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CentralPageComponent, selector: "mefdev-central-page", inputs: { width: "width" }, ngImport: i0, template: "<div class=\"row align-items-center\" style=\"height: 100%;\" [ngStyle]=\"{'width': width}\">\r\n    <div class=\"col\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n  ", styles: [""], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CentralPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-central-page', template: "<div class=\"row align-items-center\" style=\"height: 100%;\" [ngStyle]=\"{'width': width}\">\r\n    <div class=\"col\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n  ", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }] } });
+
+class CentralPageRowComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+CentralPageRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CentralPageRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CentralPageRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CentralPageRowComponent, selector: "mefdev-central-page-row", ngImport: i0, template: "<div class=\"row justify-content-center\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CentralPageRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-central-page-row', template: "<div class=\"row justify-content-center\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+class TablePageComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+TablePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TablePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TablePageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TablePageComponent, selector: "mefdev-table-page", queries: [{ propertyName: "filter_colum", first: true, predicate: ["filter_colum"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\r\n    <div class=\"col-12 filter-colum\">\r\n        <ng-template [ngTemplateOutlet]=\"filter_colum\"></ng-template> \r\n    </div>\r\n</div>\r\n\r\n<div class=\"table-responsive\" >\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [""], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TablePageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-table-page', template: "<div class=\"row\">\r\n    <div class=\"col-12 filter-colum\">\r\n        <ng-template [ngTemplateOutlet]=\"filter_colum\"></ng-template> \r\n    </div>\r\n</div>\r\n\r\n<div class=\"table-responsive\" >\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { filter_colum: [{
+                type: ContentChild,
+                args: ["filter_colum"]
+            }] } });
+
+class ManagePageComponent {
+    constructor() {
+        this.startTabInd = 0;
+    }
+    ngOnInit() {
+    }
+}
+ManagePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ManagePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ManagePageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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(top,#F3F3F3 28px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(top,#F3F3F3 28px,transparent 0%,transparent 100%)}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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(top,#F3F3F3 28px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(top,#F3F3F3 28px,transparent 0%,transparent 100%)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { card_title: [{
+                type: ContentChild,
+                args: ["card_title"]
+            }], tabs_block: [{
+                type: ContentChild,
+                args: ["tabs_block"]
+            }], startTabInd: [{
+                type: Input
+            }] } });
+
+class pgTabBodyComponent {
+}
+pgTabBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+pgTabBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: pgTabBodyComponent, selector: "pg-tab-body", inputs: { content: "content" }, ngImport: i0, template: `
+    <ng-template [ngTemplateOutlet]="content"></ng-template>
+  `, isInline: true, directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pg-tab-body',
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+    <ng-template [ngTemplateOutlet]="content"></ng-template>
+  `
+                }]
+        }], propDecorators: { content: [{
+                type: Input
+            }] } });
+
+class pgTabLabelDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this._disabled = false;
+    }
+    set disabled(value) {
+        this._disabled = toBoolean(value);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    getOffsetLeft() {
+        return this.elementRef.nativeElement.offsetLeft;
+    }
+    getOffsetWidth() {
+        return this.elementRef.nativeElement.offsetWidth;
+    }
+    getOffsetTop() {
+        return this.elementRef.nativeElement.offsetTop;
+    }
+    getOffsetHeight() {
+        return this.elementRef.nativeElement.offsetHeight;
+    }
+}
+pgTabLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabLabelDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+pgTabLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: pgTabLabelDirective, selector: "[pg-tab-label]", inputs: { disabled: "disabled" }, host: { properties: { "class.nav-item": "true", "class.nav-item-disabled": "this.disabled" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pg-tab-label]',
+                    host: {
+                        '[class.nav-item]': 'true'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.nav-item-disabled']
+            }] } });
+
+const availablePrefixs = ['moz', 'ms', 'webkit'];
+function requestAnimationFramePolyfill() {
+    let lastTime = 0;
+    return function (callback) {
+        const currTime = new Date().getTime();
+        const timeToCall = Math.max(0, 16 - (currTime - lastTime));
+        const id = window.setTimeout(() => { callback(currTime + timeToCall); }, timeToCall);
+        lastTime = currTime + timeToCall;
+        return id;
+    };
+}
+function getRequestAnimationFrame() {
+    if (typeof window === 'undefined') {
+        //@ts-ignore
+        return () => null;
+    }
+    if (window.requestAnimationFrame) {
+        return window.requestAnimationFrame.bind(window);
+    }
+    const prefix = availablePrefixs.filter(key => `${key}RequestAnimationFrame` in window)[0];
+    return prefix
+        ? window[`${prefix}RequestAnimationFrame`]
+        : requestAnimationFramePolyfill();
+}
+const reqAnimFrame = getRequestAnimationFrame();
+
+class pgTabsInkBarDirective {
+    constructor(_renderer, _elementRef, _ngZone) {
+        this._renderer = _renderer;
+        this._elementRef = _elementRef;
+        this._ngZone = _ngZone;
+        this._animated = false;
+        this.PositionMode = 'horizontal';
+    }
+    set Animated(value) {
+        this._animated = toBoolean(value);
+    }
+    get Animated() {
+        return this._animated;
+    }
+    alignToElement(element) {
+        this.show();
+        this._ngZone.runOutsideAngular(() => {
+            reqAnimFrame(() => {
+                /** when horizontal remove height style and add transfrom left **/
+                if (this.PositionMode === 'horizontal') {
+                    this._renderer.removeStyle(this._elementRef.nativeElement, 'height');
+                    this._renderer.setStyle(this._elementRef.nativeElement, 'transform', `translate3d(${this._getLeftPosition(element)}, 0px, 0px)`);
+                    this._renderer.setStyle(this._elementRef.nativeElement, 'width', this._getElementWidth(element));
+                }
+                else {
+                    /** when vertical remove width style and add transfrom top **/
+                    this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
+                    this._renderer.setStyle(this._elementRef.nativeElement, 'transform', `translate3d(0px, ${this._getTopPosition(element)}, 0px)`);
+                    this._renderer.setStyle(this._elementRef.nativeElement, 'height', this._getElementHeight(element));
+                }
+            });
+        });
+    }
+    show() {
+        this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'visible');
+    }
+    setDisplay(value) {
+        this._renderer.setStyle(this._elementRef.nativeElement, 'display', value);
+    }
+    hide() {
+        this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden');
+    }
+    _getLeftPosition(element) {
+        return element ? element.offsetLeft + 'px' : '0';
+    }
+    _getElementWidth(element) {
+        return element ? element.offsetWidth + 'px' : '0';
+    }
+    _getTopPosition(element) {
+        return element ? element.offsetTop + 'px' : '0';
+    }
+    _getElementHeight(element) {
+        return element ? element.offsetHeight + 'px' : '0';
+    }
+}
+pgTabsInkBarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabsInkBarDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+pgTabsInkBarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: pgTabsInkBarDirective, selector: "[pg-tabs-ink-bar]", inputs: { Animated: "Animated", PositionMode: "PositionMode" }, host: { properties: { "class.nav-item": "true", "class.nav-item-animated": "this.Animated" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabsInkBarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pg-tabs-ink-bar]',
+                    host: {
+                        '[class.nav-item]': 'true'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { Animated: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.nav-item-animated']
+            }], PositionMode: [{
+                type: Input
+            }] } });
+
+const EXAGGERATED_OVERSCROLL = 64;
+class pgTabsNavComponent {
+    constructor(_elementRef, _ngZone, _renderer, _dir) {
+        this._elementRef = _elementRef;
+        this._ngZone = _ngZone;
+        this._renderer = _renderer;
+        this._dir = _dir;
+        this._animated = true;
+        this._hideBar = false;
+        this._showPagination = true;
+        this._showPaginationControls = false;
+        this._disableScrollAfter = true;
+        this._disableScrollBefore = true;
+        this._scrollDistance = 0;
+        this._selectedIndexChanged = false;
+        this._realignInkBar = null;
+        this._selectedIndex = 0;
+        this._tabPositionMode = 'horizontal';
+        this._tabPosition = 'top';
+        this.Size = 'default';
+        this._type = 'line';
+    }
+    set Animated(value) {
+        this._animated = toBoolean(value);
+    }
+    get Animated() {
+        return this._animated;
+    }
+    set Position(value) {
+        this._tabPosition = value;
+    }
+    get Position() {
+        return this._tabPosition;
+    }
+    set HideBar(value) {
+        this._hideBar = toBoolean(value);
+    }
+    get HideBar() {
+        return this._hideBar;
+    }
+    set Type(value) {
+        this._type = value;
+    }
+    get Type() {
+        return this._type;
+    }
+    set ShowPagination(value) {
+        this._showPagination = toBoolean(value);
+    }
+    get ShowPagination() {
+        return this._showPagination;
+    }
+    set PositionMode(value) {
+        this._tabPositionMode = value;
+        this._alignInkBarToSelectedTab();
+        if (this.ShowPagination) {
+            this._updatePagination();
+        }
+    }
+    get PositionMode() {
+        return this._tabPositionMode;
+    }
+    set selectedIndex(value) {
+        this._selectedIndexChanged = this._selectedIndex !== value;
+        this._selectedIndex = value;
+    }
+    get selectedIndex() {
+        return this._selectedIndex;
+    }
+    _onContentChanges() {
+        if (this.ShowPagination) {
+            this._updatePagination();
+        }
+        this._alignInkBarToSelectedTab();
+    }
+    _scrollHeader(scrollDir) {
+        // Move the scroll distance one-third the length of the tab list's viewport.
+        this.scrollDistance += ((scrollDir === 'before' ? -1 : 1) * this.viewWidthHeightPix) / 3;
+    }
+    ngAfterContentChecked() {
+        if (this._tabLabelCount !== this._labelWrappers.length) {
+            if (this.ShowPagination) {
+                this._updatePagination();
+            }
+            this._tabLabelCount = this._labelWrappers.length;
+        }
+        if (this._selectedIndexChanged) {
+            this._scrollToLabel(this._selectedIndex);
+            if (this.ShowPagination) {
+                this._checkScrollingControls();
+            }
+            this._alignInkBarToSelectedTab();
+            this._selectedIndexChanged = false;
+        }
+        if (this._scrollDistanceChanged) {
+            if (this.ShowPagination) {
+                this._updateTabScrollPosition();
+            }
+            this._scrollDistanceChanged = false;
+        }
+    }
+    ngAfterContentInit() {
+        this._realignInkBar = this._ngZone.runOutsideAngular(() => {
+            const dirChange = this._dir ? this._dir.change : of(null);
+            const resize = typeof window !== 'undefined' ? fromEvent(window, 'resize').pipe(auditTime(10)) : of(null);
+            //@ts-ignore
+            return merge(dirChange, resize)
+                .pipe(startWith(null))
+                .subscribe(() => {
+                if (this.ShowPagination) {
+                    this._updatePagination();
+                }
+                this._alignInkBarToSelectedTab();
+            });
+        });
+    }
+    _updateTabScrollPosition() {
+        const scrollDistance = this.scrollDistance;
+        if (this.PositionMode === 'horizontal') {
+            const translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance;
+            this._renderer.setStyle(this._tabList.nativeElement, 'transform', `translate3d(${translateX}px, 0, 0)`);
+        }
+        else {
+            this._renderer.setStyle(this._tabList.nativeElement, 'transform', `translate3d(0,${-scrollDistance}px, 0)`);
+        }
+    }
+    _updatePagination() {
+        this._checkPaginationEnabled();
+        this._checkScrollingControls();
+        this._updateTabScrollPosition();
+    }
+    _checkPaginationEnabled() {
+        this._showPaginationControls = this.tabListScrollWidthHeightPix > this.elementRefOffSetWidthHeight;
+        if (!this._showPaginationControls) {
+            this.scrollDistance = 0;
+        }
+    }
+    _scrollToLabel(labelIndex) {
+        const selectedLabel = this._labelWrappers ? this._labelWrappers.toArray()[labelIndex] : null;
+        if (!selectedLabel) {
+            return;
+        }
+        // The view length is the visible width of the tab labels.
+        let labelBeforePos;
+        let labelAfterPos;
+        if (this.PositionMode === 'horizontal') {
+            if (this._getLayoutDirection() === 'ltr') {
+                labelBeforePos = selectedLabel.getOffsetLeft();
+                labelAfterPos = labelBeforePos + selectedLabel.getOffsetWidth();
+            }
+            else {
+                labelAfterPos = this._tabList.nativeElement.offsetWidth - selectedLabel.getOffsetLeft();
+                labelBeforePos = labelAfterPos - selectedLabel.getOffsetWidth();
+            }
+        }
+        else {
+            labelBeforePos = selectedLabel.getOffsetTop();
+            labelAfterPos = labelBeforePos + selectedLabel.getOffsetHeight();
+        }
+        const beforeVisiblePos = this.scrollDistance;
+        const afterVisiblePos = this.scrollDistance + this.viewWidthHeightPix;
+        if (labelBeforePos < beforeVisiblePos) {
+            // Scroll header to move label to the before direction
+            this.scrollDistance -= beforeVisiblePos - labelBeforePos + EXAGGERATED_OVERSCROLL;
+        }
+        else if (labelAfterPos > afterVisiblePos) {
+            // Scroll header to move label to the after direction
+            this.scrollDistance += labelAfterPos - afterVisiblePos + EXAGGERATED_OVERSCROLL;
+        }
+    }
+    _checkScrollingControls() {
+        // Check if the pagination arrows should be activated.
+        this._disableScrollBefore = this.scrollDistance === 0;
+        this._disableScrollAfter = this.scrollDistance === this._getMaxScrollDistance();
+    }
+    /**
+     * Determines what is the maximum length in pixels that can be set for the scroll distance. This
+     * is equal to the difference in width between the tab list container and tab header container.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    _getMaxScrollDistance() {
+        return this.tabListScrollWidthHeightPix - this.viewWidthHeightPix || 0;
+    }
+    /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
+    set scrollDistance(v) {
+        this._scrollDistance = Math.max(0, Math.min(this._getMaxScrollDistance(), v));
+        // Mark that the scroll distance has changed so that after the view is checked, the CSS
+        // transformation can move the header.
+        this._scrollDistanceChanged = true;
+        this._checkScrollingControls();
+    }
+    get scrollDistance() {
+        return this._scrollDistance;
+    }
+    get viewWidthHeightPix() {
+        let PAGINATION_PIX = 0;
+        if (this._showPaginationControls) {
+            PAGINATION_PIX = 64;
+        }
+        if (this.PositionMode === 'horizontal') {
+            return this._tabListContainer.nativeElement.offsetWidth - PAGINATION_PIX;
+        }
+        else {
+            return this._tabListContainer.nativeElement.offsetHeight - PAGINATION_PIX;
+        }
+    }
+    get tabListScrollWidthHeightPix() {
+        if (this.PositionMode === 'horizontal') {
+            return this._tabList.nativeElement.scrollWidth;
+        }
+        else {
+            return this._tabList.nativeElement.scrollHeight;
+        }
+    }
+    get elementRefOffSetWidthHeight() {
+        if (this.PositionMode === 'horizontal') {
+            return this._elementRef.nativeElement.offsetWidth;
+        }
+        else {
+            return this._elementRef.nativeElement.offsetHeight;
+        }
+    }
+    _getLayoutDirection() {
+        return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
+    }
+    _alignInkBarToSelectedTab() {
+        if (this.Type !== 'fillup') {
+            const selectedLabelWrapper = this._labelWrappers && this._labelWrappers.length
+                ? this._labelWrappers.toArray()[this.selectedIndex].elementRef.nativeElement
+                : null;
+            if (this._inkBar) {
+                this._inkBar.alignToElement(selectedLabelWrapper);
+            }
+        }
+    }
+}
+pgTabsNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabsNavComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$4.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+pgTabsNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: pgTabsNavComponent, selector: "pg-tabs-nav", inputs: { Size: "Size", Animated: "Animated", Position: "Position", HideBar: "HideBar", Type: "Type", ShowPagination: "ShowPagination", PositionMode: "PositionMode", selectedIndex: "selectedIndex" }, queries: [{ propertyName: "_tabBarExtraContent", first: true, predicate: ["tabBarExtraContent"], descendants: true, static: true }, { propertyName: "_labelWrappers", predicate: pgTabLabelDirective }], viewQueries: [{ propertyName: "_inkBar", first: true, predicate: pgTabsInkBarDirective, descendants: true, static: true }, { propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }], ngImport: i0, template: `
+    <div class="nav-tabs-wrapper" [class.scrolling]="_showPaginationControls" #tabListContainer>
+      <div class="nav-wrap">
+        <ul
+          class="nav nav-tabs nav-tabs-{{ _type }} nav-tabs-{{ _tabPosition }}"
+          [class.tabs-nav-animated]="Animated"
+          #tabList
+          (cdkObserveContent)="_onContentChanges()"
+        >
+          <div
+            class="active-bar"
+            pg-tabs-ink-bar
+            [hidden]="HideBar"
+            [Animated]="Animated"
+            [PositionMode]="PositionMode"
+            style="display: block;"
+          ></div>
+          <ng-content></ng-content>
+        </ul>
+      </div>
+    </div>
+  `, isInline: true, directives: [{ type: i2$1.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { type: pgTabsInkBarDirective, selector: "[pg-tabs-ink-bar]", inputs: ["Animated", "PositionMode"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabsNavComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pg-tabs-nav',
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+    <div class="nav-tabs-wrapper" [class.scrolling]="_showPaginationControls" #tabListContainer>
+      <div class="nav-wrap">
+        <ul
+          class="nav nav-tabs nav-tabs-{{ _type }} nav-tabs-{{ _tabPosition }}"
+          [class.tabs-nav-animated]="Animated"
+          #tabList
+          (cdkObserveContent)="_onContentChanges()"
+        >
+          <div
+            class="active-bar"
+            pg-tabs-ink-bar
+            [hidden]="HideBar"
+            [Animated]="Animated"
+            [PositionMode]="PositionMode"
+            style="display: block;"
+          ></div>
+          <ng-content></ng-content>
+        </ul>
+      </div>
+    </div>
+  `,
+                    host: {}
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$4.Directionality, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { Size: [{
+                type: Input
+            }], Animated: [{
+                type: Input
+            }], Position: [{
+                type: Input
+            }], HideBar: [{
+                type: Input
+            }], Type: [{
+                type: Input
+            }], _tabBarExtraContent: [{
+                type: ContentChild,
+                args: ['tabBarExtraContent', { static: true }]
+            }], _labelWrappers: [{
+                type: ContentChildren,
+                args: [pgTabLabelDirective]
+            }], _inkBar: [{
+                type: ViewChild,
+                args: [pgTabsInkBarDirective, { static: true }]
+            }], _tabListContainer: [{
+                type: ViewChild,
+                args: ['tabListContainer', { static: true }]
+            }], _tabList: [{
+                type: ViewChild,
+                args: ['tabList', { static: true }]
+            }], ShowPagination: [{
+                type: Input
+            }], PositionMode: [{
+                type: Input
+            }], selectedIndex: [{
+                type: Input
+            }] } });
+
+/** code from https://github.com/angular/material2 */
+class TabChangeEvent {
+}
+class pgTabSetComponent {
+    constructor(_renderer) {
+        this._renderer = _renderer;
+        this._prefixCls = 'nav-tabs';
+        this._tabPosition = 'top';
+        this._tabPositionMode = 'horizontal';
+        this._indexToSelect = 0;
+        this._selectedIndex = null;
+        this._isViewInit = false;
+        this._tabs = [];
+        this._tabAnimation = '';
+        this._extra_tab_class = '';
+        this._extra_tabcontent_class = '';
+        this.Animated = true;
+        this.ShowPagination = true;
+        this.Hide = false;
+        this.SelectChange = new EventEmitter(true);
+        this.Size = 'default';
+        this._type = 'line';
+        this.tabs = [];
+    }
+    set SelectedIndex(value) {
+        this._indexToSelect = value;
+    }
+    get SelectedIndex() {
+        return this._selectedIndex;
+    }
+    get SelectedIndexChange() {
+        return this.SelectChange.pipe(map(event => event.index));
+    }
+    set TabPosition(value) {
+        this._tabPosition = value;
+        if (this._tabPosition === 'top' || this._tabPosition === 'bottom') {
+            this._tabPositionMode = 'horizontal';
+        }
+        else {
+            this._tabPositionMode = 'vertical';
+        }
+    }
+    get TabPosition() {
+        return this._tabPosition;
+    }
+    set extraTabClass(value) {
+        this._extra_tab_class = value;
+    }
+    set extraTabContentClass(value) {
+        this._extra_tabcontent_class = value;
+    }
+    set Type(value) {
+        if (this._type === value) {
+            return;
+        }
+        this._type = value;
+        this._setClassMap();
+    }
+    set tabAnimation(value) {
+        this._tabAnimation = value;
+    }
+    get Type() {
+        return this._type;
+    }
+    _setPosition(value) { }
+    _setClassMap() { }
+    clickLabel(index) {
+        if (this._tabs[index].Disabled) {
+        }
+        else {
+            this.SelectedIndex = index;
+            this._tabs[index].pgClick.emit();
+        }
+    }
+    ngOnInit() {
+        this._setClassMap();
+    }
+    ngAfterContentChecked() {
+        // Clamp the next selected index to the bounds of 0 and the tabs length. Note the `|| 0`, which
+        // ensures that values like NaN can't get through and which would otherwise throw the
+        // component into an infinite loop (since Math.max(NaN, 0) === NaN).
+        const indexToSelect = (this._indexToSelect = Math.min(this._tabs.length - 1, Math.max(this._indexToSelect || 0, 0)));
+        // If there is a change in selected index, emit a change event. Should not trigger if
+        // the selected index has not yet been initialized.
+        if (this._selectedIndex !== indexToSelect && this._selectedIndex != null) {
+            this.SelectChange.emit(this._createChangeEvent(indexToSelect));
+        }
+        // Setup the position for each tab and optionally setup an origin on the next selected tab.
+        this._tabs.forEach((tab, index) => {
+            tab.position = index - indexToSelect;
+            // If there is already a selected tab, then set up an origin for the next selected tab
+            // if it doesn't have one already.
+            if (this._selectedIndex != null && tab.position === 0 && !tab.origin) {
+                tab.origin = indexToSelect - this._selectedIndex;
+            }
+        });
+        this._selectedIndex = indexToSelect;
+    }
+    ngAfterViewInit() {
+        this._isViewInit = true;
+    }
+    _createChangeEvent(index) {
+        const event = new TabChangeEvent();
+        event.index = index;
+        if (this._tabs && this._tabs.length) {
+            event.tab = this._tabs[index];
+            this._tabs.forEach((item, i) => {
+                if (i !== index) {
+                    item.pgDeselect.emit();
+                }
+            });
+            event.tab.pgSelect.emit();
+        }
+        return event;
+    }
+    get inkBarAnimated() {
+        return this.Animated === true || this.Animated.inkBar === true;
+    }
+    get tabPaneAnimated() {
+        return this.Animated === true || this.Animated.tabPane === true;
+    }
+}
+pgTabSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabSetComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+pgTabSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: pgTabSetComponent, selector: "pg-tabset", inputs: { TabBarExtraTemplate: "TabBarExtraTemplate", Animated: "Animated", ShowPagination: "ShowPagination", Hide: "Hide", SelectedIndex: "SelectedIndex", Size: "Size", TabPosition: "TabPosition", extraTabClass: "extraTabClass", extraTabContentClass: "extraTabContentClass", Type: "Type", tabAnimation: "tabAnimation" }, outputs: { SelectedIndexChange: "SelectedIndexChange", SelectChange: "SelectChange" }, queries: [{ propertyName: "TabBarExtraContent", first: true, predicate: ["TabBarExtraContent"], descendants: true, static: true }], viewQueries: [{ propertyName: "_tabNav", first: true, predicate: ["tabNav"], descendants: true, static: true }, { propertyName: "_tabContent", first: true, predicate: ["tabContent"], descendants: true, static: true }, { propertyName: "_hostContent", first: true, predicate: ["hostContent"], descendants: true, static: true }], ngImport: i0, template: `
+    <div class="tab-wrapper tab-{{ _tabPositionMode }} {{ _tabPosition }} {{ _type }} {{ _extra_tab_class }}" #hostContent>
+      <pg-tabs-nav
+        #tabNav
+        [Size]="Size"
+        [Type]="Type"
+        [ShowPagination]="ShowPagination"
+        [PositionMode]="_tabPositionMode"
+        [Position]="_tabPosition"
+        [Animated]="inkBarAnimated"
+        [HideBar]="Hide"
+        [selectedIndex]="SelectedIndex"
+      >
+        <ng-template #tabBarExtraContent>
+          <ng-template [ngTemplateOutlet]="TabBarExtraTemplate || TabBarExtraContent"></ng-template>
+        </ng-template>
+        <li pg-tab-label [disabled]="tab.disabled" (click)="clickLabel(i)" *ngFor="let tab of _tabs; let i = index">
+          <a href="javascript:void(0);" class="" [class.active]="SelectedIndex == i && !Hide">
+            <ng-template [ngTemplateOutlet]="tab._tabHeading"></ng-template>
+          </a>
+        </li>
+      </pg-tabs-nav>
+      <div class="tab-content-wrapper {{ _extra_tabcontent_class }}">
+        <div
+          class="tab-content {{ _tabAnimation }}"
+          #tabContent
+          [class.animated]="tabPaneAnimated"
+          [class.not-animated]="!tabPaneAnimated"
+          [style.margin-left.%]="tabPaneAnimated && -(SelectedIndex ?? -1) * 100"
+        >
+          <pg-tab-body
+            class="tab-pane"
+            [class.active]="SelectedIndex == i && !Hide"
+            [class.inactive]="SelectedIndex != i || Hide"
+            [content]="tab.content"
+            *ngFor="let tab of _tabs; let i = index"
+          >
+          </pg-tab-body>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, components: [{ type: pgTabsNavComponent, selector: "pg-tabs-nav", inputs: ["Size", "Animated", "Position", "HideBar", "Type", "ShowPagination", "PositionMode", "selectedIndex"] }, { type: pgTabBodyComponent, selector: "pg-tab-body", inputs: ["content"] }], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: pgTabLabelDirective, selector: "[pg-tab-label]", inputs: ["disabled"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabSetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pg-tabset',
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+    <div class="tab-wrapper tab-{{ _tabPositionMode }} {{ _tabPosition }} {{ _type }} {{ _extra_tab_class }}" #hostContent>
+      <pg-tabs-nav
+        #tabNav
+        [Size]="Size"
+        [Type]="Type"
+        [ShowPagination]="ShowPagination"
+        [PositionMode]="_tabPositionMode"
+        [Position]="_tabPosition"
+        [Animated]="inkBarAnimated"
+        [HideBar]="Hide"
+        [selectedIndex]="SelectedIndex"
+      >
+        <ng-template #tabBarExtraContent>
+          <ng-template [ngTemplateOutlet]="TabBarExtraTemplate || TabBarExtraContent"></ng-template>
+        </ng-template>
+        <li pg-tab-label [disabled]="tab.disabled" (click)="clickLabel(i)" *ngFor="let tab of _tabs; let i = index">
+          <a href="javascript:void(0);" class="" [class.active]="SelectedIndex == i && !Hide">
+            <ng-template [ngTemplateOutlet]="tab._tabHeading"></ng-template>
+          </a>
+        </li>
+      </pg-tabs-nav>
+      <div class="tab-content-wrapper {{ _extra_tabcontent_class }}">
+        <div
+          class="tab-content {{ _tabAnimation }}"
+          #tabContent
+          [class.animated]="tabPaneAnimated"
+          [class.not-animated]="!tabPaneAnimated"
+          [style.margin-left.%]="tabPaneAnimated && -(SelectedIndex ?? -1) * 100"
+        >
+          <pg-tab-body
+            class="tab-pane"
+            [class.active]="SelectedIndex == i && !Hide"
+            [class.inactive]="SelectedIndex != i || Hide"
+            [content]="tab.content"
+            *ngFor="let tab of _tabs; let i = index"
+          >
+          </pg-tab-body>
+        </div>
+      </div>
+    </div>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { TabBarExtraTemplate: [{
+                type: Input
+            }], TabBarExtraContent: [{
+                type: ContentChild,
+                args: ['TabBarExtraContent', { static: true }]
+            }], _tabNav: [{
+                type: ViewChild,
+                args: ['tabNav', { static: true }]
+            }], _tabContent: [{
+                type: ViewChild,
+                args: ['tabContent', { static: true }]
+            }], _hostContent: [{
+                type: ViewChild,
+                args: ['hostContent', { static: true }]
+            }], Animated: [{
+                type: Input
+            }], ShowPagination: [{
+                type: Input
+            }], Hide: [{
+                type: Input
+            }], SelectedIndex: [{
+                type: Input
+            }], SelectedIndexChange: [{
+                type: Output
+            }], SelectChange: [{
+                type: Output
+            }], Size: [{
+                type: Input
+            }], TabPosition: [{
+                type: Input
+            }], extraTabClass: [{
+                type: Input
+            }], extraTabContentClass: [{
+                type: Input
+            }], Type: [{
+                type: Input
+            }], tabAnimation: [{
+                type: Input
+            }] } });
+
+class pgTabComponent {
+    constructor(pgTabSetComponent) {
+        this.pgTabSetComponent = pgTabSetComponent;
+        this.disabled = false;
+        this.position = null;
+        this.origin = null;
+        this.pgSelect = new EventEmitter();
+        this.pgClick = new EventEmitter();
+        this.pgDeselect = new EventEmitter();
+    }
+    set Disabled(value) {
+        this.disabled = toBoolean(value);
+    }
+    get Disabled() {
+        return this.disabled;
+    }
+    get content() {
+        return this._content;
+    }
+    ngOnInit() {
+        this.pgTabSetComponent._tabs.push(this);
+    }
+    ngOnDestroy() {
+        this.pgTabSetComponent._tabs.splice(this.pgTabSetComponent._tabs.indexOf(this), 1);
+    }
+}
+pgTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabComponent, deps: [{ token: pgTabSetComponent }], target: i0.ɵɵFactoryTarget.Component });
+pgTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: pgTabComponent, selector: "pg-tab", inputs: { Disabled: "Disabled" }, outputs: { pgSelect: "pgSelect", pgClick: "pgClick", pgDeselect: "pgDeselect" }, host: { properties: { "class.ant-tabs-tabpane": "true" } }, queries: [{ propertyName: "_tabHeading", first: true, predicate: ["TabHeading"], descendants: true, static: true }], viewQueries: [{ propertyName: "_content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
+    <ng-template>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pg-tab',
+                    template: `
+    <ng-template>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+                    styles: [],
+                    host: {
+                        '[class.ant-tabs-tabpane]': 'true'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: pgTabSetComponent }]; }, propDecorators: { Disabled: [{
+                type: Input
+            }], pgSelect: [{
+                type: Output
+            }], pgClick: [{
+                type: Output
+            }], pgDeselect: [{
+                type: Output
+            }], _tabHeading: [{
+                type: ContentChild,
+                args: ['TabHeading', { static: true }]
+            }], _content: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+
+class pgTabsModule {
+}
+pgTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+pgTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabsModule, declarations: [pgTabComponent, pgTabSetComponent, pgTabsNavComponent, pgTabLabelDirective, pgTabsInkBarDirective, pgTabBodyComponent], imports: [CommonModule, ObserversModule], exports: [pgTabComponent, pgTabSetComponent, pgTabsNavComponent, pgTabLabelDirective, pgTabsInkBarDirective, pgTabBodyComponent] });
+pgTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabsModule, imports: [[CommonModule, ObserversModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [pgTabComponent, pgTabSetComponent, pgTabsNavComponent, pgTabLabelDirective, pgTabsInkBarDirective, pgTabBodyComponent],
+                    exports: [pgTabComponent, pgTabSetComponent, pgTabsNavComponent, pgTabLabelDirective, pgTabsInkBarDirective, pgTabBodyComponent],
+                    imports: [CommonModule, ObserversModule]
+                }]
+        }] });
+
+let mefDevPageLayoutsModuleComponents = [
+    ProfileComponent,
+    CentralPageComponent,
+    CentralPageRowComponent,
+    TablePageComponent,
+    ManagePageComponent
+];
+class MefDevPageLayoutsModule {
+}
+MefDevPageLayoutsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevPageLayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MefDevPageLayoutsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevPageLayoutsModule, declarations: [ProfileComponent,
+        CentralPageComponent,
+        CentralPageRowComponent,
+        TablePageComponent,
+        ManagePageComponent], imports: [CommonModule,
+        pgTabsModule], exports: [ProfileComponent,
+        CentralPageComponent,
+        CentralPageRowComponent,
+        TablePageComponent,
+        ManagePageComponent] });
+MefDevPageLayoutsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevPageLayoutsModule, imports: [[
+            CommonModule,
+            pgTabsModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MefDevPageLayoutsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: mefDevPageLayoutsModuleComponents,
+                    exports: mefDevPageLayoutsModuleComponents,
+                    imports: [
+                        CommonModule,
+                        pgTabsModule,
+                    ],
+                }]
+        }] });
+
+class SpecFlowTestComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    setError(error) {
+        this.ResponseTimestamp = Date.now();
+        this.ResponseError = 1;
+        this.ReportError = error;
+    }
+    setSuccess() {
+        this.ResponseTimestamp = Date.now();
+        this.ResponseError = 0;
+        this.ReportError = undefined;
+    }
+}
+SpecFlowTestComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SpecFlowTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpecFlowTestComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SpecFlowTestComponent, selector: "app-spec-flow-test", ngImport: i0, template: "<!-- Block for test -->\r\n<div style=\"display: none;\">\r\n  <input id=\"ResponseTimestamp\" type=\"hidden\" value=\"{{ResponseTimestamp}}\" />\r\n  <input id=\"ResponseError\" type=\"hidden\" value=\"{{ResponseError}}\" />\r\n  <input id=\"ReportError\" type=\"hidden\" value=\"{{ReportError}}\" />\r\n</div>", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SpecFlowTestComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-spec-flow-test', template: "<!-- Block for test -->\r\n<div style=\"display: none;\">\r\n  <input id=\"ResponseTimestamp\" type=\"hidden\" value=\"{{ResponseTimestamp}}\" />\r\n  <input id=\"ResponseError\" type=\"hidden\" value=\"{{ResponseError}}\" />\r\n  <input id=\"ReportError\" type=\"hidden\" value=\"{{ReportError}}\" />\r\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+class SpecFlowTestModule {
+    static forRoot() {
+        return {
+            ngModule: SpecFlowTestModule
+        };
+    }
+}
+SpecFlowTestModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SpecFlowTestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpecFlowTestModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SpecFlowTestModule, declarations: [SpecFlowTestComponent], imports: [CommonModule], exports: [SpecFlowTestComponent] });
+SpecFlowTestModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SpecFlowTestModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SpecFlowTestModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SpecFlowTestComponent],
+                    exports: [SpecFlowTestComponent],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class pgSwitchComponent {
+    constructor() {
+        this._disabled = false;
+        this._prefixCls = "toggle-switch";
+        this._color = "primary";
+        this._innerPrefixCls = `${this._prefixCls}-inner `;
+        this._checked = false;
+        // ngModel Access
+        this.onChange = () => null;
+        this.onTouched = () => null;
+    }
+    set Size(value) {
+        this._size = value;
+        this.setClassMap();
+    }
+    set Color(value) {
+        this._color = value;
+        this.setClassMap();
+    }
+    get Size() {
+        return this._size;
+    }
+    set Disabled(value) {
+        this._disabled = toBoolean(value);
+        this.setClassMap();
+    }
+    get Disabled() {
+        return this._disabled;
+    }
+    onClick(e) {
+        e.preventDefault();
+        if (!this._disabled) {
+            this.updateValue(!this._checked);
+            this.onChange(this._checked);
+        }
+    }
+    updateValue(value) {
+        if (this._checked === value) {
+            return;
+        }
+        this._checked = value;
+        this.setClassMap();
+    }
+    setClassMap() {
+        this._classMap = {
+            [this._prefixCls]: true,
+            [`${this._prefixCls}-checked`]: this._checked,
+            [`${this._prefixCls}-disabled`]: this._disabled,
+            [`${this._prefixCls}-small`]: this._size === "small",
+            [this._color]: this._color
+        };
+    }
+    writeValue(value) {
+        this.updateValue(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.Disabled = isDisabled;
+    }
+    ngOnInit() {
+        this.setClassMap();
+    }
+}
+pgSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+pgSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: pgSwitchComponent, selector: "pg-switch", inputs: { Size: "Size", Color: "Color", Disabled: "Disabled" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick($event)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => pgSwitchComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: `
+		<span [ngClass]="_classMap" tabindex="0">
+			<span [ngClass]="_innerPrefixCls">
+				<ng-template [ngIf]="_checked">
+					<ng-content select="[checked]"></ng-content>
+				</ng-template>
+				<ng-template [ngIf]="!_checked">
+					<ng-content select="[unchecked]"></ng-content>
+				</ng-template>
+			</span>
+		</span>
+	`, isInline: true, directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgSwitchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "pg-switch",
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+		<span [ngClass]="_classMap" tabindex="0">
+			<span [ngClass]="_innerPrefixCls">
+				<ng-template [ngIf]="_checked">
+					<ng-content select="[checked]"></ng-content>
+				</ng-template>
+				<ng-template [ngIf]="!_checked">
+					<ng-content select="[unchecked]"></ng-content>
+				</ng-template>
+			</span>
+		</span>
+	`,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => pgSwitchComponent),
+                            multi: true
+                        }
+                    ]
+                }]
+        }], propDecorators: { onChange: [{
+                type: Output
+            }], Size: [{
+                type: Input
+            }], Color: [{
+                type: Input
+            }], Disabled: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ["click", ["$event"]]
+            }] } });
+
+class pgSwitchModule {
+}
+pgSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+pgSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgSwitchModule, declarations: [pgSwitchComponent], imports: [CommonModule], exports: [pgSwitchComponent] });
+pgSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgSwitchModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: pgSwitchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [pgSwitchComponent],
+                    declarations: [pgSwitchComponent],
+                    imports: [CommonModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CardComponent, CardLongComponent, CardSimpleComponent, CartTypeColors, CentralPageComponent, CentralPageRowComponent, CollapseComponent, CollapseSetComponent, FillComponent, FilteredFieldContainerComponent, FilteredFieldItemComponent, FilteredFieldService, FiltredItemModel, HelpBlockComponent, LoaderComponent, LoaderService, ManagePageComponent, MefDevCardModule, MefDevCollapseModule, MefDevFilteredFieldModule, MefDevHelpBlockModule, MefDevLoaderModule, MefDevModalModule, MefDevPageLayoutsModule, OptionPipe, PgSelectModule, ProfileComponent, ProgressComponent, ProgressConfig, ProgressModule, RequestEvent, RightFilterComponent, SlideRightComponent, SlideUpComponent, SpecFlowTestComponent, SpecFlowTestModule, TablePageComponent, mefDevCardComponents, mefDevCollapseModuleComponents, pgCard, pgCardModule, pgOptionComponent, pgSelectComponent, pgSwitchComponent, pgSwitchModule, pgTabBodyComponent, pgTabComponent, pgTabLabelDirective, pgTabSetComponent, pgTabsInkBarDirective, pgTabsModule, pgTabsNavComponent };
+//# sourceMappingURL=natec-mef-dev-ui-kit.mjs.map