@natec/mef-dev-ui-kit 16.2.1 → 16.2.3

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

@@ -1,15 +1,15 @@
 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 { Component, ViewEncapsulation, Input, EventEmitter, Host, ContentChild, HostBinding, Output, NgModule, Injectable, Pipe, forwardRef, ViewChild, 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 { CommonModule, DatePipe } 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 i3 from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import * as i1$1 from '@angular/router';
 import { auditTime, startWith, map } from 'rxjs/operators';
 import * as i1$2 from '@angular/cdk/bidi';
 
@@ -577,1762 +577,2362 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 }]
         }] });
 
-/**
- * Component representing a progress bar.
- *
- * Example of usage:
- *
- * ```
- * <mefdev-progress type="linear" color="blue" [thick]="true"></mefdev-progress>
- * <mefdev-progress type="circle" color="red" [indeterminate]="true"></mefdev-progress>
- * ```
- */
-class MefDevProgressComponent {
-    _value;
-    _value2;
-    /**
-     * The type of progress bar.
-     * Possible values: "linear" | "circle".
-     * Default value: "linear".
-     */
-    type;
-    /**
-     * The color of the progress bar.
-     * Possible values: any valid CSS color value.
-     * Default value: none.
-     */
-    color;
-    /**
-     * Determines whether the progress bar is thick.
-     * Default value: false.
-     */
-    thick;
-    /**
-     * Determines whether the progress bar is indeterminate.
-     * Default value: false.
-     */
-    indeterminate;
-    /**
-     * The value of the progress bar.
-     * For the "circle" type, it should be a number between 0 and 100.
-     */
-    set value(value) {
-        if (this.type == "circle") {
-            this._value = (value / 100) * 360;
-            if (this.value >= 50) {
-                this._value2 = true;
+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
-            this._value = value;
-    }
-    get value() {
-        return this._value;
-    }
-    /**
-     * Additional value property.
-     */
-    get value2() {
-        return this._value2;
+        else {
+            return options;
+        }
     }
-    constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevProgressComponent, selector: "mefdev-progress", inputs: { type: "type", color: "color", thick: "thick", indeterminate: "indeterminate", value: "value" }, ngImport: i0, template: "<div *ngIf=\"type === 'bar'; else circleBlock\">\r\n  <div *ngIf=\"indeterminate; else determineBarBlock\">\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar-{{ color }}\" [class.progress-bar-indeterminate]=\"indeterminate\"></div>\r\n    </div>\r\n  </div>\r\n  <ng-template #determineBarBlock>\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar progress-bar-{{ color }}\" [ngStyle]=\"{ width: value + '%' }\"></div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<ng-template #circleBlock>\r\n  <div class=\"progress-circle-{{ color }}\" [class.progress-circle-indeterminate]=\"indeterminate\"\r\n    [class.progress-circle]=\"!indeterminate\" [class.progress-circle-thick]=\"thick\">\r\n    <div *ngIf=\"indeterminate; else determineBlock\"></div>\r\n    <ng-template #determineBlock>\r\n      <div class=\"pie\" [ngStyle]=\"_value2 && { clip: 'rect(auto, auto, auto, auto)' }\">\r\n        <div class=\"left-side half-circle\" [ngStyle]=\"_value2 && { transform: 'rotate(' + value + 'deg)' }\"></div>\r\n        <div class=\"right-side half-circle\" [ngStyle]=\"{\r\n            transform:\r\n              _value2 === true ? 'rotate(180deg)' : 'rotate(' + value + 'deg)'\r\n          }\"></div>\r\n      </div>\r\n      <div class=\"shadow\"></div>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: OptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: OptionPipe, name: "OptionPipe" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: OptionPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: "OptionPipe" }]
+        }] });
 
 /**
- * Component representing a custom card.
- * It provides various styling and animation options for the card layout.
- *
- * Example usage:
- * ```
- * <pgcard [Title]="'Card Title'" [Type]="'default'" [MinimalHeader]="false" [ProgressType]="'circle'">
- *   Card content goes here...
- * </pgcard>
- * ```
+ * complex but work well
+ * TODO: rebuild latter
  */
-class pgCard {
-    /**
-     * Indicates whether the card is collapsed or not.
-     * Default: false
-    */
-    _isCollapsed = false;
-    /**
-     * Indicates whether the card is maximized or not.
-     * Default: false
-    */
-    _isMaximixed = false;
-    /**
-     * Indicates whether the card is in loading state or not.
-     * Default: false
-    */
-    _isLoading = false;
-    /**
-     * Indicates whether the card has a minimal header or not.
-     * Default: false
-    */
-    _minimalHeader = false;
-    /**
-     * The message to be displayed in the card.
-    */
-    _message = "";
-    /**
-     * The type of message to be displayed in the card (e.g., success, danger, warning).
-     * Default: "danger"
-    */
-    _messageType = "danger";
-    /**
-     * Indicates whether the message in the card is visible or not.
-     * Default: false
-    */
-    _messageVisible = false;
-    /**
-     * The type of progress indicator to be displayed in the card (e.g., circle, bar, none).
-     * Default: "circle"
-    */
-    _progressType = "circle";
-    /**
-     * The color of the progress indicator in the card.
-    */
-    _progressColor = "";
-    /**
-     * Indicates whether the tools (e.g., refresh, close, maximize) are shown in the card header or not.
-     * Default: true
-    */
-    _showTools = true;
-    _close_card = false;
-    _refresh = false;
-    _refreshColor = "light";
-    /**
-     * Indicates whether the close button in the card is visible or not.
-     * Default: true
-    */
-    _close = true;
-    /**
-     * Indicates whether the toggle button in the card is visible or not.
-     * Default: true
-    */
-    _toggle = true;
-    /**
-     * Indicates whether the maximize button in the card is visible or not.
-     * Default: true
-    */
-    _maximize = true;
-    /**
-     * The timeout value in milliseconds for the loading state of the card.
-     * If set to 0, the loading state will not automatically turn off.
-     * Default: 0
-    */
-    _timeout = 0;
-    /**
-     * The title text to be displayed in the card header.
-    */
-    _titleText = "";
-    /**
-     * The border style of the card.
-    */
-    _card_border_style = "";
-    /**
-     * The type of the card (e.g., default, bordered, minimal).
-     * Default: "default"
-    */
-    _type = "default";
-    /**
-     * Additional CSS class(es) to be added to the card header.
-    */
-    _extraHeaderClass = "";
-    /**
-     * Additional CSS class(es) to be added to the card body.
-    */
-    _extraBodyClass = "";
-    /**
-     * Additional CSS class(es) to be added to the card.
-    */
-    _additionalClasses = "";
-    /**
-     * ViewChild reference to the host content element.
-    */
-    _hostContent;
-    /**
-     * ViewChild reference to the minimal circle loading element.
-    */
-    minimalCircleLoading;
-    /**
-     * ViewChild reference to the minimal circle loading trigger element.
-    */
-    minimalCircleLoadingTrigger;
-    /**
-     * ContentChild reference to the CardTitle template.
-    */
-    CardTitle;
-    /**
-     * ContentChild reference to the CardExtraControls template.
-    */
-    CardExtraControls;
-    // Input properties
-    /**
-     * The title text to be displayed in the card header.
-    */
-    set Title(value) {
-        this._titleText = value;
-    }
-    get Title() {
-        return this._titleText;
-    }
-    /**
-     * The type of the card (e.g., default, bordered, minimal).
-     * Default: "default"
-    */
-    set Type(value) {
-        this._type = value;
+/**
+  * Example of usage:
+  * <example-url>https://mef.dev/ui_kit_demo/view/select</example-url>
+  */
+class MefDevSelectComponent {
+    _elementRef;
+    _renderer;
+    cDRef;
+    _allowClear = false;
+    _disabled = false;
+    _isTags = false;
+    _isMultiple = false;
+    _keepUnListOptions = false;
+    _showSearch = false;
+    _el;
+    _isOpen = false;
+    _prefixCls = "pg-select";
+    _classList = [];
+    _dropDownClassMap;
+    _dropDownPrefixCls = `${this._prefixCls}-dropdown`;
+    _selectionClassMap;
+    _selectionPrefixCls = `${this._prefixCls}-selection`;
+    _size;
+    _value;
+    _placeholder = "placeholder";
+    _notFoundContent = "No Content";
+    _searchText = "";
+    _triggerWidth = 0;
+    _selectedOption;
+    _operatingMultipleOption;
+    _selectedOptions = new Set();
+    _options = [];
+    _cacheOptions = [];
+    _filterOptions = [];
+    _tagsOptions = [];
+    _activeFilterOption;
+    _isMultiInit = false;
+    _dropDownPosition = "bottom";
+    _composing = false;
+    _mode;
+    // ngModel Access
+    onChange = () => null;
+    onTouched = () => null;
+    searchInputElementRef;
+    trigger;
+    dropdownUl;
+    SearchChange = new EventEmitter();
+    change = new EventEmitter();
+    OpenChange = new EventEmitter();
+    ScrollToBottom = new EventEmitter();
+    Filter = true;
+    MaxMultiple = Infinity;
+    FirstDefault = false;
+    _cdkOverlay;
+    set AllowClear(value) {
+        this._allowClear = toBoolean(value);
     }
-    /**
-     * Indicates whether the card has a minimal header or not.
-     * Default: false
-    */
-    set MinimalHeader(value) {
-        this._minimalHeader = value;
+    get AllowClear() {
+        return this._allowClear;
     }
-    /**
-     * The type of progress indicator to be displayed in the card (e.g., circle, bar, none).
-     * Default: "circle"
-    */
-    set ProgressType(value) {
-        this._progressType = value;
+    set KeepUnListOptions(value) {
+        this._keepUnListOptions = toBoolean(value);
     }
-    /**
-     * The color of the progress indicator in the card.
-    */
-    set ProgressColor(value) {
-        this._progressColor = value;
+    get KeepUnListOptions() {
+        return this._keepUnListOptions;
     }
-    /**
-     * Indicates whether the card should have a refresh button or not.
-    */
-    set Refresh(value) {
-        this._refresh = value;
+    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;
+        }
     }
-    /**
-     * The color of the refresh button in the card (e.g., light, dark).
-     * Default: "light"
-    */
-    set RefreshColor(value) {
-        this._refreshColor = value;
+    set Multiple(value) {
+        this._isMultiple = toBoolean(value);
+        if (this._isMultiple) {
+            this.ShowSearch = true;
+        }
     }
-    /**
-     * Indicates whether the card should have a maximize button or not.
-    */
-    set Maximize(value) {
-        this._maximize = value;
+    get Multiple() {
+        return this._isMultiple;
     }
-    /**
-     * Indicates whether the card should have a close button or not.
-    */
-    set Close(value) {
-        this._close = value;
+    set PlaceHolder(value) {
+        this._placeholder = value;
     }
-    /**
-     * Indicates whether the card should have a toggle button or not.
-    */
-    set Toggle(value) {
-        this._toggle = value;
+    get PlaceHolder() {
+        return this._placeholder;
     }
-    /**
-     * Additional CSS class(es) to be added to the card header.
-    */
-    set HeaderClass(value) {
-        this._extraHeaderClass = value;
+    set NotFoundContent(value) {
+        this._notFoundContent = value;
     }
-    /**
-     * Additional CSS class(es) to be added to the card body.
-    */
-    set BodyClass(value) {
-        this._extraBodyClass = value;
+    get NotFoundContent() {
+        return this._notFoundContent;
     }
-    /**
-     * Additional CSS class(es) to be added to the card.
-    */
-    set AdditionalClasses(value) {
-        this._additionalClasses = value;
+    set Size(value) {
+        // @ts-ignore
+        this._size = { large: "lg", small: "sm" }[value];
+        this.setClassMap();
     }
-    /**
-     * Indicates whether the tools (e.g., refresh, close, maximize) are shown in the card header or not.
-    */
-    set Controls(value) {
-        this._showTools = value;
+    get Size() {
+        return this._size;
     }
-    /**
-     * Indicates whether the message in the card is visible or not.
-    */
-    set ShowMessage(value) {
-        this._messageVisible = value;
+    set ShowSearch(value) {
+        this._showSearch = toBoolean(value);
     }
-    /**
-     * The message text to be displayed in the card.
-    */
-    set Message(value) {
-        this._message = value;
+    get ShowSearch() {
+        return this._showSearch;
     }
-    /**
-     * Indicates whether the loading indicator is shown in the card or not.
-    */
-    set Loading(value) {
-        this._isLoading = value;
+    set Tags(value) {
+        const isTags = toBoolean(value);
+        this._isTags = isTags;
+        this.Multiple = isTags;
     }
-    /**
-     * The timeout duration for the loading indicator (in milliseconds).
-     * If set to 0, the loading indicator will be displayed indefinitely until manually dismissed.
-     * Default: 0
-    */
-    set TimeOut(value) {
-        this._timeout = value;
+    get Tags() {
+        return this._isTags;
     }
-    /**
-     * The border style of the card.
-    */
-    set CardBorderStyle(value) {
-        this._card_border_style = value;
+    set Disabled(value) {
+        this._disabled = toBoolean(value);
+        this.closeDropDown();
+        this.setClassMap();
     }
-    // Output properties
-    /**
-     * Event emitted when the refresh button is clicked.
-    */
-    onRefresh = new EventEmitter();
-    // Other methods and lifecycle hooks
-    /**
-     * Toggles the collapsed state of the card.
-    */
-    toggle() {
-        this._isCollapsed = this._isCollapsed === true ? false : true;
+    get Disabled() {
+        return this._disabled;
     }
-    /**
-     * Maximizes or restores the card to its original position.
-    */
-    maximize() {
-        let nativeElement = this._hostContent.nativeElement;
-        if (this._isMaximixed) {
-            this._isMaximixed = false;
-            nativeElement.style.left = null;
-            nativeElement.style.top = null;
+    set Open(value) {
+        const isOpen = toBoolean(value);
+        if (this._isOpen === isOpen) {
+            return;
         }
-        else {
-            this._isMaximixed = true;
-            let pagecontainer = document.querySelector(".content") ?? 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";
+        if (isOpen) {
+            this.scrollToActive();
+            this._setTriggerWidth();
+        }
+        this._isOpen = isOpen;
+        this.OpenChange.emit(this._isOpen);
+        this.setClassMap();
+        if (this._isOpen) {
+            setTimeout(() => {
+                this.checkDropDownScroll();
+            });
         }
     }
-    /**
-     * Dismisses the message in the card.
-    */
-    alertDismiss() {
-        this._messageVisible = false;
+    get Open() {
+        return this._isOpen;
     }
-    /**
-     * Triggers the refresh action of the card.
-    */
-    refresh() {
-        if (!this._isLoading) {
-            this._isLoading = true;
-            this.onRefresh.emit();
+    /** new -option insert or new tags insert */
+    // @ts-ignore
+    addOption = option => {
+        this._options.push(option);
+        if (!this._isTags) {
+            if (option.Value) {
+                this.updateSelectedOption(this._value);
+            }
+            else {
+                this.forceUpdateSelectedOption(this._value);
+            }
         }
-        if (this._timeout > 0) {
-            setTimeout(() => {
-                this._isLoading = false;
-            }, this._timeout);
+    };
+    /** -option remove or tags remove */
+    removeOption(option) {
+        this._options.splice(this._options.indexOf(option), 1);
+        if (!this._isTags) {
+            this.forceUpdateSelectedOption(this._value);
         }
     }
-    /**
-     * Closes the card.
-    */
-    close() {
-        this._close_card = true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: pgCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: pgCard, selector: "pgcard", inputs: { Title: "Title", Type: "Type", MinimalHeader: "MinimalHeader", ProgressType: "ProgressType", ProgressColor: "ProgressColor", Refresh: "Refresh", RefreshColor: "RefreshColor", Maximize: "Maximize", Close: "Close", Toggle: "Toggle", HeaderClass: "HeaderClass", BodyClass: "BodyClass", AdditionalClasses: "AdditionalClasses", Controls: "Controls", ShowMessage: "ShowMessage", Message: "Message", Loading: "Loading", TimeOut: "TimeOut", CardBorderStyle: "CardBorderStyle" }, outputs: { onRefresh: "onRefresh" }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }, { propertyName: "CardExtraControls", first: true, predicate: ["CardExtraControls"], descendants: true }], viewQueries: [{ propertyName: "_hostContent", first: true, predicate: ["hostContent"], descendants: true }, { propertyName: "minimalCircleLoading", first: true, predicate: ["minimalCircleLoading"], descendants: true }, { propertyName: "minimalCircleLoadingTrigger", first: true, predicate: ["minimalCircleLoadingTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"card card-{{ _type }} {{ _additionalClasses }}\" *ngIf=\"!_close_card\" [class.card-collapsed]=\"_isCollapsed\"\r\n  [class.card-maximized]=\"_isMaximixed\" #hostContent class=\"col-sm-12 col-md-6 col-lg-4\"\r\n  [ngStyle]=\"{'border': _card_border_style}\">\r\n  <div class=\"card-header {{ _extraHeaderClass }}\">\r\n    <div class=\"card-title\">\r\n      <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n    </div>\r\n    <div class=\"card-controls\" *ngIf=\"_showTools == true\">\r\n      <ng-template [ngTemplateOutlet]=\"CardExtraControls\"></ng-template>\r\n      <ul *ngIf=\"_minimalHeader == false; else minimalBlock\">\r\n        <li *ngIf=\"_toggle == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-collapse\" (click)=\"toggle()\"><i\r\n              class=\"pg pg-arrow_maximize\" [class.pg-arrow_minimize]=\"_isCollapsed\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_refresh == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-refresh\" (click)=\"refresh()\"><i\r\n              class=\"card-icon card-icon-refresh\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_maximize == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-maximize\" (click)=\"maximize()\"><i\r\n              class=\"card-icon card-icon-maximize\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_close == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-close\" (click)=\"close()\"><i\r\n              class=\"card-icon card-icon-close\"></i></a>\r\n        </li>\r\n      </ul>\r\n       <!-- <ng-template #minimalBlock>\r\n        <ul>\r\n          <li>\r\n            <a href=\"javascript:void(0);\" (click)=\"refresh()\" class=\"card-refresh minimal\"\r\n              [class.refreshing]=\"_isLoading\">\r\n              <i #minimalCircleLoadingTrigger class=\"card-icon card-icon-refresh-lg-{{\r\n                  _refreshColor == 'light' ? 'white' : 'master'\r\n                }}\" [class.fade]=\"_isLoading\"></i>\r\n             <i #minimalCircleLoading class=\"card-icon-refresh-lg-white-animated\"\r\n                style=\"position: absolute;top:0;left:0\" [class.active]=\"_isLoading\"\r\n                [class.hide]=\"_isLoading != true\"></i>\r\n            </a>\r\n          </li>\r\n        </ul>\r\n      </ng-template> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"card-body {{ _extraBodyClass }}\" [@collapseState]=\"_isCollapsed == true ? 'inactive' : 'active'\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"_messageVisible == true\" class=\"pgn-wrapper\" data-position=\"top\">\r\n    <div class=\"pgn pgn-bar push-on-sidebar-open\">\r\n      <div class=\"alert alert-danger\">\r\n        <span>{{ _message }}</span><button class=\"close\" (click)=\"alertDismiss()\" type=\"button\">\r\n          <span aria-hidden=\"true\">\u00D7</span><span class=\"sr-only\">{{ 'Close' }}</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"_messageVisible == true\" class=\"card-progress\" [style.backgroundColor]=\"\r\n      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'\r\n    \" style=\" display: block;\"></div>\r\n  <div [@fadeAnimation]=\"_isLoading\" class=\"card-progress\" [style.backgroundColor]=\"\r\n      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'\r\n    \" style=\"display: block;pointer-events: none\">\r\n    <mefdev-progress *ngIf=\"_minimalHeader == false\" type=\"{{ _progressType }}\" color=\"{{ _progressColor }}\"\r\n      indeterminate=\"true\" class=\"\"></mefdev-progress>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MefDevProgressComponent, selector: "mefdev-progress", inputs: ["type", "color", "thick", "indeterminate", "value"] }], animations: [
-            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: "16.1.6", 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
-            }] } });
-
-/**
-  * Component for displaying a card with a title, image, and description.
-  *
-  * Example of usage:
-  *
-  * ```
-  * <mefdev-card>
-  *   <ng-template #card_title>
-  *     <!-- Content for the card title -->
-  *   </ng-template>
-  *   <ng-template #card_footer>
-  *     <!-- Content for the card footer -->
-  *   </ng-template>
-  * </mefdev-card>
-  * ```
-  *
-  * <example-url>https://mef.dev/ui_kit_demo/view/card</example-url>
-  */
-class CardComponent {
-    router;
-    /**
-    * The template reference to the content of the card title.
-    *
-    * @usageNotes
-    * ```
-    * <mefdev-card>
-    *   <ng-template #card_title>
-    *     <!-- Content for the card title -->
-    *   </ng-template>
-    * </mefdev-card>
-    * ```
-     */
-    card_title;
-    /**
-     * The template reference to the content of the card footer.
-     * @usageNotes
-     * ```
-     * <mefdev-card>
-     *   <ng-template #card_footer>
-     *     <!-- Content for the card footer -->
-     *   </ng-template>
-     * </mefdev-card>
-     * ```
-     */
-    card_footer;
-    /**
-     * The type of the card.
-     * @usageNotes
-     * ```
-     * <mefdev-card [card_type] = "'type'"></mefdev-card>
-     * ```
-     */
-    card_type;
-    /**
-     * The path to the image.
-     * @usageNotes
-     * ```
-     * <mefdev-card [img] = "'img/path/img.png'"></mefdev-card>
-     * ```
-     */
-    img;
-    /**
-     * The path, where user goes after click at the image.
-     * @usageNotes
-     * ```
-     * <mefdev-card [imgUrl] = "'Img.url'"></mefdev-card>
-     * ```
-     */
-    imgUrl;
-    /**
-     * The description of the card.
-     * @usageNotes
-     * ```
-     * <mefdev-card [description] = "'description'"></mefdev-card>
-     * ```
-     */
-    description;
-    constructor(router) {
-        this.router = router;
+    /** dropdown position changed */
+    onPositionChange(position) {
+        this._dropDownPosition = position.connectionPair.originY;
     }
-    ngOnInit() {
+    compositionStart() {
+        this._composing = true;
     }
-    /**
-     * Event handler for image click.
-     * Navigates to the specified URL.
-     */
-    imgClick() {
-        this.router.navigate(['/', this.imgUrl.toString()]);
+    compositionEnd() {
+        this._composing = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardComponent, selector: "mefdev-card", inputs: { card_type: "card_type", img: "img", imgUrl: "imgUrl", description: "description" }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }, { propertyName: "card_footer", first: true, predicate: ["card_footer"], descendants: true }], ngImport: i0, template: "\r\n    <pgcard\r\n    MinimalHeader=\"true\"\r\n    TimeOut=\"2500\"\r\n    [Refresh]=\"false\"\r\n    [Close]=\"false\">\r\n\r\n      <ng-template #CardTitle>\r\n        <ng-template class=\"card-title body-1\" [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n      </ng-template>\r\n\r\n      <div class=\"plugin-type\">\r\n        {{ card_type }}\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"m-l-2 card-description\">\r\n            <div *ngIf=\"!description || description == ''\" class=\"card-no-description\"> {{'No plugin description'}}</div>\r\n            <p>\r\n              {{description}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 mt-3 text-center card-img\"\r\n        [ngStyle]=\"{'background-color': img ? 'transparent' : '#fff'}\">\r\n          <div *ngIf=\"!img || img == ''\" >\r\n            <img src=\"assets/images/md_icon.png\"\r\n            style=\"max-width: 110px; max-height: 110px;\"/>\r\n          </div>\r\n          <div *ngIf=\"img\" >\r\n            <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n              style=\"max-width: 260px; max-height: 150px;\"\r\n              onclick=\"imgClick()\"\r\n            />\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row mb-3 mt-3\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </pgcard>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,.plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,::ng-deep .card-title span,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,.card-description,.card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-default{background-color:#eaeaea;border-radius:5px}.card-header{height:72px}::ng-deep .card-title{width:70%}.plugin-type{right:20px;top:25px;position:absolute;background-color:#cf0106;border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}.card-description{height:40px;overflow-y:clip;color:#4d4d4d}.card-no-description{overflow-y:clip;height:60px;color:#929292}.card-img{padding:0;height:130px;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: pgCard, selector: "pgcard", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-card', template: "\r\n    <pgcard\r\n    MinimalHeader=\"true\"\r\n    TimeOut=\"2500\"\r\n    [Refresh]=\"false\"\r\n    [Close]=\"false\">\r\n\r\n      <ng-template #CardTitle>\r\n        <ng-template class=\"card-title body-1\" [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n      </ng-template>\r\n\r\n      <div class=\"plugin-type\">\r\n        {{ card_type }}\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"m-l-2 card-description\">\r\n            <div *ngIf=\"!description || description == ''\" class=\"card-no-description\"> {{'No plugin description'}}</div>\r\n            <p>\r\n              {{description}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 mt-3 text-center card-img\"\r\n        [ngStyle]=\"{'background-color': img ? 'transparent' : '#fff'}\">\r\n          <div *ngIf=\"!img || img == ''\" >\r\n            <img src=\"assets/images/md_icon.png\"\r\n            style=\"max-width: 110px; max-height: 110px;\"/>\r\n          </div>\r\n          <div *ngIf=\"img\" >\r\n            <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n              style=\"max-width: 260px; max-height: 150px;\"\r\n              onclick=\"imgClick()\"\r\n            />\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row mb-3 mt-3\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </pgcard>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,.plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,::ng-deep .card-title span,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,.card-description,.card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-default{background-color:#eaeaea;border-radius:5px}.card-header{height:72px}::ng-deep .card-title{width:70%}.plugin-type{right:20px;top:25px;position:absolute;background-color:#cf0106;border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}.card-description{height:40px;overflow-y:clip;color:#4d4d4d}.card-no-description{overflow-y:clip;height:60px;color:#929292}.card-img{padding:0;height:130px;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"] }]
-        }], 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 = {}));
-
-/**
-* Component for displaying a long card with a title, parameters, and description.
-*
-* Example of usage:
-*
-* ```
-* <medev-card-long
-*     [type_text]="'Type Text'"
-*     [type_color]="CartTypeColors.RED"
-*     [img]="'path/to/image.jpg'"
-*     [imgUrl]="'path/to/image'"
-*     [description]="'Card description'">
-*
-*     <ng-template #title>
-*       <!-- Content for the card title -->
-*     </ng-template>
-
-*     <ng-template #params>
-*       <!-- Content for the card parameters -->
-*     </ng-template>
-
-*     <ng-template #second_col>
-*       <!-- Content for the second column -->
-*     </ng-template>
-
-*     <ng-template #third_col>
-*       <!-- Content for the third column -->
-*     </ng-template>
-* </medev-card-long>
-* ```
-*
-* <example-url>https://mef.dev/ui_kit_demo/view/card/card-long</example-url>
-*/
-class CardLongComponent {
-    router;
-    /**
-     * Template for displaying the title of the card.
-      * ```
-      * <medev-card-long>
-      *   <ng-template #title>
-      *     <!-- Content for the card title -->
-      *   </ng-template>
-      * </medev-card-long>
-      * ```
-     */
-    title;
-    /**
-   * Template for displaying the parameters of the card.
-    * ```
-    * <medev-card-long>
-    *   <ng-template #params>
-    *     <!-- Content for the card params -->
-    *   </ng-template>
-    * </medev-card-long>
-    * ```
-   */
-    params;
-    /**
-      * Template for displaying the content of the second column.
-      * ```
-      * <medev-card-long>
-      *   <ng-template #second_col>
-      *     <!-- Content for the card second column -->
-      *   </ng-template>
-      * </medev-card-long>
-      * ```
-     */
-    second_col;
-    /**
-      * Template for displaying the content of the third column.
-      * ```
-      * <medev-card-long>
-      *   <ng-template #third_col>
-      *     <!-- Content for the card third column -->
-      *   </ng-template>
-      * </medev-card-long>
-      * ```
-     */
-    third_col;
-    /**
-     * The text for the card type.
-     * @usageNotes
-     * ```
-     * <medev-card-long type_text = "'Type'"></<medev-card-long>
-     * ```
-     */
-    type_text;
-    /**
-     * The color of the card type.
-     * @usageNotes
-     * ```
-     * <medev-card-long type_color = "'RED'"></<medev-card-long>
-     * ```
-     * Colors: RED, UNSET, GREEN
-     
-     */
-    type_color = CartTypeColors.UNSET;
-    /**
-     * The path to the image.
-     * @usageNotes
-     * ```
-     * <mefdev-card-long [img] = "'img/path/img.png'"></mefdev-card-long>
-     * ```
-     */
-    img;
-    /**
-    * The path, where user goes after click at the image.
-    * @usageNotes
-    * ```
-    * <mefdev-card-long [imgUrl] = "'Img.url'"></mefdev-card-long>
-    * ```
-    */
-    imgUrl;
-    /**
-     * The description of the card.
-     * @usageNotes
-     * ```
-     * <mefdev-card-long [description] = "'description'"></mefdev-card-long>
-     * ```
-     */
-    description;
-    constructor(router) {
-        this.router = router;
+    /** 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);
+    }
+    /** cancel select multiple option */ // @ts-ignore
+    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();
+        }
+    };
+    /** 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();
+                });
+            }
+        }
     }
-    ngOnInit() {
+    closeDropDown() {
+        if (!this.Open) {
+            return;
+        }
+        this.onTouched();
+        if (this.Multiple) {
+            this._renderer.removeStyle(this.searchInputElementRef.nativeElement, "width");
+        }
+        this.clearSearchText();
+        this.Open = false;
     }
-    /**
-     * Event handler for image click.
-     * Navigates to the specified URL.
-     */
-    imgClick() {
-        this.router.navigate(['/', this.imgUrl.toString()]);
+    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);
+        }
+    }
+    constructor(_elementRef, _renderer, cDRef) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this.cDRef = cDRef;
+        this._el = this._elementRef.nativeElement;
+    }
+    ngAfterContentInit() {
+        if (this._value != null) {
+            this.flushComponentState();
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardLongComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardLongComponent, selector: "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;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,:host::ng-deep .card-title span,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,:host::ng-deep .plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,:host::ng-deep .card-description,:host::ng-deep .card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .params-block .row{margin-top:.75em}:host::ng-deep .params-block .row:last-child{margin-bottom:.75em}:host::ng-deep .card-col{min-height:220px}:host::ng-deep .header-link{opacity:1}:host::ng-deep .card-default{background-color:#f3f3f3;border-radius:5px}:host::ng-deep .card-title{width:80%;color:#000}:host::ng-deep .plugin-type{border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}:host::ng-deep .card-description{height:40px;overflow-y:clip;color:#4d4d4d}:host::ng-deep .card-no-description{overflow-y:clip;height:60px;color:#929292}:host::ng-deep .card-img{padding:0;height:130px;background-color:#fff;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: pgCard, selector: "pgcard", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,:host::ng-deep .card-title span,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,:host::ng-deep .plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,:host::ng-deep .card-description,:host::ng-deep .card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .params-block .row{margin-top:.75em}:host::ng-deep .params-block .row:last-child{margin-bottom:.75em}:host::ng-deep .card-col{min-height:220px}:host::ng-deep .header-link{opacity:1}:host::ng-deep .card-default{background-color:#f3f3f3;border-radius:5px}:host::ng-deep .card-title{width:80%;color:#000}:host::ng-deep .plugin-type{border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}:host::ng-deep .card-description{height:40px;overflow-y:clip;color:#4d4d4d}:host::ng-deep .card-no-description{overflow-y:clip;height:60px;color:#929292}:host::ng-deep .card-img{padding:0;height:130px;background-color:#fff;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { title: [{
-                type: ContentChild,
-                args: ["title"]
-            }], 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
-            }] } });
-
-/**
-  * Component for displaying a simple card with a title.
-  *
-  * Example of usage:
-  *```
-  * <medev-card-simple [disabled]="true">
-  *   <ng-template #card_title>
-  *     <!-- Content for the card title -->
-  *   </ng-template>
-  * </medev-card-simple>
-  *```
-  *
-  * <example-url>https://mef.dev/ui_kit_demo/view/card/card-simple</example-url>
-  */
-class CardSimpleComponent {
-    /**
-     * Determines whether the card is disabled or not.
-     */
-    isDisabled = false;
-    /**
-     * Template for displaying the title of the card.
-     *```
-     * <medev-card-simple>
-     *   <ng-template #card_title>
-     *     <h3>Card Title</h3>
-     *   </ng-template>
-     * </medev-card-simple>
-     *```
-     */
-    card_title;
-    constructor() { }
     ngOnInit() {
+        this.updateFilterOption();
+        this.setClassMap();
+        this.setDropDownClassMap();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardSimpleComponent, selector: "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: "16.1.6", 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());
+    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);
+                    });
+                }
             }
-            if (_options.length) {
-                return _options;
+        }
+    }
+    _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 {
-                return [
-                    {
-                        Value: value.value,
-                        _value: value.value,
-                        Disabled: value.disabled,
-                        _disabled: value.disabled,
-                        Label: value.notFoundContent,
-                        _label: value.notFoundContent
-                    }
-                ];
+                this.updateSelectedOption(value);
             }
         }
         else {
-            return options;
+            if (value) {
+                if (value.length === 0) {
+                    this.clearAllSelectedOption(emitChange);
+                }
+                else {
+                    this.updateSelectedOption(value, true);
+                }
+            }
+            else if (value == null) {
+                this.clearAllSelectedOption(emitChange);
+            }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: OptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: OptionPipe, name: "OptionPipe" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevSelectComponent, selector: "mefdev-select", inputs: { Filter: "Filter", MaxMultiple: "MaxMultiple", FirstDefault: "FirstDefault", AllowClear: "AllowClear", KeepUnListOptions: "KeepUnListOptions", Mode: "Mode", Multiple: "Multiple", PlaceHolder: "PlaceHolder", NotFoundContent: "NotFoundContent", Size: "Size", ShowSearch: "ShowSearch", Tags: "Tags", Disabled: "Disabled", Open: "Open" }, outputs: { SearchChange: "SearchChange", change: "change", OpenChange: "OpenChange", ScrollToBottom: "ScrollToBottom" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
+            {
+                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\r\n    <!-- \u0423\u0432\u0435\u0441\u044C \u0441\u0435\u043B\u0435\u043A\u0442-->\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  <!--C\u043F\u0438\u0441\u043E\u043A options-->\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\r\n\r\n    <!--\u041C\u0443\u043B\u044C\u0442\u0438\u0441\u0435\u043B\u0435\u043A\u0442-->\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: "16.1.6", ngImport: i0, type: OptionPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: "OptionPipe" }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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\r\n    <!-- \u0423\u0432\u0435\u0441\u044C \u0441\u0435\u043B\u0435\u043A\u0442-->\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  <!--C\u043F\u0438\u0441\u043E\u043A options-->\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\r\n\r\n    <!--\u041C\u0443\u043B\u044C\u0442\u0438\u0441\u0435\u043B\u0435\u043A\u0442-->\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"]]
+            }] } });
 
 /**
- * complex but work well
- * TODO: rebuild latter
+ * @skipTemplateDoc true
+ * Component for representing an option in a dropdown list.
+ *
+ *```
+ * <mefdev-select>
+ * <mefdev-option Value="1" Label="Option 1"></mefdev-option>
+ * <mefdev-option Value="2" Label="Option 2"></mefdev-option>
+ * <mefdev-option Value="3" Label="Option 3"></mefdev-option>
+ * </mefdev-select>
+ *```
+ *
  */
-/**
-  * Example of usage:
-  * <example-url>https://mef.dev/ui_kit_demo/view/select</example-url>
-  */
-class MefDevSelectComponent {
-    _elementRef;
-    _renderer;
-    cDRef;
-    _allowClear = false;
+class MefDevOptionComponent {
+    _Select;
     _disabled = false;
-    _isTags = false;
-    _isMultiple = false;
-    _keepUnListOptions = false;
-    _showSearch = false;
-    _el;
-    _isOpen = false;
-    _prefixCls = "pg-select";
-    _classList = [];
-    _dropDownClassMap;
-    _dropDownPrefixCls = `${this._prefixCls}-dropdown`;
-    _selectionClassMap;
-    _selectionPrefixCls = `${this._prefixCls}-selection`;
-    _size;
     _value;
-    _placeholder = "placeholder";
-    _notFoundContent = "No Content";
-    _searchText = "";
-    _triggerWidth = 0;
-    _selectedOption;
-    _operatingMultipleOption;
-    _selectedOptions = new Set();
-    _options = [];
-    _cacheOptions = [];
-    _filterOptions = [];
-    _tagsOptions = [];
-    _activeFilterOption;
-    _isMultiInit = false;
-    _dropDownPosition = "bottom";
-    _composing = false;
-    _mode;
-    // ngModel Access
-    onChange = () => null;
-    onTouched = () => null;
-    searchInputElementRef;
-    trigger;
-    dropdownUl;
-    SearchChange = new EventEmitter();
-    change = new EventEmitter();
-    OpenChange = new EventEmitter();
-    ScrollToBottom = new EventEmitter();
-    Filter = true;
-    MaxMultiple = Infinity;
-    FirstDefault = false;
-    _cdkOverlay;
-    set AllowClear(value) {
-        this._allowClear = toBoolean(value);
+    _label;
+    /**
+    * Template for the content of the option.
+    */
+    OptionTemplate;
+    /**
+ * The value of the option.
+ */
+    set Value(value) {
+        if (this._value === value) {
+            return;
+        }
+        this._value = value;
     }
-    get AllowClear() {
-        return this._allowClear;
+    get Value() {
+        return this._value;
     }
-    set KeepUnListOptions(value) {
-        this._keepUnListOptions = toBoolean(value);
+    /**
+   * The label of the option.
+   */
+    set Label(value) {
+        if (this._label === value) {
+            return;
+        }
+        this._label = value;
     }
-    get KeepUnListOptions() {
-        return this._keepUnListOptions;
+    get Label() {
+        return this._label;
     }
-    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;
-        }
+    /**
+   * Indicates whether the option is disabled.
+   */
+    set Disabled(value) {
+        this._disabled = toBoolean(value);
     }
-    set Multiple(value) {
-        this._isMultiple = toBoolean(value);
-        if (this._isMultiple) {
-            this.ShowSearch = true;
-        }
+    get Disabled() {
+        return this._disabled;
     }
-    get Multiple() {
-        return this._isMultiple;
+    constructor(_Select) {
+        this._Select = _Select;
     }
-    set PlaceHolder(value) {
-        this._placeholder = value;
+    /**
+   * Initialization lifecycle hook.
+   * Adds the option to the dropdown list.
+   */
+    ngOnInit() {
+        this._Select.addOption(this);
     }
-    get PlaceHolder() {
-        return this._placeholder;
+    /**
+   * Destruction lifecycle hook.
+   * Removes the option from the dropdown list.
+   */
+    ngOnDestroy() {
+        this._Select.removeOption(this);
     }
-    set NotFoundContent(value) {
-        this._notFoundContent = value;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevOptionComponent, deps: [{ token: MefDevSelectComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevOptionComponent, selector: "mefdev-option", inputs: { Value: "Value", Label: "Label", Disabled: "Disabled" }, queries: [{ propertyName: "OptionTemplate", first: true, predicate: ["OptionTemplate"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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
+            }] } });
+
+/**
+  * Datepicker Component for selecting dates.
+  *
+  * This component allows users to pick a date from a calendar interface.
+  * It supports various configuration options such as language, date format, and date range.
+  *
+  * @example
+  * <mefdev-datepicker
+  *   [lang]="'uk'"
+  *   [dateFormat]="'dd/MM/yyyy'"
+  *   [range]="{startYear: 1900, toYear: 300}"
+  *   [disabled]="false"
+  *   (dateChanged)="onDateChanged($event)"
+  *   [topOffset]="'20'"
+  *   [leftOffset]="'10'">
+  * </mefdev-datepicker>
+  *
+  * <example-url>https://mef.dev/ui_kit_demo/view/utils/datepicker</example-url>
+*/
+class DatepickerComponent {
+    datePipe;
+    elementRef;
+    /**
+     * Flag to determine if the calendar is open or closed.
+     * Default value: false (closed).
+    */
+    isCalendarOpen = false;
+    /**
+     * Flag to determine if the component is in editing mode.
+     * Default value: false (not in editing mode).
+    */
+    isEditing = false;
+    /**
+     * The currently selected date.
+     * Default value: Today's date.
+    */
+    selectedDate = new Date();
+    /**
+    * The formatted date for display in the input.
+    * Default value: Formatted representation of the selected date.
+   */
+    formattedDate;
+    /**
+    * Track the edited date separately when in editing mode.
+    * Default value: An empty string.
+   */
+    editedDate = '';
+    /**
+     * Flag to determine if the month dropdown is open or closed.
+     * Default value: true (open).
+    */
+    isMonthDropdownOpen = true;
+    /**
+     * Flag to determine if the year dropdown is open or closed.
+     * Default value: true (open).
+    */
+    isYearDropdownOpen = true;
+    /**
+     * The selected month (0-11).
+     * Default value: The month of the selected date.
+    */
+    selectedDateMonth = this.selectedDate.getMonth();
+    /**
+     * The selected year.
+     * Default value: The year of the selected date.
+    */
+    selectedDateYear = this.selectedDate.getFullYear();
+    /**
+    * An array of years for the year dropdown.
+    * Default value: An array of years within the specified range.
+   */
+    years;
+    /**
+     * The language/locale for the datepicker.
+     * Default value: 'en' (English).
+     * @example
+     * <mefdev-datepicker
+     *   [lang] = "'uk'">
+     * </mefdev-datepicker>
+    */
+    lang = 'en';
+    /**
+     * The date format for displaying the selected date.
+     * Default value: 'EEE MMM dd yyyy'.
+     * @example
+     * <mefdev-datepicker
+     *   [dateFormat]="'dd/MM/yyyy'">
+     * </mefdev-datepicker>
+    */
+    dateFormat = 'EEE MMM dd yyyy';
+    /**
+     * The range of years available in the year dropdown.
+     * Default value: { startYear: 1900, toYear: 300 }.
+     * @example
+     * <mefdev-datepicker
+     *   [range]="{startYear: 1900, toYear: 300}">
+     * </mefdev-datepicker>
+    */
+    yearsRange = { startYear: 1900, toYear: 300 };
+    /**
+     * Whether the datepicker is disabled or not.
+     * Default value: false (enabled).
+     * @example
+     * <mefdev-datepicker
+     *   [disabled]="false">
+     * </mefdev-datepicker>
+    */
+    disabled = false;
+    /**
+     * The top offset for positioning the datepicker.
+     * Default value: '20'.
+     * @example
+     * <mefdev-datepicker
+     *   [topOffset]="'20'">
+     * </mefdev-datepicker>
+    */
+    topOffset = '20';
+    /**
+     * The left offset for positioning the datepicker.
+     * Default value: '10'.
+     * @example
+     * <mefdev-datepicker
+     *   [leftOffset]="'10'">
+     * </mefdev-datepicker>
+    */
+    leftOffset = '10'; //Default value
+    /**
+     * Event emitted when the selected date in the datepicker changes.
+     * It emits a `Date` object representing the selected date.
+     * @example
+     * <mefdev-datepicker
+     *   (dateChanged)="onDateChanged($event)">
+     * </mefdev-datepicker>
+    */
+    dateChanged = new EventEmitter();
+    /**
+     * Regular expression to validate user input for date in the format "dd/MM/yyyy".
+     * - The day (dd) should be between 01 and 31.
+     * - The month (MM) should be between 01 and 12.
+     * - The year (yyyy) should be a 4-digit number.
+    */
+    dateRegExp = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
+    /**
+     * The string entered by the user for date input.
+     * This variable stores the user's input as they type in the date field.
+    */
+    userInput = '';
+    /**
+     * Host listener for document click events to handle calendar interaction.
+     * This function checks if a click event occurred within the calendar or input elements.
+     * - If the click occurred within the calendar, no action is taken.
+     * - If the click occurred within the input element and the component is not in editing mode,
+     *   it opens the calendar.
+     * - If the click occurred outside the calendar and input, it closes the calendar.
+     * @param event The MouseEvent object representing the click event.
+    */
+    onClick(event) {
+        const targetElement = event.target;
+        const calendarElement = this.elementRef.nativeElement.querySelector('.calendar');
+        const inputElement = this.elementRef.nativeElement.querySelector('input');
+        if (calendarElement && calendarElement.contains(targetElement)) {
+            // Клік відбувся на елементі календаря, нічого не робимо
+            return;
+        }
+        if (inputElement && inputElement.contains(targetElement) && !this.isEditing) {
+            // Клік відбувся на елементі input, відкриваємо календар
+            this.isCalendarOpen = true;
+        }
+        else {
+            // Клік відбувся поза календарем та input, закриваємо календар
+            this.isCalendarOpen = false;
+        }
     }
-    get NotFoundContent() {
-        return this._notFoundContent;
+    /**
+     * Constructor for the DatepickerComponent class.
+     * @param datePipe A service for formatting and parsing dates.
+     * @param elementRef A reference to the element on which this component is attached.
+     * It is used to access DOM elements.
+    */
+    constructor(datePipe, elementRef) {
+        this.datePipe = datePipe;
+        this.elementRef = elementRef;
+        this.updateInputValue();
     }
-    set Size(value) {
-        // @ts-ignore
-        this._size = { large: "lg", small: "sm" }[value];
-        this.setClassMap();
+    /**
+     * Lifecycle hook called after the component is initialized.
+     * It initializes the years for the year select dropdown.
+    */
+    ngOnInit() {
+        this.initializeYears();
     }
-    get Size() {
-        return this._size;
+    /**
+     * Lifecycle hook called whenever the input properties of the component change.
+     * It updates the input value.
+    */
+    ngOnChanges() {
+        this.updateInputValue();
     }
-    set ShowSearch(value) {
-        this._showSearch = toBoolean(value);
+    /**
+     * An array of month names based on the selected language.
+     * It provides localized month names for display in the datepicker.
+    */
+    get months() {
+        return this.getMonthList(this.lang);
     }
-    get ShowSearch() {
-        return this._showSearch;
+    /**
+     * An array of weekday names based on the selected language.
+     * It provides localized weekday names for display in the datepicker.
+    */
+    get weekdays() {
+        return this.getWeekdayList(this.lang);
     }
-    set Tags(value) {
-        const isTags = toBoolean(value);
-        this._isTags = isTags;
-        this.Multiple = isTags;
+    /**
+     * Initialize the list of years to be displayed in the year dropdown.
+     * This method populates the 'years' array with a range of years based on the provided 'yearsRange' configuration.
+     * @example
+     * ```
+     * // Assuming 'yearsRange' is { startYear: 1900, toYear: 300 }
+     * // After calling initializeYears(), 'years' might contain [1900, 1901, ..., 300]
+     * this.initializeYears();
+     * ```
+    */
+    initializeYears() {
+        this.years = Array.from({ length: this.yearsRange.toYear }, (_, index) => index + this.yearsRange.startYear);
     }
-    get Tags() {
-        return this._isTags;
+    /**
+     * Toggle the editing mode for the date input. When enabled, the user can edit the date directly in the input field.
+     * This method sets the 'isEditing' flag to true and stores the current formatted date for editing.
+    */
+    toggleEdit() {
+        this.isEditing = true;
+        this.editedDate = this.formatSelectedDate(); // Store the current formatted date for editing
     }
-    set Disabled(value) {
-        this._disabled = toBoolean(value);
-        this.closeDropDown();
-        this.setClassMap();
+    /**
+     * Get a list of month names in the specified language and format.
+     * @param locales - An optional parameter specifying the locale or locales to use for formatting.
+     * @param format - The format for month names, either "long" (default) or "short".
+     * @returns An array of month names based on the provided format and locale.
+     * ```
+     * // Get a list of month names in the default language and long format
+     * const months = this.getMonthList(this.lang);
+     * ```
+    */
+    getMonthList(locales, format = "long") {
+        const year = new Date().getFullYear();
+        const monthList = [...Array(12).keys()];
+        const formatter = new Intl.DateTimeFormat(locales, { month: format });
+        const getMonthName = (monthIndex) => formatter.format(new Date(year, monthIndex));
+        return monthList.map(getMonthName);
+    }
+    /**
+     * Get a list of weekday names in the specified language and format.
+     * @param locales - An optional parameter specifying the locale or locales to use for formatting.
+     * @param format - The format for weekday names, either "short" (default) or "long".
+     * @returns An array of weekday names based on the provided format and locale.
+     * ```
+     * // Get a list of weekday names in the default language and short format
+     * const weekdays = this.getWeekdayList();
+     * ```
+    */
+    getWeekdayList(locales, format = "short") {
+        const weekdays = [...Array(7).keys()];
+        const mondayIndex = weekdays.indexOf(0);
+        weekdays.splice(mondayIndex, 1);
+        weekdays.push(0);
+        const formatter = new Intl.DateTimeFormat(locales, { weekday: format });
+        const getWeekdayName = (weekdayIndex) => {
+            return formatter.format(new Date(2023, 9, weekdayIndex + 1));
+        };
+        return weekdays.map(getWeekdayName);
     }
-    get Disabled() {
-        return this._disabled;
+    /**
+     * Toggle the visibility of the calendar component. When called, this method changes the 'isCalendarOpen' flag
+     * to show or hide the calendar interface.
+     * ```
+     * // Toggle the visibility of the calendar
+     * this.toggleCalendar();
+     * ```
+    */
+    toggleCalendar() {
+        this.isCalendarOpen = !this.isCalendarOpen;
     }
-    set Open(value) {
-        const isOpen = toBoolean(value);
-        if (this._isOpen === isOpen) {
-            return;
-        }
-        if (isOpen) {
-            this.scrollToActive();
-            this._setTriggerWidth();
+    /**
+     * Save the edited date input by the user, provided it matches the specified date format.
+     * This method checks if the entered date is in a valid format, disables the editing mode, and applies
+     * the edited date to the 'selectedDate'. It then reformats the selected date and closes the calendar.
+     * ```
+     * // Save the edited date and update the selected date
+     * this.saveEditedDate();
+     * ```
+    */
+    saveEditedDate() {
+        if (this.isDateValid(this.editedDate)) {
+            this.isEditing = false;
+            const [day, month, year] = this.editedDate.split('/');
+            this.selectedDate = new Date(+year, +month - 1, +day);
+            this.formatDate();
+            this.toggleCalendar();
         }
-        this._isOpen = isOpen;
-        this.OpenChange.emit(this._isOpen);
-        this.setClassMap();
-        if (this._isOpen) {
-            setTimeout(() => {
-                this.checkDropDownScroll();
-            });
+    }
+    /**
+      * Handle user input in the editable input field for date editing. This method captures the input value
+      * and stores it in the 'editedDate' variable. If the input matches the valid date format, it updates
+      * 'selectedDateMonth' and 'selectedDateYear' accordingly.
+      * @param event - The input event containing the user's input.
+      * ```
+      * // Handle user input in the editable input field
+      * this.onDateInput(event);
+      * ```
+    */
+    onDateInput(event) {
+        const inputDate = event.target.value;
+        if (this.isDateValid(inputDate)) {
+            this.editedDate = inputDate;
+            const parsedDate = inputDate.split('/');
+            this.selectedDateMonth = +parsedDate[1] - 1;
+            this.selectedDateYear = +parsedDate[2];
         }
     }
-    get Open() {
-        return this._isOpen;
+    /**
+     * Toggle the visibility of the month dropdown in the calendar interface.
+     * This method is used to open or close the dropdown for selecting months.
+     * @param event - The event triggering the toggle action (e.g., a click event).
+     * ```
+     * // Toggle the visibility of the month dropdown
+     * this.toggleMonthDropdown(event);
+     * ```
+    */
+    toggleMonthDropdown(event) {
+        this.isMonthDropdownOpen = !this.isMonthDropdownOpen;
     }
-    /** new -option insert or new tags insert */
-    // @ts-ignore
-    addOption = option => {
-        this._options.push(option);
-        if (!this._isTags) {
-            if (option.Value) {
-                this.updateSelectedOption(this._value);
-            }
-            else {
-                this.forceUpdateSelectedOption(this._value);
-            }
-        }
-    };
-    /** -option remove or tags remove */
-    removeOption(option) {
-        this._options.splice(this._options.indexOf(option), 1);
-        if (!this._isTags) {
-            this.forceUpdateSelectedOption(this._value);
-        }
+    /**
+      * Toggle the visibility of the year dropdown in the calendar interface.
+      * This method is used to open or close the dropdown for selecting years.
+      * @param event - The event triggering the toggle action (e.g., a click event).
+      * ```
+      * // Toggle the visibility of the year dropdown
+      * this.toggleYearDropdown(event);
+      * ```
+    */
+    toggleYearDropdown(event) {
+        this.isYearDropdownOpen = !this.isYearDropdownOpen;
     }
-    /** dropdown position changed */
-    onPositionChange(position) {
-        this._dropDownPosition = position.connectionPair.originY;
+    /**
+     * Handle the change of the selected month in the calendar interface.
+     * This method updates the input value, sets the selected date to the first day of the chosen month,
+     * and recalculates the calendar display accordingly.
+     * ```
+     * // Handle the change of the selected month
+     * this.onMonthChange();
+     * ```
+    */
+    onMonthChange() {
+        this.updateInputValue();
+        this.selectedDate = new Date(this.selectedDateYear, this.selectedDateMonth, 1);
+        this.calculateFirstDayOfCalendar();
     }
-    compositionStart() {
-        this._composing = true;
+    /**
+     * Handle the change of the selected year in the calendar interface.
+     * This method updates the input value, sets the selected date to the first day of the chosen year,
+     * reformats the selected date, and recalculates the calendar display.
+     * ```
+     * // Handle the change of the selected year
+     * this.onYearChange();
+     * ```
+    */
+    onYearChange() {
+        this.updateInputValue();
+        this.selectedDate = new Date(this.selectedDateYear, this.selectedDateMonth, 1);
+        this.formatDate();
+        this.calculateFirstDayOfCalendar();
     }
-    compositionEnd() {
-        this._composing = false;
+    /**
+     * Select a date in the calendar interface and perform necessary updates.
+     * This method sets the selected date, formats it, closes the calendar, and emits a dateChanged event.
+     * It also updates the selected month and year dropdown values.
+     * @param date - The date to be selected in the calendar.
+    */
+    selectDate(date) {
+        this.selectedDate = date;
+        this.formatDate();
+        this.isCalendarOpen = false;
+        this.dateChanged.next(this.selectedDate);
+        this.selectedDateMonth = this.selectedDate.getMonth();
+        this.selectedDateYear = this.selectedDate.getFullYear();
     }
-    /** 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);
+    /**
+     * Format the selected date based on the chosen date format and language.
+     * This method uses the Angular DatePipe to format the selected date and updates the formattedDate variable.
+     * ```
+     * // Format the selected date
+     * this.formatDate();
+     * ```
+    */
+    formatDate() {
+        this.formattedDate = this.datePipe.transform(this.selectedDate, this.dateFormat) || '';
     }
-    /** click dropdown option by user */
-    clickOption(option, $event) {
-        if (!option) {
-            return;
-        }
-        this.chooseOption(option, true, $event);
-        this.clearSearchText();
-        if (!this._isMultiple) {
-            this.Open = false;
-        }
+    /**
+     * Format the selected date based on the chosen date format, language, and locale.
+     * This method uses the Angular DatePipe to format the selected date with the specified language and updates the formatted date as a string.
+     * @returns A formatted date string.
+     * ```
+     * // Format the selected date with language
+     * const formatted = this.formatSelectedDate();
+     * ```
+    */
+    formatSelectedDate() {
+        return this.datePipe.transform(this.selectedDate, this.dateFormat, this.lang) || '';
     }
-    /** 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);
-                }
-            }
-        }
+    /**
+     * Update the input value displayed in the calendar interface.
+     * This method updates the input value to either the edited date or the formatted selected date,
+     * depending on whether the user is in edit mode or not.
+     * ```
+     * // Update the input value
+     * this.updateInputValue();
+     * ```
+    */
+    updateInputValue() {
+        this.formattedDate = this.isEditing ? this.editedDate : this.formatSelectedDate();
     }
-    updateWidth(element, text) {
-        if (text) {
-            /** wait for scroll width change */ // @ts-ignore
-            setTimeout(_ => {
-                this._renderer.setStyle(element, "width", `${element.scrollWidth}px`);
-            });
+    /**
+     * Get an array of arrays representing the days of the current month.
+     * Each sub-array contains the day data for a week, and each day data object includes the date and whether it belongs to the current month.
+     * @returns An array of arrays representing the days of the current month.
+     * ```
+     * // Get an array of arrays representing the days of the current month
+     * const calendar = this.calendarDays;
+     * ```
+    */
+    get calendarDays() {
+        return this.calculateFirstDayOfCalendar();
+    }
+    /**
+     * Get the date of the previous month to display in empty cells of the current month.
+     * This method returns the date of the previous month if the provided date is not in the current month.
+     * If the provided date is in the current month, it returns the date's day as a string.
+     * @param date - The date to evaluate.
+     * @returns The date of the previous month or a day string.
+     * ```
+     * // Get the previous month's date to display in empty cells
+     * const previousMonthDate = this.getPreviousMonthDate(new Date(2023, 8, 1));
+     * ```
+    */
+    getPreviousMonthDate(date) {
+        if (!date) {
+            return '';
+        }
+        const currentDate = new Date();
+        if (date.getMonth() === currentDate.getMonth() && date.getFullYear() === currentDate.getFullYear()) {
+            return date.getDate().toString();
         }
         else {
-            this._renderer.removeStyle(element, "width");
+            return this.datePipe.transform(date, 'dd');
         }
     }
-    /** determine if option in set */
-    isInSet(set, option) {
-        return Array.from(set).find((data) => data.Value === option.Value);
+    /**
+     * Navigate to the previous month in the calendar interface.
+     * This method updates the selectedDate, formats it, and recalculates the first day of the calendar.
+     * ```
+     * // Navigate to the previous month
+     * this.getPreviousMonth();
+     * ```
+    */
+    getPreviousMonth() {
+        const currentMonth = this.selectedDate.getMonth();
+        this.selectedDate = new Date(this.selectedDate.getFullYear(), currentMonth - 1, 1);
+        this.formatDate();
+        this.calculateFirstDayOfCalendar();
     }
-    /** cancel select multiple option */ // @ts-ignore
-    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();
-        }
-    };
-    /** 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();
-        }
+    /**
+     * Navigate to the next month in the calendar interface.
+     * This method updates the selectedDate, formats it, and recalculates the first day of the calendar.
+     * ```
+     * // Navigate to the next month
+     * this.getNextMonth();
+     * ```
+    */
+    getNextMonth() {
+        const currentMonth = this.selectedDate.getMonth();
+        this.selectedDate = new Date(this.selectedDate.getFullYear(), currentMonth + 1, 1);
+        this.formatDate();
+        this.calculateFirstDayOfCalendar();
     }
-    /** 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);
+    /**
+     * Get the number of days in a given month of a specific year.
+     * @param year - The year for which you want to determine the number of days.
+     * @param month - The month (0-based index) for which you want to determine the number of days.
+     * @returns The number of days in the specified month of the given year.
+    */
+    daysInMonth(year, month) {
+        return new Date(year, month + 1, 0).getDate();
     }
-    /** 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);
-                    }
-                });
+    /**
+     * Calculate the structure of days in a month for the calendar display.
+     * This method generates a matrix of day data objects representing the days in the calendar.
+     * Each day data object contains the date and whether it belongs to the current month.
+     * @returns A matrix of day data objects for the calendar display.
+    */
+    calculateFirstDayOfCalendar() {
+        const year = this.selectedDate.getFullYear();
+        const month = this.selectedDate.getMonth();
+        const firstDayOfMonth = new Date(year, month, 1);
+        const firstWeekday = firstDayOfMonth.getDay();
+        const startDay = firstWeekday === 0 ? -5 : 2 - firstWeekday;
+        const calendarDays = [];
+        let currentDay = startDay;
+        for (let i = 0; i < 6; i++) {
+            const week = [];
+            for (let j = 0; j < 7; j++) {
+                const day = new Date(year, month, currentDay);
+                const dayData = {
+                    date: day,
+                    isCurrentMonth: currentDay >= 1 && currentDay <= this.daysInMonth(year, month),
+                };
+                week.push(dayData);
+                currentDay++;
             }
-            else {
-                this._selectedOptions = new Set();
-                selectedOptions.forEach(option => {
-                    this._selectedOptions.add(option);
-                });
+            calendarDays.push(week);
+        }
+        return calendarDays;
+    }
+    /**
+     * Check if a given date is the currently selected date in the calendar.
+     * @param date - The date to check.
+     * @returns `true` if the provided date matches the selected date, otherwise `false`.
+     * ```
+     * // Check if a date is selected
+     * const isSelected = this.isDateSelected(someDate);
+     * ```
+    */
+    isDateSelected(date) {
+        return date.toDateString() === this.selectedDate.toDateString();
+    }
+    /**
+     * Check if a date string is valid based on the specified date format.
+     * @param inputDate - The date string to validate.
+     * @returns `true` if the input date string is valid, otherwise `false`.
+     * ```
+     * // Check if a date string is valid
+     * const isValidDate = this.isDateValid('05/25/2023');
+     * ```
+    */
+    isDateValid(inputDate) {
+        return this.dateRegExp.test(inputDate);
+    }
+    /**
+     * Check if a given date is today's date.
+     * @param date - The date to check.
+     * @returns `true` if the provided date is today's date, otherwise `false`.
+     * ```
+     * // Check if a date is today's date
+     * const isToday = this.isDateToday(someDate);
+     * ```
+    */
+    isDateToday(date) {
+        const today = new Date();
+        return date.toDateString() === today.toDateString();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatepickerComponent, deps: [{ token: i1.DatePipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatepickerComponent, selector: "mefdev-datepicker", inputs: { lang: "lang", dateFormat: "dateFormat", yearsRange: ["range", "yearsRange"], disabled: "disabled", topOffset: "topOffset", leftOffset: "leftOffset" }, outputs: { dateChanged: "dateChanged" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"datepicker-container\"\r\n[class.disabled]=\"disabled\"\r\n>\r\n\r\n  <!-- Input, save & edit buttons -->\r\n    <div class=\"input-container\">\r\n\r\n      <div *ngIf=\"!isEditing\">\r\n\r\n        <input\r\n        type=\"text\"\r\n        (click)=\"toggleCalendar()\"\r\n        [value]=\"formattedDate\"\r\n        [readOnly]=\"true\"\r\n        [disabled]=\"isEditing\"\r\n      >\r\n      </div>\r\n        <!-- Edit -->\r\n        <i class=\"fa fa-pencil-square-o edit-button\" aria-hidden=\"true\" (click)=\"toggleEdit()\"></i> \r\n\r\n        <div *ngIf=\"isEditing\">\r\n            <input\r\n            type=\"text\"\r\n            [value]=\"editedDate\"\r\n            (input)=\"onDateInput($event)\"\r\n            class=\"border-3\"\r\n            (click)=\"toggleCalendar()\"\r\n            >\r\n            <i class=\"fa fa-floppy-o edit-button\" (click)=\"saveEditedDate()\" aria-hidden=\"true\"></i>\r\n     </div>     \r\n    </div>\r\n\r\n<!-- Calendar(Dropdowns, dates) -->\r\n  <div *ngIf=\"isCalendarOpen\" class=\"calendar\" #calendarContainer \r\n  [style.top]=\"topOffset\"\r\n  [style.left]=\"leftOffset\">\r\n    <div class=\"calendar-header\">\r\n        <div class=\"monthButtonContainer\">\r\n            <!-- Month dropdown -->\r\n            <ng-container *ngIf=\"isMonthDropdownOpen; else monthLabel\">\r\n              <mefdev-select    \r\n              class=\"monthDropdown\"\r\n              [(ngModel)]=\"selectedDateMonth\" \r\n              (ngModelChange)=\"onMonthChange()\"\r\n              [PlaceHolder]=\"'month'\"\r\n              >\r\n                <mefdev-option \r\n                *ngFor=\"let month of months; let i = index\" \r\n                [Value]=\"i\"\r\n                [Label] = \"month\" \r\n                \r\n                >{{ month }}</mefdev-option>\r\n              </mefdev-select>\r\n            </ng-container>\r\n            <ng-template #monthLabel>\r\n              <span (click)=\"toggleMonthDropdown($event)\"></span>\r\n            </ng-template>\r\n\r\n            <!-- Year dropdown -->\r\n            <ng-container *ngIf=\"isYearDropdownOpen; else yearLabel\">\r\n              <mefdev-select \r\n              class=\"yearDropdown\" \r\n              [(ngModel)]=\"selectedDateYear\" \r\n              (ngModelChange)=\"onYearChange()\"\r\n              [PlaceHolder]=\"'year'\"\r\n              >\r\n                  <mefdev-option \r\n                  *ngFor=\"let year of years\" \r\n                  [Label] = \"year\" \r\n                  [Value]=\"year\" \r\n                  >{{year}}</mefdev-option>\r\n              </mefdev-select>\r\n            </ng-container>\r\n            <ng-template #yearLabel>\r\n              <span (click)=\"toggleYearDropdown($event)\">{{ selectedDateYear }}</span>\r\n            </ng-template>\r\n           </div>\r\n           <!-- Calendar exit button -->\r\n           <div>\r\n            <i class=\"fa fa-times toggleCalendarButton\" (click)=\"toggleCalendar()\" aria-hidden=\"true\"></i>\r\n            </div>\r\n    </div>\r\n    \r\n    <div class=\"calendar-body\">\r\n      <table>\r\n        <tr>\r\n          <th class=\"align-items-center\" *ngFor=\"let weekday of weekdays\">{{ weekday }}</th>\r\n        </tr>\r\n        <tr *ngFor=\"let week of calendarDays\">\r\n          <td *ngFor=\"let dayData of week\" \r\n              (click)=\"selectDate(dayData.date)\"\r\n              [ngClass]=\"{ 'selected': isDateSelected(dayData.date), 'prev-month': !dayData.isCurrentMonth }\">\r\n\r\n            <span class=\"date\" \r\n              [class.prev-month]=\"!dayData.isCurrentMonth\"\r\n              >\r\n              {{ dayData.date.getDate() }}\r\n            </span>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.datepicker-container{position:relative;display:inline-block}.datepicker-container.disabled{pointer-events:none;opacity:.8}.input-container{position:relative;display:inline-block}.input-container input[type=text]{cursor:pointer;padding:5px;border:1px solid #929292;border-radius:4px}.input-container input[type=text]:hover{border:1px solid #4D4D4D}.input-container .edit-button{position:absolute;top:0;right:0;height:100%;margin:0;padding:5px 10px;background-color:#eaeaea;border:1px solid #929292;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;display:flex;justify-content:center;align-items:center}.calendar{position:absolute;top:35px;left:10%;border:1px solid #929292;background-color:#eaeaea;border-radius:4px;z-index:1}.calendar .calendar-header{background-color:#fff;text-align:center;justify-content:space-between;display:flex;padding:5px 0}.calendar .calendar-header i.fa{display:flex;justify-content:center;align-items:center;width:30px;height:30px;font-size:20px;border-radius:50%;cursor:pointer;background-color:transparent;border:none;color:#cf0106}.calendar .calendar-header .monthButtonContainer{padding-left:10px;height:45px;min-width:140px;display:flex;align-items:center}.calendar .calendar-header .monthDropdown,.calendar .calendar-header .yearDropdown{height:45px;width:105px;cursor:pointer;display:inline-block;padding:6px 5px;border:1px solid #EAEAEA;border-radius:4px;background-color:#fff;color:#4d4d4d}.calendar .calendar-header .monthDropdown{margin:0 8px 0 0;width:130px}.calendar .calendar-header .monthDropdown:hover,.calendar .calendar-header .yearDropdown:hover{border-color:#f3f3f3}.calendar .calendar-body{padding:5px;width:260px}.calendar .calendar-body td{padding:10px;position:relative}.calendar .calendar-body td.selected{position:relative;color:#fff}.calendar .calendar-body td.selected:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:20%;background-color:#cf0106;z-index:-1;width:30px;height:30px;color:#fff;border:1px solid #373737}.calendar .calendar-body td:hover{color:#fff;font-weight:700;background-color:#929292;border-radius:20%;cursor:pointer}.calendar .calendar-body .date{display:flex;justify-content:center}.calendar .calendar-body .date.prev-month{color:#f3f3f3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MefDevOptionComponent, selector: "mefdev-option", inputs: ["Value", "Label", "Disabled"] }, { kind: "component", type: MefDevSelectComponent, selector: "mefdev-select", inputs: ["Filter", "MaxMultiple", "FirstDefault", "AllowClear", "KeepUnListOptions", "Mode", "Multiple", "PlaceHolder", "NotFoundContent", "Size", "ShowSearch", "Tags", "Disabled", "Open"], outputs: ["SearchChange", "change", "OpenChange", "ScrollToBottom"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-datepicker', template: "<div class=\"datepicker-container\"\r\n[class.disabled]=\"disabled\"\r\n>\r\n\r\n  <!-- Input, save & edit buttons -->\r\n    <div class=\"input-container\">\r\n\r\n      <div *ngIf=\"!isEditing\">\r\n\r\n        <input\r\n        type=\"text\"\r\n        (click)=\"toggleCalendar()\"\r\n        [value]=\"formattedDate\"\r\n        [readOnly]=\"true\"\r\n        [disabled]=\"isEditing\"\r\n      >\r\n      </div>\r\n        <!-- Edit -->\r\n        <i class=\"fa fa-pencil-square-o edit-button\" aria-hidden=\"true\" (click)=\"toggleEdit()\"></i> \r\n\r\n        <div *ngIf=\"isEditing\">\r\n            <input\r\n            type=\"text\"\r\n            [value]=\"editedDate\"\r\n            (input)=\"onDateInput($event)\"\r\n            class=\"border-3\"\r\n            (click)=\"toggleCalendar()\"\r\n            >\r\n            <i class=\"fa fa-floppy-o edit-button\" (click)=\"saveEditedDate()\" aria-hidden=\"true\"></i>\r\n     </div>     \r\n    </div>\r\n\r\n<!-- Calendar(Dropdowns, dates) -->\r\n  <div *ngIf=\"isCalendarOpen\" class=\"calendar\" #calendarContainer \r\n  [style.top]=\"topOffset\"\r\n  [style.left]=\"leftOffset\">\r\n    <div class=\"calendar-header\">\r\n        <div class=\"monthButtonContainer\">\r\n            <!-- Month dropdown -->\r\n            <ng-container *ngIf=\"isMonthDropdownOpen; else monthLabel\">\r\n              <mefdev-select    \r\n              class=\"monthDropdown\"\r\n              [(ngModel)]=\"selectedDateMonth\" \r\n              (ngModelChange)=\"onMonthChange()\"\r\n              [PlaceHolder]=\"'month'\"\r\n              >\r\n                <mefdev-option \r\n                *ngFor=\"let month of months; let i = index\" \r\n                [Value]=\"i\"\r\n                [Label] = \"month\" \r\n                \r\n                >{{ month }}</mefdev-option>\r\n              </mefdev-select>\r\n            </ng-container>\r\n            <ng-template #monthLabel>\r\n              <span (click)=\"toggleMonthDropdown($event)\"></span>\r\n            </ng-template>\r\n\r\n            <!-- Year dropdown -->\r\n            <ng-container *ngIf=\"isYearDropdownOpen; else yearLabel\">\r\n              <mefdev-select \r\n              class=\"yearDropdown\" \r\n              [(ngModel)]=\"selectedDateYear\" \r\n              (ngModelChange)=\"onYearChange()\"\r\n              [PlaceHolder]=\"'year'\"\r\n              >\r\n                  <mefdev-option \r\n                  *ngFor=\"let year of years\" \r\n                  [Label] = \"year\" \r\n                  [Value]=\"year\" \r\n                  >{{year}}</mefdev-option>\r\n              </mefdev-select>\r\n            </ng-container>\r\n            <ng-template #yearLabel>\r\n              <span (click)=\"toggleYearDropdown($event)\">{{ selectedDateYear }}</span>\r\n            </ng-template>\r\n           </div>\r\n           <!-- Calendar exit button -->\r\n           <div>\r\n            <i class=\"fa fa-times toggleCalendarButton\" (click)=\"toggleCalendar()\" aria-hidden=\"true\"></i>\r\n            </div>\r\n    </div>\r\n    \r\n    <div class=\"calendar-body\">\r\n      <table>\r\n        <tr>\r\n          <th class=\"align-items-center\" *ngFor=\"let weekday of weekdays\">{{ weekday }}</th>\r\n        </tr>\r\n        <tr *ngFor=\"let week of calendarDays\">\r\n          <td *ngFor=\"let dayData of week\" \r\n              (click)=\"selectDate(dayData.date)\"\r\n              [ngClass]=\"{ 'selected': isDateSelected(dayData.date), 'prev-month': !dayData.isCurrentMonth }\">\r\n\r\n            <span class=\"date\" \r\n              [class.prev-month]=\"!dayData.isCurrentMonth\"\r\n              >\r\n              {{ dayData.date.getDate() }}\r\n            </span>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.datepicker-container{position:relative;display:inline-block}.datepicker-container.disabled{pointer-events:none;opacity:.8}.input-container{position:relative;display:inline-block}.input-container input[type=text]{cursor:pointer;padding:5px;border:1px solid #929292;border-radius:4px}.input-container input[type=text]:hover{border:1px solid #4D4D4D}.input-container .edit-button{position:absolute;top:0;right:0;height:100%;margin:0;padding:5px 10px;background-color:#eaeaea;border:1px solid #929292;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;display:flex;justify-content:center;align-items:center}.calendar{position:absolute;top:35px;left:10%;border:1px solid #929292;background-color:#eaeaea;border-radius:4px;z-index:1}.calendar .calendar-header{background-color:#fff;text-align:center;justify-content:space-between;display:flex;padding:5px 0}.calendar .calendar-header i.fa{display:flex;justify-content:center;align-items:center;width:30px;height:30px;font-size:20px;border-radius:50%;cursor:pointer;background-color:transparent;border:none;color:#cf0106}.calendar .calendar-header .monthButtonContainer{padding-left:10px;height:45px;min-width:140px;display:flex;align-items:center}.calendar .calendar-header .monthDropdown,.calendar .calendar-header .yearDropdown{height:45px;width:105px;cursor:pointer;display:inline-block;padding:6px 5px;border:1px solid #EAEAEA;border-radius:4px;background-color:#fff;color:#4d4d4d}.calendar .calendar-header .monthDropdown{margin:0 8px 0 0;width:130px}.calendar .calendar-header .monthDropdown:hover,.calendar .calendar-header .yearDropdown:hover{border-color:#f3f3f3}.calendar .calendar-body{padding:5px;width:260px}.calendar .calendar-body td{padding:10px;position:relative}.calendar .calendar-body td.selected{position:relative;color:#fff}.calendar .calendar-body td.selected:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:20%;background-color:#cf0106;z-index:-1;width:30px;height:30px;color:#fff;border:1px solid #373737}.calendar .calendar-body td:hover{color:#fff;font-weight:700;background-color:#929292;border-radius:20%;cursor:pointer}.calendar .calendar-body .date{display:flex;justify-content:center}.calendar .calendar-body .date.prev-month{color:#f3f3f3}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DatePipe }, { type: i0.ElementRef }]; }, propDecorators: { lang: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], yearsRange: [{
+                type: Input,
+                args: ['range']
+            }], disabled: [{
+                type: Input
+            }], topOffset: [{
+                type: Input
+            }], leftOffset: [{
+                type: Input
+            }], dateChanged: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class MefDevSelectModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectModule, declarations: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent], imports: [CommonModule, FormsModule, OverlayModule], exports: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectModule, imports: [CommonModule, FormsModule, OverlayModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, OverlayModule],
+                    declarations: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent],
+                    exports: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent]
+                }]
+        }] });
+
+class MefDevDatepickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevDatepickerModule, declarations: [DatepickerComponent], imports: [CommonModule, FormsModule, DatePipe, MefDevSelectModule], exports: [DatepickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevDatepickerModule, providers: [DatePipe], imports: [CommonModule, FormsModule, MefDevSelectModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DatepickerComponent],
+                    exports: [DatepickerComponent],
+                    imports: [CommonModule, FormsModule, DatePipe, MefDevSelectModule],
+                    providers: [DatePipe]
+                }]
+        }] });
+
+/**
+ * Component representing a progress bar.
+ *
+ * Example of usage:
+ *
+ * ```
+ * <mefdev-progress type="linear" color="blue" [thick]="true"></mefdev-progress>
+ * <mefdev-progress type="circle" color="red" [indeterminate]="true"></mefdev-progress>
+ * ```
+ */
+class MefDevProgressComponent {
+    _value;
+    _value2;
+    /**
+     * The type of progress bar.
+     * Possible values: "linear" | "circle".
+     * Default value: "linear".
+     */
+    type;
+    /**
+     * The color of the progress bar.
+     * Possible values: any valid CSS color value.
+     * Default value: none.
+     */
+    color;
+    /**
+     * Determines whether the progress bar is thick.
+     * Default value: false.
+     */
+    thick;
+    /**
+     * Determines whether the progress bar is indeterminate.
+     * Default value: false.
+     */
+    indeterminate;
+    /**
+     * The value of the progress bar.
+     * For the "circle" type, it should be a number between 0 and 100.
+     */
+    set value(value) {
+        if (this.type == "circle") {
+            this._value = (value / 100) * 360;
+            if (this.value >= 50) {
+                this._value2 = true;
             }
         }
-        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);
-        });
+        else
+            this._value = value;
     }
-    get 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();
+    /**
+     * Additional value property.
+     */
+    get value2() {
+        return this._value2;
     }
-    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];
-        }
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevProgressComponent, selector: "mefdev-progress", inputs: { type: "type", color: "color", thick: "thick", indeterminate: "indeterminate", value: "value" }, ngImport: i0, template: "<div *ngIf=\"type === 'bar'; else circleBlock\">\r\n  <div *ngIf=\"indeterminate; else determineBarBlock\">\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar-{{ color }}\" [class.progress-bar-indeterminate]=\"indeterminate\"></div>\r\n    </div>\r\n  </div>\r\n  <ng-template #determineBarBlock>\r\n    <div class=\"progress\" [class.progress-small]=\"!thick\">\r\n      <div class=\"progress-bar progress-bar-{{ color }}\" [ngStyle]=\"{ width: value + '%' }\"></div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n<ng-template #circleBlock>\r\n  <div class=\"progress-circle-{{ color }}\" [class.progress-circle-indeterminate]=\"indeterminate\"\r\n    [class.progress-circle]=\"!indeterminate\" [class.progress-circle-thick]=\"thick\">\r\n    <div *ngIf=\"indeterminate; else determineBlock\"></div>\r\n    <ng-template #determineBlock>\r\n      <div class=\"pie\" [ngStyle]=\"_value2 && { clip: 'rect(auto, auto, auto, auto)' }\">\r\n        <div class=\"left-side half-circle\" [ngStyle]=\"_value2 && { transform: 'rotate(' + value + 'deg)' }\"></div>\r\n        <div class=\"right-side half-circle\" [ngStyle]=\"{\r\n            transform:\r\n              _value2 === true ? 'rotate(180deg)' : 'rotate(' + value + 'deg)'\r\n          }\"></div>\r\n      </div>\r\n      <div class=\"shadow\"></div>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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
+            }] } });
+
+/**
+ * Component representing a custom card.
+ * It provides various styling and animation options for the card layout.
+ *
+ * Example usage:
+ * ```
+ * <pgcard [Title]="'Card Title'" [Type]="'default'" [MinimalHeader]="false" [ProgressType]="'circle'">
+ *   Card content goes here...
+ * </pgcard>
+ * ```
+ */
+class pgCard {
+    /**
+     * Indicates whether the card is collapsed or not.
+     * Default: false
+    */
+    _isCollapsed = false;
+    /**
+     * Indicates whether the card is maximized or not.
+     * Default: false
+    */
+    _isMaximixed = false;
+    /**
+     * Indicates whether the card is in loading state or not.
+     * Default: false
+    */
+    _isLoading = false;
+    /**
+     * Indicates whether the card has a minimal header or not.
+     * Default: false
+    */
+    _minimalHeader = false;
+    /**
+     * The message to be displayed in the card.
+    */
+    _message = "";
+    /**
+     * The type of message to be displayed in the card (e.g., success, danger, warning).
+     * Default: "danger"
+    */
+    _messageType = "danger";
+    /**
+     * Indicates whether the message in the card is visible or not.
+     * Default: false
+    */
+    _messageVisible = false;
+    /**
+     * The type of progress indicator to be displayed in the card (e.g., circle, bar, none).
+     * Default: "circle"
+    */
+    _progressType = "circle";
+    /**
+     * The color of the progress indicator in the card.
+    */
+    _progressColor = "";
+    /**
+     * Indicates whether the tools (e.g., refresh, close, maximize) are shown in the card header or not.
+     * Default: true
+    */
+    _showTools = true;
+    _close_card = false;
+    _refresh = false;
+    _refreshColor = "light";
+    /**
+     * Indicates whether the close button in the card is visible or not.
+     * Default: true
+    */
+    _close = true;
+    /**
+     * Indicates whether the toggle button in the card is visible or not.
+     * Default: true
+    */
+    _toggle = true;
+    /**
+     * Indicates whether the maximize button in the card is visible or not.
+     * Default: true
+    */
+    _maximize = true;
+    /**
+     * The timeout value in milliseconds for the loading state of the card.
+     * If set to 0, the loading state will not automatically turn off.
+     * Default: 0
+    */
+    _timeout = 0;
+    /**
+     * The title text to be displayed in the card header.
+    */
+    _titleText = "";
+    /**
+     * The border style of the card.
+    */
+    _card_border_style = "";
+    /**
+     * The type of the card (e.g., default, bordered, minimal).
+     * Default: "default"
+    */
+    _type = "default";
+    /**
+     * Additional CSS class(es) to be added to the card header.
+    */
+    _extraHeaderClass = "";
+    /**
+     * Additional CSS class(es) to be added to the card body.
+    */
+    _extraBodyClass = "";
+    /**
+     * Additional CSS class(es) to be added to the card.
+    */
+    _additionalClasses = "";
+    /**
+     * ViewChild reference to the host content element.
+    */
+    _hostContent;
+    /**
+     * ViewChild reference to the minimal circle loading element.
+    */
+    minimalCircleLoading;
+    /**
+     * ViewChild reference to the minimal circle loading trigger element.
+    */
+    minimalCircleLoadingTrigger;
+    /**
+     * ContentChild reference to the CardTitle template.
+    */
+    CardTitle;
+    /**
+     * ContentChild reference to the CardExtraControls template.
+    */
+    CardExtraControls;
+    // Input properties
+    /**
+     * The title text to be displayed in the card header.
+    */
+    set Title(value) {
+        this._titleText = value;
     }
-    onSearchChange(searchValue) {
-        this.SearchChange.emit(searchValue);
+    get Title() {
+        return this._titleText;
     }
-    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();
-                });
-            }
-        }
+    /**
+     * The type of the card (e.g., default, bordered, minimal).
+     * Default: "default"
+    */
+    set Type(value) {
+        this._type = value;
     }
-    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();
-                });
-            }
-        }
+    /**
+     * Indicates whether the card has a minimal header or not.
+     * Default: false
+    */
+    set MinimalHeader(value) {
+        this._minimalHeader = value;
     }
-    closeDropDown() {
-        if (!this.Open) {
-            return;
-        }
-        this.onTouched();
-        if (this.Multiple) {
-            this._renderer.removeStyle(this.searchInputElementRef.nativeElement, "width");
-        }
-        this.clearSearchText();
-        this.Open = false;
+    /**
+     * The type of progress indicator to be displayed in the card (e.g., circle, bar, none).
+     * Default: "circle"
+    */
+    set ProgressType(value) {
+        this._progressType = value;
     }
-    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
-        };
+    /**
+     * The color of the progress indicator in the card.
+    */
+    set ProgressColor(value) {
+        this._progressColor = value;
     }
-    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"
-        };
+    /**
+     * Indicates whether the card should have a refresh button or not.
+    */
+    set Refresh(value) {
+        this._refresh = value;
     }
-    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) { }
-            }
-        });
+    /**
+     * The color of the refresh button in the card (e.g., light, dark).
+     * Default: "light"
+    */
+    set RefreshColor(value) {
+        this._refreshColor = value;
     }
-    flushComponentState() {
-        this.updateFilterOption();
-        if (!this.Multiple) {
-            this.updateSelectedOption(this._value);
-        }
-        else {
-            if (this._value) {
-                this.updateSelectedOption(this._value);
-            }
-        }
+    /**
+     * Indicates whether the card should have a maximize button or not.
+    */
+    set Maximize(value) {
+        this._maximize = 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
-            });
-        }
+    /**
+     * Indicates whether the card should have a close button or not.
+    */
+    set Close(value) {
+        this._close = value;
     }
-    _getTriggerRect() {
-        return this.trigger.nativeElement.getBoundingClientRect();
+    /**
+     * Indicates whether the card should have a toggle button or not.
+    */
+    set Toggle(value) {
+        this._toggle = value;
     }
-    writeValue(value) {
-        this._updateValue(value, false);
+    /**
+     * Additional CSS class(es) to be added to the card header.
+    */
+    set HeaderClass(value) {
+        this._extraHeaderClass = value;
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    /**
+     * Additional CSS class(es) to be added to the card body.
+    */
+    set BodyClass(value) {
+        this._extraBodyClass = value;
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    /**
+     * Additional CSS class(es) to be added to the card.
+    */
+    set AdditionalClasses(value) {
+        this._additionalClasses = value;
     }
-    setDisabledState(isDisabled) {
-        this.Disabled = isDisabled;
+    /**
+     * Indicates whether the tools (e.g., refresh, close, maximize) are shown in the card header or not.
+    */
+    set Controls(value) {
+        this._showTools = value;
     }
-    dropDownScroll(ul) {
-        if (ul && ul.scrollHeight - ul.scrollTop === ul.clientHeight) {
-            this.ScrollToBottom.emit(true);
-        }
+    /**
+     * Indicates whether the message in the card is visible or not.
+    */
+    set ShowMessage(value) {
+        this._messageVisible = value;
     }
-    checkDropDownScroll() {
-        if (this.dropdownUl &&
-            this.dropdownUl.nativeElement.scrollHeight ===
-                this.dropdownUl.nativeElement.clientHeight) {
-            this.ScrollToBottom.emit(true);
-        }
+    /**
+     * The message text to be displayed in the card.
+    */
+    set Message(value) {
+        this._message = value;
     }
-    constructor(_elementRef, _renderer, cDRef) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        this.cDRef = cDRef;
-        this._el = this._elementRef.nativeElement;
+    /**
+     * Indicates whether the loading indicator is shown in the card or not.
+    */
+    set Loading(value) {
+        this._isLoading = value;
     }
-    ngAfterContentInit() {
-        if (this._value != null) {
-            this.flushComponentState();
-        }
+    /**
+     * The timeout duration for the loading indicator (in milliseconds).
+     * If set to 0, the loading indicator will be displayed indefinitely until manually dismissed.
+     * Default: 0
+    */
+    set TimeOut(value) {
+        this._timeout = value;
     }
-    ngOnInit() {
-        this.updateFilterOption();
-        this.setClassMap();
-        this.setDropDownClassMap();
+    /**
+     * The border style of the card.
+    */
+    set CardBorderStyle(value) {
+        this._card_border_style = value;
     }
-    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);
-                    });
-                }
-            }
-        }
+    // Output properties
+    /**
+     * Event emitted when the refresh button is clicked.
+    */
+    onRefresh = new EventEmitter();
+    // Other methods and lifecycle hooks
+    /**
+     * Toggles the collapsed state of the card.
+    */
+    toggle() {
+        this._isCollapsed = this._isCollapsed === true ? false : true;
     }
-    _updateValue(value, emitChange = true) {
-        if (this._value === value) {
-            return;
-        }
-        if (value == null && this.Multiple) {
-            this._value = [];
+    /**
+     * Maximizes or restores the card to its original position.
+    */
+    maximize() {
+        let nativeElement = this._hostContent.nativeElement;
+        if (this._isMaximixed) {
+            this._isMaximixed = false;
+            nativeElement.style.left = null;
+            nativeElement.style.top = null;
         }
         else {
-            this._value = value;
+            this._isMaximixed = true;
+            let pagecontainer = document.querySelector(".content") ?? 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";
         }
-        if (!this.Multiple) {
-            if (value == null) { // @ts-ignore
-                this._selectedOption = null;
-            }
-            else {
-                this.updateSelectedOption(value);
-            }
+    }
+    /**
+     * Dismisses the message in the card.
+    */
+    alertDismiss() {
+        this._messageVisible = false;
+    }
+    /**
+     * Triggers the refresh action of the card.
+    */
+    refresh() {
+        if (!this._isLoading) {
+            this._isLoading = true;
+            this.onRefresh.emit();
         }
-        else {
-            if (value) {
-                if (value.length === 0) {
-                    this.clearAllSelectedOption(emitChange);
-                }
-                else {
-                    this.updateSelectedOption(value, true);
-                }
-            }
-            else if (value == null) {
-                this.clearAllSelectedOption(emitChange);
-            }
+        if (this._timeout > 0) {
+            setTimeout(() => {
+                this._isLoading = false;
+            }, this._timeout);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevSelectComponent, selector: "mefdev-select", inputs: { Filter: "Filter", MaxMultiple: "MaxMultiple", FirstDefault: "FirstDefault", AllowClear: "AllowClear", KeepUnListOptions: "KeepUnListOptions", Mode: "Mode", Multiple: "Multiple", PlaceHolder: "PlaceHolder", NotFoundContent: "NotFoundContent", Size: "Size", ShowSearch: "ShowSearch", Tags: "Tags", Disabled: "Disabled", Open: "Open" }, outputs: { SearchChange: "SearchChange", change: "change", OpenChange: "OpenChange", ScrollToBottom: "ScrollToBottom" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
-            {
-                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%'
+    /**
+     * Closes the card.
+    */
+    close() {
+        this._close_card = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: pgCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: pgCard, selector: "pgcard", inputs: { Title: "Title", Type: "Type", MinimalHeader: "MinimalHeader", ProgressType: "ProgressType", ProgressColor: "ProgressColor", Refresh: "Refresh", RefreshColor: "RefreshColor", Maximize: "Maximize", Close: "Close", Toggle: "Toggle", HeaderClass: "HeaderClass", BodyClass: "BodyClass", AdditionalClasses: "AdditionalClasses", Controls: "Controls", ShowMessage: "ShowMessage", Message: "Message", Loading: "Loading", TimeOut: "TimeOut", CardBorderStyle: "CardBorderStyle" }, outputs: { onRefresh: "onRefresh" }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }, { propertyName: "CardExtraControls", first: true, predicate: ["CardExtraControls"], descendants: true }], viewQueries: [{ propertyName: "_hostContent", first: true, predicate: ["hostContent"], descendants: true }, { propertyName: "minimalCircleLoading", first: true, predicate: ["minimalCircleLoading"], descendants: true }, { propertyName: "minimalCircleLoadingTrigger", first: true, predicate: ["minimalCircleLoadingTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"card card-{{ _type }} {{ _additionalClasses }}\" *ngIf=\"!_close_card\" [class.card-collapsed]=\"_isCollapsed\"\r\n  [class.card-maximized]=\"_isMaximixed\" #hostContent class=\"col-sm-12 col-md-6 col-lg-4\"\r\n  [ngStyle]=\"{'border': _card_border_style}\">\r\n  <div class=\"card-header {{ _extraHeaderClass }}\">\r\n    <div class=\"card-title\">\r\n      <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n    </div>\r\n    <div class=\"card-controls\" *ngIf=\"_showTools == true\">\r\n      <ng-template [ngTemplateOutlet]=\"CardExtraControls\"></ng-template>\r\n      <ul *ngIf=\"_minimalHeader == false; else minimalBlock\">\r\n        <li *ngIf=\"_toggle == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-collapse\" (click)=\"toggle()\"><i\r\n              class=\"pg pg-arrow_maximize\" [class.pg-arrow_minimize]=\"_isCollapsed\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_refresh == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-refresh\" (click)=\"refresh()\"><i\r\n              class=\"card-icon card-icon-refresh\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_maximize == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-maximize\" (click)=\"maximize()\"><i\r\n              class=\"card-icon card-icon-maximize\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_close == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-close\" (click)=\"close()\"><i\r\n              class=\"card-icon card-icon-close\"></i></a>\r\n        </li>\r\n      </ul>\r\n       <!-- <ng-template #minimalBlock>\r\n        <ul>\r\n          <li>\r\n            <a href=\"javascript:void(0);\" (click)=\"refresh()\" class=\"card-refresh minimal\"\r\n              [class.refreshing]=\"_isLoading\">\r\n              <i #minimalCircleLoadingTrigger class=\"card-icon card-icon-refresh-lg-{{\r\n                  _refreshColor == 'light' ? 'white' : 'master'\r\n                }}\" [class.fade]=\"_isLoading\"></i>\r\n             <i #minimalCircleLoading class=\"card-icon-refresh-lg-white-animated\"\r\n                style=\"position: absolute;top:0;left:0\" [class.active]=\"_isLoading\"\r\n                [class.hide]=\"_isLoading != true\"></i>\r\n            </a>\r\n          </li>\r\n        </ul>\r\n      </ng-template> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"card-body {{ _extraBodyClass }}\" [@collapseState]=\"_isCollapsed == true ? 'inactive' : 'active'\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"_messageVisible == true\" class=\"pgn-wrapper\" data-position=\"top\">\r\n    <div class=\"pgn pgn-bar push-on-sidebar-open\">\r\n      <div class=\"alert alert-danger\">\r\n        <span>{{ _message }}</span><button class=\"close\" (click)=\"alertDismiss()\" type=\"button\">\r\n          <span aria-hidden=\"true\">\u00D7</span><span class=\"sr-only\">{{ 'Close' }}</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"_messageVisible == true\" class=\"card-progress\" [style.backgroundColor]=\"\r\n      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'\r\n    \" style=\" display: block;\"></div>\r\n  <div [@fadeAnimation]=\"_isLoading\" class=\"card-progress\" [style.backgroundColor]=\"\r\n      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'\r\n    \" style=\"display: block;pointer-events: none\">\r\n    <mefdev-progress *ngIf=\"_minimalHeader == false\" type=\"{{ _progressType }}\" color=\"{{ _progressColor }}\"\r\n      indeterminate=\"true\" class=\"\"></mefdev-progress>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MefDevProgressComponent, selector: "mefdev-progress", inputs: ["type", "color", "thick", "indeterminate", "value"] }], animations: [
+            trigger("collapseState", [
+                state("inactive", style({
+                    opacity: "0",
+                    height: 0,
+                    paddingBottom: "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%'
+                state("active", style({
+                    opacity: "1",
+                    height: "*",
+                    paddingBottom: "*"
                 })),
-                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 }))
-                ])
+                transition("inactive => active", animate("125ms ease-in")),
+                transition("active => inactive", animate("125ms ease-out"))
             ]),
-            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 });
+            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: "16.1.6", ngImport: i0, type: MefDevSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: pgCard, 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%'
+            args: [{ selector: "pgcard", encapsulation: ViewEncapsulation.None, animations: [
+                        trigger("collapseState", [
+                            state("inactive", style({
+                                opacity: "0",
+                                height: 0,
+                                paddingBottom: "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%'
+                            state("active", style({
+                                opacity: "1",
+                                height: "*",
+                                paddingBottom: "*"
                             })),
-                            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 }))
-                            ])
+                            transition("inactive => active", animate("125ms ease-in")),
+                            transition("active => inactive", animate("125ms ease-out"))
                         ]),
-                        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: [{
+                        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: ["searchInput"]
-            }], trigger: [{
+                args: ["hostContent"]
+            }], minimalCircleLoading: [{
                 type: ViewChild,
-                args: ["trigger"]
-            }], dropdownUl: [{
+                args: ["minimalCircleLoading"]
+            }], minimalCircleLoadingTrigger: [{
                 type: ViewChild,
-                args: ["dropdownUl"]
-            }], SearchChange: [{
-                type: Output
-            }], change: [{
-                type: Output
-            }], OpenChange: [{
-                type: Output
-            }], ScrollToBottom: [{
-                type: Output
-            }], Filter: [{
+                args: ["minimalCircleLoadingTrigger"]
+            }], CardTitle: [{
+                type: ContentChild,
+                args: ["CardTitle"]
+            }], CardExtraControls: [{
+                type: ContentChild,
+                args: ["CardExtraControls"]
+            }], Title: [{
+                type: Input
+            }], Type: [{
+                type: Input
+            }], MinimalHeader: [{
                 type: Input
-            }], MaxMultiple: [{
+            }], ProgressType: [{
                 type: Input
-            }], FirstDefault: [{
+            }], ProgressColor: [{
                 type: Input
-            }], _cdkOverlay: [{
-                type: ViewChild,
-                args: [CdkConnectedOverlay]
-            }], AllowClear: [{
+            }], Refresh: [{
                 type: Input
-            }], KeepUnListOptions: [{
+            }], RefreshColor: [{
                 type: Input
-            }], Mode: [{
+            }], Maximize: [{
                 type: Input
-            }], Multiple: [{
+            }], Close: [{
                 type: Input
-            }], PlaceHolder: [{
+            }], Toggle: [{
                 type: Input
-            }], NotFoundContent: [{
+            }], HeaderClass: [{
                 type: Input
-            }], Size: [{
+            }], BodyClass: [{
                 type: Input
-            }], ShowSearch: [{
+            }], AdditionalClasses: [{
                 type: Input
-            }], Tags: [{
+            }], Controls: [{
                 type: Input
-            }], Disabled: [{
+            }], ShowMessage: [{
                 type: Input
-            }], Open: [{
+            }], Message: [{
                 type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ["click", ["$event"]]
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ["keydown", ["$event"]]
+            }], Loading: [{
+                type: Input
+            }], TimeOut: [{
+                type: Input
+            }], CardBorderStyle: [{
+                type: Input
+            }], onRefresh: [{
+                type: Output
             }] } });
 
 /**
- * @skipTemplateDoc true
- * Component for representing an option in a dropdown list.
- *
- *```
- * <mefdev-select>
- * <mefdev-option Value="1" Label="Option 1"></mefdev-option>
- * <mefdev-option Value="2" Label="Option 2"></mefdev-option>
- * <mefdev-option Value="3" Label="Option 3"></mefdev-option>
- * </mefdev-select>
- *```
- *
- */
-class MefDevOptionComponent {
-    _Select;
-    _disabled = false;
-    _value;
-    _label;
+  * Component for displaying a card with a title, image, and description.
+  *
+  * Example of usage:
+  *
+  * ```
+  * <mefdev-card>
+  *   <ng-template #card_title>
+  *     <!-- Content for the card title -->
+  *   </ng-template>
+  *   <ng-template #card_footer>
+  *     <!-- Content for the card footer -->
+  *   </ng-template>
+  * </mefdev-card>
+  * ```
+  *
+  * <example-url>https://mef.dev/ui_kit_demo/view/card</example-url>
+  */
+class CardComponent {
+    router;
+    /**
+    * The template reference to the content of the card title.
+    *
+    * @usageNotes
+    * ```
+    * <mefdev-card>
+    *   <ng-template #card_title>
+    *     <!-- Content for the card title -->
+    *   </ng-template>
+    * </mefdev-card>
+    * ```
+     */
+    card_title;
+    /**
+     * The template reference to the content of the card footer.
+     * @usageNotes
+     * ```
+     * <mefdev-card>
+     *   <ng-template #card_footer>
+     *     <!-- Content for the card footer -->
+     *   </ng-template>
+     * </mefdev-card>
+     * ```
+     */
+    card_footer;
+    /**
+     * The type of the card.
+     * @usageNotes
+     * ```
+     * <mefdev-card [card_type] = "'type'"></mefdev-card>
+     * ```
+     */
+    card_type;
+    /**
+     * The path to the image.
+     * @usageNotes
+     * ```
+     * <mefdev-card [img] = "'img/path/img.png'"></mefdev-card>
+     * ```
+     */
+    img;
+    /**
+     * The path, where user goes after click at the image.
+     * @usageNotes
+     * ```
+     * <mefdev-card [imgUrl] = "'Img.url'"></mefdev-card>
+     * ```
+     */
+    imgUrl;
+    /**
+     * The description of the card.
+     * @usageNotes
+     * ```
+     * <mefdev-card [description] = "'description'"></mefdev-card>
+     * ```
+     */
+    description;
+    constructor(router) {
+        this.router = router;
+    }
+    ngOnInit() {
+    }
+    /**
+     * Event handler for image click.
+     * Navigates to the specified URL.
+     */
+    imgClick() {
+        this.router.navigate(['/', this.imgUrl.toString()]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardComponent, selector: "mefdev-card", inputs: { card_type: "card_type", img: "img", imgUrl: "imgUrl", description: "description" }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }, { propertyName: "card_footer", first: true, predicate: ["card_footer"], descendants: true }], ngImport: i0, template: "\r\n    <pgcard\r\n    MinimalHeader=\"true\"\r\n    TimeOut=\"2500\"\r\n    [Refresh]=\"false\"\r\n    [Close]=\"false\">\r\n\r\n      <ng-template #CardTitle>\r\n        <ng-template class=\"card-title body-1\" [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n      </ng-template>\r\n\r\n      <div class=\"plugin-type\">\r\n        {{ card_type }}\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"m-l-2 card-description\">\r\n            <div *ngIf=\"!description || description == ''\" class=\"card-no-description\"> {{'No plugin description'}}</div>\r\n            <p>\r\n              {{description}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 mt-3 text-center card-img\"\r\n        [ngStyle]=\"{'background-color': img ? 'transparent' : '#fff'}\">\r\n          <div *ngIf=\"!img || img == ''\" >\r\n            <img src=\"assets/images/md_icon.png\"\r\n            style=\"max-width: 110px; max-height: 110px;\"/>\r\n          </div>\r\n          <div *ngIf=\"img\" >\r\n            <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n              style=\"max-width: 260px; max-height: 150px;\"\r\n              onclick=\"imgClick()\"\r\n            />\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row mb-3 mt-3\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </pgcard>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,.plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,::ng-deep .card-title span,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,.card-description,.card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-default{background-color:#eaeaea;border-radius:5px}.card-header{height:72px}::ng-deep .card-title{width:70%}.plugin-type{right:20px;top:25px;position:absolute;background-color:#cf0106;border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}.card-description{height:40px;overflow-y:clip;color:#4d4d4d}.card-no-description{overflow-y:clip;height:60px;color:#929292}.card-img{padding:0;height:130px;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: pgCard, selector: "pgcard", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-card', template: "\r\n    <pgcard\r\n    MinimalHeader=\"true\"\r\n    TimeOut=\"2500\"\r\n    [Refresh]=\"false\"\r\n    [Close]=\"false\">\r\n\r\n      <ng-template #CardTitle>\r\n        <ng-template class=\"card-title body-1\" [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n      </ng-template>\r\n\r\n      <div class=\"plugin-type\">\r\n        {{ card_type }}\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"m-l-2 card-description\">\r\n            <div *ngIf=\"!description || description == ''\" class=\"card-no-description\"> {{'No plugin description'}}</div>\r\n            <p>\r\n              {{description}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 mt-3 text-center card-img\"\r\n        [ngStyle]=\"{'background-color': img ? 'transparent' : '#fff'}\">\r\n          <div *ngIf=\"!img || img == ''\" >\r\n            <img src=\"assets/images/md_icon.png\"\r\n            style=\"max-width: 110px; max-height: 110px;\"/>\r\n          </div>\r\n          <div *ngIf=\"img\" >\r\n            <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n              style=\"max-width: 260px; max-height: 150px;\"\r\n              onclick=\"imgClick()\"\r\n            />\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row mb-3 mt-3\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_footer\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </pgcard>\r\n", styles: [".color-Dark-Gray-1{color:#373737!important}.color-Dark-Gray-2{color:#4d4d4d!important}.color-Red{color:#cf0106!important}.color-Green{color:#28b446!important}.color-Light-Gray-1{color:#929292!important}.color-Light-Gray-2{color:#eaeaea!important}.color-Light-Gray-3{color:#f3f3f3!important}.color-White{color:#fff!important}.color-Link{color:#0185cf!important}.b-color-Dark-Gray-1{background-color:#373737!important}.b-color-Dark-Gray-2{background-color:#4d4d4d!important}.b-color-Red{background-color:#cf0106!important}.b-color-Green{background-color:#28b446!important}.b-color-Light-Gray-1{background-color:#929292!important}.b-color-Light-Gray-2{background-color:#eaeaea!important}.b-color-Light-Gray-3{background-color:#f3f3f3!important}.b-color-White{background-color:#fff!important}.b-color-Link{background-color:#0185cf!important}.h1,h1{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,.plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,::ng-deep .card-title span,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,.card-description,.card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-default{background-color:#eaeaea;border-radius:5px}.card-header{height:72px}::ng-deep .card-title{width:70%}.plugin-type{right:20px;top:25px;position:absolute;background-color:#cf0106;border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}.card-description{height:40px;overflow-y:clip;color:#4d4d4d}.card-no-description{overflow-y:clip;height:60px;color:#929292}.card-img{padding:0;height:130px;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"] }]
+        }], 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 = {}));
+
+/**
+* Component for displaying a long card with a title, parameters, and description.
+*
+* Example of usage:
+*
+* ```
+* <medev-card-long
+*     [type_text]="'Type Text'"
+*     [type_color]="CartTypeColors.RED"
+*     [img]="'path/to/image.jpg'"
+*     [imgUrl]="'path/to/image'"
+*     [description]="'Card description'">
+*
+*     <ng-template #title>
+*       <!-- Content for the card title -->
+*     </ng-template>
+
+*     <ng-template #params>
+*       <!-- Content for the card parameters -->
+*     </ng-template>
+
+*     <ng-template #second_col>
+*       <!-- Content for the second column -->
+*     </ng-template>
+
+*     <ng-template #third_col>
+*       <!-- Content for the third column -->
+*     </ng-template>
+* </medev-card-long>
+* ```
+*
+* <example-url>https://mef.dev/ui_kit_demo/view/card/card-long</example-url>
+*/
+class CardLongComponent {
+    router;
+    /**
+     * Template for displaying the title of the card.
+      * ```
+      * <medev-card-long>
+      *   <ng-template #title>
+      *     <!-- Content for the card title -->
+      *   </ng-template>
+      * </medev-card-long>
+      * ```
+     */
+    title;
+    /**
+   * Template for displaying the parameters of the card.
+    * ```
+    * <medev-card-long>
+    *   <ng-template #params>
+    *     <!-- Content for the card params -->
+    *   </ng-template>
+    * </medev-card-long>
+    * ```
+   */
+    params;
+    /**
+      * Template for displaying the content of the second column.
+      * ```
+      * <medev-card-long>
+      *   <ng-template #second_col>
+      *     <!-- Content for the card second column -->
+      *   </ng-template>
+      * </medev-card-long>
+      * ```
+     */
+    second_col;
+    /**
+      * Template for displaying the content of the third column.
+      * ```
+      * <medev-card-long>
+      *   <ng-template #third_col>
+      *     <!-- Content for the card third column -->
+      *   </ng-template>
+      * </medev-card-long>
+      * ```
+     */
+    third_col;
     /**
-    * Template for the content of the option.
-    */
-    OptionTemplate;
+     * The text for the card type.
+     * @usageNotes
+     * ```
+     * <medev-card-long type_text = "'Type'"></<medev-card-long>
+     * ```
+     */
+    type_text;
     /**
- * The value of the option.
- */
-    set Value(value) {
-        if (this._value === value) {
-            return;
-        }
-        this._value = value;
-    }
-    get Value() {
-        return this._value;
-    }
+     * The color of the card type.
+     * @usageNotes
+     * ```
+     * <medev-card-long type_color = "'RED'"></<medev-card-long>
+     * ```
+     * Colors: RED, UNSET, GREEN
+     
+     */
+    type_color = CartTypeColors.UNSET;
     /**
-   * The label of the option.
-   */
-    set Label(value) {
-        if (this._label === value) {
-            return;
-        }
-        this._label = value;
-    }
-    get Label() {
-        return this._label;
-    }
+     * The path to the image.
+     * @usageNotes
+     * ```
+     * <mefdev-card-long [img] = "'img/path/img.png'"></mefdev-card-long>
+     * ```
+     */
+    img;
     /**
-   * Indicates whether the option is disabled.
-   */
-    set Disabled(value) {
-        this._disabled = toBoolean(value);
-    }
-    get Disabled() {
-        return this._disabled;
-    }
-    constructor(_Select) {
-        this._Select = _Select;
-    }
+    * The path, where user goes after click at the image.
+    * @usageNotes
+    * ```
+    * <mefdev-card-long [imgUrl] = "'Img.url'"></mefdev-card-long>
+    * ```
+    */
+    imgUrl;
     /**
-   * Initialization lifecycle hook.
-   * Adds the option to the dropdown list.
-   */
+     * The description of the card.
+     * @usageNotes
+     * ```
+     * <mefdev-card-long [description] = "'description'"></mefdev-card-long>
+     * ```
+     */
+    description;
+    constructor(router) {
+        this.router = router;
+    }
     ngOnInit() {
-        this._Select.addOption(this);
     }
     /**
-   * Destruction lifecycle hook.
-   * Removes the option from the dropdown list.
-   */
-    ngOnDestroy() {
-        this._Select.removeOption(this);
+     * Event handler for image click.
+     * Navigates to the specified URL.
+     */
+    imgClick() {
+        this.router.navigate(['/', this.imgUrl.toString()]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevOptionComponent, deps: [{ token: MefDevSelectComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefDevOptionComponent, selector: "mefdev-option", inputs: { Value: "Value", Label: "Label", Disabled: "Disabled" }, queries: [{ propertyName: "OptionTemplate", first: true, predicate: ["OptionTemplate"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardLongComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardLongComponent, selector: "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;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,:host::ng-deep .card-title span,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,:host::ng-deep .plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,:host::ng-deep .card-description,:host::ng-deep .card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .params-block .row{margin-top:.75em}:host::ng-deep .params-block .row:last-child{margin-bottom:.75em}:host::ng-deep .card-col{min-height:220px}:host::ng-deep .header-link{opacity:1}:host::ng-deep .card-default{background-color:#f3f3f3;border-radius:5px}:host::ng-deep .card-title{width:80%;color:#000}:host::ng-deep .plugin-type{border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}:host::ng-deep .card-description{height:40px;overflow-y:clip;color:#4d4d4d}:host::ng-deep .card-no-description{overflow-y:clip;height:60px;color:#929292}:host::ng-deep .card-img{padding:0;height:130px;background-color:#fff;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: pgCard, selector: "pgcard", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardLongComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mefdev-option", encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>" }]
-        }], ctorParameters: function () { return [{ type: MefDevSelectComponent }]; }, propDecorators: { OptionTemplate: [{
+            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;font-size:24px;line-height:29px;font-weight:700;text-transform:uppercase;color:#000}.h2,h2{font-family:Montserrat;font-size:24px;line-height:29px;font-weight:700;color:#000}.h3,:host::ng-deep .card-title span,h3{font-family:Montserrat;font-size:14px;line-height:20px;font-weight:400;text-transform:uppercase;color:#000}.h4,h4{font-family:Montserrat;font-weight:300;font-size:13px;line-height:20px;text-transform:uppercase;color:#000}.h5,h5{font-family:Montserrat;font-weight:600;font-size:13px;line-height:20px;color:#000}.h6,:host::ng-deep .plugin-type,h6{font-family:Montserrat;font-weight:500;font-size:12px;line-height:20px;text-transform:capitalize;color:#000}.body-1,body-1{font-family:Lato;font-size:18px;line-height:20px;font-weight:700;color:#000}.body-2,body-2{font-family:Lato;font-size:16px;line-height:28px;font-weight:400;color:#000}.body-3,body-3{font-family:Lato;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Lato;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,:host::ng-deep .card-description,:host::ng-deep .card-no-description,body-5{font-family:Lato;font-weight:600;font-size:13px;line-height:18px;color:#000}.body-6,body-6{font-family:Lato;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .params-block .row{margin-top:.75em}:host::ng-deep .params-block .row:last-child{margin-bottom:.75em}:host::ng-deep .card-col{min-height:220px}:host::ng-deep .header-link{opacity:1}:host::ng-deep .card-default{background-color:#f3f3f3;border-radius:5px}:host::ng-deep .card-title{width:80%;color:#000}:host::ng-deep .plugin-type{border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}:host::ng-deep .card-description{height:40px;overflow-y:clip;color:#4d4d4d}:host::ng-deep .card-no-description{overflow-y:clip;height:60px;color:#929292}:host::ng-deep .card-img{padding:0;height:130px;background-color:#fff;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { title: [{
                 type: ContentChild,
-                args: ["OptionTemplate"]
-            }], Value: [{
+                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
-            }], Label: [{
+            }], type_color: [{
                 type: Input
-            }], Disabled: [{
+            }], img: [{
+                type: Input
+            }], imgUrl: [{
+                type: Input
+            }], description: [{
                 type: Input
             }] } });
 
-class MefDevSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectModule, declarations: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent], imports: [CommonModule, FormsModule, OverlayModule], exports: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevSelectModule, imports: [CommonModule, FormsModule, OverlayModule] });
+/**
+  * Component for displaying a simple card with a title.
+  *
+  * Example of usage:
+  *```
+  * <medev-card-simple [disabled]="true">
+  *   <ng-template #card_title>
+  *     <!-- Content for the card title -->
+  *   </ng-template>
+  * </medev-card-simple>
+  *```
+  *
+  * <example-url>https://mef.dev/ui_kit_demo/view/card/card-simple</example-url>
+  */
+class CardSimpleComponent {
+    /**
+     * Determines whether the card is disabled or not.
+     */
+    isDisabled = false;
+    /**
+     * Template for displaying the title of the card.
+     *```
+     * <medev-card-simple>
+     *   <ng-template #card_title>
+     *     <h3>Card Title</h3>
+     *   </ng-template>
+     * </medev-card-simple>
+     *```
+     */
+    card_title;
+    constructor() { }
+    ngOnInit() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CardSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CardSimpleComponent, selector: "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: "16.1.6", ngImport: i0, type: MefDevSelectModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, FormsModule, OverlayModule],
-                    declarations: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent],
-                    exports: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent]
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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"]
+            }] } });
 
 class ProgressConfig {
     color = "primary";
@@ -3210,6 +3810,205 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 }]
         }] });
 
+class StageComponent {
+    currentExecutorStep;
+    isRightModal;
+    isCompleted;
+    title;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: StageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: StageComponent, selector: "mefdev-stage", inputs: { currentExecutorStep: "currentExecutorStep", isRightModal: "isRightModal", isCompleted: "isCompleted", title: "title" }, ngImport: i0, template: "<div class=\"step\">\r\n    <ng-container *ngIf=\"!isCompleted else done\">\r\n        <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" [ngStyle]=\"isRightModal ? { 'fill': '#FFFFFF' } : { 'fill': '#F3F3F3' }\">\r\n            <rect width=\"36\" height=\"36\" rx=\"18\" />\r\n            <text class=\"body-3\" x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-size=\"16\" fill=\"black\">\r\n                {{ currentExecutorStep }}\r\n            </text>\r\n        </svg>\r\n        <div class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n            {{ title }}\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n<ng-template #done>\r\n    <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <rect x=\"0.5\" y=\"0.5\" width=\"35\" height=\"35\" rx=\"17.5\" stroke=\"#929292\"/>\r\n        <path d=\"M24.7373 10L14.5466 20.3769L11.2415 17.0114L8 20.3122L11.3051 23.6777L14.5678 27L17.8093 23.6992L28 13.3224L24.7373 10Z\"\r\n              fill=\"#28B446\"/>\r\n    </svg>\r\n    <span class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n        {{ title }}\r\n    </span>\r\n</ng-template>\r\n", styles: [".step{display:flex;align-items:center;column-gap:11px}.step .descriptionStepText{width:77px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: StageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-stage', template: "<div class=\"step\">\r\n    <ng-container *ngIf=\"!isCompleted else done\">\r\n        <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" [ngStyle]=\"isRightModal ? { 'fill': '#FFFFFF' } : { 'fill': '#F3F3F3' }\">\r\n            <rect width=\"36\" height=\"36\" rx=\"18\" />\r\n            <text class=\"body-3\" x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-size=\"16\" fill=\"black\">\r\n                {{ currentExecutorStep }}\r\n            </text>\r\n        </svg>\r\n        <div class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n            {{ title }}\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n<ng-template #done>\r\n    <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <rect x=\"0.5\" y=\"0.5\" width=\"35\" height=\"35\" rx=\"17.5\" stroke=\"#929292\"/>\r\n        <path d=\"M24.7373 10L14.5466 20.3769L11.2415 17.0114L8 20.3122L11.3051 23.6777L14.5678 27L17.8093 23.6992L28 13.3224L24.7373 10Z\"\r\n              fill=\"#28B446\"/>\r\n    </svg>\r\n    <span class=\"body-6 descriptionStepText\" *ngIf=\"!isRightModal\">\r\n        {{ title }}\r\n    </span>\r\n</ng-template>\r\n", styles: [".step{display:flex;align-items:center;column-gap:11px}.step .descriptionStepText{width:77px}\n"] }]
+        }], propDecorators: { currentExecutorStep: [{
+                type: Input
+            }], isRightModal: [{
+                type: Input
+            }], isCompleted: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class StepExecutorComponent {
+    renderer;
+    view;
+    container;
+    title;
+    description;
+    footer;
+    onActivePageChange = new EventEmitter();
+    _activePageInd = 0;
+    pages = [];
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    set activePageInd(activePageNumber) {
+        this._activePageInd = activePageNumber;
+        if (activePageNumber >= 0 && this.container) {
+            if (this.container.nativeElement.innerHTML != '') {
+                this.container.nativeElement.innerHTML = '';
+            }
+            this.renderer.appendChild(this.container.nativeElement, this.activePage?.elRef.nativeElement);
+            this.onActivePageChange.emit(this.pages.find((el) => el.isActive));
+        }
+    }
+    get activePageInd() {
+        return this._activePageInd;
+    }
+    get activePage() {
+        return this.activePageInd == -1 ? null : this.pages[this.activePageInd];
+    }
+    ngAfterViewInit() {
+        this.renderer.appendChild(this.container.nativeElement, this.activePage?.elRef.nativeElement);
+        this.onActivePageChange.emit(this.pages.find((el) => el.isActive));
+    }
+    nextBtnIsDisabled() {
+        return this._activePageInd === this.pages.length - 1;
+    }
+    prev() {
+        const newPageInd = this.activePageInd - 1;
+        if (newPageInd >= 0) {
+            this.activePageInd = newPageInd;
+        }
+    }
+    cancel() {
+        this.activePageInd = 0;
+        const newPageInd = this.activePageInd - 1;
+        if (newPageInd >= 0) {
+            this.activePageInd = newPageInd;
+        }
+    }
+    next() {
+        const newPageInd = this.activePageInd + 1;
+        if (newPageInd < this.pages.length) {
+            this.activePageInd = newPageInd;
+        }
+    }
+    setActivePage(pageNumber) {
+        pageNumber -= 1;
+        if (pageNumber < this.pages.length && pageNumber >= 0) {
+            this.activePageInd = pageNumber;
+        }
+    }
+    addPage(page) {
+        this.pages.push(page);
+    }
+    removeSpecificPage(page) {
+        const index = this.pages.indexOf(page);
+        if (index !== -1) {
+            this.pages.splice(index, 1);
+            if (index === this.activePageInd) {
+                this.prev();
+            }
+        }
+    }
+    removePageByIndex(index) {
+        if (index >= 0 && index < this.pages.length) {
+            this.pages.splice(index, 1);
+            if (index === this.activePageInd) {
+                this.prev();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: StepExecutorComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: StepExecutorComponent, selector: "mefdev-step-executor", inputs: { view: "view" }, outputs: { onActivePageChange: "onActivePageChange" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<!--view == regular-->\r\n\r\n<div class=\"stepExecutorBlock\" *ngIf=\"view === 'regular'\">\r\n  <header class=\"stepExecutorHeader\">\r\n    <div class=\"stepExecutorHeaderText\">\r\n      <h1 class=\"title\">\r\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n      </h1>\r\n      <p class=\"body-5\">\r\n        <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <div class=\"steps\">\r\n      <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                    [isRightModal]=\"false\"\r\n                    [title]=\"page.title\"\r\n                    [currentExecutorStep]=\"pageIndex + 1\"\r\n                    [isCompleted]=\"page.isCompleted\">\r\n      </mefdev-stage>\r\n    </div>\r\n  </header>\r\n\r\n  <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n    <div #container></div>\r\n  </div>\r\n\r\n  <div class=\"footerButtons\">\r\n    <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!--view == modal-->\r\n\r\n<div class=\"modalStepExecutor\" *ngIf=\"view === 'modal'\">\r\n\r\n  <header class=\"modalHeader\">\r\n    <div class=\"headerModalText\">\r\n      <div class=\"textAndCloseButton\">\r\n        <h1 class=\"title\">\r\n          <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n        </h1>\r\n        <p class=\"body-5\">\r\n          <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n        </p>\r\n      </div>\r\n      <article class=\"closeBtn\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.26735 7.68135L0.610352 2.02435L2.02435 0.610352L7.68135 6.26735L13.3384 0.610352L14.7524 2.02435L9.09535 7.68135L14.7524 13.3384L13.3384 14.7524L7.68135 9.09535L2.02435 14.7524L0.610352 13.3384L6.26735 7.68135Z\" fill=\"#4D4D4D\"/>\r\n        </svg>\r\n      </article>\r\n    </div>\r\n    <div class=\"modalSteps\">\r\n      <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                    [isRightModal]=\"false\"\r\n                    [title]=\"page.title\"\r\n                    [currentExecutorStep]=\"pageIndex + 1\"\r\n                    [isCompleted]=\"page.isCompleted\">\r\n      </mefdev-stage>\r\n    </div>\r\n  </header>\r\n\r\n  <main *ngIf=\"activePage\" class=\"modalExecutorMainContent\">\r\n    <div #container></div>\r\n  </main>\r\n\r\n  <footer class=\"modalFooter\">\r\n    <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n  </footer>\r\n\r\n</div>\r\n\r\n<!--view == right-->\r\n\r\n<div class=\"rightExecutorBlock\" *ngIf=\"view === 'right'\">\r\n\r\n  <header class=\"rightExecutorHeader\">\r\n    <div class=\"rightExecutorTextAndCloseButton\">\r\n      <span class=\"body-1\">\r\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n      </span>\r\n      <p class=\"body-5\">\r\n        <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <div class=\"closeButton\">\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.0566 1.59971L14.6566 0.199707L8.05664 6.79971L1.45664 0.199707L0.0566406 1.59971L6.65664 8.19971L0.0566406 14.7997L1.45664 16.1997L8.05664 9.59971L14.6566 16.1997L16.0566 14.7997L9.45664 8.19971L16.0566 1.59971Z\" fill=\"#525252\"/>\r\n      </svg>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"line\">\r\n    <svg width=\"363\" height=\"1\" viewBox=\"0 0 363 1\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <line x1=\"-4.37114e-08\" y1=\"0.5\" x2=\"362.674\" y2=\"0.499968\" stroke=\"#4D4D4D\"/>\r\n    </svg>\r\n  </div>\r\n\r\n  <div class=\"contentExecutor\">\r\n    <div class=\"rightChangeContent\">\r\n      <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n        <div #container></div>\r\n      </div>\r\n      <div class=\"rightSteps\">\r\n        <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                      [isRightModal]=\"true\"\r\n                      [title]=\"page.title\"\r\n                      [currentExecutorStep]=\"pageIndex + 1\"\r\n                      [isCompleted]=\"page.isCompleted\">\r\n        </mefdev-stage>\r\n      </div>\r\n    </div>\r\n\r\n    <footer class=\"rightFooter\">\r\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n    </footer>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".stepExecutorBlock{height:auto;display:flex;flex-direction:column}.stepExecutorBlock .stepExecutorHeader{padding:49px 71px 40px 154px;display:flex;flex-direction:column;row-gap:23px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText{display:flex;flex-direction:column;row-gap:8px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText .title{color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText p{display:block;width:234px;height:auto;color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .steps{display:flex;flex-wrap:wrap;column-gap:23px;row-gap:17px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 154px;width:100%;min-height:359px;height:auto;background-color:#f3f3f3}.stepExecutorBlock .footerButtons{margin-top:46px;padding-left:154px;padding-bottom:74px}.modalStepExecutor{max-width:898px;width:auto;box-shadow:0 0 10px #0000001c}.modalStepExecutor .modalHeader{height:auto;padding:36px 25px 32px 33px;display:flex;flex-direction:column;row-gap:13px}.modalStepExecutor .modalHeader .headerModalText{display:flex;justify-content:space-between}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;column-gap:23px}.modalStepExecutor .modalHeader .headerModalText .closeBtn{width:33px;height:33px;border-radius:5px;background-color:#f3f3f3;display:flex;justify-content:center;align-items:center;cursor:pointer}.modalStepExecutor .modalHeader .headerModalText .closeBtn:hover svg path{fill:#cf0106}.modalStepExecutor .modalHeader .headerModalText p{width:235px;color:#4d4d4d}.modalStepExecutor .modalHeader .modalSteps{max-width:724px;width:auto;display:flex;flex-wrap:wrap;column-gap:23px}.modalStepExecutor .modalExecutorMainContent{padding:29px 45px 31px 33px;background-color:#f3f3f3;min-height:345px;height:auto}.modalStepExecutor .modalFooter{padding:32px 0 35px 33px;display:flex;column-gap:17px}.rightExecutorBlock{padding:25px 19px 43px;max-width:401px;height:auto;background-color:#f3f3f3;border-radius:5px}.rightExecutorBlock .rightExecutorHeader{display:flex;justify-content:space-between}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton{display:flex;flex-direction:column;row-gap:8px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton span,.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{height:auto;width:225px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{color:#4d4d4d}.rightExecutorBlock .rightExecutorHeader .closeButton svg{cursor:pointer}.rightExecutorBlock .rightExecutorHeader .closeButton svg:hover path{fill:#cf0106}.rightExecutorBlock .line{margin-top:9px;margin-bottom:37px}.rightExecutorBlock .contentExecutor .rightChangeContent{display:flex;justify-content:space-between}.rightExecutorBlock .contentExecutor .rightChangeContent .executorChangeContent{max-width:291px;height:auto}.rightExecutorBlock .contentExecutor .rightChangeContent .rightSteps{display:flex;flex-direction:column;row-gap:22px}.rightExecutorBlock .rightFooter{margin-top:67px;display:flex;column-gap:16px}@media screen and (max-width: 768px){.stepExecutorBlock .stepExecutorHeader{padding:21px 41px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 54px}.stepExecutorBlock .footerButtons{padding:41px}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;flex-direction:column}.modalStepExecutor .modalHeader .modalSteps{row-gap:21px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StageComponent, selector: "mefdev-stage", inputs: ["currentExecutorStep", "isRightModal", "isCompleted", "title"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: StepExecutorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mefdev-step-executor', template: "<!--view == regular-->\r\n\r\n<div class=\"stepExecutorBlock\" *ngIf=\"view === 'regular'\">\r\n  <header class=\"stepExecutorHeader\">\r\n    <div class=\"stepExecutorHeaderText\">\r\n      <h1 class=\"title\">\r\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n      </h1>\r\n      <p class=\"body-5\">\r\n        <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <div class=\"steps\">\r\n      <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                    [isRightModal]=\"false\"\r\n                    [title]=\"page.title\"\r\n                    [currentExecutorStep]=\"pageIndex + 1\"\r\n                    [isCompleted]=\"page.isCompleted\">\r\n      </mefdev-stage>\r\n    </div>\r\n  </header>\r\n\r\n  <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n    <div #container></div>\r\n  </div>\r\n\r\n  <div class=\"footerButtons\">\r\n    <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!--view == modal-->\r\n\r\n<div class=\"modalStepExecutor\" *ngIf=\"view === 'modal'\">\r\n\r\n  <header class=\"modalHeader\">\r\n    <div class=\"headerModalText\">\r\n      <div class=\"textAndCloseButton\">\r\n        <h1 class=\"title\">\r\n          <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n        </h1>\r\n        <p class=\"body-5\">\r\n          <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n        </p>\r\n      </div>\r\n      <article class=\"closeBtn\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.26735 7.68135L0.610352 2.02435L2.02435 0.610352L7.68135 6.26735L13.3384 0.610352L14.7524 2.02435L9.09535 7.68135L14.7524 13.3384L13.3384 14.7524L7.68135 9.09535L2.02435 14.7524L0.610352 13.3384L6.26735 7.68135Z\" fill=\"#4D4D4D\"/>\r\n        </svg>\r\n      </article>\r\n    </div>\r\n    <div class=\"modalSteps\">\r\n      <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                    [isRightModal]=\"false\"\r\n                    [title]=\"page.title\"\r\n                    [currentExecutorStep]=\"pageIndex + 1\"\r\n                    [isCompleted]=\"page.isCompleted\">\r\n      </mefdev-stage>\r\n    </div>\r\n  </header>\r\n\r\n  <main *ngIf=\"activePage\" class=\"modalExecutorMainContent\">\r\n    <div #container></div>\r\n  </main>\r\n\r\n  <footer class=\"modalFooter\">\r\n    <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n  </footer>\r\n\r\n</div>\r\n\r\n<!--view == right-->\r\n\r\n<div class=\"rightExecutorBlock\" *ngIf=\"view === 'right'\">\r\n\r\n  <header class=\"rightExecutorHeader\">\r\n    <div class=\"rightExecutorTextAndCloseButton\">\r\n      <span class=\"body-1\">\r\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\r\n      </span>\r\n      <p class=\"body-5\">\r\n        <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\r\n      </p>\r\n    </div>\r\n    <div class=\"closeButton\">\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.0566 1.59971L14.6566 0.199707L8.05664 6.79971L1.45664 0.199707L0.0566406 1.59971L6.65664 8.19971L0.0566406 14.7997L1.45664 16.1997L8.05664 9.59971L14.6566 16.1997L16.0566 14.7997L9.45664 8.19971L16.0566 1.59971Z\" fill=\"#525252\"/>\r\n      </svg>\r\n    </div>\r\n  </header>\r\n\r\n  <div class=\"line\">\r\n    <svg width=\"363\" height=\"1\" viewBox=\"0 0 363 1\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <line x1=\"-4.37114e-08\" y1=\"0.5\" x2=\"362.674\" y2=\"0.499968\" stroke=\"#4D4D4D\"/>\r\n    </svg>\r\n  </div>\r\n\r\n  <div class=\"contentExecutor\">\r\n    <div class=\"rightChangeContent\">\r\n      <div *ngIf=\"activePage\" class=\"executorChangeContent\">\r\n        <div #container></div>\r\n      </div>\r\n      <div class=\"rightSteps\">\r\n        <mefdev-stage *ngFor=\"let page of pages; let pageIndex = index\"\r\n                      [isRightModal]=\"true\"\r\n                      [title]=\"page.title\"\r\n                      [currentExecutorStep]=\"pageIndex + 1\"\r\n                      [isCompleted]=\"page.isCompleted\">\r\n        </mefdev-stage>\r\n      </div>\r\n    </div>\r\n\r\n    <footer class=\"rightFooter\">\r\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\r\n    </footer>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".stepExecutorBlock{height:auto;display:flex;flex-direction:column}.stepExecutorBlock .stepExecutorHeader{padding:49px 71px 40px 154px;display:flex;flex-direction:column;row-gap:23px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText{display:flex;flex-direction:column;row-gap:8px}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText .title{color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .stepExecutorHeaderText p{display:block;width:234px;height:auto;color:#4d4d4d}.stepExecutorBlock .stepExecutorHeader .steps{display:flex;flex-wrap:wrap;column-gap:23px;row-gap:17px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 154px;width:100%;min-height:359px;height:auto;background-color:#f3f3f3}.stepExecutorBlock .footerButtons{margin-top:46px;padding-left:154px;padding-bottom:74px}.modalStepExecutor{max-width:898px;width:auto;box-shadow:0 0 10px #0000001c}.modalStepExecutor .modalHeader{height:auto;padding:36px 25px 32px 33px;display:flex;flex-direction:column;row-gap:13px}.modalStepExecutor .modalHeader .headerModalText{display:flex;justify-content:space-between}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;column-gap:23px}.modalStepExecutor .modalHeader .headerModalText .closeBtn{width:33px;height:33px;border-radius:5px;background-color:#f3f3f3;display:flex;justify-content:center;align-items:center;cursor:pointer}.modalStepExecutor .modalHeader .headerModalText .closeBtn:hover svg path{fill:#cf0106}.modalStepExecutor .modalHeader .headerModalText p{width:235px;color:#4d4d4d}.modalStepExecutor .modalHeader .modalSteps{max-width:724px;width:auto;display:flex;flex-wrap:wrap;column-gap:23px}.modalStepExecutor .modalExecutorMainContent{padding:29px 45px 31px 33px;background-color:#f3f3f3;min-height:345px;height:auto}.modalStepExecutor .modalFooter{padding:32px 0 35px 33px;display:flex;column-gap:17px}.rightExecutorBlock{padding:25px 19px 43px;max-width:401px;height:auto;background-color:#f3f3f3;border-radius:5px}.rightExecutorBlock .rightExecutorHeader{display:flex;justify-content:space-between}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton{display:flex;flex-direction:column;row-gap:8px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton span,.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{height:auto;width:225px}.rightExecutorBlock .rightExecutorHeader .rightExecutorTextAndCloseButton p{color:#4d4d4d}.rightExecutorBlock .rightExecutorHeader .closeButton svg{cursor:pointer}.rightExecutorBlock .rightExecutorHeader .closeButton svg:hover path{fill:#cf0106}.rightExecutorBlock .line{margin-top:9px;margin-bottom:37px}.rightExecutorBlock .contentExecutor .rightChangeContent{display:flex;justify-content:space-between}.rightExecutorBlock .contentExecutor .rightChangeContent .executorChangeContent{max-width:291px;height:auto}.rightExecutorBlock .contentExecutor .rightChangeContent .rightSteps{display:flex;flex-direction:column;row-gap:22px}.rightExecutorBlock .rightFooter{margin-top:67px;display:flex;column-gap:16px}@media screen and (max-width: 768px){.stepExecutorBlock .stepExecutorHeader{padding:21px 41px}.stepExecutorBlock .executorChangeContent{padding:46px 31px 57px 54px}.stepExecutorBlock .footerButtons{padding:41px}.modalStepExecutor .modalHeader .headerModalText .textAndCloseButton{display:flex;flex-direction:column}.modalStepExecutor .modalHeader .modalSteps{row-gap:21px}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { view: [{
+                type: Input,
+                args: [{ required: true }]
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }], title: [{
+                type: ContentChild,
+                args: ['title']
+            }], description: [{
+                type: ContentChild,
+                args: ['description']
+            }], footer: [{
+                type: ContentChild,
+                args: ['footer']
+            }], onActivePageChange: [{
+                type: Output
+            }] } });
+
+class MefdevExecutorPageComponent {
+    _mainExecutor;
+    _elementRef;
+    title;
+    isActive = false;
+    isCompleted = false;
+    isCompletedChange = new EventEmitter();
+    elRef;
+    constructor(_mainExecutor, _elementRef) {
+        this._mainExecutor = _mainExecutor;
+        this._elementRef = _elementRef;
+        this.elRef = _elementRef;
+        _mainExecutor.pages.push(this);
+        if (_mainExecutor.activePageInd == -1) {
+            _mainExecutor.activePageInd = 0;
+        }
+    }
+    ngOnChanges(changes) {
+        this.isCompletedChange.emit(changes['isCompleted']?.currentValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefdevExecutorPageComponent, deps: [{ token: StepExecutorComponent, host: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: MefdevExecutorPageComponent, selector: "mefdev-executor-page", inputs: { title: "title", isActive: "isActive", isCompleted: "isCompleted" }, outputs: { isCompletedChange: "isCompletedChange" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefdevExecutorPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mefdev-executor-page',
+                    template: '<ng-content></ng-content>',
+                }]
+        }], ctorParameters: function () { return [{ type: StepExecutorComponent, decorators: [{
+                    type: Host
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { title: [{
+                type: Input
+            }], isActive: [{
+                type: Input
+            }], isCompleted: [{
+                type: Input
+            }], isCompletedChange: [{
+                type: Output
+            }] } });
+
+class MefDevStepExecutorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, declarations: [StepExecutorComponent,
+            MefdevExecutorPageComponent,
+            StageComponent], imports: [CommonModule,
+            FormsModule], exports: [StepExecutorComponent,
+            MefdevExecutorPageComponent,
+            StageComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, imports: [CommonModule,
+            FormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MefDevStepExecutorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        StepExecutorComponent,
+                        MefdevExecutorPageComponent,
+                        StageComponent
+                    ],
+                    exports: [
+                        StepExecutorComponent,
+                        MefdevExecutorPageComponent,
+                        StageComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                    ]
+                }]
+        }] });
+
 class MefDevSpecFlowTestComponent {
     /**
      *  UTC datetime
@@ -4380,5 +5179,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CardComponent, CardLongComponent, CardSimpleComponent, CartTypeColors, CentralPageComponent, CentralPageRowComponent, CollapseComponent, CollapseSetComponent, 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 };
+export { CardComponent, CardLongComponent, CardSimpleComponent, CartTypeColors, CentralPageComponent, CentralPageRowComponent, CollapseComponent, CollapseSetComponent, DatepickerComponent, FillComponent, FilteredFieldContainerComponent, FilteredFieldItemComponent, FilteredFieldService, FiltredItemModel, HelpBlockComponent, ManagePageComponent, MefDevCardModule, MefDevCollapseModule, MefDevDatepickerModule, MefDevFilteredFieldModule, MefDevHelpBlockModule, MefDevModalModule, MefDevOptionComponent, MefDevPageLayoutsModule, MefDevProgressComponent, MefDevProgressModule, MefDevSelectComponent, MefDevSelectModule, MefDevSpecFlowTestComponent, MefDevSpecFlowTestModule, MefDevStepExecutorModule, MefDevSwitchComponent, MefDevSwitchModule, MefDevTabBodyComponent, MefDevTabComponent, MefDevTabLabelDirective, MefDevTabSetComponent, MefDevTabsInkBarDirective, MefDevTabsModule, MefDevTabsNavComponent, MefdevExecutorPageComponent, OptionPipe, ProfileComponent, ProgressConfig, RightFilterComponent, SlideRightComponent, SlideUpComponent, StageComponent, StepExecutorComponent, TabChangeEvent, TablePageComponent, mefDevCardComponents, mefDevCollapseModuleComponents, pgCard, pgCardModule };
 //# sourceMappingURL=natec-mef-dev-ui-kit.mjs.map