@natec/mef-dev-ui-kit 15.0.0 → 16.0.0

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

@@ -1,2973 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Input, EventEmitter, Host, ContentChild, HostBinding, Output, NgModule, Injectable, 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 i1$1 from '@angular/router';
-import * as i3 from '@angular/cdk/overlay';
-import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
-import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { TAB, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes';
-import * as i1$2 from 'ngx-bootstrap/modal';
-import { ModalModule } from 'ngx-bootstrap/modal';
-import { auditTime, startWith, map } from 'rxjs/operators';
-import * as i1$3 from '@angular/cdk/bidi';
-
-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: "15.2.9", ngImport: i0, type: CollapseSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CollapseSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: CollapseSetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-collapse-set', encapsulation: ViewEncapsulation.None, template: "<div class=\"card-group\" [class.horizontal]=\"Horizontal\">\r\n    <ng-content></ng-content>\r\n</div>" }]
-        }], propDecorators: { expandAny: [{
-                type: Input
-            }], Accordion: [{
-                type: Input
-            }], Horizontal: [{
-                type: Input
-            }] } });
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/collapse/collapse</example-url>
-  */
-class CollapseComponent {
-    constructor(_collapseSet, _elementRef) {
-        this._collapseSet = _collapseSet;
-        this._elementRef = _elementRef;
-        this._disabled = false;
-        this._active = false;
-        this.stateChange = new EventEmitter();
-        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;
-        this.stateChange.next(this.Active);
-        /** trigger host collapseSet click event */
-        this._collapseSet.pgClick(this);
-    }
-}
-CollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CollapseComponent, deps: [{ token: CollapseSetComponent, host: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CollapseComponent, selector: "mefdev-collapse", inputs: { Disabled: "Disabled", Active: "Active" }, outputs: { stateChange: "stateChange" }, host: { properties: { "class.card": "true", "class.card-default": "true", "class.m-b-0": "true", "class.disabled": "this.Disabled" } }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-2 card-title\" [attr.aria-expanded]=\"_active\" (click)=\"clickHeader($event)\" role=\"tab\"\r\nhref=\"javascript:;\" [ngClass]=\"{'collapsed':!_active}\">\r\n  <div class=\"col\">\r\n    <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n  </div>\r\n  <div class=\"col\">\r\n    <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n    <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n    <div *ngIf=\"_active\" \r\n     class=\"card-body\">\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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
-        trigger('collapseState', [
-            state('inactive', style({
-                opacity: '0',
-                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: "15.2.9", 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\">\r\n    <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n  </div>\r\n  <div class=\"col\">\r\n    <i class=\"fa fa-angle-down float-end \" aria-hidden=\"true\" *ngIf=\"!_active\"></i>\r\n    <i class=\"fa fa-angle-up float-end \" aria-hidden=\"true\" *ngIf=\"_active\"></i>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"collapse\" [ngClass]=\"{'show':true,'active':_active,'inactive':!_active}\" [@collapseState]=\"_active?'active':'inactive'\">\r\n    <div *ngIf=\"_active\" \r\n     class=\"card-body\">\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
-            }], stateChange: [{
-                type: Output
-            }] } });
-
-const mefDevCollapseModuleComponents = [CollapseSetComponent, CollapseComponent];
-class MefDevCollapseModule {
-    static forRoot() {
-        return {
-            ngModule: MefDevCollapseModule
-        };
-    }
-}
-MefDevCollapseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MefDevCollapseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MefDevCollapseModule, declarations: [CollapseSetComponent, CollapseComponent], imports: [CommonModule], exports: [CollapseSetComponent, CollapseComponent] });
-MefDevCollapseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevCollapseModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevCollapseModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: mefDevCollapseModuleComponents,
-                    exports: mefDevCollapseModuleComponents,
-                    imports: [CommonModule]
-                }]
-        }] });
-
-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: "15.2.9", ngImport: i0, type: FilteredFieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FilteredFieldService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilteredFieldService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: FilteredFieldItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilteredFieldItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FilteredFieldItemComponent, selector: "mefdev-filtered-field-item", inputs: { item: "item" }, outputs: { discard: "discard", openFilter: "openFilter" }, ngImport: i0, template: "<div class=\"item\">\r\n    <i class=\"fa fa-times\" (click)=\"onDiscard()\" style=\"margin-right: 3px; cursor: pointer;\"></i> \r\n    <span (click)=\"onOpenFilter()\">{{item.newValue}}</span>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.item{background-color:#4d4d4d;color:#fff;border-radius:5px;margin-right:7px;padding:3px 7px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilteredFieldItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-filtered-field-item', template: "<div class=\"item\">\r\n    <i class=\"fa fa-times\" (click)=\"onDiscard()\" style=\"margin-right: 3px; cursor: pointer;\"></i> \r\n    <span (click)=\"onOpenFilter()\">{{item.newValue}}</span>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.item{background-color:#4d4d4d;color:#fff;border-radius:5px;margin-right:7px;padding:3px 7px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
-                type: Input
-            }], discard: [{
-                type: Output
-            }], openFilter: [{
-                type: Output
-            }] } });
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/utils/filtered-field</example-url>
-  */
-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 (i != -1 && item.newValue == item.standartValue) {
-                this.items[i] = item;
-                this.items.splice(i, 1);
-                return;
-            }
-            if (i == -1 && (item.newValue == item.standartValue || item.newValue == '')) {
-                return;
-            }
-            if (i != -1) {
-                this.items[i] = item;
-                return;
-            }
-            this.items.push(item);
-        });
-    }
-}
-FilteredFieldContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilteredFieldContainerComponent, deps: [{ token: FilteredFieldService }], target: i0.ɵɵFactoryTarget.Component });
-FilteredFieldContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FilteredFieldContainerComponent, selector: "mefdev-filtered-field-container", ngImport: i0, template: "<div class=\"item-container\">\r\n    <mefdev-filtered-field-item *ngFor=\"let item of items\" [item]=\"item\" (discard)=\"onDiscard(item)\" (openFilter)=\"onOpenFilter(item)\"></mefdev-filtered-field-item>\r\n</div>\r\n", styles: [".item-container{display:flex;cursor:context-menu}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FilteredFieldItemComponent, selector: "mefdev-filtered-field-item", inputs: ["item"], outputs: ["discard", "openFilter"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilteredFieldContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-filtered-field-container', template: "<div class=\"item-container\">\r\n    <mefdev-filtered-field-item *ngFor=\"let item of items\" [item]=\"item\" (discard)=\"onDiscard(item)\" (openFilter)=\"onOpenFilter(item)\"></mefdev-filtered-field-item>\r\n</div>\r\n", styles: [".item-container{display:flex;cursor:context-menu}\n"] }]
-        }], ctorParameters: function () { return [{ type: FilteredFieldService }]; } });
-
-class MefDevFilteredFieldModule {
-}
-MefDevFilteredFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevFilteredFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MefDevFilteredFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MefDevFilteredFieldModule, declarations: [FilteredFieldContainerComponent,
-        FilteredFieldItemComponent], imports: [CommonModule], exports: [FilteredFieldItemComponent,
-        FilteredFieldContainerComponent] });
-MefDevFilteredFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevFilteredFieldModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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;
-    }
-}
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/utils/help-block</example-url>
-  */
-class HelpBlockComponent {
-    constructor() {
-        this.isVisible = true;
-        this.expanded = false;
-        this.title = "Help";
-    }
-    ngOnInit() {
-    }
-}
-HelpBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HelpBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HelpBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HelpBlockComponent, selector: "mefdev-help-block", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"card-simple\" *ngIf=\"isVisible\">\r\n    <div class=\"row m-1 body-1\" (click)=\"expanded = !expanded\" style=\"cursor: pointer;\">\r\n        <div class=\"col-10\" style=\"color: white;\">\r\n            {{ title }}\r\n        </div>\r\n        <div class=\"col-2\">\r\n            <i class=\"fa fa-window-close\" aria-hidden=\"true\" style=\"float: right; margin-left: 20px;\" (click)=\"isVisible = !isVisible;\"></i>\r\n            \r\n            <i class=\"fa fa-angle-down \" *ngIf=\"!expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>\r\n            <i class=\"fa fa-angle-up\" *ngIf=\"expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>      \r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body row\" [@smothExpand]=\"expanded ? 'open' : 'close'\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.card-simple{opacity:.7;background-color:#28b446;padding:2px;border-radius:5px;margin-top:.3em;margin-bottom:.5em}.card-body{opacity:1;margin-left:2px;margin-right:2px;margin-bottom:2px;border-radius:5px;padding-top:15px;padding-bottom:15px;background-color:#f3f3f3;color:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
-        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: "15.2.9", 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\">\r\n    <div class=\"row m-1 body-1\" (click)=\"expanded = !expanded\" style=\"cursor: pointer;\">\r\n        <div class=\"col-10\" style=\"color: white;\">\r\n            {{ title }}\r\n        </div>\r\n        <div class=\"col-2\">\r\n            <i class=\"fa fa-window-close\" aria-hidden=\"true\" style=\"float: right; margin-left: 20px;\" (click)=\"isVisible = !isVisible;\"></i>\r\n            \r\n            <i class=\"fa fa-angle-down \" *ngIf=\"!expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>\r\n            <i class=\"fa fa-angle-up\" *ngIf=\"expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>      \r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body row\" [@smothExpand]=\"expanded ? 'open' : 'close'\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.card-simple{opacity:.7;background-color:#28b446;padding:2px;border-radius:5px;margin-top:.3em;margin-bottom:.5em}.card-body{opacity:1;margin-left:2px;margin-right:2px;margin-bottom:2px;border-radius:5px;padding-top:15px;padding-bottom:15px;background-color:#f3f3f3;color:#000}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
-                type: Input,
-                args: ['title']
-            }] } });
-
-class MefDevHelpBlockModule {
-}
-MefDevHelpBlockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevHelpBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MefDevHelpBlockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MefDevHelpBlockModule, declarations: [HelpBlockComponent], imports: [CommonModule,
-        MefDevCollapseModule], exports: [HelpBlockComponent] });
-MefDevHelpBlockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevHelpBlockModule, imports: [CommonModule,
-        MefDevCollapseModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevHelpBlockModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [HelpBlockComponent],
-                    exports: [HelpBlockComponent],
-                    imports: [
-                        CommonModule,
-                        MefDevCollapseModule
-                    ]
-                }]
-        }] });
-
-class MefDevProgressComponent {
-    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;
-    }
-}
-MefDevProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MefDevProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MefDevProgressComponent, selector: "mefdev-progress", inputs: { type: "type", color: "color", thick: "thick", indeterminate: "indeterminate", value: "value" }, ngImport: i0, template: "<div *ngIf=\"type === 'bar'; else circleBlock\">\r\n  <div *ngIf=\"indeterminate; else determineBarBlock\">\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar-{{ color }}\" [class.progress-bar-indeterminate]=\"indeterminate\"></div>\r\n    </div>\r\n  </div>\r\n  <ng-template #determineBarBlock>\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar progress-bar-{{ color }}\" [ngStyle]=\"{ width: value + '%' }\"></div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<ng-template #circleBlock>\r\n  <div class=\"progress-circle-{{ color }}\" [class.progress-circle-indeterminate]=\"indeterminate\"\r\n    [class.progress-circle]=\"!indeterminate\" [class.progress-circle-thick]=\"thick\">\r\n    <div *ngIf=\"indeterminate; else determineBlock\"></div>\r\n    <ng-template #determineBlock>\r\n      <div class=\"pie\" [ngStyle]=\"_value2 && { clip: 'rect(auto, auto, auto, auto)' }\">\r\n        <div class=\"left-side half-circle\" [ngStyle]=\"_value2 && { transform: 'rotate(' + value + 'deg)' }\"></div>\r\n        <div class=\"right-side half-circle\" [ngStyle]=\"{\r\n            transform:\r\n              _value2 === true ? 'rotate(180deg)' : 'rotate(' + value + 'deg)'\r\n          }\"></div>\r\n      </div>\r\n      <div class=\"shadow\"></div>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevProgressComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mefdev-progress", template: "<div *ngIf=\"type === 'bar'; else circleBlock\">\r\n  <div *ngIf=\"indeterminate; else determineBarBlock\">\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar-{{ color }}\" [class.progress-bar-indeterminate]=\"indeterminate\"></div>\r\n    </div>\r\n  </div>\r\n  <ng-template #determineBarBlock>\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar progress-bar-{{ color }}\" [ngStyle]=\"{ width: value + '%' }\"></div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<ng-template #circleBlock>\r\n  <div class=\"progress-circle-{{ color }}\" [class.progress-circle-indeterminate]=\"indeterminate\"\r\n    [class.progress-circle]=\"!indeterminate\" [class.progress-circle-thick]=\"thick\">\r\n    <div *ngIf=\"indeterminate; else determineBlock\"></div>\r\n    <ng-template #determineBlock>\r\n      <div class=\"pie\" [ngStyle]=\"_value2 && { clip: 'rect(auto, auto, auto, auto)' }\">\r\n        <div class=\"left-side half-circle\" [ngStyle]=\"_value2 && { transform: 'rotate(' + value + 'deg)' }\"></div>\r\n        <div class=\"right-side half-circle\" [ngStyle]=\"{\r\n            transform:\r\n              _value2 === true ? 'rotate(180deg)' : 'rotate(' + value + 'deg)'\r\n          }\"></div>\r\n      </div>\r\n      <div class=\"shadow\"></div>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
-                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: "15.2.9", ngImport: i0, type: pgCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-pgCard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: pgCard, selector: "pgcard", inputs: { Title: "Title", Type: "Type", MinimalHeader: "MinimalHeader", ProgressType: "ProgressType", ProgressColor: "ProgressColor", Refresh: "Refresh", RefreshColor: "RefreshColor", Maximize: "Maximize", Close: "Close", Toggle: "Toggle", HeaderClass: "HeaderClass", BodyClass: "BodyClass", AdditionalClasses: "AdditionalClasses", Controls: "Controls", ShowMessage: "ShowMessage", Message: "Message", Loading: "Loading", TimeOut: "TimeOut", CardBorderStyle: "CardBorderStyle" }, outputs: { onRefresh: "onRefresh" }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }, { propertyName: "CardExtraControls", first: true, predicate: ["CardExtraControls"], descendants: true }], viewQueries: [{ propertyName: "_hostContent", first: true, predicate: ["hostContent"], descendants: true }, { propertyName: "minimalCircleLoading", first: true, predicate: ["minimalCircleLoading"], descendants: true }, { propertyName: "minimalCircleLoadingTrigger", first: true, predicate: ["minimalCircleLoadingTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"card card-{{ _type }} {{ _additionalClasses }}\" *ngIf=\"!_close_card\" [class.card-collapsed]=\"_isCollapsed\"\r\n  [class.card-maximized]=\"_isMaximixed\" #hostContent class=\"col-sm-12 col-md-6 col-lg-4\"\r\n  [ngStyle]=\"{'border': _card_border_style}\">\r\n  <div class=\"card-header {{ _extraHeaderClass }}\">\r\n    <div class=\"card-title\">\r\n      <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n    </div>\r\n    <div class=\"card-controls\" *ngIf=\"_showTools == true\">\r\n      <ng-template [ngTemplateOutlet]=\"CardExtraControls\"></ng-template>\r\n      <ul *ngIf=\"_minimalHeader == false; else minimalBlock\">\r\n        <li *ngIf=\"_toggle == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-collapse\" (click)=\"toggle()\"><i\r\n              class=\"pg pg-arrow_maximize\" [class.pg-arrow_minimize]=\"_isCollapsed\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_refresh == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-refresh\" (click)=\"refresh()\"><i\r\n              class=\"card-icon card-icon-refresh\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_maximize == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-maximize\" (click)=\"maximize()\"><i\r\n              class=\"card-icon card-icon-maximize\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_close == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-close\" (click)=\"close()\"><i\r\n              class=\"card-icon card-icon-close\"></i></a>\r\n        </li>\r\n      </ul>\r\n       <!-- <ng-template #minimalBlock>\r\n        <ul>\r\n          <li>\r\n            <a href=\"javascript:void(0);\" (click)=\"refresh()\" class=\"card-refresh minimal\"\r\n              [class.refreshing]=\"_isLoading\">\r\n              <i #minimalCircleLoadingTrigger class=\"card-icon card-icon-refresh-lg-{{\r\n                  _refreshColor == 'light' ? 'white' : 'master'\r\n                }}\" [class.fade]=\"_isLoading\"></i>\r\n             <i #minimalCircleLoading class=\"card-icon-refresh-lg-white-animated\"\r\n                style=\"position: absolute;top:0;left:0\" [class.active]=\"_isLoading\"\r\n                [class.hide]=\"_isLoading != true\"></i>\r\n            </a>\r\n          </li>\r\n        </ul>\r\n      </ng-template> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"card-body {{ _extraBodyClass }}\" [@collapseState]=\"_isCollapsed == true ? 'inactive' : 'active'\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"_messageVisible == true\" class=\"pgn-wrapper\" data-position=\"top\">\r\n    <div class=\"pgn pgn-bar push-on-sidebar-open\">\r\n      <div class=\"alert alert-danger\">\r\n        <span>{{ _message }}</span><button class=\"close\" (click)=\"alertDismiss()\" type=\"button\">\r\n          <span aria-hidden=\"true\">\u00D7</span><span class=\"sr-only\">{{ 'Close' }}</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"_messageVisible == true\" class=\"card-progress\" [style.backgroundColor]=\"\r\n      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'\r\n    \" style=\" display: block;\"></div>\r\n  <div [@fadeAnimation]=\"_isLoading\" class=\"card-progress\" [style.backgroundColor]=\"\r\n      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'\r\n    \" style=\"display: block;pointer-events: none\">\r\n    <mefdev-progress *ngIf=\"_minimalHeader == false\" type=\"{{ _progressType }}\" color=\"{{ _progressColor }}\"\r\n      indeterminate=\"true\" class=\"\"></mefdev-progress>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MefDevProgressComponent, selector: "mefdev-progress", inputs: ["type", "color", "thick", "indeterminate", "value"] }], animations: [
-        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: "15.2.9", 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    <mefdev-progress *ngIf=\"_minimalHeader == false\" type=\"{{ _progressType }}\" color=\"{{ _progressColor }}\"\r\n      indeterminate=\"true\" class=\"\"></mefdev-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
-            }] } });
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/card</example-url>
-  */
-class CardComponent {
-    constructor(router) {
-        this.router = router;
-    }
-    ngOnInit() {
-    }
-    imgClick() {
-        this.router.navigate(['/', this.imgUrl.toString()]);
-    }
-}
-CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CardComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CardComponent, selector: "mefdev-card", inputs: { card_type: "card_type", img: "img", imgUrl: "imgUrl", description: "description" }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }, { propertyName: "card_footer", first: true, predicate: ["card_footer"], descendants: true }], ngImport: i0, template: "\r\n    <pgcard\r\n    MinimalHeader=\"true\"\r\n    TimeOut=\"2500\"\r\n    [Refresh]=\"false\"\r\n    [Close]=\"false\">\r\n\r\n      <ng-template #CardTitle>\r\n        <ng-template class=\"card-title body-1\" [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n      </ng-template>\r\n\r\n      <div class=\"plugin-type\">\r\n        {{ card_type }}\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"m-l-2 card-description\">\r\n            <div *ngIf=\"!description || description == ''\" class=\"card-no-description\"> {{'No plugin description'}}</div>\r\n            <p>\r\n              {{description}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 mt-3 text-center card-img\"\r\n        [ngStyle]=\"{'background-color': img ? 'transparent' : '#fff'}\">\r\n          <div *ngIf=\"!img || img == ''\" >\r\n            <img src=\"assets/images/md_icon.png\"\r\n            style=\"max-width: 110px; max-height: 110px;\"/>\r\n          </div>\r\n          <div *ngIf=\"img\" >\r\n            <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n              style=\"max-width: 260px; max-height: 150px;\"\r\n              onclick=\"imgClick()\"\r\n            />\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row mb-3 mt-3\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </pgcard>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:montserrat-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;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: pgCard, selector: "pgcard", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-card', template: "\r\n    <pgcard\r\n    MinimalHeader=\"true\"\r\n    TimeOut=\"2500\"\r\n    [Refresh]=\"false\"\r\n    [Close]=\"false\">\r\n\r\n      <ng-template #CardTitle>\r\n        <ng-template class=\"card-title body-1\" [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n      </ng-template>\r\n\r\n      <div class=\"plugin-type\">\r\n        {{ card_type }}\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"m-l-2 card-description\">\r\n            <div *ngIf=\"!description || description == ''\" class=\"card-no-description\"> {{'No plugin description'}}</div>\r\n            <p>\r\n              {{description}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 mt-3 text-center card-img\"\r\n        [ngStyle]=\"{'background-color': img ? 'transparent' : '#fff'}\">\r\n          <div *ngIf=\"!img || img == ''\" >\r\n            <img src=\"assets/images/md_icon.png\"\r\n            style=\"max-width: 110px; max-height: 110px;\"/>\r\n          </div>\r\n          <div *ngIf=\"img\" >\r\n            <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n              style=\"max-width: 260px; max-height: 150px;\"\r\n              onclick=\"imgClick()\"\r\n            />\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row mb-3 mt-3\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </pgcard>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:montserrat-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;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 = {}));
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/card/card-long</example-url>
-  */
-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: "15.2.9", ngImport: i0, type: CardLongComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-CardLongComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: pgCard, selector: "pgcard", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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
-            }] } });
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/card/card-simple</example-url>
-  */
-class CardSimpleComponent {
-    constructor() {
-        this.isDisabled = false;
-    }
-    ngOnInit() {
-    }
-}
-CardSimpleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CardSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardSimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: OptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-OptionPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: OptionPipe, name: "OptionPipe" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OptionPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: "OptionPipe" }]
-        }] });
-
-/**
- * complex but work well
- * TODO: rebuild latter
- */
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/select</example-url>
-  */
-class MefDevSelectComponent {
-    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);
-            }
-        }
-    }
-}
-MefDevSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MefDevSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MefDevSelectComponent, selector: "mefdev-select", inputs: { Filter: "Filter", MaxMultiple: "MaxMultiple", FirstDefault: "FirstDefault", AllowClear: "AllowClear", KeepUnListOptions: "KeepUnListOptions", Mode: "Mode", Multiple: "Multiple", PlaceHolder: "PlaceHolder", NotFoundContent: "NotFoundContent", Size: "Size", ShowSearch: "ShowSearch", Tags: "Tags", Disabled: "Disabled", Open: "Open" }, outputs: { SearchChange: "SearchChange", change: "change", OpenChange: "OpenChange", ScrollToBottom: "ScrollToBottom" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => MefDevSelectComponent),
-            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>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], 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: "15.2.9", ngImport: i0, type: MefDevSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mefdev-select", encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MefDevSelectComponent),
-                            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"]]
-            }] } });
-
-/**
- * @skipTemplateDoc true
- */
-class MefDevOptionComponent {
-    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);
-    }
-}
-MefDevOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevOptionComponent, deps: [{ token: MefDevSelectComponent }], target: i0.ɵɵFactoryTarget.Component });
-MefDevOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MefDevOptionComponent, selector: "mefdev-option", inputs: { Value: "Value", Label: "Label", Disabled: "Disabled" }, queries: [{ propertyName: "OptionTemplate", first: true, predicate: ["OptionTemplate"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>", encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevOptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mefdev-option", encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>" }]
-        }], ctorParameters: function () { return [{ type: MefDevSelectComponent }]; }, propDecorators: { OptionTemplate: [{
-                type: ContentChild,
-                args: ["OptionTemplate"]
-            }], Value: [{
-                type: Input
-            }], Label: [{
-                type: Input
-            }], Disabled: [{
-                type: Input
-            }] } });
-
-class MefDevSelectModule {
-}
-MefDevSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MefDevSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MefDevSelectModule, declarations: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent], imports: [CommonModule, FormsModule, OverlayModule], exports: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent] });
-MefDevSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSelectModule, imports: [CommonModule, FormsModule, OverlayModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSelectModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, FormsModule, OverlayModule],
-                    declarations: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent],
-                    exports: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent]
-                }]
-        }] });
-
-class ProgressConfig {
-    constructor() {
-        this.color = "primary";
-        this.thickness = 1;
-    }
-}
-ProgressConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProgressConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ProgressConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProgressConfig });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProgressConfig, decorators: [{
-            type: Injectable
-        }] });
-
-class MefDevProgressModule {
-    static forRoot() {
-        return { ngModule: MefDevProgressModule, providers: [ProgressConfig] };
-    }
-}
-MefDevProgressModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MefDevProgressModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MefDevProgressModule, declarations: [MefDevProgressComponent], imports: [CommonModule], exports: [MefDevProgressComponent] });
-MefDevProgressModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevProgressModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevProgressModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [MefDevProgressComponent],
-                    exports: [MefDevProgressComponent]
-                }]
-        }] });
-
-class pgCardModule {
-    static forRoot() {
-        return {
-            ngModule: pgCardModule
-        };
-    }
-}
-pgCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: pgCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-pgCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: pgCardModule, declarations: [pgCard], imports: [CommonModule, MefDevProgressModule], exports: [pgCard] });
-pgCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: pgCardModule, imports: [CommonModule, MefDevProgressModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: pgCardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [pgCard],
-                    exports: [pgCard],
-                    imports: [CommonModule, MefDevProgressModule]
-                }]
-        }] });
-
-const mefDevCardComponents = [CardComponent, CardLongComponent, CardSimpleComponent];
-class MefDevCardModule {
-}
-MefDevCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MefDevCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MefDevCardModule, declarations: [CardComponent, CardLongComponent, CardSimpleComponent], imports: [CommonModule,
-        MefDevCollapseModule,
-        MefDevSelectModule,
-        pgCardModule], exports: [CardComponent, CardLongComponent, CardSimpleComponent] });
-MefDevCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevCardModule, imports: [CommonModule,
-        MefDevCollapseModule,
-        MefDevSelectModule,
-        pgCardModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevCardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: mefDevCardComponents,
-                    exports: mefDevCardComponents,
-                    imports: [
-                        CommonModule,
-                        MefDevCollapseModule,
-                        MefDevSelectModule,
-                        pgCardModule,
-                    ]
-                }]
-        }] });
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/modals/fill</example-url>
-  */
-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);
-    }
-    /**
-   * Summary. (use period)
-   *
-   * Description. (use period)
-   *
-   * @since      x.x.x
-   * @deprecated x.x.x Use new_function_name() instead.
-   * @access     private
-   *
-   * @class
-   * @augments parent
-   * @mixes    mixin
-   *
-   * @alias    realName
-   * @memberof namespace
-   *
-   * @see  Function/class relied on
-   * @link URL
-   * @global
-   *
-   * @fires   eventName
-   * @fires   className#eventName
-   * @listens event:eventName
-   * @listens className~event:eventName
-   *
-   * @param {type}   var           Description.
-   * @param {type}   [var]         Description of optional variable.
-   * @param {type}   [var=default] Description of optional variable with default variable.
-   * @param {Object} objectVar     Description.
-   * @param {type}   objectVar.key Description of a key in the objectVar parameter.
-   *
-   * @yield {type} Yielded value description.
-   *
-   * @return {type} Return value description.
-   */
-    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: "15.2.9", ngImport: i0, type: FillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FillComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FillComponent, selector: "mefdev-fill-modal", inputs: { show: "show" }, outputs: { isClouse: "isClouse" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "fadInModal", first: true, predicate: ["fadInModal"], descendants: true }], ngImport: i0, template: " <div bsModal #fadInModal=\"bs-modal\" class=\"modal fade fill-in\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" (onHide)=\"modalIsCloused()\">\r\n    <button type=\"button\" class=\"close\" (click)=\"fadInModal.hide()\" aria-hidden=\"true\">\r\n      <i class=\"pg pg-close\"></i>\r\n    </button>\r\n    <div class=\"modal-dialog \">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n        </div>  \r\n        <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n        </div>  \r\n        <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FillComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-fill-modal', template: " <div bsModal #fadInModal=\"bs-modal\" class=\"modal fade fill-in\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" (onHide)=\"modalIsCloused()\">\r\n    <button type=\"button\" class=\"close\" (click)=\"fadInModal.hide()\" aria-hidden=\"true\">\r\n      <i class=\"pg pg-close\"></i>\r\n    </button>\r\n    <div class=\"modal-dialog \">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n        </div>  \r\n        <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n        </div>  \r\n        <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { modal_header: [{
-                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
-            }] } });
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/modals/slide-up</example-url>
-  */
-class SlideUpComponent {
-    constructor() {
-        this.size = "md" /* ModalSize.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: "15.2.9", ngImport: i0, type: SlideUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SlideUpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SlideUpComponent, selector: "mefdev-slide-up-modal", inputs: { size: "size", show: "show" }, outputs: { isClouse: "isClouse" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "mdSlideUp", first: true, predicate: ["mdSlideUp"], descendants: true }], ngImport: i0, template: "<div bsModal #mdSlideUp=\"bs-modal\" class=\"modal fade slide-up disable-scroll\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"false\" (onHide)=\"modalIsCloused()\">\r\n    <div class=\"modal-dialog modal-{{size}}\">\r\n      <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header clearfix text-left\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SlideUpComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-slide-up-modal', template: "<div bsModal #mdSlideUp=\"bs-modal\" class=\"modal fade slide-up disable-scroll\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"false\" (onHide)=\"modalIsCloused()\">\r\n    <div class=\"modal-dialog modal-{{size}}\">\r\n      <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header clearfix text-left\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
-        }], 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
-            }] } });
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/modals/slide-right</example-url>
-  */
-class SlideRightComponent {
-    constructor() {
-        this.size = "md" /* ModalSize.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: "15.2.9", ngImport: i0, type: SlideRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SlideRightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SlideRightComponent, selector: "mefdev-slide-right-modal", inputs: { size: "size", show: "show" }, outputs: { isClouse: "isClouse" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "slideRight", first: true, predicate: ["slideRight"], descendants: true }], ngImport: i0, template: "<div bsModal #slideRight=\"bs-modal\" class=\"modal fade slide-right\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" (onHide)=\"modalIsCloused()\">\r\n    <div class=\"modal-dialog modal-{{size}}\">\r\n      <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header clearfix text-left\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SlideRightComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-slide-right-modal', template: "<div bsModal #slideRight=\"bs-modal\" class=\"modal fade slide-right\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" (onHide)=\"modalIsCloused()\">\r\n    <div class=\"modal-dialog modal-{{size}}\">\r\n      <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header clearfix text-left\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { modal_header: [{
-                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: "15.2.9", ngImport: i0, type: RightFilterComponent, deps: [{ token: FilteredFieldService }], target: i0.ɵɵFactoryTarget.Component });
-RightFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RightFilterComponent, selector: "mefdev-right-filter", ngImport: i0, template: "<div class=\"filter-btn\">\r\n    <button class=\"btn btn-secondary text-danger\" (click)=\"openModal()\"><i class=\"fa fa-filter\" aria-hidden=\"true\"></i></button>\r\n</div>\r\n\r\n<mefdev-slide-right-modal [show]=\"isOpen\" (isClouse)=\"modalIsCloused()\">\r\n    <ng-content></ng-content>\r\n</mefdev-slide-right-modal>", styles: [".filter-btn{position:fixed;top:60px;z-index:450;right:25px}\n"], dependencies: [{ kind: "component", type: SlideRightComponent, selector: "mefdev-slide-right-modal", inputs: ["size", "show"], outputs: ["isClouse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RightFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-right-filter', template: "<div class=\"filter-btn\">\r\n    <button class=\"btn btn-secondary text-danger\" (click)=\"openModal()\"><i class=\"fa fa-filter\" aria-hidden=\"true\"></i></button>\r\n</div>\r\n\r\n<mefdev-slide-right-modal [show]=\"isOpen\" (isClouse)=\"modalIsCloused()\">\r\n    <ng-content></ng-content>\r\n</mefdev-slide-right-modal>", styles: [".filter-btn{position:fixed;top:60px;z-index:450;right:25px}\n"] }]
-        }], ctorParameters: function () { return [{ type: FilteredFieldService }]; } });
-
-let mefDevModalModuleComponents = [
-    FillComponent,
-    SlideUpComponent,
-    SlideRightComponent,
-    RightFilterComponent
-];
-class MefDevModalModule {
-}
-MefDevModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MefDevModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MefDevModalModule, declarations: [FillComponent,
-        SlideUpComponent,
-        SlideRightComponent,
-        RightFilterComponent], imports: [ModalModule,
-        CommonModule,
-        MefDevSelectModule], exports: [FillComponent,
-        SlideUpComponent,
-        SlideRightComponent,
-        RightFilterComponent] });
-MefDevModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevModalModule, imports: [ModalModule,
-        CommonModule,
-        MefDevSelectModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevModalModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        ModalModule,
-                        CommonModule,
-                        MefDevSelectModule
-                    ],
-                    exports: mefDevModalModuleComponents,
-                    declarations: mefDevModalModuleComponents
-                }]
-        }] });
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/page-layouts/profile</example-url>
-  */
-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: "15.2.9", ngImport: i0, type: ProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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(to bottom,#F3F3F3 53px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 53px,transparent 0%,transparent 100%);padding-top:25px}@media (max-width: 720px){:host::ng-deep .profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 63px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 63px,transparent 0%,transparent 100%);padding-top:35px}}:host::ng-deep .custom-img{max-width:224px;max-height:128px;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}:host::ng-deep .card-img{padding:0;display:flex;align-items:center;justify-content:center;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5);width:224px;height:128px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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(to bottom,#F3F3F3 53px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 53px,transparent 0%,transparent 100%);padding-top:25px}@media (max-width: 720px){:host::ng-deep .profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 63px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 63px,transparent 0%,transparent 100%);padding-top:35px}}:host::ng-deep .custom-img{max-width:224px;max-height:128px;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}:host::ng-deep .card-img{padding:0;display:flex;align-items:center;justify-content:center;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5);width:224px;height:128px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { first_colum: [{
-                type: ContentChild,
-                args: ["first_colum"]
-            }], 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
-            }] } });
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/page-layouts/central-page</example-url>
-  */
-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: "15.2.9", ngImport: i0, type: CentralPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CentralPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CentralPageComponent, selector: "mefdev-central-page", inputs: { width: "width" }, ngImport: i0, template: "<div class=\"row align-items-center\" style=\"height: 100%;\" [ngStyle]=\"{'width': width}\">\r\n    <div class=\"col\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n  ", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CentralPageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-central-page', template: "<div class=\"row align-items-center\" style=\"height: 100%;\" [ngStyle]=\"{'width': width}\">\r\n    <div class=\"col\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n  " }]
-        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
-                type: Input
-            }] } });
-
-class CentralPageRowComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-CentralPageRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CentralPageRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CentralPageRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: CentralPageRowComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-central-page-row', template: "<div class=\"row justify-content-center\">\r\n    <ng-content></ng-content>\r\n</div>" }]
-        }], ctorParameters: function () { return []; } });
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/page-layouts/table-page</example-url>
-  */
-class TablePageComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-TablePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TablePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TablePageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TablePageComponent, selector: "mefdev-table-page", queries: [{ propertyName: "filter_colum", first: true, predicate: ["filter_colum"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\r\n    <div class=\"col-12 filter-colum\">\r\n        <ng-template [ngTemplateOutlet]=\"filter_colum\"></ng-template> \r\n    </div>\r\n</div>\r\n\r\n<div class=\"table-responsive\" >\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TablePageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-table-page', template: "<div class=\"row\">\r\n    <div class=\"col-12 filter-colum\">\r\n        <ng-template [ngTemplateOutlet]=\"filter_colum\"></ng-template> \r\n    </div>\r\n</div>\r\n\r\n<div class=\"table-responsive\" >\r\n    <ng-content></ng-content>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { filter_colum: [{
-                type: ContentChild,
-                args: ["filter_colum"]
-            }] } });
-
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/page-layouts/menage-page</example-url>
-  */
-class ManagePageComponent {
-    constructor() {
-        this.startTabInd = 0;
-    }
-    ngOnInit() {
-    }
-}
-ManagePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ManagePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ManagePageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ManagePageComponent, selector: "mefdev-manage-page", inputs: { startTabInd: "startTabInd" }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }, { propertyName: "tabs_block", first: true, predicate: ["tabs_block"], descendants: true }], ngImport: i0, template: "<div class=\"card-tabs\">\r\n    <div class=\"row body-1 card-header\" *ngIf=\"card_title\">\r\n        <div class=\"m-2\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"row profile-page-tabs\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.card-tabs .card-header{background-color:#f3f3f3;padding:.5em;border:0}.profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ManagePageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-manage-page', template: "<div class=\"card-tabs\">\r\n    <div class=\"row body-1 card-header\" *ngIf=\"card_title\">\r\n        <div class=\"m-2\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"row profile-page-tabs\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.card-tabs .card-header{background-color:#f3f3f3;padding:.5em;border:0}.profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%)}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { card_title: [{
-                type: ContentChild,
-                args: ["card_title"]
-            }], tabs_block: [{
-                type: ContentChild,
-                args: ["tabs_block"]
-            }], startTabInd: [{
-                type: Input
-            }] } });
-
-let mefDevPageLayoutsModuleComponents = [
-    ProfileComponent,
-    CentralPageComponent,
-    CentralPageRowComponent,
-    TablePageComponent,
-    ManagePageComponent
-];
-class MefDevPageLayoutsModule {
-}
-MefDevPageLayoutsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevPageLayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MefDevPageLayoutsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MefDevPageLayoutsModule, declarations: [ProfileComponent,
-        CentralPageComponent,
-        CentralPageRowComponent,
-        TablePageComponent,
-        ManagePageComponent], imports: [CommonModule], exports: [ProfileComponent,
-        CentralPageComponent,
-        CentralPageRowComponent,
-        TablePageComponent,
-        ManagePageComponent] });
-MefDevPageLayoutsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevPageLayoutsModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevPageLayoutsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: mefDevPageLayoutsModuleComponents,
-                    exports: mefDevPageLayoutsModuleComponents,
-                    imports: [
-                        CommonModule,
-                        // pgTabsModule,
-                    ],
-                }]
-        }] });
-
-class MefDevSpecFlowTestComponent {
-    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;
-    }
-}
-MefDevSpecFlowTestComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSpecFlowTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MefDevSpecFlowTestComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MefDevSpecFlowTestComponent, selector: "mefdev-spec-flow-test", ngImport: i0, template: "<!-- Block for test -->\r\n<div style=\"display: none;\">\r\n  <input id=\"ResponseTimestamp\" type=\"hidden\" value=\"{{ResponseTimestamp}}\" />\r\n  <input id=\"ResponseError\" type=\"hidden\" value=\"{{ResponseError}}\" />\r\n  <input id=\"ReportError\" type=\"hidden\" value=\"{{ReportError}}\" />\r\n</div>", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSpecFlowTestComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-spec-flow-test', template: "<!-- Block for test -->\r\n<div style=\"display: none;\">\r\n  <input id=\"ResponseTimestamp\" type=\"hidden\" value=\"{{ResponseTimestamp}}\" />\r\n  <input id=\"ResponseError\" type=\"hidden\" value=\"{{ResponseError}}\" />\r\n  <input id=\"ReportError\" type=\"hidden\" value=\"{{ReportError}}\" />\r\n</div>" }]
-        }], ctorParameters: function () { return []; } });
-
-class MefDevSpecFlowTestModule {
-    static forRoot() {
-        return {
-            ngModule: MefDevSpecFlowTestModule
-        };
-    }
-}
-MefDevSpecFlowTestModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSpecFlowTestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MefDevSpecFlowTestModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MefDevSpecFlowTestModule, declarations: [MefDevSpecFlowTestComponent], imports: [CommonModule], exports: [MefDevSpecFlowTestComponent] });
-MefDevSpecFlowTestModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSpecFlowTestModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSpecFlowTestModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MefDevSpecFlowTestComponent],
-                    exports: [MefDevSpecFlowTestComponent],
-                    imports: [
-                        CommonModule
-                    ]
-                }]
-        }] });
-
-/**
-  * @component
-  * @skipTemplateDoc: true
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/switch</example-url>
-  */
-class MefDevSwitchComponent {
-    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 Value(value) {
-        this.updateValue(value);
-    }
-    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();
-    }
-}
-MefDevSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MefDevSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MefDevSwitchComponent, selector: "mefdev-switch", inputs: { Value: "Value", Size: "Size", Color: "Color", Disabled: "Disabled" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick($event)" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => MefDevSwitchComponent),
-            multi: true
-        }
-    ], ngImport: i0, template: "<span [ngClass]=\"_classMap\" tabindex=\"0\">\r\n    <span [ngClass]=\"_innerPrefixCls\">\r\n        <ng-template [ngIf]=\"_checked\">\r\n            <ng-content select=\"[checked]\"></ng-content>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"!_checked\">\r\n            <ng-content select=\"[unchecked]\"></ng-content>\r\n        </ng-template>\r\n    </span>\r\n</span>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSwitchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mefdev-switch", encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MefDevSwitchComponent),
-                            multi: true
-                        }
-                    ], template: "<span [ngClass]=\"_classMap\" tabindex=\"0\">\r\n    <span [ngClass]=\"_innerPrefixCls\">\r\n        <ng-template [ngIf]=\"_checked\">\r\n            <ng-content select=\"[checked]\"></ng-content>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"!_checked\">\r\n            <ng-content select=\"[unchecked]\"></ng-content>\r\n        </ng-template>\r\n    </span>\r\n</span>" }]
-        }], propDecorators: { onChange: [{
-                type: Output
-            }], Value: [{
-                type: Input
-            }], Size: [{
-                type: Input
-            }], Color: [{
-                type: Input
-            }], Disabled: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ["click", ["$event"]]
-            }] } });
-
-class MefDevSwitchModule {
-}
-MefDevSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MefDevSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MefDevSwitchModule, declarations: [MefDevSwitchComponent], imports: [CommonModule], exports: [MefDevSwitchComponent] });
-MefDevSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSwitchModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevSwitchModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [MefDevSwitchComponent],
-                    declarations: [MefDevSwitchComponent],
-                    imports: [CommonModule]
-                }]
-        }] });
-
-class MefDevTabBodyComponent {
-}
-MefDevTabBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MefDevTabBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MefDevTabBodyComponent, selector: "mefdev-tab-body", inputs: { content: "content" }, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"content\"></ng-template>", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabBodyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-tab-body', encapsulation: ViewEncapsulation.None, template: "<ng-template [ngTemplateOutlet]=\"content\"></ng-template>" }]
-        }], propDecorators: { content: [{
-                type: Input
-            }] } });
-
-class MefDevTabLabelDirective {
-    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;
-    }
-}
-MefDevTabLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabLabelDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-MefDevTabLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: MefDevTabLabelDirective, 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: "15.2.9", ngImport: i0, type: MefDevTabLabelDirective, 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 MefDevTabsInkBarDirective {
-    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';
-    }
-}
-MefDevTabsInkBarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabsInkBarDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-MefDevTabsInkBarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: MefDevTabsInkBarDirective, 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: "15.2.9", ngImport: i0, type: MefDevTabsInkBarDirective, 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 MefDevTabsNavComponent {
-    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);
-            }
-        }
-    }
-}
-MefDevTabsNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabsNavComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$3.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MefDevTabsNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MefDevTabsNavComponent, selector: "mefdev-tabs-nav", inputs: { Size: "Size", Animated: "Animated", Position: "Position", HideBar: "HideBar", Type: "Type", ShowPagination: "ShowPagination", PositionMode: "PositionMode", selectedIndex: "selectedIndex" }, queries: [{ propertyName: "_tabBarExtraContent", first: true, predicate: ["tabBarExtraContent"], descendants: true, static: true }, { propertyName: "_labelWrappers", predicate: MefDevTabLabelDirective }], viewQueries: [{ propertyName: "_inkBar", first: true, predicate: MefDevTabsInkBarDirective, descendants: true, static: true }, { propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"nav-tabs-wrapper\" [class.scrolling]=\"_showPaginationControls\" #tabListContainer>\r\n    <div class=\"nav-wrap\">\r\n      <ul\r\n        class=\"nav nav-tabs nav-tabs-{{ _type }} nav-tabs-{{ _tabPosition }}\"\r\n        [class.tabs-nav-animated]=\"Animated\"\r\n        #tabList\r\n        (cdkObserveContent)=\"_onContentChanges()\"\r\n      >\r\n        <div\r\n          class=\"active-bar\"\r\n          pg-tabs-ink-bar\r\n          [hidden]=\"HideBar\"\r\n          [Animated]=\"Animated\"\r\n          [PositionMode]=\"PositionMode\"\r\n          style=\"display: block;\"\r\n        ></div>\r\n        <ng-content></ng-content>\r\n      </ul>\r\n    </div>\r\n  </div>", dependencies: [{ kind: "directive", type: MefDevTabsInkBarDirective, selector: "[pg-tabs-ink-bar]", inputs: ["Animated", "PositionMode"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabsNavComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-tabs-nav', encapsulation: ViewEncapsulation.None, template: "<div class=\"nav-tabs-wrapper\" [class.scrolling]=\"_showPaginationControls\" #tabListContainer>\r\n    <div class=\"nav-wrap\">\r\n      <ul\r\n        class=\"nav nav-tabs nav-tabs-{{ _type }} nav-tabs-{{ _tabPosition }}\"\r\n        [class.tabs-nav-animated]=\"Animated\"\r\n        #tabList\r\n        (cdkObserveContent)=\"_onContentChanges()\"\r\n      >\r\n        <div\r\n          class=\"active-bar\"\r\n          pg-tabs-ink-bar\r\n          [hidden]=\"HideBar\"\r\n          [Animated]=\"Animated\"\r\n          [PositionMode]=\"PositionMode\"\r\n          style=\"display: block;\"\r\n        ></div>\r\n        <ng-content></ng-content>\r\n      </ul>\r\n    </div>\r\n  </div>" }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$3.Directionality, decorators: [{
-                        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: [MefDevTabLabelDirective]
-            }], _inkBar: [{
-                type: ViewChild,
-                args: [MefDevTabsInkBarDirective, { 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 {
-}
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/tabset</example-url>
-  */
-class MefDevTabSetComponent {
-    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() {
-        //@ts-ignore
-        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;
-    }
-}
-MefDevTabSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabSetComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-MefDevTabSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MefDevTabSetComponent, selector: "mefdev-tabset", inputs: { TabBarExtraTemplate: "TabBarExtraTemplate", Animated: "Animated", ShowPagination: "ShowPagination", Hide: "Hide", SelectedIndex: "SelectedIndex", Size: "Size", TabPosition: "TabPosition", extraTabClass: "extraTabClass", extraTabContentClass: "extraTabContentClass", Type: "Type", tabAnimation: "tabAnimation" }, outputs: { SelectedIndexChange: "SelectedIndexChange", SelectChange: "SelectChange" }, queries: [{ propertyName: "TabBarExtraContent", first: true, predicate: ["TabBarExtraContent"], descendants: true, static: true }], viewQueries: [{ propertyName: "_tabNav", first: true, predicate: ["tabNav"], descendants: true, static: true }, { propertyName: "_tabContent", first: true, predicate: ["tabContent"], descendants: true, static: true }, { propertyName: "_hostContent", first: true, predicate: ["hostContent"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"tab-wrapper tab-{{ _tabPositionMode }} {{ _tabPosition }} {{ _type }} {{ _extra_tab_class }}\" #hostContent>\r\n    <mefdev-tabs-nav\r\n      #tabNav\r\n      [Size]=\"Size\"\r\n      [Type]=\"Type\"\r\n      [ShowPagination]=\"ShowPagination\"\r\n      [PositionMode]=\"_tabPositionMode\"\r\n      [Position]=\"_tabPosition\"\r\n      [Animated]=\"inkBarAnimated\"\r\n      [HideBar]=\"Hide\"\r\n      [selectedIndex]=\"SelectedIndex\"\r\n    >\r\n      <ng-template #tabBarExtraContent>\r\n        <ng-template [ngTemplateOutlet]=\"TabBarExtraTemplate || TabBarExtraContent\"></ng-template>\r\n      </ng-template>\r\n      <li pg-tab-label [disabled]=\"tab.disabled\" (click)=\"clickLabel(i)\" *ngFor=\"let tab of _tabs; let i = index\">\r\n        <a href=\"javascript:void(0);\" class=\"\" [class.active]=\"SelectedIndex == i && !Hide\">\r\n          <ng-template [ngTemplateOutlet]=\"tab._tabHeading\"></ng-template>\r\n        </a>\r\n      </mefdev-tabs-nav>\r\n    <div class=\"tab-content-wrapper {{ _extra_tabcontent_class }}\">\r\n      <div\r\n        class=\"tab-content {{ _tabAnimation }}\"\r\n        #tabContent\r\n        [class.animated]=\"tabPaneAnimated\"\r\n        [class.not-animated]=\"!tabPaneAnimated\"\r\n        [style.margin-left.%]=\"tabPaneAnimated && -(SelectedIndex ?? -1) * 100\"\r\n      >\r\n        <mefdev-tab-body\r\n          class=\"tab-pane\"\r\n          [class.active]=\"SelectedIndex == i && !Hide\"\r\n          [class.inactive]=\"SelectedIndex != i || Hide\"\r\n          [content]=\"tab.content\"\r\n          *ngFor=\"let tab of _tabs; let i = index\"\r\n        >\r\n        </mefdev-tab-body>\r\n      </div>\r\n    </div>\r\n  </div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MefDevTabsNavComponent, selector: "mefdev-tabs-nav", inputs: ["Size", "Animated", "Position", "HideBar", "Type", "ShowPagination", "PositionMode", "selectedIndex"] }, { kind: "directive", type: MefDevTabLabelDirective, selector: "[pg-tab-label]", inputs: ["disabled"] }, { kind: "component", type: MefDevTabBodyComponent, selector: "mefdev-tab-body", inputs: ["content"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabSetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-tabset', encapsulation: ViewEncapsulation.None, template: "<div class=\"tab-wrapper tab-{{ _tabPositionMode }} {{ _tabPosition }} {{ _type }} {{ _extra_tab_class }}\" #hostContent>\r\n    <mefdev-tabs-nav\r\n      #tabNav\r\n      [Size]=\"Size\"\r\n      [Type]=\"Type\"\r\n      [ShowPagination]=\"ShowPagination\"\r\n      [PositionMode]=\"_tabPositionMode\"\r\n      [Position]=\"_tabPosition\"\r\n      [Animated]=\"inkBarAnimated\"\r\n      [HideBar]=\"Hide\"\r\n      [selectedIndex]=\"SelectedIndex\"\r\n    >\r\n      <ng-template #tabBarExtraContent>\r\n        <ng-template [ngTemplateOutlet]=\"TabBarExtraTemplate || TabBarExtraContent\"></ng-template>\r\n      </ng-template>\r\n      <li pg-tab-label [disabled]=\"tab.disabled\" (click)=\"clickLabel(i)\" *ngFor=\"let tab of _tabs; let i = index\">\r\n        <a href=\"javascript:void(0);\" class=\"\" [class.active]=\"SelectedIndex == i && !Hide\">\r\n          <ng-template [ngTemplateOutlet]=\"tab._tabHeading\"></ng-template>\r\n        </a>\r\n      </mefdev-tabs-nav>\r\n    <div class=\"tab-content-wrapper {{ _extra_tabcontent_class }}\">\r\n      <div\r\n        class=\"tab-content {{ _tabAnimation }}\"\r\n        #tabContent\r\n        [class.animated]=\"tabPaneAnimated\"\r\n        [class.not-animated]=\"!tabPaneAnimated\"\r\n        [style.margin-left.%]=\"tabPaneAnimated && -(SelectedIndex ?? -1) * 100\"\r\n      >\r\n        <mefdev-tab-body\r\n          class=\"tab-pane\"\r\n          [class.active]=\"SelectedIndex == i && !Hide\"\r\n          [class.inactive]=\"SelectedIndex != i || Hide\"\r\n          [content]=\"tab.content\"\r\n          *ngFor=\"let tab of _tabs; let i = index\"\r\n        >\r\n        </mefdev-tab-body>\r\n      </div>\r\n    </div>\r\n  </div>" }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { TabBarExtraTemplate: [{
-                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 MefDevTabComponent {
-    constructor(MefDevTabSetComponent) {
-        this.MefDevTabSetComponent = MefDevTabSetComponent;
-        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.MefDevTabSetComponent._tabs.push(this);
-    }
-    ngOnDestroy() {
-        this.MefDevTabSetComponent._tabs.splice(this.MefDevTabSetComponent._tabs.indexOf(this), 1);
-    }
-}
-MefDevTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabComponent, deps: [{ token: MefDevTabSetComponent }], target: i0.ɵɵFactoryTarget.Component });
-MefDevTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MefDevTabComponent, selector: "mefdev-tab", inputs: { Disabled: "Disabled" }, outputs: { pgSelect: "pgSelect", pgClick: "pgClick", pgDeselect: "pgDeselect" }, host: { properties: { "class.ant-tabs-tabpane": "true" } }, queries: [{ propertyName: "_tabHeading", first: true, predicate: ["TabHeading"], descendants: true, static: true }], viewQueries: [{ propertyName: "_content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template>\r\n    <ng-content></ng-content>\r\n  </ng-template>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-tab', host: {
-                        '[class.ant-tabs-tabpane]': 'true'
-                    }, template: "<ng-template>\r\n    <ng-content></ng-content>\r\n  </ng-template>" }]
-        }], ctorParameters: function () { return [{ type: MefDevTabSetComponent }]; }, 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 MefDevTabsModule {
-}
-MefDevTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MefDevTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabsModule, declarations: [MefDevTabComponent, MefDevTabSetComponent, MefDevTabsNavComponent, MefDevTabLabelDirective, MefDevTabsInkBarDirective, MefDevTabBodyComponent], imports: [CommonModule], exports: [MefDevTabComponent, MefDevTabSetComponent, MefDevTabsNavComponent, MefDevTabLabelDirective, MefDevTabsInkBarDirective, MefDevTabBodyComponent] });
-MefDevTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabsModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MefDevTabsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MefDevTabComponent, MefDevTabSetComponent, MefDevTabsNavComponent, MefDevTabLabelDirective, MefDevTabsInkBarDirective, MefDevTabBodyComponent],
-                    exports: [MefDevTabComponent, MefDevTabSetComponent, MefDevTabsNavComponent, MefDevTabLabelDirective, MefDevTabsInkBarDirective, MefDevTabBodyComponent],
-                    imports: [CommonModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { CardComponent, CardLongComponent, CardSimpleComponent, CartTypeColors, CentralPageComponent, CentralPageRowComponent, CollapseComponent, CollapseSetComponent, FillComponent, FilteredFieldContainerComponent, FilteredFieldItemComponent, FilteredFieldService, FiltredItemModel, HelpBlockComponent, ManagePageComponent, MefDevCardModule, MefDevCollapseModule, MefDevFilteredFieldModule, MefDevHelpBlockModule, MefDevModalModule, MefDevOptionComponent, MefDevPageLayoutsModule, MefDevProgressComponent, MefDevProgressModule, MefDevSelectComponent, MefDevSelectModule, MefDevSpecFlowTestComponent, MefDevSpecFlowTestModule, MefDevSwitchComponent, MefDevSwitchModule, MefDevTabBodyComponent, MefDevTabComponent, MefDevTabLabelDirective, MefDevTabSetComponent, MefDevTabsInkBarDirective, MefDevTabsModule, MefDevTabsNavComponent, OptionPipe, ProfileComponent, ProgressConfig, RightFilterComponent, SlideRightComponent, SlideUpComponent, TabChangeEvent, TablePageComponent, mefDevCardComponents, mefDevCollapseModuleComponents, pgCard, pgCardModule };
-//# sourceMappingURL=natec-mef-dev-ui-kit.mjs.map