@natec/mef-dev-ui-kit 20.0.0-beta.2 → 20.0.2

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

@@ -1,17 +1,16 @@
 import * as i0 from '@angular/core';
-import { Input, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ContentChild, Host, NgModule, Injectable, Pipe, forwardRef, HostListener, ViewChild, Directive, ContentChildren, Optional, TemplateRef, InjectionToken, inject, ViewContainerRef, DOCUMENT, NgZone, ElementRef, Renderer2, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, HostAttributeToken, numberAttribute, QueryList, Injector, SkipSelf, signal, ViewChildren, input, computed, afterNextRender } from '@angular/core';
+import { Input, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ContentChild, Host, NgModule, Injectable, ChangeDetectionStrategy, Pipe, forwardRef, HostListener, ViewChild, Directive, ContentChildren, Optional, TemplateRef, InjectionToken, inject, ViewContainerRef, DOCUMENT, NgZone, ElementRef, Renderer2, booleanAttribute, ChangeDetectorRef, HostAttributeToken, numberAttribute, QueryList, Injector, SkipSelf, signal, ViewChildren, input, computed, afterNextRender } from '@angular/core';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
-import { CommonModule, DatePipe, NgTemplateOutlet, NgClass } from '@angular/common';
-import { Subject, of, fromEvent, merge, Subscription, EMPTY, defer, filter as filter$1, map as map$1, startWith as startWith$1, switchMap as switchMap$1, takeUntil as takeUntil$1, take as take$1, Observable, timer } from 'rxjs';
+import { CommonModule, NgTemplateOutlet, NgClass } from '@angular/common';
+import { Subject, of, fromEvent, merge, Subscription, EMPTY, defer, timer, Observable, filter as filter$1, map as map$1, startWith as startWith$1, switchMap as switchMap$1, takeUntil as takeUntil$1, take as take$1 } from 'rxjs';
+import * as i3 from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, OverlayModule, createBlockScrollStrategy, createGlobalPositionStrategy, ViewportRuler, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl, Validators, NG_VALIDATORS } from '@angular/forms';
 import { TAB, DOWN_ARROW, ENTER, hasModifierKey, SPACE, ESCAPE, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, A } from '@angular/cdk/keycodes';
-import * as i3 from '@angular/cdk/overlay';
-import { CdkConnectedOverlay, OverlayModule, createBlockScrollStrategy, createGlobalPositionStrategy, ViewportRuler, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
-import * as i1$1 from '@angular/router';
 import { auditTime, startWith, map, filter, take, switchMap, takeUntil, debounceTime, skip } from 'rxjs/operators';
-import * as i1$2 from '@angular/cdk/bidi';
+import * as i1$1 from '@angular/cdk/bidi';
 import { Directionality } from '@angular/cdk/bidi';
 import { CdkAccordionItem, CdkAccordion } from '@angular/cdk/accordion';
 import { _IdGenerator, FocusMonitor, FocusKeyManager, ActiveDescendantKeyManager, CdkMonitorFocus } from '@angular/cdk/a11y';
@@ -19,7 +18,7 @@ import { UniqueSelectionDispatcher, SelectionModel } from '@angular/cdk/collecti
 import { TemplatePortal, CdkPortalOutlet, PortalModule, CdkPortal } from '@angular/cdk/portal';
 import { CdkDialogContainer, Dialog, DialogConfig, DialogModule } from '@angular/cdk/dialog';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
-import * as i1$3 from '@angular/cdk/scrolling';
+import * as i1$2 from '@angular/cdk/scrolling';
 import { CdkScrollable, ViewportRuler as ViewportRuler$1 } from '@angular/cdk/scrolling';
 import { CdkStepLabel, CdkStepHeader, CdkStep, CdkStepper, CdkStepperNext, CdkStepperPrevious, CdkStepperModule } from '@angular/cdk/stepper';
 import { Platform } from '@angular/cdk/platform';
@@ -504,92 +503,52 @@ class FiltredItemModel {
 }
 
 /**
-* A component representing a help block with smooth expand animation.
-*
-*  Example of usage:
-*```
-* <mefdev-help-block [title]="'Help'">
-*  Content goes here...
-*    <ng-content></ng-content>
-* </mefdev-help-block>
-*```
-* <example-url>https://platform.mef.dev/ui_kit_demo/view/utils/help_block</example-url>
-*/
-class HelpBlockComponent {
+  * Component for displaying a simple card with a title.
+  *
+  * Example of usage:
+  *```
+  * <mefdev-card-simple [disabled]="true">
+  *   <ng-template #card_title>
+  *     <!-- Content for the card title -->
+  *   </ng-template>
+  * </mefdev-card-simple>
+  *```
+  *
+  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_components/card/card_simple</example-url>
+  */
+class CardSimpleComponent {
     /**
-     * Indicates whether the help block is visible.
+     * Determines whether the card is disabled or not.
      */
-    isVisible = true;
+    isDisabled = false;
     /**
-      * Indicates whether the help block is expanded.
-    */
-    expanded = false;
-    /**
-      * The title of the help block.
-      *```
-      * <mefdev-help-block [title]="'Help Block'">
-      *    Content goes here...
-      * </mefdev-help-block>
-      *```
-      */
-    title = "Help";
+     * Template for displaying the title of the card.
+     *```
+     * <mefdev-card-simple>
+     *   <ng-template #card_title>
+     *     <h3>Card Title</h3>
+     *   </ng-template>
+     * </mefdev-card-simple>
+     *```
+     */
+    card_title;
     constructor() { }
     ngOnInit() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: HelpBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: HelpBlockComponent, isStandalone: false, selector: "mefdev-help-block", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"card-simple\" *ngIf=\"isVisible\">\r\n    <div class=\"row m-1 body-1\" (click)=\"expanded = !expanded\" style=\"cursor: pointer;\">\r\n        <div class=\"col-10\" style=\"color: white;\">\r\n            {{ title }}\r\n        </div>\r\n        <div class=\"col-2\">\r\n            <i class=\"fa fa-window-close\" aria-hidden=\"true\" style=\"float: right; margin-left: 20px;\" (click)=\"isVisible = !isVisible;\"></i>\r\n            \r\n            <i class=\"fa fa-angle-down \" *ngIf=\"!expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>\r\n            <i class=\"fa fa-angle-up\" *ngIf=\"expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>      \r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body row\" [@smothExpand]=\"expanded ? 'open' : 'close'\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.card-simple{opacity:.7;background-color:#28b446;padding:2px;border-radius:5px;margin-top:.3em;margin-bottom:.5em}.card-body{opacity:1;margin-left:2px;margin-right:2px;margin-bottom:2px;border-radius:5px;padding-top:15px;padding-bottom:15px;background-color:#f3f3f3;color:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
-            trigger('smothExpand', [
-                state('close', style({
-                    height: '0',
-                    margin: '0',
-                    padding: '0',
-                    opacity: '0',
-                    visibility: 'hidden',
-                })),
-                state('open', style({})),
-                transition('close<=>open', animate(200))
-            ])
-        ] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CardSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: CardSimpleComponent, isStandalone: false, selector: "mefdev-card-simple", inputs: { isDisabled: ["disabled", "isDisabled"] }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }], ngImport: i0, template: "<div class=\"md-card-simple\" [class.md-card-simple--disabled]=\"isDisabled\">\r\n  <div class=\"md-card-simple__section md-card-simple__section--header\" *ngIf=\"card_title as tpl\">\r\n    <ng-template [ngTemplateOutlet]=\"tpl\"></ng-template>\r\n  </div>\r\n\r\n  <div class=\"md-card-simple__section md-card-simple__section--content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- optional named slot for actions -->\r\n  <div class=\"md-card-simple__section md-card-simple__section--actions\">\r\n    <ng-content select=\"[card-actions]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.h1,h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;line-height:40px;font-weight:700;text-transform:none;color:#000;margin-bottom:16px}.h2,h2{font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:700;text-transform:none;color:#000;margin-bottom:12px}.h3,.md-card-simple__section--header,h3{font-family:Montserrat,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;text-transform:none;color:#000;margin-bottom:10px}.h4,h4{font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:.5px;color:#000;margin-bottom:8px}.h5,h5{font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-transform:none;color:#000;margin-bottom:6px}.h6,h6{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:500;text-transform:none;color:#000;margin-bottom:4px}.body-1,body-1{font-family:Open Sans,Arial,sans-serif;font-size:18px;line-height:27px;font-weight:700;color:#000}.body-2,body-2{font-family:Open Sans,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#000}.body-3,body-3{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;color:#000}.body-6,body-6{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:16px;font-weight:400;color:#000}:host{display:block;box-sizing:border-box}.md-card-simple{background-color:#f3f3f3;border-radius:5px;padding:.5rem}.md-card-simple__section{margin:.5rem}.md-card-simple__section--actions{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}.md-card-simple__section--actions:empty{display:none}.md-card-simple--disabled{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: HelpBlockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CardSimpleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-help-block', animations: [
-                        trigger('smothExpand', [
-                            state('close', style({
-                                height: '0',
-                                margin: '0',
-                                padding: '0',
-                                opacity: '0',
-                                visibility: 'hidden',
-                            })),
-                            state('open', style({})),
-                            transition('close<=>open', animate(200))
-                        ])
-                    ], standalone: false, template: "<div class=\"card-simple\" *ngIf=\"isVisible\">\r\n    <div class=\"row m-1 body-1\" (click)=\"expanded = !expanded\" style=\"cursor: pointer;\">\r\n        <div class=\"col-10\" style=\"color: white;\">\r\n            {{ title }}\r\n        </div>\r\n        <div class=\"col-2\">\r\n            <i class=\"fa fa-window-close\" aria-hidden=\"true\" style=\"float: right; margin-left: 20px;\" (click)=\"isVisible = !isVisible;\"></i>\r\n            \r\n            <i class=\"fa fa-angle-down \" *ngIf=\"!expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>\r\n            <i class=\"fa fa-angle-up\" *ngIf=\"expanded\" aria-hidden=\"true\" style=\"float: right;\"></i>      \r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body row\" [@smothExpand]=\"expanded ? 'open' : 'close'\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.card-simple{opacity:.7;background-color:#28b446;padding:2px;border-radius:5px;margin-top:.3em;margin-bottom:.5em}.card-body{opacity:1;margin-left:2px;margin-right:2px;margin-bottom:2px;border-radius:5px;padding-top:15px;padding-bottom:15px;background-color:#f3f3f3;color:#000}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{
+            args: [{ selector: 'mefdev-card-simple', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"md-card-simple\" [class.md-card-simple--disabled]=\"isDisabled\">\r\n  <div class=\"md-card-simple__section md-card-simple__section--header\" *ngIf=\"card_title as tpl\">\r\n    <ng-template [ngTemplateOutlet]=\"tpl\"></ng-template>\r\n  </div>\r\n\r\n  <div class=\"md-card-simple__section md-card-simple__section--content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- optional named slot for actions -->\r\n  <div class=\"md-card-simple__section md-card-simple__section--actions\">\r\n    <ng-content select=\"[card-actions]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.h1,h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;line-height:40px;font-weight:700;text-transform:none;color:#000;margin-bottom:16px}.h2,h2{font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:700;text-transform:none;color:#000;margin-bottom:12px}.h3,.md-card-simple__section--header,h3{font-family:Montserrat,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;text-transform:none;color:#000;margin-bottom:10px}.h4,h4{font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:.5px;color:#000;margin-bottom:8px}.h5,h5{font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-transform:none;color:#000;margin-bottom:6px}.h6,h6{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:500;text-transform:none;color:#000;margin-bottom:4px}.body-1,body-1{font-family:Open Sans,Arial,sans-serif;font-size:18px;line-height:27px;font-weight:700;color:#000}.body-2,body-2{font-family:Open Sans,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#000}.body-3,body-3{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;color:#000}.body-6,body-6{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:16px;font-weight:400;color:#000}:host{display:block;box-sizing:border-box}.md-card-simple{background-color:#f3f3f3;border-radius:5px;padding:.5rem}.md-card-simple__section{margin:.5rem}.md-card-simple__section--actions{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}.md-card-simple__section--actions:empty{display:none}.md-card-simple--disabled{opacity:.6;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isDisabled: [{
                 type: Input,
-                args: ['title']
+                args: ["disabled"]
+            }], card_title: [{
+                type: ContentChild,
+                args: ["card_title"]
             }] } });
 
-class MefDevHelpBlockModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevHelpBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MefDevHelpBlockModule, declarations: [HelpBlockComponent], imports: [CommonModule,
-            MefDevCollapseModule], exports: [HelpBlockComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevHelpBlockModule, imports: [CommonModule,
-            MefDevCollapseModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevHelpBlockModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [HelpBlockComponent],
-                    exports: [HelpBlockComponent],
-                    imports: [
-                        CommonModule,
-                        MefDevCollapseModule
-                    ]
-                }]
-        }] });
-
 function toBoolean(value) {
     return value === '' || (value && value !== 'false');
 }
@@ -1497,1641 +1456,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 type: Input
             }] } });
 
+class MefDevSelectModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.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: "20.3.6", ngImport: i0, type: MefDevSelectModule, imports: [CommonModule, FormsModule, OverlayModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, OverlayModule],
+                    declarations: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent],
+                    exports: [OptionPipe, MefDevOptionComponent, MefDevSelectComponent]
+                }]
+        }] });
+
+const mefDevCardComponents = [CardSimpleComponent];
+class MefDevCardModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MefDevCardModule, declarations: [CardSimpleComponent], imports: [CommonModule,
+            MefDevCollapseModule,
+            MefDevSelectModule], exports: [CardSimpleComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevCardModule, imports: [CommonModule,
+            MefDevCollapseModule,
+            MefDevSelectModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: mefDevCardComponents,
+                    exports: mefDevCardComponents,
+                    imports: [
+                        CommonModule,
+                        MefDevCollapseModule,
+                        MefDevSelectModule,
+                    ]
+                }]
+        }] });
+
 /**
- * Datepicker Component for selecting dates.
- *
- * This component allows users to pick a date from a calendar interface.
- * It supports various configuration options such as language, date format, and date range.
- *
- * @example
- * <mefdev-datepicker
- *   [labelContentText]="'Select your date'"
- *   [lang]="'uk'"
- *   [dateFormat]="'dd/MM/yyyy'"
- *   [range]="{startYear: 1900, toYear: 300}"
- *   [disabled]="false"
- *   (dateChanged)="onDateChanged($event)"
- *   [topOffset]="'20'"
- *   [leftOffset]="'10'">
- * </mefdev-datepicker>
- *
- * <example-url>https://platform.mef.dev/ui_kit_demo/view/utils/datepicker</example-url>
- */
-class DatepickerComponent {
-    datePipe;
-    elementRef;
-    /**
-     * A flag that checks whether a valid date has been entered and whether the entered date exists.
-     * If the two previous conditions are not true, the datepicker will be highlighted in red
-     */
-    isUserDateValid = true;
-    /**
-     * Flag to determine if the calendar is open or closed.
-     * Default value: false (closed).
-     */
-    isCalendarOpen = false;
-    /**
-     * 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;
-    /**
-     * Label text for the datepicker.
-     * Default value: 'en' (English).
-     * @example
-     * <mefdev-datepicker
-     *   [labelContentText] = "'Chose your date'">
-     * </mefdev-datepicker>
-     */
-    labelContentText;
-    /**
-     * The language/locale for the datepicker.
-     * Default value: 'en' (English).
-     * @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 };
+  * Fill Component for a modal window.
+  *
+  * Example of usage:
+  * ```
+  * <mefdev-fill-modal #pin_modal>
+  *   <!-- Modal header content -->
+  *   <ng-template #modal_header>
+  *     <!-- Header content goes here -->
+  *   </ng-template>
+  *
+  *   <!-- Modal footer content -->
+  *   <ng-template #modal_footer>
+  *     <!-- Footer content goes here -->
+  *   </ng-template>
+  * </mefdev-fill-modal>
+  * ```
+  *
+  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_components/modals/fill</example-url>
+  */
+class FillComponent {
+    visible = false;
+    dialog;
     /**
-     * Whether the datepicker is disabled or not.
-     * Default value: false (enabled).
-     * @example
-     * <mefdev-datepicker
-     *   [disabled]="false">
-     * </mefdev-datepicker>
-     */
-    disabled = false;
+    * The header template of the modal window.
+    * ```
+    * <mefdev-fill-modal #pin_modal>
+     *   <ng-template #modal_header>
+     *     <!-- Header content goes here -->
+     *   </ng-template>
+     * </mefdev-fill-modal>
+    * ```
+    */
+    modal_header;
     /**
-     * The top offset for positioning the datepicker.
-     * Default value: '20'.
-     * @example
-     * <mefdev-datepicker
-     *   [topOffset]="'20'">
-     * </mefdev-datepicker>
-     */
-    topOffset = '20';
+    * The footer template of the modal window.
+    * ```
+    * <mefdev-fill-modal #pin_modal>
+     *   <ng-template #modal_footer>
+     *     <!-- Footer content goes here -->
+     *   </ng-template>
+     * </mefdev-fill-modal>
+    * ```
+    */
+    modal_footer;
     /**
-     * The left offset for positioning the datepicker.
-     * Default value: '10'.
-     * @example
-     * <mefdev-datepicker
-     *   [leftOffset]="'10'">
-     * </mefdev-datepicker>
+     * Input parameter that determines whether to show the modal window.
      */
-    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.
-     * @param event The MouseEvent object representing the click event.
-     */
-    onClick(event) {
-        const targetElement = event.target;
-        const datepickerContainer = this.elementRef.nativeElement.querySelector('.datepicker-container');
-        const calendar = this.elementRef.nativeElement.querySelector('.calendar');
-        const monthDropdown = this.elementRef.nativeElement.querySelector('.monthDropdown');
-        const yearDropdown = this.elementRef.nativeElement.querySelector('.yearDropdown');
-        const inputElement = this.elementRef.nativeElement.querySelector('input');
-        if (datepickerContainer && datepickerContainer.contains(calendar)) {
-            if (calendar && calendar.contains(targetElement))
-                return;
-            if (this.isMonthDropdownOpen && !calendar.contains(targetElement))
-                return;
-            if (this.isYearDropdownOpen && !calendar.contains(targetElement))
-                return;
-            if ((monthDropdown && monthDropdown.contains(targetElement)) && (yearDropdown && yearDropdown.contains(targetElement))) {
-                this.toggleMonthDropdown(event);
-                this.toggleYearDropdown(event);
-            }
+    set show(val) {
+        if (val) {
+            this.showModal();
+        }
+        else {
+            this.hideModal();
         }
     }
+    ;
     /**
-     * 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();
-    }
-    /**
-     * Lifecycle hook called after the component is initialized.
-     * It initializes the years for the year select dropdown.
-     */
-    ngOnInit() {
-        this.initializeYears();
-    }
-    /**
-     * Lifecycle hook called whenever the input properties of the component change.
-     * It updates the input value.
-     */
-    ngOnChanges() {
-        this.updateInputValue();
-    }
-    /**
-     * An array of month names based on the selected language.
-     * It provides localized month names for display in the datepicker.
-     */
-    get months() {
-        return this.getMonthList(this.lang);
-    }
-    /**
-     * An array of weekday names based on the selected language.
-     * It provides localized weekday names for display in the datepicker.
-     */
-    get weekdays() {
-        return this.getWeekdayList(this.lang);
-    }
-    /**
-     * 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);
-    }
-    /**
-     * Toggle the editing mode for the date input. When enabled, the user can edit the date directly in the input field.
-     */
-    toggleEdit() {
-        this.editedDate = this.formatSelectedDate(); // Store the current formatted date for editing
-        this.isCalendarOpen = false;
-    }
-    /**
-     * 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.
+     * Event emitted when the modal is change state.
+     * Emits a boolean value indicating if the modal is closed(false), or open(true).
+     * Example:
      * ```
-     * // Get a list of weekday names in the default language and short format
-     * const weekdays = this.getWeekdayList();
+     * <mefdev-fill-modal (visibleChange)="onModalClosed($event)"></mefdev-fill-modal>
      * ```
      */
-    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);
+    visibleChange = new EventEmitter();
+    constructor() { }
+    ngOnInit() {
     }
     /**
-     * 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();
-     * ```
+     * Shows the modal state.
+     * Return a boolean value indicating if the modal is closed(false), or open(true)
      */
-    saveEditedDate() {
-        if (this.isDateValid(this.editedDate)) {
-            const [day, month, year] = this.editedDate.split('/');
-            this.selectedDate = new Date(+year, +month - 1, +day);
-            this.formatDate();
-        }
+    getModalState() {
+        return this.visible;
     }
     /**
-     * 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);
-     * ```
+     * Shows the modal.
+     * Call this method to open the modal window.
      */
-    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];
-            this.selectedDate = new Date(+parsedDate[2], +parsedDate[1] - 1, +parsedDate[0]);
-            this.calculateFirstDayOfCalendar();
-        }
-        this.isUserDateValid = this.isDateValid(inputDate);
+    showModal() {
+        this.visible = true;
+        this.visibleChange.emit(this.visible);
     }
     /**
-     * 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);
-     * ```
+     * Hides the modal.
+     * Call this method to close the modal window.
      */
-    toggleMonthDropdown(event) {
-        this.isMonthDropdownOpen = !this.isMonthDropdownOpen;
-    }
-    /**
-     * Toggle the visibility of the year dropdown in the calendar interface.
-     * This method is used to open or close the dropdown for selecting years.
-     * @param event - The event triggering the toggle action (e.g., a click event).
-     * ```
-     * // Toggle the visibility of the year dropdown
-     * this.toggleYearDropdown(event);
-     * ```
-     */
-    toggleYearDropdown(event) {
-        this.isYearDropdownOpen = !this.isYearDropdownOpen;
-    }
-    /**
-     * 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.formatDate();
-        this.calculateFirstDayOfCalendar();
-    }
-    /**
-     * 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();
-    }
-    /**
-     * 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();
-    }
-    /**
-     * 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) || '';
-    }
-    /**
-     * 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) || '';
-    }
-    /**
-     * 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.isCalendarOpen ? this.editedDate : this.formatSelectedDate();
-    }
-    /**
-     * 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 {
-            return this.datePipe.transform(date, 'dd');
-        }
-    }
-    /**
-     * 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();
-    }
-    /**
-     * 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();
-    }
-    /**
-     * 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();
-    }
-    /**
-     * 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++;
-            }
-            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.
-     * It also checks whether the specified number, month is correct and whether the specified one exists among calendar years
-     * @param inputDate - The date string to validate.
-     * @returns `true` if the input date string is valid, otherwise `false`.
-     * ```
-     * // Check if a date string is valid
-     * const isValidDate = this.isDateValid('05/25/2023');
-     * ```
-     */
-    isDateValid(inputDate) {
-        if (!this.dateRegExp.test(inputDate)) {
-            return false;
-        }
-        const parts = inputDate.split('/');
-        const day = parseInt(parts[0], 10);
-        const month = parseInt(parts[1], 10);
-        const year = parseInt(parts[2], 10);
-        if (year > this.years[this.years.length - 1] || year < this.years[0]) {
-            return false;
-        }
-        const daysInMonth = new Date(year, month, 0).getDate();
-        return day <= daysInMonth;
-    }
-    /**
-     * Check if a given date is today's date.
-     * @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: "20.3.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: "20.3.6", type: DatepickerComponent, isStandalone: false, selector: "mefdev-datepicker", inputs: { labelContentText: "labelContentText", lang: "lang", dateFormat: "dateFormat", yearsRange: ["range", "yearsRange"], disabled: "disabled", topOffset: "topOffset", leftOffset: "leftOffset" }, outputs: { dateChanged: "dateChanged" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"datepicker-container\" [class.disabled]=\"disabled\">\r\n\r\n  <!-- Input, save & edit buttons -->\r\n    <div class=\"input-container form-group\">\r\n        <label *ngIf=\"labelContentText\" class=\"form-label\"> {{ labelContentText }} </label>\r\n        <input\r\n          [ngClass]=\"{ 'calendarNotOpened': !isCalendarOpen }\"\r\n          [ngStyle]=\"{ 'border-color': isUserDateValid ? '' : 'red' }\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          (input)=\"onDateInput($event)\"\r\n          (click)=\"isCalendarOpen = true\"\r\n          [value]=\"formattedDate\"\r\n          [readOnly]=\"!isCalendarOpen\"\r\n        >\r\n    </div>\r\n\r\n  <!-- Calendar(Dropdowns, dates) -->\r\n  <div *ngIf=\"isCalendarOpen\" class=\"calendar\" #calendarContainer\r\n       [style.top]=\"topOffset\"\r\n       [style.left]=\"leftOffset\">\r\n    <div class=\"calendar-header\">\r\n      <div class=\"monthButtonContainer\">\r\n        <!-- Month dropdown -->\r\n        <ng-container *ngIf=\"isMonthDropdownOpen; else monthLabel\">\r\n          <mefdev-select\r\n            class=\"monthDropdown\"\r\n            [(ngModel)]=\"selectedDateMonth\"\r\n            (ngModelChange)=\"onMonthChange()\"\r\n            [PlaceHolder]=\"'month'\"\r\n          >\r\n            <mefdev-option\r\n              *ngFor=\"let month of months; let i = index\"\r\n              [Value]=\"i\"\r\n              [Label]=\"month\"\r\n              style=\"z-index: 1\"\r\n            >{{ month }}</mefdev-option>\r\n          </mefdev-select>\r\n        </ng-container>\r\n        <ng-template #monthLabel>\r\n          <span (click)=\"toggleMonthDropdown($event)\"></span>\r\n        </ng-template>\r\n\r\n        <!-- Year dropdown -->\r\n        <ng-container *ngIf=\"isYearDropdownOpen; else yearLabel\">\r\n          <mefdev-select\r\n            class=\"yearDropdown\"\r\n            [(ngModel)]=\"selectedDateYear\"\r\n            (ngModelChange)=\"onYearChange()\"\r\n            [PlaceHolder]=\"'year'\"\r\n          >\r\n            <mefdev-option\r\n              *ngFor=\"let year of years\"\r\n              [Label]=\"year\"\r\n              [Value]=\"year\"\r\n            >{{year}}</mefdev-option>\r\n          </mefdev-select>\r\n        </ng-container>\r\n        <ng-template #yearLabel>\r\n          <span (click)=\"toggleYearDropdown($event)\">{{ selectedDateYear }}</span>\r\n        </ng-template>\r\n      </div>\r\n      <!-- Calendar exit button -->\r\n      <div>\r\n        <i class=\"fa fa-times toggleCalendarButton\" (click)=\"isCalendarOpen = false\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"calendar-body\">\r\n      <table>\r\n        <tr>\r\n          <th class=\"text-center\" *ngFor=\"let weekday of weekdays\">{{ weekday }}</th>\r\n        </tr>\r\n        <tr *ngFor=\"let week of calendarDays\">\r\n          <td *ngFor=\"let dayData of week\"\r\n              (click)=\"selectDate(dayData.date)\"\r\n              [ngClass]=\"{ 'selected': isDateSelected(dayData.date), 'prev-month': !dayData.isCurrentMonth }\">\r\n\r\n            <span class=\"date\" [class.prev-month]=\"!dayData.isCurrentMonth\">\r\n              {{ dayData.date.getDate() }}\r\n            </span>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.datepicker-container{position:relative;display:inline-block}.datepicker-container.disabled{pointer-events:none;opacity:.8}.input-container{position:relative;display:inline-block}.input-container input[type=text]{padding:5px 5px 5px 15px;border:1px solid #929292}.input-container .calendarNotOpened{cursor:pointer}.calendar{position:absolute;border:1px solid #929292;background-color:#eaeaea;z-index:1}.calendar .calendar-header{background-color:#fff;text-align:center;justify-content:space-between;display:flex;padding:5px 0}.calendar .calendar-header i.fa{display:flex;justify-content:center;align-items:center;width:30px;height:30px;font-size:20px;border-radius:50%;cursor:pointer;background-color:transparent;border:none;color:#cf0106}.calendar .calendar-header .monthButtonContainer{padding-left:10px;height:45px;min-width:140px;display:flex;align-items:center}.calendar .calendar-header .monthDropdown,.calendar .calendar-header .yearDropdown{height:45px;width:105px;cursor:pointer;display:inline-block;padding:6px 5px;border:1px solid #EAEAEA;border-radius:4px;background-color:#fff;color:#4d4d4d}.calendar .calendar-header .monthDropdown{margin:0 8px 0 0;width:130px}.calendar .calendar-header .monthDropdown:hover,.calendar .calendar-header .yearDropdown:hover{border-color:#f3f3f3}.calendar .calendar-body{padding:5px}.calendar .calendar-body table{width:100%}.calendar .calendar-body td{padding:10px;position:relative}.calendar .calendar-body td.selected{position:relative;color:#fff}.calendar .calendar-body td.selected:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:20%;background-color:#cf0106;z-index:-1;width:30px;height:30px;color:#fff;border:1px solid #373737}.calendar .calendar-body td:hover{color:#fff;font-weight:700;background-color:#929292;border-radius:20%;cursor:pointer}.calendar .calendar-body .date{display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MefDevOptionComponent, selector: "mefdev-option", inputs: ["Value", "Label", "Disabled"] }, { kind: "component", type: MefDevSelectComponent, selector: "mefdev-select", inputs: ["Filter", "MaxMultiple", "FirstDefault", "AllowClear", "KeepUnListOptions", "Mode", "Multiple", "PlaceHolder", "NotFoundContent", "Size", "ShowSearch", "Tags", "Disabled", "Open"], outputs: ["SearchChange", "change", "OpenChange", "ScrollToBottom"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: DatepickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-datepicker', standalone: false, template: "<div class=\"datepicker-container\" [class.disabled]=\"disabled\">\r\n\r\n  <!-- Input, save & edit buttons -->\r\n    <div class=\"input-container form-group\">\r\n        <label *ngIf=\"labelContentText\" class=\"form-label\"> {{ labelContentText }} </label>\r\n        <input\r\n          [ngClass]=\"{ 'calendarNotOpened': !isCalendarOpen }\"\r\n          [ngStyle]=\"{ 'border-color': isUserDateValid ? '' : 'red' }\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          (input)=\"onDateInput($event)\"\r\n          (click)=\"isCalendarOpen = true\"\r\n          [value]=\"formattedDate\"\r\n          [readOnly]=\"!isCalendarOpen\"\r\n        >\r\n    </div>\r\n\r\n  <!-- Calendar(Dropdowns, dates) -->\r\n  <div *ngIf=\"isCalendarOpen\" class=\"calendar\" #calendarContainer\r\n       [style.top]=\"topOffset\"\r\n       [style.left]=\"leftOffset\">\r\n    <div class=\"calendar-header\">\r\n      <div class=\"monthButtonContainer\">\r\n        <!-- Month dropdown -->\r\n        <ng-container *ngIf=\"isMonthDropdownOpen; else monthLabel\">\r\n          <mefdev-select\r\n            class=\"monthDropdown\"\r\n            [(ngModel)]=\"selectedDateMonth\"\r\n            (ngModelChange)=\"onMonthChange()\"\r\n            [PlaceHolder]=\"'month'\"\r\n          >\r\n            <mefdev-option\r\n              *ngFor=\"let month of months; let i = index\"\r\n              [Value]=\"i\"\r\n              [Label]=\"month\"\r\n              style=\"z-index: 1\"\r\n            >{{ month }}</mefdev-option>\r\n          </mefdev-select>\r\n        </ng-container>\r\n        <ng-template #monthLabel>\r\n          <span (click)=\"toggleMonthDropdown($event)\"></span>\r\n        </ng-template>\r\n\r\n        <!-- Year dropdown -->\r\n        <ng-container *ngIf=\"isYearDropdownOpen; else yearLabel\">\r\n          <mefdev-select\r\n            class=\"yearDropdown\"\r\n            [(ngModel)]=\"selectedDateYear\"\r\n            (ngModelChange)=\"onYearChange()\"\r\n            [PlaceHolder]=\"'year'\"\r\n          >\r\n            <mefdev-option\r\n              *ngFor=\"let year of years\"\r\n              [Label]=\"year\"\r\n              [Value]=\"year\"\r\n            >{{year}}</mefdev-option>\r\n          </mefdev-select>\r\n        </ng-container>\r\n        <ng-template #yearLabel>\r\n          <span (click)=\"toggleYearDropdown($event)\">{{ selectedDateYear }}</span>\r\n        </ng-template>\r\n      </div>\r\n      <!-- Calendar exit button -->\r\n      <div>\r\n        <i class=\"fa fa-times toggleCalendarButton\" (click)=\"isCalendarOpen = false\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"calendar-body\">\r\n      <table>\r\n        <tr>\r\n          <th class=\"text-center\" *ngFor=\"let weekday of weekdays\">{{ weekday }}</th>\r\n        </tr>\r\n        <tr *ngFor=\"let week of calendarDays\">\r\n          <td *ngFor=\"let dayData of week\"\r\n              (click)=\"selectDate(dayData.date)\"\r\n              [ngClass]=\"{ 'selected': isDateSelected(dayData.date), 'prev-month': !dayData.isCurrentMonth }\">\r\n\r\n            <span class=\"date\" [class.prev-month]=\"!dayData.isCurrentMonth\">\r\n              {{ dayData.date.getDate() }}\r\n            </span>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.datepicker-container{position:relative;display:inline-block}.datepicker-container.disabled{pointer-events:none;opacity:.8}.input-container{position:relative;display:inline-block}.input-container input[type=text]{padding:5px 5px 5px 15px;border:1px solid #929292}.input-container .calendarNotOpened{cursor:pointer}.calendar{position:absolute;border:1px solid #929292;background-color:#eaeaea;z-index:1}.calendar .calendar-header{background-color:#fff;text-align:center;justify-content:space-between;display:flex;padding:5px 0}.calendar .calendar-header i.fa{display:flex;justify-content:center;align-items:center;width:30px;height:30px;font-size:20px;border-radius:50%;cursor:pointer;background-color:transparent;border:none;color:#cf0106}.calendar .calendar-header .monthButtonContainer{padding-left:10px;height:45px;min-width:140px;display:flex;align-items:center}.calendar .calendar-header .monthDropdown,.calendar .calendar-header .yearDropdown{height:45px;width:105px;cursor:pointer;display:inline-block;padding:6px 5px;border:1px solid #EAEAEA;border-radius:4px;background-color:#fff;color:#4d4d4d}.calendar .calendar-header .monthDropdown{margin:0 8px 0 0;width:130px}.calendar .calendar-header .monthDropdown:hover,.calendar .calendar-header .yearDropdown:hover{border-color:#f3f3f3}.calendar .calendar-body{padding:5px}.calendar .calendar-body table{width:100%}.calendar .calendar-body td{padding:10px;position:relative}.calendar .calendar-body td.selected{position:relative;color:#fff}.calendar .calendar-body td.selected:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:20%;background-color:#cf0106;z-index:-1;width:30px;height:30px;color:#fff;border:1px solid #373737}.calendar .calendar-body td:hover{color:#fff;font-weight:700;background-color:#929292;border-radius:20%;cursor:pointer}.calendar .calendar-body .date{display:flex;justify-content:center}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DatePipe }, { type: i0.ElementRef }], propDecorators: { labelContentText: [{
-                type: Input
-            }], 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: "20.3.6", ngImport: i0, type: MefDevSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.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: "20.3.6", ngImport: i0, type: MefDevSelectModule, imports: [CommonModule, FormsModule, OverlayModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.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: "20.3.6", ngImport: i0, type: MefDevDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MefDevDatepickerModule, declarations: [DatepickerComponent], imports: [CommonModule, FormsModule, DatePipe, MefDevSelectModule], exports: [DatepickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevDatepickerModule, providers: [DatePipe], imports: [CommonModule, FormsModule, MefDevSelectModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.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
-            this._value = value;
-    }
-    get value() {
-        return this._value;
-    }
-    /**
-     * Additional value property.
-     */
-    get value2() {
-        return this._value2;
-    }
-    constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MefDevProgressComponent, isStandalone: false, 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: "20.3.6", ngImport: i0, type: MefDevProgressComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mefdev-progress", standalone: false, 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: () => [], 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:
- * ```
- * <mefdev-inner-card [Title]="'Card Title'" [Type]="'default'" [MinimalHeader]="false" [ProgressType]="'circle'">
- *   Card content goes here...
- * </mefdev-inner-card>
- * ```
- */
-class MefdevInnerCard {
-    // constructor() {
-    //   console.log('1')
-    // }
-    /**
-     * 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;
-    }
-    /**
-     * Indicates whether the card has a minimal header or not.
-     * Default: false
-    */
-    set MinimalHeader(value) {
-        this._minimalHeader = value;
-    }
-    /**
-     * The type of progress indicator to be displayed in the card (e.g., circle, bar, none).
-     * Default: "circle"
-    */
-    set ProgressType(value) {
-        this._progressType = value;
-    }
-    /**
-     * The color of the progress indicator in the card.
-    */
-    set ProgressColor(value) {
-        this._progressColor = value;
-    }
-    /**
-     * Indicates whether the card should have a refresh button or not.
-    */
-    set Refresh(value) {
-        this._refresh = value;
-    }
-    /**
-     * The color of the refresh button in the card (e.g., light, dark).
-     * Default: "light"
-    */
-    set RefreshColor(value) {
-        this._refreshColor = value;
-    }
-    /**
-     * Indicates whether the card should have a maximize button or not.
-    */
-    set Maximize(value) {
-        this._maximize = value;
-    }
-    /**
-     * Indicates whether the card should have a close button or not.
-    */
-    set Close(value) {
-        this._close = value;
-    }
-    /**
-     * Indicates whether the card should have a toggle button or not.
-    */
-    set Toggle(value) {
-        this._toggle = value;
-    }
-    /**
-     * Additional CSS class(es) to be added to the card header.
-    */
-    set HeaderClass(value) {
-        this._extraHeaderClass = value;
-    }
-    /**
-     * Additional CSS class(es) to be added to the card body.
-    */
-    set BodyClass(value) {
-        this._extraBodyClass = value;
-    }
-    /**
-     * Additional CSS class(es) to be added to the card.
-    */
-    set AdditionalClasses(value) {
-        this._additionalClasses = value;
-    }
-    /**
-     * Indicates whether the tools (e.g., refresh, close, maximize) are shown in the card header or not.
-    */
-    set Controls(value) {
-        this._showTools = value;
-    }
-    /**
-     * Indicates whether the message in the card is visible or not.
-    */
-    set ShowMessage(value) {
-        this._messageVisible = value;
-    }
-    /**
-     * The message text to be displayed in the card.
-    */
-    set Message(value) {
-        this._message = value;
-    }
-    /**
-     * Indicates whether the loading indicator is shown in the card or not.
-    */
-    set Loading(value) {
-        this._isLoading = value;
-    }
-    /**
-     * 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;
-    }
-    /**
-     * The border style of the card.
-    */
-    set CardBorderStyle(value) {
-        this._card_border_style = 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;
-    }
-    /**
-     * 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._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.paddingTop) + rect.top + "px";
-        }
-    }
-    /**
-     * 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();
-        }
-        if (this._timeout > 0) {
-            setTimeout(() => {
-                this._isLoading = false;
-            }, this._timeout);
-        }
-    }
-    /**
-     * Closes the card.
-    */
-    close() {
-        this._close_card = true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefdevInnerCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MefdevInnerCard, isStandalone: false, selector: "mefdev-inner-card", inputs: { Title: "Title", Type: "Type", MinimalHeader: "MinimalHeader", ProgressType: "ProgressType", ProgressColor: "ProgressColor", Refresh: "Refresh", RefreshColor: "RefreshColor", Maximize: "Maximize", Close: "Close", Toggle: "Toggle", HeaderClass: "HeaderClass", BodyClass: "BodyClass", AdditionalClasses: "AdditionalClasses", Controls: "Controls", ShowMessage: "ShowMessage", Message: "Message", Loading: "Loading", TimeOut: "TimeOut", CardBorderStyle: "CardBorderStyle" }, outputs: { onRefresh: "onRefresh" }, queries: [{ propertyName: "CardTitle", first: true, predicate: ["CardTitle"], descendants: true }, { propertyName: "CardExtraControls", first: true, predicate: ["CardExtraControls"], descendants: true }], viewQueries: [{ propertyName: "_hostContent", first: true, predicate: ["hostContent"], descendants: true }, { propertyName: "minimalCircleLoading", first: true, predicate: ["minimalCircleLoading"], descendants: true }, { propertyName: "minimalCircleLoadingTrigger", first: true, predicate: ["minimalCircleLoadingTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"card card-{{ _type }} {{ _additionalClasses }}\" *ngIf=\"!_close_card\" [class.card-collapsed]=\"_isCollapsed\"\r\n  [class.card-maximized]=\"_isMaximixed\" #hostContent class=\"col-sm-12 col-md-6 col-lg-4\"\r\n  [ngStyle]=\"{'border': _card_border_style}\">\r\n  <div class=\"card-header {{ _extraHeaderClass }}\">\r\n    <div class=\"card-title\">\r\n      <ng-template [ngTemplateOutlet]=\"CardTitle\"></ng-template>\r\n    </div>\r\n    <div class=\"card-controls\" *ngIf=\"_showTools == true\">\r\n      <ng-template [ngTemplateOutlet]=\"CardExtraControls\"></ng-template>\r\n      <ul *ngIf=\"_minimalHeader == false; else minimalBlock\">\r\n        <li *ngIf=\"_toggle == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-collapse\" (click)=\"toggle()\"><i\r\n              class=\"pg pg-arrow_maximize\" [class.pg-arrow_minimize]=\"_isCollapsed\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_refresh == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-refresh\" (click)=\"refresh()\"><i\r\n              class=\"card-icon card-icon-refresh\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_maximize == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-maximize\" (click)=\"maximize()\"><i\r\n              class=\"card-icon card-icon-maximize\"></i></a>\r\n        </li>\r\n        <li *ngIf=\"_close == true\">\r\n          <a href=\"javascript:void(0);\" data-toggle class=\"card-close\" (click)=\"close()\"><i\r\n              class=\"card-icon card-icon-close\"></i></a>\r\n        </li>\r\n      </ul>\r\n       <!-- <ng-template #minimalBlock>\r\n        <ul>\r\n          <li>\r\n            <a href=\"javascript:void(0);\" (click)=\"refresh()\" class=\"card-refresh minimal\"\r\n              [class.refreshing]=\"_isLoading\">\r\n              <i #minimalCircleLoadingTrigger class=\"card-icon card-icon-refresh-lg-{{\r\n                  _refreshColor == 'light' ? 'white' : 'master'\r\n                }}\" [class.fade]=\"_isLoading\"></i>\r\n             <i #minimalCircleLoading class=\"card-icon-refresh-lg-white-animated\"\r\n                style=\"position: absolute;top:0;left:0\" [class.active]=\"_isLoading\"\r\n                [class.hide]=\"_isLoading != true\"></i>\r\n            </a>\r\n          </li>\r\n        </ul>\r\n      </ng-template> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"card-body {{ _extraBodyClass }}\" [@collapseState]=\"_isCollapsed == true ? 'inactive' : 'active'\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div *ngIf=\"_messageVisible == true\" class=\"pgn-wrapper\" data-position=\"top\">\r\n    <div class=\"pgn pgn-bar push-on-sidebar-open\">\r\n      <div class=\"alert alert-danger\">\r\n        <span>{{ _message }}</span><button class=\"close\" (click)=\"alertDismiss()\" type=\"button\">\r\n          <span aria-hidden=\"true\">\u00D7</span><span class=\"sr-only\">{{ 'Close' }}</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"_messageVisible == true\" class=\"card-progress\" [style.backgroundColor]=\"\r\n      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'\r\n    \" style=\" display: block;\"></div>\r\n  <div [@fadeAnimation]=\"_isLoading\" class=\"card-progress\" [style.backgroundColor]=\"\r\n      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'\r\n    \" style=\"display: block;pointer-events: none\">\r\n    <mefdev-progress *ngIf=\"_minimalHeader == false\" type=\"{{ _progressType }}\" color=\"{{ _progressColor }}\"\r\n      indeterminate=\"true\" class=\"\"></mefdev-progress>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MefDevProgressComponent, selector: "mefdev-progress", inputs: ["type", "color", "thick", "indeterminate", "value"] }], animations: [
-            trigger("collapseState", [
-                state("inactive", style({
-                    opacity: "0",
-                    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: "20.3.6", ngImport: i0, type: MefdevInnerCard, decorators: [{
-            type: Component,
-            args: [{ selector: "mefdev-inner-card", 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"))
-                        ])
-                    ], standalone: false, 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://platform.mef.dev/ui_kit_demo/view/page_components/card/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: "20.3.6", ngImport: i0, type: CardComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: CardComponent, isStandalone: false, selector: "mefdev-card", inputs: { card_type: "card_type", img: "img", imgUrl: "imgUrl", description: "description" }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }, { propertyName: "card_footer", first: true, predicate: ["card_footer"], descendants: true }], ngImport: i0, template: "<mefdev-inner-card\r\n  MinimalHeader=\"true\"\r\n  TimeOut=\"2500\"\r\n  [Refresh]=\"false\"\r\n  [Close]=\"false\">\r\n\r\n  <ng-template #CardTitle>\r\n    <ng-template class=\"card-title body-1\" [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n  </ng-template>\r\n\r\n  <div class=\"plugin-type\">\r\n    {{ card_type }}\r\n  </div>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"col-12\">\r\n      <div class=\"m-l-2 card-description\">\r\n        <div *ngIf=\"!description || description == ''\" class=\"card-no-description\"> {{'No plugin description'}}</div>\r\n        <p>\r\n          {{description}}\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-12 mt-3 text-center card-img\"\r\n         [ngStyle]=\"{'background-color': img ? 'transparent' : '#fff'}\">\r\n      <div *ngIf=\"!img || img == ''\">\r\n        <img src=\"assets/images/md_icon.png\"\r\n             style=\"max-width: 110px; max-height: 110px;\"/>\r\n      </div>\r\n      <div *ngIf=\"img\">\r\n        <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n             style=\"max-width: 260px; max-height: 150px;\"\r\n             onclick=\"imgClick()\"\r\n        />\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"row mb-3 mt-3\">\r\n    <div class=\"col-12\">\r\n      <ng-template [ngTemplateOutlet]=\"card_footer\"></ng-template>\r\n    </div>\r\n  </div>\r\n</mefdev-inner-card>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.h1,h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;line-height:40px;font-weight:700;text-transform:none;color:#000;margin-bottom:16px}.h2,h2{font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:700;text-transform:none;color:#000;margin-bottom:12px}.h3,h3{font-family:Montserrat,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;text-transform:none;color:#000;margin-bottom:10px}.h4,h4{font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:.5px;color:#000;margin-bottom:8px}.h5,h5{font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-transform:none;color:#000;margin-bottom:6px}.h6,.plugin-type,h6{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:500;text-transform:none;color:#000;margin-bottom:4px}.body-1,::ng-deep .card-title span,body-1{font-family:Open Sans,Arial,sans-serif;font-size:18px;line-height:27px;font-weight:700;color:#000}.body-2,body-2{font-family:Open Sans,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#000}.body-3,body-3{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,.card-description,.card-no-description,body-5{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;color:#000}.body-6,body-6{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:16px;font-weight:400;color:#000}::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)}.card-default{background-color:#eaeaea;border-radius:5px}.card-header{height:72px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MefdevInnerCard, selector: "mefdev-inner-card", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-card', standalone: false, template: "<mefdev-inner-card\r\n  MinimalHeader=\"true\"\r\n  TimeOut=\"2500\"\r\n  [Refresh]=\"false\"\r\n  [Close]=\"false\">\r\n\r\n  <ng-template #CardTitle>\r\n    <ng-template class=\"card-title body-1\" [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n  </ng-template>\r\n\r\n  <div class=\"plugin-type\">\r\n    {{ card_type }}\r\n  </div>\r\n\r\n  <div class=\"row\">\r\n    <div class=\"col-12\">\r\n      <div class=\"m-l-2 card-description\">\r\n        <div *ngIf=\"!description || description == ''\" class=\"card-no-description\"> {{'No plugin description'}}</div>\r\n        <p>\r\n          {{description}}\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-12 mt-3 text-center card-img\"\r\n         [ngStyle]=\"{'background-color': img ? 'transparent' : '#fff'}\">\r\n      <div *ngIf=\"!img || img == ''\">\r\n        <img src=\"assets/images/md_icon.png\"\r\n             style=\"max-width: 110px; max-height: 110px;\"/>\r\n      </div>\r\n      <div *ngIf=\"img\">\r\n        <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n             style=\"max-width: 260px; max-height: 150px;\"\r\n             onclick=\"imgClick()\"\r\n        />\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"row mb-3 mt-3\">\r\n    <div class=\"col-12\">\r\n      <ng-template [ngTemplateOutlet]=\"card_footer\"></ng-template>\r\n    </div>\r\n  </div>\r\n</mefdev-inner-card>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.h1,h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;line-height:40px;font-weight:700;text-transform:none;color:#000;margin-bottom:16px}.h2,h2{font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:700;text-transform:none;color:#000;margin-bottom:12px}.h3,h3{font-family:Montserrat,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;text-transform:none;color:#000;margin-bottom:10px}.h4,h4{font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:.5px;color:#000;margin-bottom:8px}.h5,h5{font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-transform:none;color:#000;margin-bottom:6px}.h6,.plugin-type,h6{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:500;text-transform:none;color:#000;margin-bottom:4px}.body-1,::ng-deep .card-title span,body-1{font-family:Open Sans,Arial,sans-serif;font-size:18px;line-height:27px;font-weight:700;color:#000}.body-2,body-2{font-family:Open Sans,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#000}.body-3,body-3{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,.card-description,.card-no-description,body-5{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;color:#000}.body-6,body-6{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:16px;font-weight:400;color:#000}::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)}.card-default{background-color:#eaeaea;border-radius:5px}.card-header{height:72px}\n"] }]
-        }], ctorParameters: () => [{ 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:
-*
-* ```
-* <mefdev-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>
-* </mefdev-card-long>
-* ```
-*
-* <example-url>https://platform.mef.dev/ui_kit_demo/view/page_components/card/card_long</example-url>
-*/
-class CardLongComponent {
-    router;
-    /**
-     * Template for displaying the title of the card.
-      * ```
-      * <mefdev-card-long>
-      *   <ng-template #title>
-      *     <!-- Content for the card title -->
-      *   </ng-template>
-      * </mefdev-card-long>
-      * ```
-     */
-    title;
-    /**
-   * Template for displaying the parameters of the card.
-    * ```
-    * <mefdev-card-long>
-    *   <ng-template #params>
-    *     <!-- Content for the card params -->
-    *   </ng-template>
-    * </mefdev-card-long>
-    * ```
-   */
-    params;
-    /**
-      * Template for displaying the content of the second column.
-      * ```
-      * <mefdev-card-long>
-      *   <ng-template #second_col>
-      *     <!-- Content for the card second column -->
-      *   </ng-template>
-      * </mefdev-card-long>
-      * ```
-     */
-    second_col;
-    /**
-      * Template for displaying the content of the third column.
-      * ```
-      * <mefdev-card-long>
-      *   <ng-template #third_col>
-      *     <!-- Content for the card third column -->
-      *   </ng-template>
-      * </mefdev-card-long>
-      * ```
-     */
-    third_col;
-    /**
-     * The text for the card type.
-     * @usageNotes
-     * ```
-     * <mefdev-card-long type_text = "'Type'"></<mefdev-card-long>
-     * ```
-     */
-    type_text;
-    /**
-     * The color of the card type.
-     * @usageNotes
-     * ```
-     * <mefdev-card-long type_color = "'RED'"></<mefdev-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;
-    }
-    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: "20.3.6", ngImport: i0, type: CardLongComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: CardLongComponent, isStandalone: false, selector: "mefdev-card-long", inputs: { type_text: "type_text", type_color: "type_color", img: "img", imgUrl: "imgUrl", description: "description" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "params", first: true, predicate: ["params"], descendants: true }, { propertyName: "second_col", first: true, predicate: ["second_col"], descendants: true }, { propertyName: "third_col", first: true, predicate: ["third_col"], descendants: true }], ngImport: i0, template: "<mefdev-inner-card\r\n  MinimalHeader=\"true\"\r\n  TimeOut=\"2500\"\r\n  [Refresh]=\"false\"\r\n  [Close]=\"false\"\r\n>\r\n\r\n  <ng-template #CardTitle>\r\n    <ng-template class=\"card-title\" [ngTemplateOutlet]=\"title\"></ng-template>\r\n  </ng-template>\r\n\r\n  <ng-template #CardExtraControls>\r\n    <div class=\"plugin-type\"\r\n         [ngClass]=\"{\r\n            'b-color-Light-Gray-1': type_color === 'UNSET',\r\n            'b-color-Red': type_color === 'RED',\r\n            'b-color-Green': type_color === 'GREEN'}\">\r\n      {{type_text}}\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"row h-100 m-b-10\">\r\n    <div class=\"col-lg-3 col-12 card-col\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12 card-img m-b-10\">\r\n          <div *ngIf=\"!img || img == ''\">\r\n            <img src=\"assets/images/md_icon.png\"\r\n                 style=\"max-width: 110px; max-height: 110px;\"/>\r\n          </div>\r\n          <div *ngIf=\"img\">\r\n            <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n                 height=\"110px\"\r\n                 style=\"max-width: 110px; max-height: 110px;\"\r\n                 onclick=\"imgClick()\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 m-t-2 body-6 text-dark params-block\">\r\n          <ng-template [ngTemplateOutlet]=\"params\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-lg-5 col-12 card-col\">\r\n      <ng-template [ngTemplateOutlet]=\"second_col\"></ng-template>\r\n    </div>\r\n\r\n    <div class=\"col-lg-4 col-12 card-col mt-lg-0 mt-5\">\r\n      <ng-template [ngTemplateOutlet]=\"third_col\"></ng-template>\r\n    </div>\r\n\r\n  </div>\r\n</mefdev-inner-card>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.h1,h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;line-height:40px;font-weight:700;text-transform:none;color:#000;margin-bottom:16px}.h2,h2{font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:700;text-transform:none;color:#000;margin-bottom:12px}.h3,:host::ng-deep .card-title span,h3{font-family:Montserrat,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;text-transform:none;color:#000;margin-bottom:10px}.h4,h4{font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:.5px;color:#000;margin-bottom:8px}.h5,h5{font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-transform:none;color:#000;margin-bottom:6px}.h6,:host::ng-deep .plugin-type,h6{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:500;text-transform:none;color:#000;margin-bottom:4px}.body-1,body-1{font-family:Open Sans,Arial,sans-serif;font-size:18px;line-height:27px;font-weight:700;color:#000}.body-2,body-2{font-family:Open Sans,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#000}.body-3,body-3{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Open Sans,Arial,sans-serif;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:Open Sans,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;color:#000}.body-6,body-6{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:16px;font-weight:400;color:#000}:host::ng-deep .params-block .row{margin-top:.75em}:host::ng-deep .params-block .row:last-child{margin-bottom:.75em}:host::ng-deep .card-col{min-height:220px}:host::ng-deep .header-link{opacity:1}:host::ng-deep .card-default{background-color:#f3f3f3;border-radius:5px}:host::ng-deep .card-title{width:80%;color:#000}:host::ng-deep .plugin-type{border-radius:5px 0 0 5px;margin-right:-20px;height:28px;padding:5px 15px;color:#fff}:host::ng-deep .card-description{height:40px;overflow-y:clip;color:#4d4d4d}:host::ng-deep .card-no-description{overflow-y:clip;height:60px;color:#929292}:host::ng-deep .card-img{padding:0;height:130px;background-color:#fff;display:flex;align-items:center;justify-content:center;width:-webkit-fill-available;margin-right:calc(var(--bs-gutter-x) * .5);margin-left:calc(var(--bs-gutter-x) * .5)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MefdevInnerCard, selector: "mefdev-inner-card", inputs: ["Title", "Type", "MinimalHeader", "ProgressType", "ProgressColor", "Refresh", "RefreshColor", "Maximize", "Close", "Toggle", "HeaderClass", "BodyClass", "AdditionalClasses", "Controls", "ShowMessage", "Message", "Loading", "TimeOut", "CardBorderStyle"], outputs: ["onRefresh"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CardLongComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-card-long', standalone: false, template: "<mefdev-inner-card\r\n  MinimalHeader=\"true\"\r\n  TimeOut=\"2500\"\r\n  [Refresh]=\"false\"\r\n  [Close]=\"false\"\r\n>\r\n\r\n  <ng-template #CardTitle>\r\n    <ng-template class=\"card-title\" [ngTemplateOutlet]=\"title\"></ng-template>\r\n  </ng-template>\r\n\r\n  <ng-template #CardExtraControls>\r\n    <div class=\"plugin-type\"\r\n         [ngClass]=\"{\r\n            'b-color-Light-Gray-1': type_color === 'UNSET',\r\n            'b-color-Red': type_color === 'RED',\r\n            'b-color-Green': type_color === 'GREEN'}\">\r\n      {{type_text}}\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"row h-100 m-b-10\">\r\n    <div class=\"col-lg-3 col-12 card-col\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12 card-img m-b-10\">\r\n          <div *ngIf=\"!img || img == ''\">\r\n            <img src=\"assets/images/md_icon.png\"\r\n                 style=\"max-width: 110px; max-height: 110px;\"/>\r\n          </div>\r\n          <div *ngIf=\"img\">\r\n            <img src=\"{{img}}\" alt=\"\" class=\"image-responsive-height img-middle\"\r\n                 height=\"110px\"\r\n                 style=\"max-width: 110px; max-height: 110px;\"\r\n                 onclick=\"imgClick()\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 m-t-2 body-6 text-dark params-block\">\r\n          <ng-template [ngTemplateOutlet]=\"params\"></ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-lg-5 col-12 card-col\">\r\n      <ng-template [ngTemplateOutlet]=\"second_col\"></ng-template>\r\n    </div>\r\n\r\n    <div class=\"col-lg-4 col-12 card-col mt-lg-0 mt-5\">\r\n      <ng-template [ngTemplateOutlet]=\"third_col\"></ng-template>\r\n    </div>\r\n\r\n  </div>\r\n</mefdev-inner-card>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.h1,h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;line-height:40px;font-weight:700;text-transform:none;color:#000;margin-bottom:16px}.h2,h2{font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:700;text-transform:none;color:#000;margin-bottom:12px}.h3,:host::ng-deep .card-title span,h3{font-family:Montserrat,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;text-transform:none;color:#000;margin-bottom:10px}.h4,h4{font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:.5px;color:#000;margin-bottom:8px}.h5,h5{font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-transform:none;color:#000;margin-bottom:6px}.h6,:host::ng-deep .plugin-type,h6{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:500;text-transform:none;color:#000;margin-bottom:4px}.body-1,body-1{font-family:Open Sans,Arial,sans-serif;font-size:18px;line-height:27px;font-weight:700;color:#000}.body-2,body-2{font-family:Open Sans,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#000}.body-3,body-3{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Open Sans,Arial,sans-serif;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:Open Sans,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;color:#000}.body-6,body-6{font-family:Open Sans,Arial,sans-serif;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: () => [{ 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:
-  *```
-  * <mefdev-card-simple [disabled]="true">
-  *   <ng-template #card_title>
-  *     <!-- Content for the card title -->
-  *   </ng-template>
-  * </mefdev-card-simple>
-  *```
-  *
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_components/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.
-     *```
-     * <mefdev-card-simple>
-     *   <ng-template #card_title>
-     *     <h3>Card Title</h3>
-     *   </ng-template>
-     * </mefdev-card-simple>
-     *```
-     */
-    card_title;
-    constructor() { }
-    ngOnInit() {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CardSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: CardSimpleComponent, isStandalone: false, selector: "mefdev-card-simple", inputs: { isDisabled: ["disabled", "isDisabled"] }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }], ngImport: i0, template: "<div class=\"card-simple\" [ngClass]=\"{ 'unused-block':isDisabled }\">\r\n    <div class=\"row m-2 body-1\" *ngIf=\"card_title\">\r\n        <div class=\"col-12\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"row m-2\">\r\n        <div class=\"col-12\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!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: "20.3.6", ngImport: i0, type: CardSimpleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-card-simple', standalone: false, 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: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.card-simple{background-color:#f3f3f3;padding:.5em;border-radius:5px}.unused-block{opacity:.6;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isDisabled: [{
-                type: Input,
-                args: ["disabled"]
-            }], card_title: [{
-                type: ContentChild,
-                args: ["card_title"]
-            }] } });
-
-class ProgressConfig {
-    color = "primary";
-    thickness = 1;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ProgressConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ProgressConfig });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ProgressConfig, decorators: [{
-            type: Injectable
-        }] });
-
-class MefDevProgressModule {
-    static forRoot() {
-        return { ngModule: MefDevProgressModule, providers: [ProgressConfig] };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MefDevProgressModule, declarations: [MefDevProgressComponent], imports: [CommonModule], exports: [MefDevProgressComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevProgressModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevProgressModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [MefDevProgressComponent],
-                    exports: [MefDevProgressComponent]
-                }]
-        }] });
-
-class MefdevInnerCardModule {
-    static forRoot() {
-        return {
-            ngModule: MefdevInnerCardModule
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefdevInnerCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MefdevInnerCardModule, declarations: [MefdevInnerCard], imports: [CommonModule, MefDevProgressModule], exports: [MefdevInnerCard] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefdevInnerCardModule, imports: [CommonModule, MefDevProgressModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefdevInnerCardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MefdevInnerCard],
-                    exports: [MefdevInnerCard],
-                    imports: [CommonModule, MefDevProgressModule]
-                }]
-        }] });
-
-const mefDevCardComponents = [CardComponent, CardLongComponent, CardSimpleComponent];
-class MefDevCardModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MefDevCardModule, declarations: [CardComponent, CardLongComponent, CardSimpleComponent], imports: [CommonModule,
-            MefDevCollapseModule,
-            MefDevSelectModule,
-            MefdevInnerCardModule], exports: [CardComponent, CardLongComponent, CardSimpleComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevCardModule, imports: [CommonModule,
-            MefDevCollapseModule,
-            MefDevSelectModule,
-            MefdevInnerCardModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevCardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: mefDevCardComponents,
-                    exports: mefDevCardComponents,
-                    imports: [
-                        CommonModule,
-                        MefDevCollapseModule,
-                        MefDevSelectModule,
-                        MefdevInnerCardModule,
-                    ]
-                }]
-        }] });
-
-/**
-  * Fill Component for a modal window.
-  *
-  * Example of usage:
-  * ```
-  * <mefdev-fill-modal #pin_modal>
-  *   <!-- Modal header content -->
-  *   <ng-template #modal_header>
-  *     <!-- Header content goes here -->
-  *   </ng-template>
-  *
-  *   <!-- Modal footer content -->
-  *   <ng-template #modal_footer>
-  *     <!-- Footer content goes here -->
-  *   </ng-template>
-  * </mefdev-fill-modal>
-  * ```
-  *
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_components/modals/fill</example-url>
-  */
-class FillComponent {
-    visible = false;
-    dialog;
-    /**
-    * The header template of the modal window.
-    * ```
-    * <mefdev-fill-modal #pin_modal>
-     *   <ng-template #modal_header>
-     *     <!-- Header content goes here -->
-     *   </ng-template>
-     * </mefdev-fill-modal>
-    * ```
-    */
-    modal_header;
-    /**
-    * The footer template of the modal window.
-    * ```
-    * <mefdev-fill-modal #pin_modal>
-     *   <ng-template #modal_footer>
-     *     <!-- Footer content goes here -->
-     *   </ng-template>
-     * </mefdev-fill-modal>
-    * ```
-    */
-    modal_footer;
-    /**
-     * Input parameter that determines whether to show the modal window.
-     */
-    set show(val) {
-        if (val) {
-            this.showModal();
-        }
-        else {
-            this.hideModal();
-        }
-    }
-    ;
-    /**
-     * Event emitted when the modal is change state.
-     * Emits a boolean value indicating if the modal is closed(false), or open(true).
-     * Example:
-     * ```
-     * <mefdev-fill-modal (visibleChange)="onModalClosed($event)"></mefdev-fill-modal>
-     * ```
-     */
-    visibleChange = new EventEmitter();
-    constructor() { }
-    ngOnInit() {
-    }
-    /**
-     * Shows the modal state.
-     * Return a boolean value indicating if the modal is closed(false), or open(true)
-     */
-    getModalState() {
-        return this.visible;
-    }
-    /**
-     * Shows the modal.
-     * Call this method to open the modal window.
-     */
-    showModal() {
-        this.visible = true;
-        this.visibleChange.emit(this.visible);
-    }
-    /**
-     * Hides the modal.
-     * Call this method to close the modal window.
-     */
-    hideModal() {
-        this.visible = false;
-        this.visibleChange.emit(this.visible);
+    hideModal() {
+        this.visible = false;
+        this.visibleChange.emit(this.visible);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: FillComponent, isStandalone: false, selector: "mefdev-fill-modal", inputs: { show: "show" }, outputs: { visibleChange: "visibleChange" }, queries: [{ propertyName: "modal_header", first: true, predicate: ["modal_header"], descendants: true }, { propertyName: "modal_footer", first: true, predicate: ["modal_footer"], descendants: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<button *ngIf=\"visible\" (click)=\"hideModal()\" aria-label=\"Close\" class=\"dialog__close-btn\">X</button>\r\n<div [@dialog] *ngIf=\"visible\" class=\"dialog\" #dialog>\r\n\t<div class=\"modal-content\">\r\n    <div class=\"modal-header clearfix text-left\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_header\"></ng-template>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <ng-content></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"modal_footer\"></ng-template>\r\n      </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"visible\" class=\"overlay\" (click)=\"hideModal()\"></div>\r\n", styles: [".overlay{position:fixed;inset:0;background-color:#ffffffd9;z-index:999}.dialog{z-index:1000;position:fixed;right:0;left:0;top:0;margin-left:auto;margin-right:auto;height:100%;min-height:200px;min-width:520px;max-width:90%;width:fit-content;padding:12px;overflow-y:auto;display:flex;align-items:center}.dialog__close-btn{border:0;background:none;color:#2d2d2d;position:absolute;top:8px;right:8px;font-size:1.2em;z-index:1001}.modal-footer{padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
@@ -3492,140 +1944,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 }]
         }] });
 
-/**
- * A component representing a user profile.
- *
- * Example of usage:
- *
- * ```
- * <mefdev-profile
- *   [name]="'John Doe'"
- *   [img]="'assets/profile.png'"
- *   [shortDescription]="'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'"
- *   [header]="'User Profile'"
- *   [circleImg]="'true'">
- *   <ng-template #first_colum>
- *     <!-- Content for the first column -->
- *   </ng-template>
- *   <ng-template #second_colum>
- *     <!-- Content for the second column -->
- *   </ng-template>
- *   <ng-template #footer>
- *     <!-- Content for the footer -->
- *   </ng-template>
- * </mefdev-profile>
- * ```
- *
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_layouts/profile</example-url>
-  */
-class ProfileComponent {
-    /**
-    * The template reference to the content of the first column.
-    *```
-    *   <ng-template #first_colum>
-    *     <!-- Content for the first column -->
-    *   </ng-template>
-    *```
-    */
-    first_colum;
-    /**
-     * The template reference to the content of the second column.
-    *```
-    *   <ng-template #second_colum>
-    *     <!-- Content for the second column -->
-    *   </ng-template>
-    *```
-     */
-    second_colum;
-    /**
-  * The template reference to the content of the footer.
-  *```
-  *   <ng-template #footer>
-  *     <!-- Content for the footer -->
-  *   </ng-template>
-  *```
-  */
-    footer;
-    /**
-     * The name of the user.
-     * ```
-     * <mefdev-profile [name]="'John Doe'"></mefdev-profile>
-     * ```
-     */
-    name;
-    /**
-    * The URL of the user's profile image.
-    * ```
-    * <mefdev-profile [img]="'assets/profile.png'"></mefdev-profile>
-    * ```
-    */
-    img = '';
-    /**
-     * A short description of the user.
-     * ```
-     * <mefdev-profile [shortDescription]="'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'"></mefdev-profile>
-     * ```
-     */
-    shortDescription;
-    /**
-     * The header title of the profile component.
-     * ```
-     * <mefdev-profile [header]="'User Profile'"></mefdev-profile>
-     * ```
-     */
-    header;
-    /**
-     * A flag indicating whether to display the profile image as a circle. Default "false".
-     * ```
-     * <mefdev-profile [circleImg]="'true'"></mefdev-profile>
-     * ```
-     */
-    circleImg = false;
-    constructor() { }
-    ngOnInit() {
-    }
-    get sizeStyle() {
-        // return { 'width.px': this.width, 'height.px': this.height };
-        /**
-       * Returns the CSS style for the profile image size and shape.
-       */
-        if (!this.circleImg) {
-            return {};
-        }
-        return {
-            'border-top-left-radius': `50%`,
-            'border-top-right-radius': `50%`,
-            'border-bottom-right-radius': `50%`,
-            'border-bottom-left-radius': `50%`,
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ProfileComponent, isStandalone: false, selector: "mefdev-profile", inputs: { name: "name", img: "img", shortDescription: "shortDescription", header: "header", circleImg: "circleImg" }, queries: [{ propertyName: "first_colum", first: true, predicate: ["first_colum"], descendants: true }, { propertyName: "second_colum", first: true, predicate: ["second_colum"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], ngImport: i0, template: "\r\n<div class=\"profile-page\">\r\n    <div class=\"profile-header\">\r\n        {{header}}\r\n    </div>\r\n    <div class=\"profile-content\">\r\n        <div class=\"profile-img-wrapper\">\r\n            <img *ngIf=\"!img || img == ''\" src=\"assets/images/md_icon.png\" class=\"profile-img\" />\r\n            <img *ngIf=\"img\" [src]=\"img\" alt=\"\" class=\"profile-img custom-img\" [ngStyle]=\"sizeStyle\" />\r\n        </div>\r\n        <div class=\"profile-info\">\r\n            <div class=\"profile-name\">\r\n                {{name}}\r\n            </div>\r\n            <div class=\"profile-description\">\r\n                {{shortDescription}}\r\n            </div>\r\n        </div>\r\n        <div class=\"profile-column\">\r\n            <ng-template [ngTemplateOutlet]=\"first_colum\"></ng-template>\r\n        </div>\r\n        <div class=\"profile-column\">\r\n            <ng-template [ngTemplateOutlet]=\"second_colum\"></ng-template>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"profile-footer-wrapper\">\r\n    <div class=\"profile-page-tabs\">\r\n        <ng-template [ngTemplateOutlet]=\"footer\"></ng-template>\r\n    </div>\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.h1,h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;line-height:40px;font-weight:700;text-transform:none;color:#000;margin-bottom:16px}.h2,.profile-header,h2{font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:700;text-transform:none;color:#000;margin-bottom:12px}.h3,h3{font-family:Montserrat,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;text-transform:none;color:#000;margin-bottom:10px}.h4,h4{font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:.5px;color:#000;margin-bottom:8px}.h5,h5{font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-transform:none;color:#000;margin-bottom:6px}.h6,h6{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:500;text-transform:none;color:#000;margin-bottom:4px}.body-1,body-1{font-family:Open Sans,Arial,sans-serif;font-size:18px;line-height:27px;font-weight:700;color:#000}.body-2,.profile-name,body-2{font-family:Open Sans,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#000}.body-3,.profile-description,.profile-data-item,body-3{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;color:#000}.body-6,body-6{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:16px;font-weight:400;color:#000}:host{display:block}.profile-page{background-color:#f5f5f5;color:#222;padding:24px 24px 0;border-radius:5px}.profile-content{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;overflow-y:hidden;max-height:150px}.profile-img-wrapper{flex:0 0 224px;display:flex;align-items:center;justify-content:center;min-width:180px;height:-webkit-fill-available}.profile-img{width:100%}.profile-info{flex:1 1 220px;min-width:180px}.profile-name{overflow-y:clip}.profile-description{word-break:break-all;overflow-y:clip;margin-bottom:8px}.profile-column{flex:1 1 180px;min-width:160px;margin-bottom:8px}.profile-footer-wrapper{position:relative}.profile-data-item>.profile-data-item-value{display:inline;font-weight:700}.profile-page-tabs{background:linear-gradient(to bottom,#f5f5f5 53px,transparent 100%);padding-top:25px;border-radius:0 0 8px 8px}@media (max-width: 900px){.profile-content{flex-direction:column;gap:16px}.profile-img-wrapper,.profile-info,.profile-column{min-width:0;margin-right:0}}@media (max-width: 720px){.profile-page-tabs{background:linear-gradient(to bottom,#f5f5f5 63px,transparent 100%);padding-top:35px}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ProfileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mefdev-profile', standalone: false, template: "\r\n<div class=\"profile-page\">\r\n    <div class=\"profile-header\">\r\n        {{header}}\r\n    </div>\r\n    <div class=\"profile-content\">\r\n        <div class=\"profile-img-wrapper\">\r\n            <img *ngIf=\"!img || img == ''\" src=\"assets/images/md_icon.png\" class=\"profile-img\" />\r\n            <img *ngIf=\"img\" [src]=\"img\" alt=\"\" class=\"profile-img custom-img\" [ngStyle]=\"sizeStyle\" />\r\n        </div>\r\n        <div class=\"profile-info\">\r\n            <div class=\"profile-name\">\r\n                {{name}}\r\n            </div>\r\n            <div class=\"profile-description\">\r\n                {{shortDescription}}\r\n            </div>\r\n        </div>\r\n        <div class=\"profile-column\">\r\n            <ng-template [ngTemplateOutlet]=\"first_colum\"></ng-template>\r\n        </div>\r\n        <div class=\"profile-column\">\r\n            <ng-template [ngTemplateOutlet]=\"second_colum\"></ng-template>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"profile-footer-wrapper\">\r\n    <div class=\"profile-page-tabs\">\r\n        <ng-template [ngTemplateOutlet]=\"footer\"></ng-template>\r\n    </div>\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.h1,h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;line-height:40px;font-weight:700;text-transform:none;color:#000;margin-bottom:16px}.h2,.profile-header,h2{font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:700;text-transform:none;color:#000;margin-bottom:12px}.h3,h3{font-family:Montserrat,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;text-transform:none;color:#000;margin-bottom:10px}.h4,h4{font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:.5px;color:#000;margin-bottom:8px}.h5,h5{font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-transform:none;color:#000;margin-bottom:6px}.h6,h6{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:500;text-transform:none;color:#000;margin-bottom:4px}.body-1,body-1{font-family:Open Sans,Arial,sans-serif;font-size:18px;line-height:27px;font-weight:700;color:#000}.body-2,.profile-name,body-2{font-family:Open Sans,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#000}.body-3,.profile-description,.profile-data-item,body-3{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;color:#000}.body-6,body-6{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:16px;font-weight:400;color:#000}:host{display:block}.profile-page{background-color:#f5f5f5;color:#222;padding:24px 24px 0;border-radius:5px}.profile-content{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;overflow-y:hidden;max-height:150px}.profile-img-wrapper{flex:0 0 224px;display:flex;align-items:center;justify-content:center;min-width:180px;height:-webkit-fill-available}.profile-img{width:100%}.profile-info{flex:1 1 220px;min-width:180px}.profile-name{overflow-y:clip}.profile-description{word-break:break-all;overflow-y:clip;margin-bottom:8px}.profile-column{flex:1 1 180px;min-width:160px;margin-bottom:8px}.profile-footer-wrapper{position:relative}.profile-data-item>.profile-data-item-value{display:inline;font-weight:700}.profile-page-tabs{background:linear-gradient(to bottom,#f5f5f5 53px,transparent 100%);padding-top:25px;border-radius:0 0 8px 8px}@media (max-width: 900px){.profile-content{flex-direction:column;gap:16px}.profile-img-wrapper,.profile-info,.profile-column{min-width:0;margin-right:0}}@media (max-width: 720px){.profile-page-tabs{background:linear-gradient(to bottom,#f5f5f5 63px,transparent 100%);padding-top:35px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { first_colum: [{
-                type: ContentChild,
-                args: ["first_colum"]
-            }], second_colum: [{
-                type: ContentChild,
-                args: ["second_colum"]
-            }], footer: [{
-                type: ContentChild,
-                args: ["footer"]
-            }], name: [{
-                type: Input
-            }], img: [{
-                type: Input
-            }], shortDescription: [{
-                type: Input
-            }], header: [{
-                type: Input
-            }], circleImg: [{
-                type: Input
-            }] } });
-
 /**
   * A component representing a central page layout.
   *
@@ -3801,11 +2119,11 @@ class ManagePageComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ManagePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ManagePageComponent, isStandalone: false, selector: "mefdev-manage-page", inputs: { startTabInd: "startTabInd" }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }, { propertyName: "tabs_block", first: true, predicate: ["tabs_block"], descendants: true }], ngImport: i0, template: "<div class=\"card-tabs\">\r\n    <div class=\"card-tabs-header\" *ngIf=\"card_title\">\r\n        <div class=\"card-tabs-title\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"profile-page-tabs card-tabs-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.h1,h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;line-height:40px;font-weight:700;text-transform:none;color:#000;margin-bottom:16px}.h2,.card-tabs-title,h2{font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:700;text-transform:none;color:#000;margin-bottom:12px}.h3,h3{font-family:Montserrat,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;text-transform:none;color:#000;margin-bottom:10px}.h4,h4{font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:.5px;color:#000;margin-bottom:8px}.h5,h5{font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-transform:none;color:#000;margin-bottom:6px}.h6,h6{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:500;text-transform:none;color:#000;margin-bottom:4px}.body-1,body-1{font-family:Open Sans,Arial,sans-serif;font-size:18px;line-height:27px;font-weight:700;color:#000}.body-2,body-2{font-family:Open Sans,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#000}.body-3,body-3{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;color:#000}.body-6,body-6{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-tabs{border-radius:0;background:#fff;overflow:hidden}.card-tabs-header{background-color:#f3f3f3;padding:16px;margin-bottom:0;display:flex;align-items:center}.card-tabs-title{margin:0;padding:0}.card-tabs-content{padding:0 16px}.profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ManagePageComponent, isStandalone: false, selector: "mefdev-manage-page", inputs: { startTabInd: "startTabInd" }, queries: [{ propertyName: "card_title", first: true, predicate: ["card_title"], descendants: true }, { propertyName: "tabs_block", first: true, predicate: ["tabs_block"], descendants: true }], ngImport: i0, template: "<div class=\"mp-tabs\">\r\n    <div class=\"mp-tabs-header\" *ngIf=\"card_title\">\r\n        <div class=\"mp-tabs-title\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"profile-page-tabs mp-tabs-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.h1,h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;line-height:40px;font-weight:700;text-transform:none;color:#000;margin-bottom:16px}.h2,h2{font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:700;text-transform:none;color:#000;margin-bottom:12px}.h3,h3{font-family:Montserrat,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;text-transform:none;color:#000;margin-bottom:10px}.h4,h4{font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:.5px;color:#000;margin-bottom:8px}.h5,h5{font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-transform:none;color:#000;margin-bottom:6px}.h6,h6{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:500;text-transform:none;color:#000;margin-bottom:4px}.body-1,body-1{font-family:Open Sans,Arial,sans-serif;font-size:18px;line-height:27px;font-weight:700;color:#000}.body-2,body-2{font-family:Open Sans,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#000}.body-3,body-3{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;color:#000}.body-6,body-6{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:16px;font-weight:400;color:#000}.mp-tabs{border-radius:0;background:#fff;overflow:hidden}.mp-tabs-header{background-color:#f3f3f3;padding:16px;margin-bottom:0;display:flex;align-items:center}.mp-tabs-title{margin:0;width:100%;padding:0}.mp-tabs-content{padding:0 16px;position:relative}.profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ManagePageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-manage-page', standalone: false, template: "<div class=\"card-tabs\">\r\n    <div class=\"card-tabs-header\" *ngIf=\"card_title\">\r\n        <div class=\"card-tabs-title\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"profile-page-tabs card-tabs-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.h1,h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;line-height:40px;font-weight:700;text-transform:none;color:#000;margin-bottom:16px}.h2,.card-tabs-title,h2{font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:700;text-transform:none;color:#000;margin-bottom:12px}.h3,h3{font-family:Montserrat,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;text-transform:none;color:#000;margin-bottom:10px}.h4,h4{font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:.5px;color:#000;margin-bottom:8px}.h5,h5{font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-transform:none;color:#000;margin-bottom:6px}.h6,h6{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:500;text-transform:none;color:#000;margin-bottom:4px}.body-1,body-1{font-family:Open Sans,Arial,sans-serif;font-size:18px;line-height:27px;font-weight:700;color:#000}.body-2,body-2{font-family:Open Sans,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#000}.body-3,body-3{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;color:#000}.body-6,body-6{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:16px;font-weight:400;color:#000}.card-tabs{border-radius:0;background:#fff;overflow:hidden}.card-tabs-header{background-color:#f3f3f3;padding:16px;margin-bottom:0;display:flex;align-items:center}.card-tabs-title{margin:0;padding:0}.card-tabs-content{padding:0 16px}.profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%)}\n"] }]
+            args: [{ selector: 'mefdev-manage-page', standalone: false, template: "<div class=\"mp-tabs\">\r\n    <div class=\"mp-tabs-header\" *ngIf=\"card_title\">\r\n        <div class=\"mp-tabs-title\">\r\n            <ng-template [ngTemplateOutlet]=\"card_title\"></ng-template>\r\n        </div>\r\n    </div>\r\n    <div class=\"profile-page-tabs mp-tabs-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.h1,h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;line-height:40px;font-weight:700;text-transform:none;color:#000;margin-bottom:16px}.h2,h2{font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:700;text-transform:none;color:#000;margin-bottom:12px}.h3,h3{font-family:Montserrat,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;text-transform:none;color:#000;margin-bottom:10px}.h4,h4{font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:.5px;color:#000;margin-bottom:8px}.h5,h5{font-family:Montserrat,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:500;text-transform:none;color:#000;margin-bottom:6px}.h6,h6{font-family:Montserrat,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:500;text-transform:none;color:#000;margin-bottom:4px}.body-1,body-1{font-family:Open Sans,Arial,sans-serif;font-size:18px;line-height:27px;font-weight:700;color:#000}.body-2,body-2{font-family:Open Sans,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#000}.body-3,body-3{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:700;color:#000}.body-4,body-4{font-family:Open Sans,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:400;color:#000}.body-5,body-5{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;color:#000}.body-6,body-6{font-family:Open Sans,Arial,sans-serif;font-size:13px;line-height:16px;font-weight:400;color:#000}.mp-tabs{border-radius:0;background:#fff;overflow:hidden}.mp-tabs-header{background-color:#f3f3f3;padding:16px;margin-bottom:0;display:flex;align-items:center}.mp-tabs-title{margin:0;width:100%;padding:0}.mp-tabs-content{padding:0 16px;position:relative}.profile-page-tabs{background-image:linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%);background-image:-webkit-linear-gradient(to bottom,#F3F3F3 28px,transparent 0%,transparent 100%)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { card_title: [{
                 type: ContentChild,
                 args: ["card_title"]
@@ -3817,7 +2135,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
             }] } });
 
 let mefDevPageLayoutsModuleComponents = [
-    ProfileComponent,
     CentralPageComponent,
     CentralPageRowComponent,
     TablePageComponent,
@@ -3825,12 +2142,10 @@ let mefDevPageLayoutsModuleComponents = [
 ];
 class MefDevPageLayoutsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevPageLayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MefDevPageLayoutsModule, declarations: [ProfileComponent,
-            CentralPageComponent,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MefDevPageLayoutsModule, declarations: [CentralPageComponent,
             CentralPageRowComponent,
             TablePageComponent,
-            ManagePageComponent], imports: [CommonModule], exports: [ProfileComponent,
-            CentralPageComponent,
+            ManagePageComponent], imports: [CommonModule], exports: [CentralPageComponent,
             CentralPageRowComponent,
             TablePageComponent,
             ManagePageComponent] });
@@ -3843,7 +2158,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                     exports: mefDevPageLayoutsModuleComponents,
                     imports: [
                         CommonModule,
-                        // pgTabsModule,
                     ],
                 }]
         }] });
@@ -4299,198 +2613,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 }]
         }] });
 
-/**
- * Component for a slider that allows selecting a range of values.
- * @example
- * <mefdev-slider
- *  [disabled]="false"
- *  [range] = "{min: 1, max: 10000}"
- *  [id]= "'slider1'"
- *  (valueChange)="onChildValueChange($event)"
- *  ></mefdev-slider>
- *
- * <example-url>https://platform.mef.dev/ui_kit_demo/view/controls/slider</example-url>
+/*
+  example
+   <mefdev-dropdown-menu>
+    <ng-template #label>
+        <i class="fa fa-ellipsis-v"></i>
+    </ng-template>
+
+    <a class="dropdown-item" (click)="openModalAction('update', row)">
+        <span> {{ 'Update' | translate }} </span>
+    </a>
+
+    <a class="dropdown-item" (click)="openModalAction('delete', row)">
+        <span> {{ 'Delete' | translate }} </span>
+    </a>
+  </mefdev-dropdown-menu>
 */
-class MefDevSliderComponent {
-    _range = { min: 1, max: 1000 };
-    /**
-     * Unique id for each slider. Use it, if u need more than one slider independent from another on the same page.
-     * @example
-     * <mefdev-slider
-     *  [id]= "'slider1'"
-     * ></mefdev-slider>
-    */
-    id;
-    /**
-     * Input Object {min, max} container of the slider
-     * @example
-     * @interval
-     * <mefdev-slider
-     *  [range] = "{min: 1, max: 10000}"
-     * ></mefdev-slider>
-    */
-    set range(range) {
-        this._range = range;
-        this.minValue = range.min;
-        this.maxValue = range.max;
-    }
-    get range() {
-        return this._range;
-    }
-    /**
-     * The minimum value of the slider.
-    */
-    minValue = this.range.min;
-    /**
-     * The maximum value of the slider.
-    */
-    maxValue = this.range.max;
-    /**
-     * Property indicating whether the component is disabled.
-     * @example
-     * <mefdev-slider
-     *  [disabled]="true"
-     * ></mefdev-slider>
-    */
-    disabled = false;
-    /**
-     * Event emitted when the values of the slider change.
-     * It passes an object with `minValue` and `maxValue` properties.
-     * @event MefDevSliderComponent#valueChange
-     * @type {EventEmitter<{ minValue: number; maxValue: number }>}
-     * @example
-     * <mefdev-slider
-     *  (valueChange)="onChildValueChange($event)"
-     * ></mefdev-slider>
-    */
-    valueChange = new EventEmitter();
-    /**
-     * Method called when the values of the slider change.
-     * Emits the `valueChange` event and calls methods to handle changes in the minimum and maximum values.
-     * @fires MefDevSliderComponent#valueChange
-    */
-    onValueChange() {
-        this.valueChange.emit({ minValue: this.minValue, maxValue: this.maxValue });
-        this.minValue = this.minValue;
-        this.onMinValueChange();
-        this.onMaxValueChange();
+class MefdevDropdownMenuComponent {
+    _eref;
+    label;
+    isOpen = false;
+    constructor(_eref) {
+        this._eref = _eref;
     }
-    /**
-     * Method to handle changes in the minimum value.
-     * Converts a string to a number and removes all non-numeric characters.
-     * Then, emits the `valueChange` event and updates the value of the "fromSlider" slider.
-     * @fires MefDevSliderComponent#valueChange
-    */
-    onMinValueChange() {
-        const numericValue = parseFloat(this.minValue.toString().replace(/[^\d.]/g, ''));
-        this.minValue = isNaN(numericValue) ? 0 : numericValue;
-        this.valueChange.emit({ minValue: this.minValue, maxValue: this.maxValue });
-        const fromSlider = document.getElementById(`fromSlider-${this.id}`);
+    onClick($event) {
+        const isClickInDdl = this._eref.nativeElement.contains($event.target);
+        if (isClickInDdl || (this.isOpen && !isClickInDdl)) {
+            this.isOpen = !this.isOpen;
+        }
     }
-    /**
-     * Method to handle changes in the maximum value.
-     * Converts a string to a number and removes all non-numeric characters.
-     * Then, emits the `valueChange` event and updates the value of the "toSlider" slider.
-     * @fires MefDevSliderComponent#valueChange
-    */
-    onMaxValueChange() {
-        const numericValue = parseFloat(this.maxValue.toString().replace(/[^\d.]/g, ''));
-        this.maxValue = isNaN(numericValue) ? 0 : numericValue; // Перевірка на NaN і присвоєння 0, якщо не вдалося конвертувати в число
-        this.valueChange.emit({ minValue: this.minValue, maxValue: this.maxValue });
-        const toSlider = document.getElementById(`toSlider-${this.id}`);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MefDevSliderComponent, isStandalone: false, selector: "mefdev-slider", inputs: { id: "id", range: "range", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"range_container row\">\r\n    <div class=\"inputs_control \">\r\n      <input class=\"form_control_container__time__input h3\"  [(ngModel)]=\"minValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMinValueChange()\">\r\n      <input class=\"form_control_container__time__input h3\"  [(ngModel)]=\"maxValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMaxValueChange()\">\r\n    </div>\r\n    <div class=\"sliders_control\">\r\n      <input id=\"fromSlider\" type=\"range\"  [(ngModel)]=\"minValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\">\r\n      <input id=\"toSlider\" type=\"range\"  [(ngModel)]=\"maxValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\" \r\n          [style]=\"{'--minValue': minValue,  '--maxValue': maxValue, '--minFromValue': range.min, '--maxToValue': range.max}\">\r\n    </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.sliders_control{position:relative;min-height:50px}.inputs_control{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}.inputs_control .form_control_container__time__input{width:80px;height:28px;border-radius:5px;border:none;background:#fff;text-align:center;box-shadow:2px 2px 2px #0000001a}#fromSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:13px}#toSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:-7px}input[type=range]::-moz-range-thumb{pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-moz-range-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #cf0106,0 0 9px #cf0106;-webkit-box-shadow:inset 0 0 3px #CF0106,0 0 9px #CF0106}input[type=number]{color:red;width:50px;height:30px;font-size:20px;border:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:.2}input[type=range]{-webkit-appearance:none;appearance:none;height:3px;width:100%;position:relative;background-color:#cf0106;pointer-events:none}input[type=range]::-moz-range-progress{background-color:transparent;height:3px}#fromSlider{height:0;z-index:9999}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefdevDropdownMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MefdevDropdownMenuComponent, isStandalone: false, selector: "mefdev-dropdown-menu", host: { listeners: { "document:click": "onClick($event)" } }, queries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<div class=\"label-container\">\r\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n</div>\r\n\r\n<div *ngIf=\"isOpen\" class=\"_dropdown\">\r\n    <div class=\"_menu\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}:host{display:block;position:relative;width:fit-content}.label-container{cursor:pointer;margin:4px;padding:4px}._dropdown{position:relative;z-index:10001}._menu{right:7px;top:-20px;position:absolute;z-index:10001;background-color:#fff;border:solid rgba(0,0,0,.176) 1px;border-radius:4px;cursor:pointer}._dropdown ._menu{min-width:auto;top:-5px;padding:4px;box-shadow:0 1px 3px 1px #00000026}._dropdown ._menu a{height:26px;font-family:Open Sans,Arial,sans-serif;font-size:14px;font-weight:400;line-height:22px;color:#000!important;display:flex;align-items:center}._dropdown ._menu a:hover{background-color:#f3f3f3}._dropdown ._menu a:hover *{color:#000!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefdevDropdownMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-slider', standalone: false, template: "<div class=\"range_container row\">\r\n    <div class=\"inputs_control \">\r\n      <input class=\"form_control_container__time__input h3\"  [(ngModel)]=\"minValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMinValueChange()\">\r\n      <input class=\"form_control_container__time__input h3\"  [(ngModel)]=\"maxValue\" [disabled]=\"disabled\" (ngModelChange)=\"onMaxValueChange()\">\r\n    </div>\r\n    <div class=\"sliders_control\">\r\n      <input id=\"fromSlider\" type=\"range\"  [(ngModel)]=\"minValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\">\r\n      <input id=\"toSlider\" type=\"range\"  [(ngModel)]=\"maxValue\" [min]=\"range.min\" [max]=\"range.max\" (ngModelChange)=\"onValueChange()\" \r\n          [style]=\"{'--minValue': minValue,  '--maxValue': maxValue, '--minFromValue': range.min, '--maxToValue': range.max}\">\r\n    </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.sliders_control{position:relative;min-height:50px}.inputs_control{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}.inputs_control .form_control_container__time__input{width:80px;height:28px;border-radius:5px;border:none;background:#fff;text-align:center;box-shadow:2px 2px 2px #0000001a}#fromSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:13px}#toSlider::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer;margin-top:-7px}input[type=range]::-moz-range-thumb{pointer-events:all;width:16px;height:16px;background-color:#cf0106;border-radius:50%;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-moz-range-track{background:linear-gradient(to right,#929292 0%,#929292 calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),transparent calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 calc((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue)) * 100%),#929292 100%);height:3px}input[type=range]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #cf0106,0 0 9px #cf0106;-webkit-box-shadow:inset 0 0 3px #CF0106,0 0 9px #CF0106}input[type=number]{color:red;width:50px;height:30px;font-size:20px;border:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:.2}input[type=range]{-webkit-appearance:none;appearance:none;height:3px;width:100%;position:relative;background-color:#cf0106;pointer-events:none}input[type=range]::-moz-range-progress{background-color:transparent;height:3px}#fromSlider{height:0;z-index:9999}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], range: [{
-                type: Input,
-                args: ['range']
-            }], disabled: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
+            args: [{ selector: 'mefdev-dropdown-menu', host: {
+                        '(document:click)': 'onClick($event)',
+                    }, standalone: false, template: "<div class=\"label-container\">\r\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n</div>\r\n\r\n<div *ngIf=\"isOpen\" class=\"_dropdown\">\r\n    <div class=\"_menu\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}:host{display:block;position:relative;width:fit-content}.label-container{cursor:pointer;margin:4px;padding:4px}._dropdown{position:relative;z-index:10001}._menu{right:7px;top:-20px;position:absolute;z-index:10001;background-color:#fff;border:solid rgba(0,0,0,.176) 1px;border-radius:4px;cursor:pointer}._dropdown ._menu{min-width:auto;top:-5px;padding:4px;box-shadow:0 1px 3px 1px #00000026}._dropdown ._menu a{height:26px;font-family:Open Sans,Arial,sans-serif;font-size:14px;font-weight:400;line-height:22px;color:#000!important;display:flex;align-items:center}._dropdown ._menu a:hover{background-color:#f3f3f3}._dropdown ._menu a:hover *{color:#000!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
+                type: ContentChild,
+                args: ["label"]
             }] } });
 
-class MefDevSliderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MefDevSliderModule, declarations: [MefDevSliderComponent], imports: [CommonModule,
-            FormsModule], exports: [MefDevSliderComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevSliderModule, imports: [CommonModule,
-            FormsModule] });
+class MefDevDropDownMenuModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevDropDownMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MefDevDropDownMenuModule, declarations: [MefdevDropdownMenuComponent], imports: [CommonModule], exports: [MefdevDropdownMenuComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevDropDownMenuModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevDropDownMenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        MefDevSliderComponent
-                    ],
                     exports: [
-                        MefDevSliderComponent
+                        MefdevDropdownMenuComponent
+                    ],
+                    declarations: [
+                        MefdevDropdownMenuComponent
                     ],
                     imports: [
-                        CommonModule,
-                        FormsModule,
+                        CommonModule
                     ]
                 }]
         }] });
 
-class MefDevSpecFlowTestComponent {
+/**
+ * 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;
     /**
-     *  UTC datetime
+     * Determines whether the progress bar is thick.
+     * Default value: false.
      */
-    ResponseTimestamp;
+    thick;
     /**
-     * 0/1 1 - ошибка, 0 - успех (200, 201 и тд)
+     * Determines whether the progress bar is indeterminate.
+     * Default value: false.
      */
-    ResponseError;
+    indeterminate;
     /**
-     * string для ResponseError=1
+     * The value of the progress bar.
+     * For the "circle" type, it should be a number between 0 and 100.
      */
-    ReportError;
-    constructor() { }
-    ngOnInit() {
+    set value(value) {
+        if (this.type == "circle") {
+            this._value = (value / 100) * 360;
+            if (this.value >= 50) {
+                this._value2 = true;
+            }
+        }
+        else
+            this._value = value;
     }
-    setError(error) {
-        this.ResponseTimestamp = Date.now();
-        this.ResponseError = 1;
-        this.ReportError = error;
+    get value() {
+        return this._value;
     }
-    setSuccess() {
-        this.ResponseTimestamp = Date.now();
-        this.ResponseError = 0;
-        this.ReportError = undefined;
+    /**
+     * Additional value property.
+     */
+    get value2() {
+        return this._value2;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevSpecFlowTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MefDevSpecFlowTestComponent, isStandalone: false, selector: "mefdev-spec-flow-test", ngImport: i0, template: "<!-- Block for test -->\r\n<div style=\"display: none;\">\r\n  <input id=\"ResponseTimestamp\" type=\"hidden\" value=\"{{ResponseTimestamp}}\" />\r\n  <input id=\"ResponseError\" type=\"hidden\" value=\"{{ResponseError}}\" />\r\n  <input id=\"ReportError\" type=\"hidden\" value=\"{{ReportError}}\" />\r\n</div>", styles: [""] });
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MefDevProgressComponent, isStandalone: false, 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: "20.3.6", ngImport: i0, type: MefDevSpecFlowTestComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mefdev-spec-flow-test', standalone: false, template: "<!-- Block for test -->\r\n<div style=\"display: none;\">\r\n  <input id=\"ResponseTimestamp\" type=\"hidden\" value=\"{{ResponseTimestamp}}\" />\r\n  <input id=\"ResponseError\" type=\"hidden\" value=\"{{ResponseError}}\" />\r\n  <input id=\"ReportError\" type=\"hidden\" value=\"{{ReportError}}\" />\r\n</div>" }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: "mefdev-progress", standalone: false, 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: () => [], propDecorators: { type: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], thick: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class ProgressConfig {
+    color = "primary";
+    thickness = 1;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ProgressConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ProgressConfig });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ProgressConfig, decorators: [{
+            type: Injectable
+        }] });
 
-class MefDevSpecFlowTestModule {
+class MefDevProgressModule {
     static forRoot() {
-        return {
-            ngModule: MefDevSpecFlowTestModule
-        };
+        return { ngModule: MefDevProgressModule, providers: [ProgressConfig] };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevSpecFlowTestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MefDevSpecFlowTestModule, declarations: [MefDevSpecFlowTestComponent], imports: [CommonModule], exports: [MefDevSpecFlowTestComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevSpecFlowTestModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MefDevProgressModule, declarations: [MefDevProgressComponent], imports: [CommonModule], exports: [MefDevProgressComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevProgressModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevSpecFlowTestModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevProgressModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MefDevSpecFlowTestComponent],
-                    exports: [MefDevSpecFlowTestComponent],
-                    imports: [
-                        CommonModule
-                    ]
+                    imports: [CommonModule],
+                    declarations: [MefDevProgressComponent],
+                    exports: [MefDevProgressComponent]
                 }]
         }] });
 
@@ -5186,13 +3471,13 @@ class MefDevTabsNavComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevTabsNavComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevTabsNavComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MefDevTabsNavComponent, isStandalone: false, selector: "mefdev-tabs-nav", inputs: { Size: "Size", Animated: "Animated", Position: "Position", HideBar: "HideBar", Type: "Type", ShowPagination: "ShowPagination", PositionMode: "PositionMode", selectedIndex: "selectedIndex" }, queries: [{ propertyName: "_tabBarExtraContent", first: true, predicate: ["tabBarExtraContent"], descendants: true, static: true }, { propertyName: "_labelWrappers", predicate: MefDevTabLabelDirective }], viewQueries: [{ propertyName: "_inkBar", first: true, predicate: MefDevTabsInkBarDirective, descendants: true, static: true }, { propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"nav-tabs-wrapper\" [class.scrolling]=\"_showPaginationControls\" #tabListContainer>\r\n    <div class=\"nav-wrap\">\r\n      <ul\r\n        class=\"nav nav-tabs nav-tabs-{{ _type }} nav-tabs-{{ _tabPosition }}\"\r\n        [class.tabs-nav-animated]=\"Animated\"\r\n        #tabList\r\n        (cdkObserveContent)=\"_onContentChanges()\"\r\n      >\r\n        <div\r\n          class=\"active-bar\"\r\n          mefdev-tabs-ink-bar\r\n          [hidden]=\"HideBar\"\r\n          [Animated]=\"Animated\"\r\n          [PositionMode]=\"PositionMode\"\r\n          style=\"display: block;\"\r\n        ></div>\r\n        <ng-content></ng-content>\r\n      </ul>\r\n    </div>\r\n  </div>", dependencies: [{ kind: "directive", type: MefDevTabsInkBarDirective, selector: "[mefdev-tabs-ink-bar]", inputs: ["Animated", "PositionMode"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MefDevTabsNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mefdev-tabs-nav', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"nav-tabs-wrapper\" [class.scrolling]=\"_showPaginationControls\" #tabListContainer>\r\n    <div class=\"nav-wrap\">\r\n      <ul\r\n        class=\"nav nav-tabs nav-tabs-{{ _type }} nav-tabs-{{ _tabPosition }}\"\r\n        [class.tabs-nav-animated]=\"Animated\"\r\n        #tabList\r\n        (cdkObserveContent)=\"_onContentChanges()\"\r\n      >\r\n        <div\r\n          class=\"active-bar\"\r\n          mefdev-tabs-ink-bar\r\n          [hidden]=\"HideBar\"\r\n          [Animated]=\"Animated\"\r\n          [PositionMode]=\"PositionMode\"\r\n          style=\"display: block;\"\r\n        ></div>\r\n        <ng-content></ng-content>\r\n      </ul>\r\n    </div>\r\n  </div>" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$2.Directionality, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$1.Directionality, decorators: [{
                     type: Optional
                 }] }], propDecorators: { Size: [{
                 type: Input
@@ -5757,12 +4042,12 @@ class MDExpansionPanel extends CdkAccordionItem {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDExpansionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.6", type: MDExpansionPanel, isStandalone: true, selector: "md-expansion-panel", inputs: { hideToggle: ["hideToggle", "hideToggle", booleanAttribute], togglePosition: "togglePosition" }, outputs: { afterExpand: "afterExpand", afterCollapse: "afterCollapse" }, host: { properties: { "class.expanded": "expanded", "class.expansion-panel-spacing": "_hasSpacing()" }, classAttribute: "expansion-panel" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.6", type: MDExpansionPanel, isStandalone: true, selector: "md-expansion-panel", inputs: { hideToggle: ["hideToggle", "hideToggle", booleanAttribute], togglePosition: "togglePosition" }, outputs: { afterExpand: "afterExpand", afterCollapse: "afterCollapse" }, host: { properties: { "class.expanded": "expanded" }, classAttribute: "expansion-panel" }, providers: [
             // Provide a standalone accordion context when used outside a parent accordion.
             { provide: ACCORDION, useValue: undefined },
             // Expose this concrete implementation under the base token.
             { provide: MD_EXPANSION_PANEL, useExisting: MDExpansionPanel },
-        ], queries: [{ propertyName: "_lazyContent", first: true, predicate: MDExpansionPanelContent, descendants: true }], viewQueries: [{ propertyName: "_body", first: true, predicate: ["body"], descendants: true }, { propertyName: "_bodyWrapper", first: true, predicate: ["bodyWrapper"], descendants: true }], exportAs: ["expansionPanel"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"md-expansion-panel-header\"></ng-content>\r\n<div class=\"expansion-panel-content-wrapper\" [attr.inert]=\"expanded ? null : ''\" #bodyWrapper>\r\n  <div class=\"expansion-panel-content\"\r\n       role=\"region\"\r\n       [attr.aria-labelledby]=\"_headerId\"\r\n       [id]=\"id\"\r\n       #body>\r\n    <div class=\"expansion-panel-body\">\r\n      <ng-content></ng-content>\r\n      <ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\r\n    </div>\r\n    <ng-content select=\"action-row\"></ng-content>\r\n  </div>\r\n</div>", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.expansion-panel{box-sizing:content-box;display:block;margin:0;overflow:hidden;position:relative;background:#f3f3f3;color:#000}.expansion-panel.expansion-panel-animations-enabled{transition:margin 225ms cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1)}.expansion-panel:not([class*=elevation-z]){box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.accordion .expansion-panel:not(.expanded),.accordion .expansion-panel:not(.expansion-panel-spacing){border-radius:0}.expansion-panel-content-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%}.expansion-panel-animations-enabled .expansion-panel-content-wrapper{transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel.expanded>.expansion-panel-content-wrapper{grid-template-rows:1fr}@supports not (grid-template-rows: 0fr){.expansion-panel-content-wrapper{height:0}.expansion-panel.expanded>.expansion-panel-content-wrapper{height:auto}}.expansion-panel-content{display:flex;flex-direction:column;overflow:visible;min-height:0;visibility:hidden;font-family:Robot;font-size:1rem;font-weight:400;line-height:1.5rem;letter-spacing:.031rem}.expansion-panel-animations-enabled .expansion-panel-content{transition:visibility .19s linear}.expansion-panel.expanded>.expansion-panel-content-wrapper>.expansion-panel-content{visibility:visible}.expansion-panel-body{padding:0 24px 16px}.expansion-panel-spacing{margin:16px 0}.accordion>.expansion-panel-spacing:first-child,.accordion>*:first-child:not(.expansion-panel) .expansion-panel-spacing{margin-top:0}.accordion>.expansion-panel-spacing:last-child,.accordion>*:last-child:not(.expansion-panel) .expansion-panel-spacing{margin-bottom:0}.action-row{border-top-style:solid;border-top-width:1px;display:flex;flex-direction:row;justify-content:flex-end;padding:12px 16px;border-top-color:#eaeaea}.action-row .button-base,.action-row .mdc-button-base{margin-left:8px}[dir=rtl] .action-row .button-base,[dir=rtl] .action-row .mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "_lazyContent", first: true, predicate: MDExpansionPanelContent, descendants: true }], viewQueries: [{ propertyName: "_body", first: true, predicate: ["body"], descendants: true }, { propertyName: "_bodyWrapper", first: true, predicate: ["bodyWrapper"], descendants: true }], exportAs: ["expansionPanel"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"md-expansion-panel-header\"></ng-content>\r\n<div class=\"expansion-panel-content-wrapper\" [attr.inert]=\"expanded ? null : ''\" #bodyWrapper>\r\n  <div class=\"expansion-panel-content\"\r\n       role=\"region\"\r\n       [attr.aria-labelledby]=\"_headerId\"\r\n       [id]=\"id\"\r\n       #body>\r\n    <div class=\"expansion-panel-body\">\r\n      <ng-content></ng-content>\r\n      <ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\r\n    </div>\r\n    <ng-content select=\"action-row\"></ng-content>\r\n  </div>\r\n</div>", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.expansion-panel{box-sizing:content-box;display:block;margin:0;overflow:hidden;position:relative;background:#f3f3f3;color:#000}.expansion-panel.expansion-panel-animations-enabled{transition:margin 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel-content-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%}.expansion-panel-animations-enabled .expansion-panel-content-wrapper{transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel.expanded>.expansion-panel-content-wrapper{grid-template-rows:1fr}@supports not (grid-template-rows: 0fr){.expansion-panel-content-wrapper{height:0}.expansion-panel.expanded>.expansion-panel-content-wrapper{height:auto}}.expansion-panel-content{display:flex;flex-direction:column;overflow:visible;min-height:0;visibility:hidden}.expansion-panel-animations-enabled .expansion-panel-content{transition:visibility .19s linear}.expansion-panel.expanded>.expansion-panel-content-wrapper>.expansion-panel-content{visibility:visible}.expansion-panel-body{padding:0 24px 16px}.accordion>.expansion-panel:not(:last-child){margin-bottom:8px}.action-row{border-top-style:solid;border-top-width:1px;display:flex;flex-direction:row;justify-content:flex-end;padding:12px 16px;border-top-color:#eaeaea}.action-row .button-base,.action-row .mdc-button-base{margin-left:8px}[dir=rtl] .action-row .button-base,[dir=rtl] .action-row .mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDExpansionPanel, decorators: [{
             type: Component,
@@ -5773,9 +4058,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                         { provide: MD_EXPANSION_PANEL, useExisting: MDExpansionPanel },
                     ], host: {
                         class: 'expansion-panel',
-                        '[class.expanded]': 'expanded',
-                        '[class.expansion-panel-spacing]': '_hasSpacing()',
-                    }, imports: [CdkPortalOutlet], template: "<ng-content select=\"md-expansion-panel-header\"></ng-content>\r\n<div class=\"expansion-panel-content-wrapper\" [attr.inert]=\"expanded ? null : ''\" #bodyWrapper>\r\n  <div class=\"expansion-panel-content\"\r\n       role=\"region\"\r\n       [attr.aria-labelledby]=\"_headerId\"\r\n       [id]=\"id\"\r\n       #body>\r\n    <div class=\"expansion-panel-body\">\r\n      <ng-content></ng-content>\r\n      <ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\r\n    </div>\r\n    <ng-content select=\"action-row\"></ng-content>\r\n  </div>\r\n</div>", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.expansion-panel{box-sizing:content-box;display:block;margin:0;overflow:hidden;position:relative;background:#f3f3f3;color:#000}.expansion-panel.expansion-panel-animations-enabled{transition:margin 225ms cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1)}.expansion-panel:not([class*=elevation-z]){box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.accordion .expansion-panel:not(.expanded),.accordion .expansion-panel:not(.expansion-panel-spacing){border-radius:0}.expansion-panel-content-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%}.expansion-panel-animations-enabled .expansion-panel-content-wrapper{transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel.expanded>.expansion-panel-content-wrapper{grid-template-rows:1fr}@supports not (grid-template-rows: 0fr){.expansion-panel-content-wrapper{height:0}.expansion-panel.expanded>.expansion-panel-content-wrapper{height:auto}}.expansion-panel-content{display:flex;flex-direction:column;overflow:visible;min-height:0;visibility:hidden;font-family:Robot;font-size:1rem;font-weight:400;line-height:1.5rem;letter-spacing:.031rem}.expansion-panel-animations-enabled .expansion-panel-content{transition:visibility .19s linear}.expansion-panel.expanded>.expansion-panel-content-wrapper>.expansion-panel-content{visibility:visible}.expansion-panel-body{padding:0 24px 16px}.expansion-panel-spacing{margin:16px 0}.accordion>.expansion-panel-spacing:first-child,.accordion>*:first-child:not(.expansion-panel) .expansion-panel-spacing{margin-top:0}.accordion>.expansion-panel-spacing:last-child,.accordion>*:last-child:not(.expansion-panel) .expansion-panel-spacing{margin-bottom:0}.action-row{border-top-style:solid;border-top-width:1px;display:flex;flex-direction:row;justify-content:flex-end;padding:12px 16px;border-top-color:#eaeaea}.action-row .button-base,.action-row .mdc-button-base{margin-left:8px}[dir=rtl] .action-row .button-base,[dir=rtl] .action-row .mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
+                        '[class.expanded]': 'expanded'
+                    }, imports: [CdkPortalOutlet], template: "<ng-content select=\"md-expansion-panel-header\"></ng-content>\r\n<div class=\"expansion-panel-content-wrapper\" [attr.inert]=\"expanded ? null : ''\" #bodyWrapper>\r\n  <div class=\"expansion-panel-content\"\r\n       role=\"region\"\r\n       [attr.aria-labelledby]=\"_headerId\"\r\n       [id]=\"id\"\r\n       #body>\r\n    <div class=\"expansion-panel-body\">\r\n      <ng-content></ng-content>\r\n      <ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\r\n    </div>\r\n    <ng-content select=\"action-row\"></ng-content>\r\n  </div>\r\n</div>", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.expansion-panel{box-sizing:content-box;display:block;margin:0;overflow:hidden;position:relative;background:#f3f3f3;color:#000}.expansion-panel.expansion-panel-animations-enabled{transition:margin 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel-content-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%}.expansion-panel-animations-enabled .expansion-panel-content-wrapper{transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel.expanded>.expansion-panel-content-wrapper{grid-template-rows:1fr}@supports not (grid-template-rows: 0fr){.expansion-panel-content-wrapper{height:0}.expansion-panel.expanded>.expansion-panel-content-wrapper{height:auto}}.expansion-panel-content{display:flex;flex-direction:column;overflow:visible;min-height:0;visibility:hidden}.expansion-panel-animations-enabled .expansion-panel-content{transition:visibility .19s linear}.expansion-panel.expanded>.expansion-panel-content-wrapper>.expansion-panel-content{visibility:visible}.expansion-panel-body{padding:0 24px 16px}.accordion>.expansion-panel:not(:last-child){margin-bottom:8px}.action-row{border-top-style:solid;border-top-width:1px;display:flex;flex-direction:row;justify-content:flex-end;padding:12px 16px;border-top-color:#eaeaea}.action-row .button-base,.action-row .mdc-button-base{margin-left:8px}[dir=rtl] .action-row .button-base,[dir=rtl] .action-row .mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hideToggle: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -5944,7 +4228,7 @@ class MDExpansionPanelHeader {
         this._focusMonitor.stopMonitoring(this._element);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDExpansionPanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: MDExpansionPanelHeader, isStandalone: true, selector: "md-expansion-panel-header", inputs: { expandedHeight: "expandedHeight", collapsedHeight: "collapsedHeight", tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))] }, host: { attributes: { "role": "button" }, listeners: { "click": "_toggle()", "keydown": "_keydown($event)" }, properties: { "attr.id": "panel._headerId", "attr.tabindex": "disabled ? -1 : tabIndex", "attr.aria-controls": "_getPanelId()", "attr.aria-expanded": "_isExpanded()", "attr.aria-disabled": "panel.disabled", "class.expanded": "_isExpanded()", "class.expansion-toggle-indicator-after": "_getTogglePosition() === 'after'", "class.expansion-toggle-indicator-before": "_getTogglePosition() === 'before'", "style.height": "_getHeaderHeight()" }, classAttribute: "expansion-panel-header focus-indicator" }, ngImport: i0, template: "<span class=\"content\" [class.content-hide-toggle]=\"!_showToggle()\">\r\n  <ng-content select=\"md-panel-title\"></ng-content>\r\n  <ng-content select=\"md-panel-description\"></ng-content>\r\n  <ng-content></ng-content>\r\n</span>\r\n\r\n@if (_showToggle()) {\r\n  <span class=\"expansion-indicator\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 -960 960 960\"\r\n      aria-hidden=\"true\"\r\n      focusable=\"false\">\r\n      <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\r\n    </svg>\r\n  </span>\r\n}", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.expansion-panel-header{display:flex;flex-direction:row;align-items:center;padding:0 24px;border-radius:inherit;height:48px;font-family:Montserrat;font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:.009rem}.expansion-panel-animations-enabled .expansion-panel-header{transition:height 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel-header:before{border-radius:inherit}.expansion-panel-header.expanded{height:64px}.expansion-panel-header[aria-disabled=true]{color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent)}.expansion-panel-header:not([aria-disabled=true]){cursor:pointer}.expansion-panel:not(.expanded) .expansion-panel-header:not([aria-disabled=true]):hover{background:color-mix(in srgb,var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),transparent)}.expansion-panel .expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused,.expansion-panel .expansion-panel-header:not([aria-disabled=true]).cdk-program-focused{background:color-mix(in srgb,var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),transparent)}.expansion-panel-header._animation-noopable{transition:none}.expansion-panel-header:focus,.expansion-panel-header:hover{outline:none}.expansion-panel-header.expanded:focus,.expansion-panel-header.expanded:hover{background:inherit}.expansion-panel-header.expansion-toggle-indicator-before{flex-direction:row-reverse}.expansion-panel-header.expansion-toggle-indicator-before .expansion-indicator{margin:0 16px 0 0}[dir=rtl] .expansion-panel-header.expansion-toggle-indicator-before .expansion-indicator{margin:0 0 0 16px}.content{display:flex;flex:1;flex-direction:row;overflow:hidden}.content.content-hide-toggle{margin-right:8px}[dir=rtl] .content.content-hide-toggle{margin-right:0;margin-left:8px}.expansion-toggle-indicator-before .content.content-hide-toggle{margin-left:24px;margin-right:0}[dir=rtl] .expansion-toggle-indicator-before .content.content-hide-toggle{margin-right:24px;margin-left:0}.expansion-panel-header-title{color:#373737}.expansion-panel-header-title,.expansion-panel-header-description{display:flex;flex-grow:1;flex-basis:0;margin-right:16px;align-items:center}[dir=rtl] .expansion-panel-header-title,[dir=rtl] .expansion-panel-header-description{margin-right:0;margin-left:16px}.expansion-panel-header[aria-disabled=true] .expansion-panel-header-title,.expansion-panel-header[aria-disabled=true] .expansion-panel-header-description{color:inherit}.expansion-panel-header-description{flex-grow:2;color:#373737}.expansion-panel-animations-enabled .expansion-indicator{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel-header.expanded .expansion-indicator{transform:rotate(180deg)}.expansion-indicator svg{width:24px;height:24px;margin:0 -8px;vertical-align:middle;fill:#000;display:inline-block}@media (forced-colors: active){.expansion-panel-content{border-top:1px solid;border-top-left-radius:0;border-top-right-radius:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: MDExpansionPanelHeader, isStandalone: true, selector: "md-expansion-panel-header", inputs: { expandedHeight: "expandedHeight", collapsedHeight: "collapsedHeight", tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))] }, host: { attributes: { "role": "button" }, listeners: { "click": "_toggle()", "keydown": "_keydown($event)" }, properties: { "attr.id": "panel._headerId", "attr.tabindex": "disabled ? -1 : tabIndex", "attr.aria-controls": "_getPanelId()", "attr.aria-expanded": "_isExpanded()", "attr.aria-disabled": "panel.disabled", "class.expanded": "_isExpanded()", "class.expansion-toggle-indicator-after": "_getTogglePosition() === 'after'", "class.expansion-toggle-indicator-before": "_getTogglePosition() === 'before'", "style.height": "_getHeaderHeight()" }, classAttribute: "expansion-panel-header focus-indicator" }, ngImport: i0, template: "<span class=\"content\" [class.content-hide-toggle]=\"!_showToggle()\">\r\n  <ng-content select=\"md-panel-title\"></ng-content>\r\n  <ng-content select=\"md-panel-description\"></ng-content>\r\n  <ng-content></ng-content>\r\n</span>\r\n\r\n@if (_showToggle()) {\r\n  <span class=\"expansion-indicator\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 -960 960 960\"\r\n      aria-hidden=\"true\"\r\n      focusable=\"false\">\r\n      <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\r\n    </svg>\r\n  </span>\r\n}", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.expansion-panel-header{display:flex;flex-direction:row;align-items:center;padding:0 24px;border-radius:inherit;height:66px;font-family:Montserrat;font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:.009rem}.expansion-panel-animations-enabled .expansion-panel-header{transition:height 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel-header:before{border-radius:inherit}.expansion-panel-header.expanded{height:64px}.expansion-panel-header[aria-disabled=true]{color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent)}.expansion-panel-header:not([aria-disabled=true]){cursor:pointer}.expansion-panel:not(.expanded) .expansion-panel-header:not([aria-disabled=true]):hover{background:color-mix(in srgb,var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),transparent)}.expansion-panel .expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused,.expansion-panel .expansion-panel-header:not([aria-disabled=true]).cdk-program-focused{background:color-mix(in srgb,var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),transparent)}.expansion-panel-header._animation-noopable{transition:none}.expansion-panel-header:focus,.expansion-panel-header:hover{outline:none}.expansion-panel-header.expanded:focus,.expansion-panel-header.expanded:hover{background:inherit}.expansion-panel-header.expansion-toggle-indicator-before{flex-direction:row-reverse}.expansion-panel-header.expansion-toggle-indicator-before .expansion-indicator{margin:0 16px 0 0}[dir=rtl] .expansion-panel-header.expansion-toggle-indicator-before .expansion-indicator{margin:0 0 0 16px}.content{display:flex;flex:1;flex-direction:row;overflow:hidden}.content.content-hide-toggle{margin-right:8px}[dir=rtl] .content.content-hide-toggle{margin-right:0;margin-left:8px}.expansion-toggle-indicator-before .content.content-hide-toggle{margin-left:24px;margin-right:0}[dir=rtl] .expansion-toggle-indicator-before .content.content-hide-toggle{margin-right:24px;margin-left:0}.expansion-panel-header-title{color:#373737;font-size:18px;line-height:24px;font-weight:600;text-transform:none}.expansion-panel-header-title,.expansion-panel-header-description{display:flex;flex-grow:1;flex-basis:0;margin-right:16px;align-items:center}[dir=rtl] .expansion-panel-header-title,[dir=rtl] .expansion-panel-header-description{margin-right:0;margin-left:16px}.expansion-panel-header[aria-disabled=true] .expansion-panel-header-title,.expansion-panel-header[aria-disabled=true] .expansion-panel-header-description{color:inherit}.expansion-panel-header-description{flex-grow:2;color:#373737}.expansion-panel-animations-enabled .expansion-indicator{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel-header.expanded .expansion-indicator{transform:rotate(180deg)}.expansion-indicator svg{width:24px;height:24px;margin:0 -8px;vertical-align:middle;fill:#000;display:inline-block}@media (forced-colors: active){.expansion-panel-content{border-top:1px solid;border-top-left-radius:0;border-top-right-radius:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDExpansionPanelHeader, decorators: [{
             type: Component,
@@ -5965,7 +4249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                         // Interaction
                         '(click)': '_toggle()',
                         '(keydown)': '_keydown($event)',
-                    }, template: "<span class=\"content\" [class.content-hide-toggle]=\"!_showToggle()\">\r\n  <ng-content select=\"md-panel-title\"></ng-content>\r\n  <ng-content select=\"md-panel-description\"></ng-content>\r\n  <ng-content></ng-content>\r\n</span>\r\n\r\n@if (_showToggle()) {\r\n  <span class=\"expansion-indicator\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 -960 960 960\"\r\n      aria-hidden=\"true\"\r\n      focusable=\"false\">\r\n      <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\r\n    </svg>\r\n  </span>\r\n}", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.expansion-panel-header{display:flex;flex-direction:row;align-items:center;padding:0 24px;border-radius:inherit;height:48px;font-family:Montserrat;font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:.009rem}.expansion-panel-animations-enabled .expansion-panel-header{transition:height 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel-header:before{border-radius:inherit}.expansion-panel-header.expanded{height:64px}.expansion-panel-header[aria-disabled=true]{color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent)}.expansion-panel-header:not([aria-disabled=true]){cursor:pointer}.expansion-panel:not(.expanded) .expansion-panel-header:not([aria-disabled=true]):hover{background:color-mix(in srgb,var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),transparent)}.expansion-panel .expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused,.expansion-panel .expansion-panel-header:not([aria-disabled=true]).cdk-program-focused{background:color-mix(in srgb,var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),transparent)}.expansion-panel-header._animation-noopable{transition:none}.expansion-panel-header:focus,.expansion-panel-header:hover{outline:none}.expansion-panel-header.expanded:focus,.expansion-panel-header.expanded:hover{background:inherit}.expansion-panel-header.expansion-toggle-indicator-before{flex-direction:row-reverse}.expansion-panel-header.expansion-toggle-indicator-before .expansion-indicator{margin:0 16px 0 0}[dir=rtl] .expansion-panel-header.expansion-toggle-indicator-before .expansion-indicator{margin:0 0 0 16px}.content{display:flex;flex:1;flex-direction:row;overflow:hidden}.content.content-hide-toggle{margin-right:8px}[dir=rtl] .content.content-hide-toggle{margin-right:0;margin-left:8px}.expansion-toggle-indicator-before .content.content-hide-toggle{margin-left:24px;margin-right:0}[dir=rtl] .expansion-toggle-indicator-before .content.content-hide-toggle{margin-right:24px;margin-left:0}.expansion-panel-header-title{color:#373737}.expansion-panel-header-title,.expansion-panel-header-description{display:flex;flex-grow:1;flex-basis:0;margin-right:16px;align-items:center}[dir=rtl] .expansion-panel-header-title,[dir=rtl] .expansion-panel-header-description{margin-right:0;margin-left:16px}.expansion-panel-header[aria-disabled=true] .expansion-panel-header-title,.expansion-panel-header[aria-disabled=true] .expansion-panel-header-description{color:inherit}.expansion-panel-header-description{flex-grow:2;color:#373737}.expansion-panel-animations-enabled .expansion-indicator{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel-header.expanded .expansion-indicator{transform:rotate(180deg)}.expansion-indicator svg{width:24px;height:24px;margin:0 -8px;vertical-align:middle;fill:#000;display:inline-block}@media (forced-colors: active){.expansion-panel-content{border-top:1px solid;border-top-left-radius:0;border-top-right-radius:0}}\n"] }]
+                    }, template: "<span class=\"content\" [class.content-hide-toggle]=\"!_showToggle()\">\r\n  <ng-content select=\"md-panel-title\"></ng-content>\r\n  <ng-content select=\"md-panel-description\"></ng-content>\r\n  <ng-content></ng-content>\r\n</span>\r\n\r\n@if (_showToggle()) {\r\n  <span class=\"expansion-indicator\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 -960 960 960\"\r\n      aria-hidden=\"true\"\r\n      focusable=\"false\">\r\n      <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\r\n    </svg>\r\n  </span>\r\n}", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.expansion-panel-header{display:flex;flex-direction:row;align-items:center;padding:0 24px;border-radius:inherit;height:66px;font-family:Montserrat;font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:.009rem}.expansion-panel-animations-enabled .expansion-panel-header{transition:height 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel-header:before{border-radius:inherit}.expansion-panel-header.expanded{height:64px}.expansion-panel-header[aria-disabled=true]{color:color-mix(in srgb,var(--mat-sys-on-surface) 38%,transparent)}.expansion-panel-header:not([aria-disabled=true]){cursor:pointer}.expansion-panel:not(.expanded) .expansion-panel-header:not([aria-disabled=true]):hover{background:color-mix(in srgb,var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),transparent)}.expansion-panel .expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused,.expansion-panel .expansion-panel-header:not([aria-disabled=true]).cdk-program-focused{background:color-mix(in srgb,var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),transparent)}.expansion-panel-header._animation-noopable{transition:none}.expansion-panel-header:focus,.expansion-panel-header:hover{outline:none}.expansion-panel-header.expanded:focus,.expansion-panel-header.expanded:hover{background:inherit}.expansion-panel-header.expansion-toggle-indicator-before{flex-direction:row-reverse}.expansion-panel-header.expansion-toggle-indicator-before .expansion-indicator{margin:0 16px 0 0}[dir=rtl] .expansion-panel-header.expansion-toggle-indicator-before .expansion-indicator{margin:0 0 0 16px}.content{display:flex;flex:1;flex-direction:row;overflow:hidden}.content.content-hide-toggle{margin-right:8px}[dir=rtl] .content.content-hide-toggle{margin-right:0;margin-left:8px}.expansion-toggle-indicator-before .content.content-hide-toggle{margin-left:24px;margin-right:0}[dir=rtl] .expansion-toggle-indicator-before .content.content-hide-toggle{margin-right:24px;margin-left:0}.expansion-panel-header-title{color:#373737;font-size:18px;line-height:24px;font-weight:600;text-transform:none}.expansion-panel-header-title,.expansion-panel-header-description{display:flex;flex-grow:1;flex-basis:0;margin-right:16px;align-items:center}[dir=rtl] .expansion-panel-header-title,[dir=rtl] .expansion-panel-header-description{margin-right:0;margin-left:16px}.expansion-panel-header[aria-disabled=true] .expansion-panel-header-title,.expansion-panel-header[aria-disabled=true] .expansion-panel-header-description{color:inherit}.expansion-panel-header-description{flex-grow:2;color:#373737}.expansion-panel-animations-enabled .expansion-indicator{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expansion-panel-header.expanded .expansion-indicator{transform:rotate(180deg)}.expansion-indicator svg{width:24px;height:24px;margin:0 -8px;vertical-align:middle;fill:#000;display:inline-block}@media (forced-colors: active){.expansion-panel-content{border-top:1px solid;border-top-left-radius:0;border-top-right-radius:0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { expandedHeight: [{
                 type: Input
             }], collapsedHeight: [{
@@ -7231,7 +5515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
  */
 class MDDialogContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: MDDialogContent, isStandalone: true, selector: "[md-dialog-content], md-dialog-content, [mdDialogContent]", host: { classAttribute: "mdc-dialog-content mdc-dialog__content" }, hostDirectives: [{ directive: i1$3.CdkScrollable }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: MDDialogContent, isStandalone: true, selector: "[md-dialog-content], md-dialog-content, [mdDialogContent]", host: { classAttribute: "mdc-dialog-content mdc-dialog__content" }, hostDirectives: [{ directive: i1$2.CdkScrollable }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDDialogContent, decorators: [{
             type: Directive,
@@ -7582,6 +5866,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 }]
         }] });
 
+const HEADER_SCROLL_DELAY$1 = 650;
+const HEADER_SCROLL_INTERVAL$1 = 100;
+const passiveEventListenerOptions$1 = {
+    passive: true,
+};
 /**
  * ErrorStateMatcher that shows errors only once a control is dirty
  * (or when the parent form was submitted). Useful for “show on edit”.
@@ -7633,9 +5922,9 @@ class MDStep extends CdkStep {
     ngAfterContentInit() {
         this._isSelected = this._stepper.steps.changes
             .pipe(switchMap(() => {
-            return this._stepper.selectionChange.pipe(map(event => event.selectedStep === this), startWith(this._stepper.selected === this));
+            return this._stepper.selectionChange.pipe(map((event) => event.selectedStep === this), startWith(this._stepper.selected === this));
         }))
-            .subscribe(isSelected => {
+            .subscribe((isSelected) => {
             if (isSelected && this._lazyContent && !this._portal) {
                 this._portal = new TemplatePortal(this._lazyContent._template, this._viewContainerRef);
             }
@@ -7670,7 +5959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                         { provide: CdkStep, useExisting: MDStep },
                     ], encapsulation: ViewEncapsulation.None, exportAs: 'mdStep', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkPortalOutlet], host: {
                         // Keep steps hidden by default; container controls visibility.
-                        'hidden': '',
+                        hidden: '',
                     }, template: "<ng-template>\r\n  <ng-content></ng-content>\r\n  <ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\r\n</ng-template>" }]
         }], propDecorators: { stepLabel: [{
                 type: ContentChild,
@@ -7726,12 +6015,17 @@ class MDStepper extends CdkStepper {
     _animationDuration = '';
     /** SSR guard (avoid DOM APIs when not in browser). */
     _isServer = !inject(Platform).isBrowser;
+    _sharedResizeObserver = inject(SharedResizeObserver);
+    // Overload kept to match construction signature patterns.
     constructor() {
         super();
         // Infer orientation from host element name when using alias tags.
         const elementRef = inject(ElementRef);
         const nodeName = elementRef.nativeElement.nodeName.toLowerCase();
         this.orientation = nodeName === 'vertical-stepper' ? 'vertical' : 'horizontal';
+        this._eventCleanups = this._ngZone.runOutsideAngular(() => [
+            this._renderer.listen(this._elementRef.nativeElement, 'mouseleave', () => this._stopInterval()),
+        ]);
     }
     /**
      * After content init:
@@ -7764,6 +6058,192 @@ class MDStepper extends CdkStepper {
                 }, 200);
             }
         });
+        const resize = this._sharedResizeObserver
+            .observe(this._elementRef.nativeElement)
+            .pipe(debounceTime(32), takeUntil(this._destroyed));
+        const realign = () => {
+            this.updatePagination();
+        };
+        merge(resize, this._stepHeader.changes, this._itemsResized())
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => {
+            this._ngZone.run(() => {
+                Promise.resolve().then(() => {
+                    this._scrollDistance = Math.max(0, Math.min(this._getMaxScrollDistance(), this._scrollDistance));
+                    realign();
+                });
+            });
+        });
+    }
+    ngAfterViewChecked() {
+        if (this._stepLabelCount != this._stepHeader.length) {
+            this.updatePagination();
+            this._stepLabelCount = this._stepHeader.length;
+            this.changeDetectorRef.markForCheck();
+        }
+        if (this._selectedIndexChanged) {
+            this._scrollToLabel(this.selectedIndex);
+            this._checkScrollingControls();
+            this._selectedIndexChanged = false;
+            this.changeDetectorRef.markForCheck();
+        }
+        if (this._scrollDistanceChanged) {
+            this._updateTabScrollPosition();
+            this._scrollDistanceChanged = false;
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    _stopScrolling = new Subject();
+    _eventCleanups;
+    _selectedIndexChanged = false;
+    _stepLabelCount;
+    changeDetectorRef = inject(ChangeDetectorRef);
+    _platform = inject(Platform);
+    disablePagination = false;
+    get selectedIndex() {
+        return super.selectedIndex;
+    }
+    set selectedIndex(v) {
+        const previous = super.selectedIndex;
+        super.selectedIndex = v;
+        const value = isNaN(v) ? 0 : v;
+        if (previous != value) {
+            this._selectedIndexChanged = true;
+        }
+    }
+    _stepHeaderElRef;
+    _stepListContainer;
+    _stepList;
+    _stepListInner;
+    _nextPaginator;
+    _previousPaginator;
+    _scrollDistanceChanged;
+    _scrollDistance = 0;
+    _showPaginationControls = false;
+    _disableScrollAfter = true;
+    _disableScrollBefore = true;
+    get scrollDistance() {
+        return this._scrollDistance;
+    }
+    set scrollDistance(value) {
+        this._scrollTo(value);
+    }
+    _handlePaginatorClick(direction) {
+        this._stopInterval();
+        this._scrollHeader(direction);
+    }
+    _handlePaginatorPress(direction, mouseEvent) {
+        if (mouseEvent && mouseEvent.button != null && mouseEvent.button !== 0) {
+            return;
+        }
+        this._stopInterval();
+        timer(HEADER_SCROLL_DELAY$1, HEADER_SCROLL_INTERVAL$1)
+            .pipe(takeUntil(merge(this._stopScrolling, this._destroyed)))
+            .subscribe(() => {
+            const { maxScrollDistance, distance } = this._scrollHeader(direction);
+            if (distance === 0 || distance >= maxScrollDistance) {
+                this._stopInterval();
+            }
+        });
+    }
+    _scrollHeader(direction) {
+        const viewLength = this._stepListContainer.nativeElement.offsetWidth;
+        const scrollAmount = ((direction == 'before' ? -1 : 1) * viewLength) / 3;
+        return this._scrollTo(this._scrollDistance + scrollAmount);
+    }
+    _stopInterval() {
+        this._stopScrolling.next();
+    }
+    _scrollToLabel(labelIndex) {
+        if (this.disablePagination) {
+            return;
+        }
+        const selectedLabel = this._stepHeader ? this._stepHeader.toArray()[labelIndex] : null;
+        if (!selectedLabel) {
+            return;
+        }
+        const viewLength = this._stepListContainer.nativeElement.offsetWidth;
+        const { offsetLeft, offsetWidth } = selectedLabel._elementRef.nativeElement;
+        let labelBeforePos, labelAfterPos;
+        labelBeforePos = offsetLeft;
+        labelAfterPos = labelBeforePos + offsetWidth;
+        const beforeVisiblePos = this.scrollDistance;
+        const afterVisiblePos = this.scrollDistance + viewLength;
+        if (labelBeforePos < beforeVisiblePos) {
+            this.scrollDistance -= beforeVisiblePos - labelBeforePos;
+        }
+        else if (labelAfterPos > afterVisiblePos) {
+            this.scrollDistance += Math.min(labelAfterPos - afterVisiblePos, labelBeforePos - beforeVisiblePos);
+        }
+    }
+    _itemsResized() {
+        if (typeof ResizeObserver !== 'function') {
+            return EMPTY;
+        }
+        return this._stepHeader.changes.pipe(startWith(this._stepHeader), switchMap((tabItems) => new Observable((observer) => this._ngZone.runOutsideAngular(() => {
+            const resizeObserver = new ResizeObserver((entries) => observer.next(entries));
+            tabItems.forEach((item) => resizeObserver.observe(item.elementRef.nativeElement));
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }))), skip(1), filter((entries) => entries.some((e) => e.contentRect.width > 0 && e.contentRect.height > 0)));
+    }
+    _scrollTo(position) {
+        if (this.disablePagination) {
+            return { maxScrollDistance: 0, distance: 0 };
+        }
+        const maxScrollDistance = this._getMaxScrollDistance();
+        this._scrollDistance = Math.max(0, Math.min(maxScrollDistance, position));
+        this._scrollDistanceChanged = true;
+        this._checkScrollingControls();
+        return { maxScrollDistance, distance: this._scrollDistance };
+    }
+    _checkScrollingControls() {
+        if (this.disablePagination) {
+            this._disableScrollAfter = this._disableScrollBefore = true;
+        }
+        else {
+            this._disableScrollBefore = this.scrollDistance == 0;
+            this._disableScrollAfter = this.scrollDistance == this._getMaxScrollDistance();
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    _getMaxScrollDistance() {
+        const lengthOfTabList = this._stepListInner.nativeElement.scrollWidth;
+        const viewLength = this._stepListContainer.nativeElement.offsetWidth;
+        return lengthOfTabList - viewLength || 0;
+    }
+    _updateTabScrollPosition() {
+        if (this.disablePagination) {
+            return;
+        }
+        const scrollDistance = this.scrollDistance;
+        const translateX = -scrollDistance;
+        this._stepList.nativeElement.style.transform = `translateX(${Math.round(translateX)}px)`;
+        this._stepListContainer.nativeElement.scrollLeft = 0;
+    }
+    updatePagination() {
+        this._checkPaginationEnabled();
+        this._checkScrollingControls();
+        this._updateTabScrollPosition();
+    }
+    _checkPaginationEnabled() {
+        if (this.disablePagination) {
+            this._showPaginationControls = false;
+            this.changeDetectorRef.markForCheck();
+        }
+        else {
+            const scrollWidth = this._stepListInner.nativeElement.scrollWidth;
+            const containerWidth = this._elementRef.nativeElement.offsetWidth;
+            const isEnabled = scrollWidth - containerWidth >= 5;
+            if (!isEnabled) {
+                this.scrollDistance = 0;
+            }
+            if (isEnabled !== this._showPaginationControls) {
+                this._showPaginationControls = isEnabled;
+                this.changeDetectorRef.markForCheck();
+            }
+        }
     }
     /**
      * After view init:
@@ -7774,9 +6254,7 @@ class MDStepper extends CdkStepper {
         super.ngAfterViewInit();
         if (typeof queueMicrotask === 'function') {
             let hasEmittedInitial = false;
-            this._animatedContainers.changes
-                .pipe(startWith(null), takeUntil(this._destroyed))
-                .subscribe(() => queueMicrotask(() => {
+            this._animatedContainers.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => queueMicrotask(() => {
                 // Fire once after the very first render so consumers can react.
                 if (!hasEmittedInitial) {
                     hasEmittedInitial = true;
@@ -7785,11 +6263,16 @@ class MDStepper extends CdkStepper {
                 this._stateChanged();
             }));
         }
+        this._eventCleanups.push(this._renderer.listen(this._previousPaginator.nativeElement, 'touchstart', () => this._handlePaginatorPress('before'), passiveEventListenerOptions$1), this._renderer.listen(this._nextPaginator.nativeElement, 'touchstart', () => this._handlePaginatorPress('after'), passiveEventListenerOptions$1));
     }
     /** Tear down transition listener on destroy. */
     ngOnDestroy() {
         super.ngOnDestroy();
         this._cleanupTransition?.();
+        this._eventCleanups.forEach((cleanup) => cleanup());
+        this._destroyed.next();
+        this._destroyed.complete();
+        this._stopScrolling.complete();
     }
     /** Resolve the effective animation duration string applied to CSS. */
     _getAnimationDuration() {
@@ -7822,7 +6305,7 @@ class MDStepper extends CdkStepper {
             target.classList.contains('vertical-content-container-active');
         // Ensure the event target is one of our tracked containers.
         const shouldEmit = (isHorizontalActiveElement || isVerticalActiveElement) &&
-            this._animatedContainers.find(ref => ref.nativeElement === target);
+            this._animatedContainers.find((ref) => ref.nativeElement === target);
         if (shouldEmit) {
             this._onAnimationDone();
         }
@@ -7833,7 +6316,7 @@ class MDStepper extends CdkStepper {
         this.animationDone.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: MDStepper, isStandalone: true, selector: "md-stepper, md-vertical-stepper, md-horizontal-stepper, [mdStepper]", inputs: { labelPosition: "labelPosition", headerPosition: "headerPosition", animationDuration: "animationDuration" }, outputs: { animationDone: "animationDone" }, host: { attributes: { "role": "tablist" }, properties: { "class.stepper-horizontal": "orientation === \"horizontal\"", "class.stepper-vertical": "orientation === \"vertical\"", "class.stepper-label-position-end": "orientation === \"horizontal\" && labelPosition == \"end\"", "class.stepper-label-position-bottom": "orientation === \"horizontal\" && labelPosition == \"bottom\"", "class.stepper-header-position-bottom": "headerPosition === \"bottom\"", "class.stepper-animating": "_isAnimating()", "style.stepper-animation-duration": "_getAnimationDuration()", "attr.aria-orientation": "orientation" } }, providers: [{ provide: CdkStepper, useExisting: MDStepper }], queries: [{ propertyName: "footer", first: true, predicate: MDStepFooter, descendants: true, read: TemplateRef }, { propertyName: "_steps", predicate: MDStep, descendants: true }, { propertyName: "_icons", predicate: MDStepperIcon, descendants: true }], viewQueries: [{ propertyName: "_stepHeader", predicate: MDStepHeader, descendants: true }, { propertyName: "_animatedContainers", predicate: ["animatedContainer"], descendants: true }], exportAs: ["mdStepper", "mdVerticalStepper", "mdHorizontalStepper"], usesInheritance: true, ngImport: i0, template: "@if (_isServer) {\r\n  <ng-content/>\r\n}\r\n\r\n@switch (orientation) {\r\n  @case ('horizontal') {\r\n    <div class=\"horizontal-stepper-wrapper\">\r\n      <div class=\"horizontal-stepper-header-container\">\r\n        @for (step of steps; track step) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"stepTemplate\"\r\n            [ngTemplateOutletContext]=\"{step}\"/>\r\n          @if (!$last) {\r\n            <div class=\"stepper-horizontal-line\"></div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <div class=\"horizontal-content-container\">\r\n        @for (step of steps; track step) {\r\n          <div\r\n            #animatedContainer\r\n            class=\"horizontal-stepper-content\"\r\n            role=\"tabpanel\"\r\n            [id]=\"_getStepContentId($index)\"\r\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\"\r\n            [class]=\"'horizontal-stepper-content-' + _getAnimationDirection($index)\"\r\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n            <ng-container [ngTemplateOutlet]=\"step.content\"/>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  @case ('vertical') {\r\n    @for (step of steps; track step) {\r\n      <div class=\"step\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"stepTemplate\"\r\n          [ngTemplateOutletContext]=\"{step}\"/>\r\n        <div\r\n          #animatedContainer\r\n          class=\"vertical-content-container\"\r\n          [class.stepper-vertical-line]=\"!$last\"\r\n          [class.vertical-content-container-active]=\"selectedIndex === $index\"\r\n          [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n          <div class=\"vertical-stepper-content\"\r\n            role=\"tabpanel\"\r\n            [id]=\"_getStepContentId($index)\"\r\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\">\r\n            <div class=\"vertical-content\">\r\n              <ng-container [ngTemplateOutlet]=\"step.content\"/>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n}\r\n\r\n<ng-template let-step=\"step\" #stepTemplate>\r\n  <md-step-header\r\n    [class.horizontal-stepper-header]=\"orientation === 'horizontal'\"\r\n    [class.vertical-stepper-header]=\"orientation === 'vertical'\"\r\n    (click)=\"step.select()\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\r\n    [id]=\"_getStepLabelId(step.index())\"\r\n    [attr.aria-posinset]=\"step.index() + 1\"\r\n    [attr.aria-setsize]=\"steps.length\"\r\n    [attr.aria-controls]=\"_getStepContentId(step.index())\"\r\n    [attr.aria-selected]=\"step.isSelected()\"\r\n    [attr.aria-label]=\"step.ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\r\n    [attr.aria-disabled]=\"step.isNavigable() ? null : true\"\r\n    [index]=\"step.index()\"\r\n    [state]=\"step.indicatorType()\"\r\n    [label]=\"step.stepLabel || step.label\"\r\n    [selected]=\"step.isSelected()\"\r\n    [active]=\"step.isNavigable()\"\r\n    [optional]=\"step.optional\"\r\n    [errorMessage]=\"step.errorMessage\"\r\n    [iconOverrides]=\"_iconOverrides\"\r\n    [disableRipple]=\"disableRipple || !step.isNavigable()\"\r\n    [color]=\"step.color || color\"/>\r\n</ng-template>\r\n\r\n\r\n<ng-container [ngTemplateOutlet]=\"footer\"></ng-container>", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.stepper-vertical,.stepper-horizontal{display:block;font-family:Montserrat;font-size:14px;color:#000}.horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center;padding-bottom:40px}.stepper-label-position-bottom .horizontal-stepper-header-container{align-items:flex-start}.stepper-header-position-bottom .horizontal-stepper-header-container{order:1}.stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 2px;min-width:32px;border-top-color:#889392}.stepper-label-position-bottom .stepper-horizontal-line{margin:0;min-width:0;position:relative;top:36px}.stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):before,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):before,.stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):after,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 11px)}.horizontal-stepper-header{display:flex;overflow:hidden;align-items:center;padding:0 6px;height:48px}.horizontal-stepper-header .step-icon{position:relative;margin-right:8px;flex:none}[dir=rtl] .horizontal-stepper-header .step-icon{margin-right:0;margin-left:8px}.horizontal-stepper-header.step-header-empty-label .step-icon{margin:0}.stepper-label-position-bottom .horizontal-stepper-header{padding:24px 6px}.stepper-label-position-bottom .horizontal-stepper-header:before,.stepper-label-position-bottom .horizontal-stepper-header:after{top:36px}.stepper-label-position-bottom .horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):after,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):after{right:0}.stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):before,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):before{left:0}[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:last-child:before,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:first-child:after{display:none}.stepper-label-position-bottom .horizontal-stepper-header .step-icon{margin-right:0;margin-left:0}.stepper-label-position-bottom .horizontal-stepper-header .step-label{padding:16px 0 0;text-align:center;width:100%}.vertical-stepper-header{display:flex;align-items:center;height:24px;padding:24px 6px}.vertical-stepper-header .step-icon{margin-right:30px}[dir=rtl] .vertical-stepper-header .step-icon{margin-right:0;margin-left:30px}.horizontal-stepper-wrapper{display:flex;flex-direction:column}.horizontal-stepper-content{visibility:hidden;overflow:hidden;outline:0;height:0}.stepper-animations-enabled .horizontal-stepper-content{transition:transform .5s cubic-bezier(.35,0,.25,1)}.horizontal-stepper-content.horizontal-stepper-content-previous{transform:translate3d(-100%,0,0)}.horizontal-stepper-content.horizontal-stepper-content-next{transform:translate3d(100%,0,0)}.horizontal-stepper-content.horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.stepper-horizontal:not(.stepper-animating) .horizontal-stepper-content.horizontal-stepper-content-current{overflow:visible}.horizontal-content-container{overflow:hidden;background:#f3f3f3;padding:46px 6px 6px}@media (forced-colors: active){.horizontal-content-container{outline:solid 1px}}.stepper-header-position-bottom .horizontal-content-container{padding:6px 6px 0}.vertical-content-container{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:36px;border:0;position:relative}.stepper-animations-enabled .vertical-content-container{transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1)}.vertical-content-container.vertical-content-container-active{grid-template-rows:1fr}.step:last-child .vertical-content-container{border:none}@media (forced-colors: active){.vertical-content-container{outline:solid 1px}}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}@supports not (grid-template-rows: 0fr){.vertical-content-container{height:0}.vertical-content-container.vertical-content-container-active{height:auto}}.stepper-vertical-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:#889392;top:-16px;bottom:-16px}[dir=rtl] .stepper-vertical-line:before{left:auto;right:0}.vertical-stepper-content{overflow:hidden;outline:0;visibility:hidden}.stepper-animations-enabled .vertical-stepper-content{transition:visibility .5s linear}.vertical-content-container-active>.vertical-stepper-content{visibility:visible}.vertical-content{padding:0 6px 6px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MDStepHeader, selector: "md-step-header", inputs: ["state", "label", "errorMessage", "iconOverrides", "index", "selected", "active", "optional", "disableRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: MDStepper, isStandalone: true, selector: "md-stepper, md-vertical-stepper, md-horizontal-stepper, [mdStepper]", inputs: { labelPosition: "labelPosition", headerPosition: "headerPosition", animationDuration: "animationDuration", disablePagination: "disablePagination" }, outputs: { animationDone: "animationDone" }, host: { attributes: { "role": "tablist" }, properties: { "class.stepper-horizontal": "orientation === \"horizontal\"", "class.stepper-vertical": "orientation === \"vertical\"", "class.stepper-label-position-end": "orientation === \"horizontal\" && labelPosition == \"end\"", "class.stepper-label-position-bottom": "orientation === \"horizontal\" && labelPosition == \"bottom\"", "class.stepper-header-position-bottom": "headerPosition === \"bottom\"", "class.mdc-step-header-pagination-controls-enabled": "_showPaginationControls", "class.stepper-animating": "_isAnimating()", "style.stepper-animation-duration": "_getAnimationDuration()", "attr.aria-orientation": "orientation" } }, providers: [{ provide: CdkStepper, useExisting: MDStepper }], queries: [{ propertyName: "footer", first: true, predicate: MDStepFooter, descendants: true, read: TemplateRef }, { propertyName: "_steps", predicate: MDStep, descendants: true }, { propertyName: "_icons", predicate: MDStepperIcon, descendants: true }], viewQueries: [{ propertyName: "_stepHeaderElRef", first: true, predicate: ["stepHeader"], descendants: true }, { propertyName: "_stepListContainer", first: true, predicate: ["stepListContainer"], descendants: true }, { propertyName: "_stepList", first: true, predicate: ["stepList"], descendants: true }, { propertyName: "_stepListInner", first: true, predicate: ["stepListInner"], descendants: true }, { propertyName: "_nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "_previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }, { propertyName: "_stepHeader", predicate: MDStepHeader, descendants: true }, { propertyName: "_animatedContainers", predicate: ["animatedContainer"], descendants: true }], exportAs: ["mdStepper", "mdVerticalStepper", "mdHorizontalStepper"], usesInheritance: true, ngImport: i0, template: "@if (_isServer) {\r\n  <ng-content/>\r\n}\r\n\r\n@switch (orientation) {\r\n  @case ('horizontal') {\r\n    <div class=\"horizontal-stepper-wrapper\">\r\n      \r\n      <div class=\"mdc-step-header\" #stepHeader>\r\n        <div class=\"mdc-step-header-pagination mdc-step-header-pagination-before\"\r\n            #previousPaginator\r\n            [class.mdc-step-header-pagination-disabled]=\"_disableScrollBefore\"\r\n            (click)=\"_handlePaginatorClick('before')\"\r\n            (mousedown)=\"_handlePaginatorPress('before', $event)\"\r\n            (touchend)=\"_stopInterval()\">\r\n          <div class=\"mdc-step-header-pagination-chevron\"></div>\r\n        </div>\r\n\r\n        <div class=\"mdc-step-label-container\" #stepListContainer>\r\n          <div class=\"mdc-step-list\" #stepList>\r\n            <div class=\"horizontal-stepper-header-container\" #stepListInner>\r\n              @for (step of steps; track step) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"stepTemplate\"\r\n                  [ngTemplateOutletContext]=\"{step}\"/>\r\n                @if (!$last) {\r\n                  <div class=\"stepper-horizontal-line\"></div>\r\n                }\r\n              }\r\n            </div>          \r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mdc-step-header-pagination mdc-step-header-pagination-after\"\r\n            #nextPaginator\r\n            [class.mdc-step-header-pagination-disabled]=\"_disableScrollAfter\"\r\n            (mousedown)=\"_handlePaginatorPress('after', $event)\"\r\n            (click)=\"_handlePaginatorClick('after')\"\r\n            (touchend)=\"_stopInterval()\">\r\n          <div class=\"mdc-step-header-pagination-chevron\"></div>\r\n        </div>        \r\n      </div>\r\n      \r\n\r\n      <div class=\"horizontal-content-container\">\r\n        @for (step of steps; track step) {\r\n          <div\r\n            #animatedContainer\r\n            class=\"horizontal-stepper-content\"\r\n            role=\"tabpanel\"\r\n            [id]=\"_getStepContentId($index)\"\r\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\"\r\n            [class]=\"'horizontal-stepper-content-' + _getAnimationDirection($index)\"\r\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n            <ng-container [ngTemplateOutlet]=\"step.content\"/>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    \r\n  }\r\n\r\n  @case ('vertical') {\r\n    @for (step of steps; track step) {\r\n      <div class=\"step\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"stepTemplate\"\r\n          [ngTemplateOutletContext]=\"{step}\"/>\r\n        <div\r\n          #animatedContainer\r\n          class=\"vertical-content-container\"\r\n          [class.stepper-vertical-line]=\"!$last\"\r\n          [class.vertical-content-container-active]=\"selectedIndex === $index\"\r\n          [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n          <div class=\"vertical-stepper-content\"\r\n            role=\"tabpanel\"\r\n            [id]=\"_getStepContentId($index)\"\r\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\">\r\n            <div class=\"vertical-content\">\r\n              <ng-container [ngTemplateOutlet]=\"step.content\"/>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n}\r\n\r\n<ng-template let-step=\"step\" #stepTemplate>\r\n  <md-step-header\r\n    [class.horizontal-stepper-header]=\"orientation === 'horizontal'\"\r\n    [class.vertical-stepper-header]=\"orientation === 'vertical'\"\r\n    (click)=\"step.select()\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\r\n    [id]=\"_getStepLabelId(step.index())\"\r\n    [attr.aria-posinset]=\"step.index() + 1\"\r\n    [attr.aria-setsize]=\"steps.length\"\r\n    [attr.aria-controls]=\"_getStepContentId(step.index())\"\r\n    [attr.aria-selected]=\"step.isSelected()\"\r\n    [attr.aria-label]=\"step.ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\r\n    [attr.aria-disabled]=\"step.isNavigable() ? null : true\"\r\n    [index]=\"step.index()\"\r\n    [state]=\"step.indicatorType()\"\r\n    [label]=\"step.stepLabel || step.label\"\r\n    [selected]=\"step.isSelected()\"\r\n    [active]=\"step.isNavigable()\"\r\n    [optional]=\"step.optional\"\r\n    [errorMessage]=\"step.errorMessage\"\r\n    [iconOverrides]=\"_iconOverrides\"\r\n    [disableRipple]=\"disableRipple || !step.isNavigable()\"\r\n    [color]=\"step.color || color\"/>\r\n</ng-template>\r\n\r\n\r\n<ng-container [ngTemplateOutlet]=\"footer\"></ng-container>", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.stepper-vertical,.stepper-horizontal{display:block;font-family:Montserrat;font-size:14px;color:#000}.horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.stepper-label-position-bottom .horizontal-stepper-header-container{align-items:flex-start}.stepper-header-position-bottom .horizontal-stepper-header-container{order:1}.stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px;border-top-color:#889392}.stepper-label-position-bottom .stepper-horizontal-line{margin:0;min-width:0;position:relative;top:36px}.stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):before,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):before,.stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):after,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px)}.horizontal-stepper-header{display:flex;overflow:hidden;align-items:center;padding:0 24px;height:48px}.horizontal-stepper-header .step-icon{position:relative;margin-right:8px;flex:none}[dir=rtl] .horizontal-stepper-header .step-icon{margin-right:0;margin-left:8px}.horizontal-stepper-header.step-header-empty-label .step-icon{margin:0}.stepper-label-position-bottom .horizontal-stepper-header{padding:24px}.stepper-label-position-bottom .horizontal-stepper-header:before,.stepper-label-position-bottom .horizontal-stepper-header:after{top:36px}.stepper-label-position-bottom .horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):after,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):after{right:0}.stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):before,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):before{left:0}[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:last-child:before,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:first-child:after{display:none}.stepper-label-position-bottom .horizontal-stepper-header .step-icon{margin-right:0;margin-left:0}.stepper-label-position-bottom .horizontal-stepper-header .step-label{padding:16px 0 0;text-align:center;width:100%}.vertical-stepper-header{display:flex;align-items:center;height:24px;padding:24px}.vertical-stepper-header .step-icon{margin-right:12px}[dir=rtl] .vertical-stepper-header .step-icon{margin-right:0;margin-left:12px}.horizontal-stepper-wrapper{display:flex;flex-direction:column}.horizontal-stepper-content{visibility:hidden;overflow:hidden;outline:0;height:0}.stepper-animations-enabled .horizontal-stepper-content{transition:transform .5s cubic-bezier(.35,0,.25,1)}.horizontal-stepper-content.horizontal-stepper-content-previous{transform:translate3d(-100%,0,0)}.horizontal-stepper-content.horizontal-stepper-content-next{transform:translate3d(100%,0,0)}.horizontal-stepper-content.horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.stepper-horizontal:not(.stepper-animating) .horizontal-stepper-content.horizontal-stepper-content-current{overflow:visible}.horizontal-content-container{overflow:hidden;background:#f3f3f3;padding:24px}@media (forced-colors: active){.horizontal-content-container{outline:solid 1px}}.stepper-header-position-bottom .horizontal-content-container{padding:24px 24px 0}.vertical-content-container{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:36px;border:0;position:relative}.stepper-animations-enabled .vertical-content-container{transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1)}.vertical-content-container.vertical-content-container-active{grid-template-rows:1fr}.step:last-child .vertical-content-container{border:none}@media (forced-colors: active){.vertical-content-container{outline:solid 1px}}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}@supports not (grid-template-rows: 0fr){.vertical-content-container{height:0}.vertical-content-container.vertical-content-container-active{height:auto}}.stepper-vertical-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:#889392;top:-16px;bottom:-16px}[dir=rtl] .stepper-vertical-line:before{left:auto;right:0}.vertical-stepper-content{overflow:hidden;outline:0;visibility:hidden}.stepper-animations-enabled .vertical-stepper-content{transition:visibility .5s linear}.vertical-content-container-active>.vertical-stepper-content{visibility:visible}.vertical-content{padding:0 24px 24px}.mdc-step-header-pagination-before,.mdc-step-header-rtl .mdc-step-header-pagination-after{padding-left:4px}.mdc-step-header-pagination-before .mdc-step-header-pagination-chevron,.mdc-step-header-rtl .mdc-step-header-pagination-after .mdc-step-header-pagination-chevron{transform:rotate(-135deg)}.mdc-step-header-rtl .mdc-step-header-pagination-before,.mdc-step-header-pagination-after{padding-right:4px}.mdc-step-header-rtl .mdc-step-header-pagination-before .mdc-step-header-pagination-chevron,.mdc-step-header-pagination-after .mdc-step-header-pagination-chevron{transform:rotate(45deg)}.mdc-step-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:#201a1b}.mdc-step-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mdc-step-header-pagination-disabled .mdc-step-header-pagination-chevron{opacity:.4}.mdc-step-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1}.mdc-step-list{flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1)}.animation-noopable .mdc-step-list{transition:none}.mdc-step-header{display:flex;overflow:hidden;position:relative;flex-shrink:0;padding-bottom:24px}.mdc-step-header-pagination{position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;box-sizing:content-box;outline:0}.mdc-step-header-pagination::-moz-focus-inner{border:0}.mdc-step-header-pagination-controls-enabled .mdc-step-header-pagination{display:flex}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MDStepHeader, selector: "md-step-header", inputs: ["state", "label", "errorMessage", "iconOverrides", "index", "selected", "active", "optional", "disableRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDStepper, decorators: [{
             type: Component,
@@ -7844,13 +6327,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                         '[class.stepper-label-position-end]': 'orientation === "horizontal" && labelPosition == "end"',
                         '[class.stepper-label-position-bottom]': 'orientation === "horizontal" && labelPosition == "bottom"',
                         '[class.stepper-header-position-bottom]': 'headerPosition === "bottom"',
+                        '[class.mdc-step-header-pagination-controls-enabled]': '_showPaginationControls',
                         // Animation state + duration CSS variable.
                         '[class.stepper-animating]': '_isAnimating()',
                         '[style.stepper-animation-duration]': '_getAnimationDuration()',
                         // ARIA role for a list of tabs.
                         '[attr.aria-orientation]': 'orientation',
-                        'role': 'tablist',
-                    }, providers: [{ provide: CdkStepper, useExisting: MDStepper }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, MDStepHeader], template: "@if (_isServer) {\r\n  <ng-content/>\r\n}\r\n\r\n@switch (orientation) {\r\n  @case ('horizontal') {\r\n    <div class=\"horizontal-stepper-wrapper\">\r\n      <div class=\"horizontal-stepper-header-container\">\r\n        @for (step of steps; track step) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"stepTemplate\"\r\n            [ngTemplateOutletContext]=\"{step}\"/>\r\n          @if (!$last) {\r\n            <div class=\"stepper-horizontal-line\"></div>\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <div class=\"horizontal-content-container\">\r\n        @for (step of steps; track step) {\r\n          <div\r\n            #animatedContainer\r\n            class=\"horizontal-stepper-content\"\r\n            role=\"tabpanel\"\r\n            [id]=\"_getStepContentId($index)\"\r\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\"\r\n            [class]=\"'horizontal-stepper-content-' + _getAnimationDirection($index)\"\r\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n            <ng-container [ngTemplateOutlet]=\"step.content\"/>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  @case ('vertical') {\r\n    @for (step of steps; track step) {\r\n      <div class=\"step\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"stepTemplate\"\r\n          [ngTemplateOutletContext]=\"{step}\"/>\r\n        <div\r\n          #animatedContainer\r\n          class=\"vertical-content-container\"\r\n          [class.stepper-vertical-line]=\"!$last\"\r\n          [class.vertical-content-container-active]=\"selectedIndex === $index\"\r\n          [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n          <div class=\"vertical-stepper-content\"\r\n            role=\"tabpanel\"\r\n            [id]=\"_getStepContentId($index)\"\r\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\">\r\n            <div class=\"vertical-content\">\r\n              <ng-container [ngTemplateOutlet]=\"step.content\"/>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n}\r\n\r\n<ng-template let-step=\"step\" #stepTemplate>\r\n  <md-step-header\r\n    [class.horizontal-stepper-header]=\"orientation === 'horizontal'\"\r\n    [class.vertical-stepper-header]=\"orientation === 'vertical'\"\r\n    (click)=\"step.select()\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\r\n    [id]=\"_getStepLabelId(step.index())\"\r\n    [attr.aria-posinset]=\"step.index() + 1\"\r\n    [attr.aria-setsize]=\"steps.length\"\r\n    [attr.aria-controls]=\"_getStepContentId(step.index())\"\r\n    [attr.aria-selected]=\"step.isSelected()\"\r\n    [attr.aria-label]=\"step.ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\r\n    [attr.aria-disabled]=\"step.isNavigable() ? null : true\"\r\n    [index]=\"step.index()\"\r\n    [state]=\"step.indicatorType()\"\r\n    [label]=\"step.stepLabel || step.label\"\r\n    [selected]=\"step.isSelected()\"\r\n    [active]=\"step.isNavigable()\"\r\n    [optional]=\"step.optional\"\r\n    [errorMessage]=\"step.errorMessage\"\r\n    [iconOverrides]=\"_iconOverrides\"\r\n    [disableRipple]=\"disableRipple || !step.isNavigable()\"\r\n    [color]=\"step.color || color\"/>\r\n</ng-template>\r\n\r\n\r\n<ng-container [ngTemplateOutlet]=\"footer\"></ng-container>", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.stepper-vertical,.stepper-horizontal{display:block;font-family:Montserrat;font-size:14px;color:#000}.horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center;padding-bottom:40px}.stepper-label-position-bottom .horizontal-stepper-header-container{align-items:flex-start}.stepper-header-position-bottom .horizontal-stepper-header-container{order:1}.stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 2px;min-width:32px;border-top-color:#889392}.stepper-label-position-bottom .stepper-horizontal-line{margin:0;min-width:0;position:relative;top:36px}.stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):before,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):before,.stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):after,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 11px)}.horizontal-stepper-header{display:flex;overflow:hidden;align-items:center;padding:0 6px;height:48px}.horizontal-stepper-header .step-icon{position:relative;margin-right:8px;flex:none}[dir=rtl] .horizontal-stepper-header .step-icon{margin-right:0;margin-left:8px}.horizontal-stepper-header.step-header-empty-label .step-icon{margin:0}.stepper-label-position-bottom .horizontal-stepper-header{padding:24px 6px}.stepper-label-position-bottom .horizontal-stepper-header:before,.stepper-label-position-bottom .horizontal-stepper-header:after{top:36px}.stepper-label-position-bottom .horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):after,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):after{right:0}.stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):before,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):before{left:0}[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:last-child:before,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:first-child:after{display:none}.stepper-label-position-bottom .horizontal-stepper-header .step-icon{margin-right:0;margin-left:0}.stepper-label-position-bottom .horizontal-stepper-header .step-label{padding:16px 0 0;text-align:center;width:100%}.vertical-stepper-header{display:flex;align-items:center;height:24px;padding:24px 6px}.vertical-stepper-header .step-icon{margin-right:30px}[dir=rtl] .vertical-stepper-header .step-icon{margin-right:0;margin-left:30px}.horizontal-stepper-wrapper{display:flex;flex-direction:column}.horizontal-stepper-content{visibility:hidden;overflow:hidden;outline:0;height:0}.stepper-animations-enabled .horizontal-stepper-content{transition:transform .5s cubic-bezier(.35,0,.25,1)}.horizontal-stepper-content.horizontal-stepper-content-previous{transform:translate3d(-100%,0,0)}.horizontal-stepper-content.horizontal-stepper-content-next{transform:translate3d(100%,0,0)}.horizontal-stepper-content.horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.stepper-horizontal:not(.stepper-animating) .horizontal-stepper-content.horizontal-stepper-content-current{overflow:visible}.horizontal-content-container{overflow:hidden;background:#f3f3f3;padding:46px 6px 6px}@media (forced-colors: active){.horizontal-content-container{outline:solid 1px}}.stepper-header-position-bottom .horizontal-content-container{padding:6px 6px 0}.vertical-content-container{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:36px;border:0;position:relative}.stepper-animations-enabled .vertical-content-container{transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1)}.vertical-content-container.vertical-content-container-active{grid-template-rows:1fr}.step:last-child .vertical-content-container{border:none}@media (forced-colors: active){.vertical-content-container{outline:solid 1px}}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}@supports not (grid-template-rows: 0fr){.vertical-content-container{height:0}.vertical-content-container.vertical-content-container-active{height:auto}}.stepper-vertical-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:#889392;top:-16px;bottom:-16px}[dir=rtl] .stepper-vertical-line:before{left:auto;right:0}.vertical-stepper-content{overflow:hidden;outline:0;visibility:hidden}.stepper-animations-enabled .vertical-stepper-content{transition:visibility .5s linear}.vertical-content-container-active>.vertical-stepper-content{visibility:visible}.vertical-content{padding:0 6px 6px}\n"] }]
+                        role: 'tablist',
+                    }, providers: [{ provide: CdkStepper, useExisting: MDStepper }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, MDStepHeader], template: "@if (_isServer) {\r\n  <ng-content/>\r\n}\r\n\r\n@switch (orientation) {\r\n  @case ('horizontal') {\r\n    <div class=\"horizontal-stepper-wrapper\">\r\n      \r\n      <div class=\"mdc-step-header\" #stepHeader>\r\n        <div class=\"mdc-step-header-pagination mdc-step-header-pagination-before\"\r\n            #previousPaginator\r\n            [class.mdc-step-header-pagination-disabled]=\"_disableScrollBefore\"\r\n            (click)=\"_handlePaginatorClick('before')\"\r\n            (mousedown)=\"_handlePaginatorPress('before', $event)\"\r\n            (touchend)=\"_stopInterval()\">\r\n          <div class=\"mdc-step-header-pagination-chevron\"></div>\r\n        </div>\r\n\r\n        <div class=\"mdc-step-label-container\" #stepListContainer>\r\n          <div class=\"mdc-step-list\" #stepList>\r\n            <div class=\"horizontal-stepper-header-container\" #stepListInner>\r\n              @for (step of steps; track step) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"stepTemplate\"\r\n                  [ngTemplateOutletContext]=\"{step}\"/>\r\n                @if (!$last) {\r\n                  <div class=\"stepper-horizontal-line\"></div>\r\n                }\r\n              }\r\n            </div>          \r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mdc-step-header-pagination mdc-step-header-pagination-after\"\r\n            #nextPaginator\r\n            [class.mdc-step-header-pagination-disabled]=\"_disableScrollAfter\"\r\n            (mousedown)=\"_handlePaginatorPress('after', $event)\"\r\n            (click)=\"_handlePaginatorClick('after')\"\r\n            (touchend)=\"_stopInterval()\">\r\n          <div class=\"mdc-step-header-pagination-chevron\"></div>\r\n        </div>        \r\n      </div>\r\n      \r\n\r\n      <div class=\"horizontal-content-container\">\r\n        @for (step of steps; track step) {\r\n          <div\r\n            #animatedContainer\r\n            class=\"horizontal-stepper-content\"\r\n            role=\"tabpanel\"\r\n            [id]=\"_getStepContentId($index)\"\r\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\"\r\n            [class]=\"'horizontal-stepper-content-' + _getAnimationDirection($index)\"\r\n            [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n            <ng-container [ngTemplateOutlet]=\"step.content\"/>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    \r\n  }\r\n\r\n  @case ('vertical') {\r\n    @for (step of steps; track step) {\r\n      <div class=\"step\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"stepTemplate\"\r\n          [ngTemplateOutletContext]=\"{step}\"/>\r\n        <div\r\n          #animatedContainer\r\n          class=\"vertical-content-container\"\r\n          [class.stepper-vertical-line]=\"!$last\"\r\n          [class.vertical-content-container-active]=\"selectedIndex === $index\"\r\n          [attr.inert]=\"selectedIndex === $index ? null : ''\">\r\n          <div class=\"vertical-stepper-content\"\r\n            role=\"tabpanel\"\r\n            [id]=\"_getStepContentId($index)\"\r\n            [attr.aria-labelledby]=\"_getStepLabelId($index)\">\r\n            <div class=\"vertical-content\">\r\n              <ng-container [ngTemplateOutlet]=\"step.content\"/>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n}\r\n\r\n<ng-template let-step=\"step\" #stepTemplate>\r\n  <md-step-header\r\n    [class.horizontal-stepper-header]=\"orientation === 'horizontal'\"\r\n    [class.vertical-stepper-header]=\"orientation === 'vertical'\"\r\n    (click)=\"step.select()\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\r\n    [id]=\"_getStepLabelId(step.index())\"\r\n    [attr.aria-posinset]=\"step.index() + 1\"\r\n    [attr.aria-setsize]=\"steps.length\"\r\n    [attr.aria-controls]=\"_getStepContentId(step.index())\"\r\n    [attr.aria-selected]=\"step.isSelected()\"\r\n    [attr.aria-label]=\"step.ariaLabel || null\"\r\n    [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\r\n    [attr.aria-disabled]=\"step.isNavigable() ? null : true\"\r\n    [index]=\"step.index()\"\r\n    [state]=\"step.indicatorType()\"\r\n    [label]=\"step.stepLabel || step.label\"\r\n    [selected]=\"step.isSelected()\"\r\n    [active]=\"step.isNavigable()\"\r\n    [optional]=\"step.optional\"\r\n    [errorMessage]=\"step.errorMessage\"\r\n    [iconOverrides]=\"_iconOverrides\"\r\n    [disableRipple]=\"disableRipple || !step.isNavigable()\"\r\n    [color]=\"step.color || color\"/>\r\n</ng-template>\r\n\r\n\r\n<ng-container [ngTemplateOutlet]=\"footer\"></ng-container>", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.stepper-vertical,.stepper-horizontal{display:block;font-family:Montserrat;font-size:14px;color:#000}.horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.stepper-label-position-bottom .horizontal-stepper-header-container{align-items:flex-start}.stepper-header-position-bottom .horizontal-stepper-header-container{order:1}.stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px;border-top-color:#889392}.stepper-label-position-bottom .stepper-horizontal-line{margin:0;min-width:0;position:relative;top:36px}.stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):before,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):before,.stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):after,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px)}.horizontal-stepper-header{display:flex;overflow:hidden;align-items:center;padding:0 24px;height:48px}.horizontal-stepper-header .step-icon{position:relative;margin-right:8px;flex:none}[dir=rtl] .horizontal-stepper-header .step-icon{margin-right:0;margin-left:8px}.horizontal-stepper-header.step-header-empty-label .step-icon{margin:0}.stepper-label-position-bottom .horizontal-stepper-header{padding:24px}.stepper-label-position-bottom .horizontal-stepper-header:before,.stepper-label-position-bottom .horizontal-stepper-header:after{top:36px}.stepper-label-position-bottom .horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):after,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):after{right:0}.stepper-label-position-bottom .horizontal-stepper-header:not(:first-child):before,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:not(:last-child):before{left:0}[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:last-child:before,[dir=rtl] .stepper-label-position-bottom .horizontal-stepper-header:first-child:after{display:none}.stepper-label-position-bottom .horizontal-stepper-header .step-icon{margin-right:0;margin-left:0}.stepper-label-position-bottom .horizontal-stepper-header .step-label{padding:16px 0 0;text-align:center;width:100%}.vertical-stepper-header{display:flex;align-items:center;height:24px;padding:24px}.vertical-stepper-header .step-icon{margin-right:12px}[dir=rtl] .vertical-stepper-header .step-icon{margin-right:0;margin-left:12px}.horizontal-stepper-wrapper{display:flex;flex-direction:column}.horizontal-stepper-content{visibility:hidden;overflow:hidden;outline:0;height:0}.stepper-animations-enabled .horizontal-stepper-content{transition:transform .5s cubic-bezier(.35,0,.25,1)}.horizontal-stepper-content.horizontal-stepper-content-previous{transform:translate3d(-100%,0,0)}.horizontal-stepper-content.horizontal-stepper-content-next{transform:translate3d(100%,0,0)}.horizontal-stepper-content.horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.stepper-horizontal:not(.stepper-animating) .horizontal-stepper-content.horizontal-stepper-content-current{overflow:visible}.horizontal-content-container{overflow:hidden;background:#f3f3f3;padding:24px}@media (forced-colors: active){.horizontal-content-container{outline:solid 1px}}.stepper-header-position-bottom .horizontal-content-container{padding:24px 24px 0}.vertical-content-container{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:36px;border:0;position:relative}.stepper-animations-enabled .vertical-content-container{transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1)}.vertical-content-container.vertical-content-container-active{grid-template-rows:1fr}.step:last-child .vertical-content-container{border:none}@media (forced-colors: active){.vertical-content-container{outline:solid 1px}}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}@supports not (grid-template-rows: 0fr){.vertical-content-container{height:0}.vertical-content-container.vertical-content-container-active{height:auto}}.stepper-vertical-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:#889392;top:-16px;bottom:-16px}[dir=rtl] .stepper-vertical-line:before{left:auto;right:0}.vertical-stepper-content{overflow:hidden;outline:0;visibility:hidden}.stepper-animations-enabled .vertical-stepper-content{transition:visibility .5s linear}.vertical-content-container-active>.vertical-stepper-content{visibility:visible}.vertical-content{padding:0 24px 24px}.mdc-step-header-pagination-before,.mdc-step-header-rtl .mdc-step-header-pagination-after{padding-left:4px}.mdc-step-header-pagination-before .mdc-step-header-pagination-chevron,.mdc-step-header-rtl .mdc-step-header-pagination-after .mdc-step-header-pagination-chevron{transform:rotate(-135deg)}.mdc-step-header-rtl .mdc-step-header-pagination-before,.mdc-step-header-pagination-after{padding-right:4px}.mdc-step-header-rtl .mdc-step-header-pagination-before .mdc-step-header-pagination-chevron,.mdc-step-header-pagination-after .mdc-step-header-pagination-chevron{transform:rotate(45deg)}.mdc-step-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:#201a1b}.mdc-step-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mdc-step-header-pagination-disabled .mdc-step-header-pagination-chevron{opacity:.4}.mdc-step-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1}.mdc-step-list{flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1)}.animation-noopable .mdc-step-list{transition:none}.mdc-step-header{display:flex;overflow:hidden;position:relative;flex-shrink:0;padding-bottom:24px}.mdc-step-header-pagination{position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none;box-sizing:content-box;outline:0}.mdc-step-header-pagination::-moz-focus-inner{border:0}.mdc-step-header-pagination-controls-enabled .mdc-step-header-pagination{display:flex}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _stepHeader: [{
                 type: ViewChildren,
                 args: [MDStepHeader]
@@ -7874,6 +6358,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 type: Input
             }], animationDuration: [{
                 type: Input
+            }], disablePagination: [{
+                type: Input
+            }], _stepHeaderElRef: [{
+                type: ViewChild,
+                args: ['stepHeader']
+            }], _stepListContainer: [{
+                type: ViewChild,
+                args: ['stepListContainer']
+            }], _stepList: [{
+                type: ViewChild,
+                args: ['stepList']
+            }], _stepListInner: [{
+                type: ViewChild,
+                args: ['stepListInner']
+            }], _nextPaginator: [{
+                type: ViewChild,
+                args: ['nextPaginator']
+            }], _previousPaginator: [{
+                type: ViewChild,
+                args: ['previousPaginator']
             }] } });
 
 /**
@@ -9493,7 +7997,6 @@ class PaginatedTabHeader {
         const resize = this._sharedResizeObserver
             .observe(this._elementRef.nativeElement)
             .pipe(debounceTime(32), takeUntil(this._destroyed));
-        const viewportResize = this._viewportRuler.change(150).pipe(takeUntil(this._destroyed));
         const realign = () => {
             this.updatePagination();
             this._alignInkBarToSelectedTab();
@@ -9505,7 +8008,7 @@ class PaginatedTabHeader {
             .skipPredicate(() => false);
         this._keyManager.updateActiveItem(Math.max(this._selectedIndex, 0));
         afterNextRender(realign, { injector: this._injector });
-        merge(dirChange, viewportResize, resize, this._items.changes, this._itemsResized())
+        merge(dirChange, resize, this._items.changes, this._itemsResized())
             .pipe(takeUntil(this._destroyed))
             .subscribe(() => {
             this._ngZone.run(() => {
@@ -10929,7 +9432,7 @@ class MDTabGroup {
                 provide: TAB_GROUP,
                 useExisting: MDTabGroup,
             },
-        ], queries: [{ propertyName: "_allTabs", predicate: MDTab, descendants: true }], viewQueries: [{ propertyName: "_tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "_tabHeader", first: true, predicate: ["tabHeader"], descendants: true }, { propertyName: "_tabBodies", predicate: MDTabBody, descendants: true }], exportAs: ["mdTabGroup"], ngImport: i0, template: "<md-tab-header\r\n    #tabHeader\r\n    [ngClass]=\"{\r\n        'tabs-legacy': isLegacyMode\r\n    }\"\r\n    [hideInkBar]=\"hideInkBar\"\r\n    [selectedIndex]=\"selectedIndex || 0\"\r\n    [disablePagination]=\"disablePagination\"\r\n    [aria-label]=\"ariaLabel\"\r\n    [aria-labelledby]=\"ariaLabelledby\"\r\n    (indexFocused)=\"_focusChanged($event)\"\r\n    (selectFocusedIndex)=\"selectedIndex = $event\"\r\n>\r\n    @for (tab of _tabs; track tab) {\r\n    <div\r\n        class=\"focus-indicator\"\r\n        [ngClass]=\"{\r\n            'mdc-tab': !isLegacyMode,\r\n            'mdc-tab-legacy': isLegacyMode\r\n        }\"\r\n        #tabNode\r\n        role=\"tab\"\r\n        mdTabLabelWrapper\r\n        cdkMonitorElementFocus\r\n        [id]=\"_getTabLabelId(tab, $index)\"\r\n        [attr.tabIndex]=\"_getTabIndex($index)\"\r\n        [attr.aria-posinset]=\"$index + 1\"\r\n        [attr.aria-setsize]=\"_tabs.length\"\r\n        [attr.aria-controls]=\"_getTabContentId($index)\"\r\n        [attr.aria-selected]=\"selectedIndex === $index\"\r\n        [attr.aria-label]=\"tab.ariaLabel || null\"\r\n        [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\r\n        [class.mdc-tab--active]=\"selectedIndex === $index\"\r\n        [class]=\"tab.labelClass\"\r\n        [disabled]=\"tab.disabled\"\r\n        [fitInkBarToContent]=\"fitInkBarToContent\"\r\n        (click)=\"_handleClick(tab, tabHeader, $index)\"\r\n        (cdkFocusChange)=\"_tabFocusChanged($event, $index)\"\r\n    >\r\n        <span class=\"mdc-tab__ripple\"></span>\r\n        <span class=\"mdc-tab__content\">\r\n            <span class=\"mdc-tab__text-label\">\r\n                @if (tab.templateLabel) {\r\n                <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\r\n                } @else {{{tab.textLabel}}}\r\n            </span>\r\n        </span>\r\n    </div>\r\n    }\r\n</md-tab-header>\r\n\r\n@if (_isServer) {\r\n<ng-content />\r\n}\r\n\r\n<div class=\"mdc-tab-body-wrapper\" #tabBodyWrapper>\r\n    @for (tab of _tabs; track tab;) {\r\n    <md-tab-body\r\n        role=\"tabpanel\"\r\n        [id]=\"_getTabContentId($index)\"\r\n        [attr.tabindex]=\"(contentTabIndex != null && selectedIndex === $index) ? contentTabIndex : null\"\r\n        [attr.aria-labelledby]=\"_getTabLabelId(tab, $index)\"\r\n        [attr.aria-hidden]=\"selectedIndex !== $index\"\r\n        [class]=\"tab.bodyClass\"\r\n        [content]=\"tab.content!\"\r\n        [position]=\"tab.position!\"\r\n        [animationDuration]=\"animationDuration\"\r\n        [preserveContent]=\"preserveContent\"\r\n        (_onCentered)=\"_removeTabBodyWrapperHeight()\"\r\n        (_onCentering)=\"_setTabBodyWrapperHeight($event)\"\r\n        (_beforeCentering)=\"_bodyCentered($event)\"\r\n    />\r\n    }\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.mdc-tab{min-width:90px;padding:0 12px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1;touch-action:manipulation}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:.15s color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:.1s}._animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:.25s transform cubic-bezier(.4,0,.2,1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:40px;font-family:Montserrat;font-size:1rem;letter-spacing:.006rem;line-height:1.25rem;font-weight:500}.mdc-tab-group.mdc-tab-group-stretch-tabs>.mdc-tab-header .mdc-tab{flex-grow:1}.mdc-tab.mdc-tab{flex-grow:0}.mdc-tab .mdc-tab-indicator__content--underline{border-color:#6d5cae;border-top-width:2px;border-radius:0}.mdc-tab:hover .mdc-tab__text-label{color:#201a1b}.mdc-tab:focus .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active .mdc-tab__ripple:before{background-color:#201a1b}.mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:#6d5cae}.mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:#6d5cae}.mdc-tab.mdc-tab-disabled{opacity:.4;pointer-events:none}.mdc-tab.mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mdc-tab .mdc-tab__ripple:before{content:\"\";display:block;position:absolute;inset:0;opacity:0;pointer-events:none;background-color:#201a1b}.mdc-tab .mdc-tab__text-label{color:#201a1b;display:inline-flex;align-items:center}.mdc-tab .mdc-tab__content{position:relative;pointer-events:auto}.mdc-tab:hover .mdc-tab__ripple:before{opacity:.04}.mdc-tab.cdk-program-focused .mdc-tab__ripple:before,.mdc-tab.cdk-keyboard-focused .mdc-tab__ripple:before{opacity:.12}.mdc-tab-group{display:flex;flex-direction:column;max-width:100%}.mdc-tab-group.tabs-with-background>.mdc-tab-header .mdc-tab-header-pagination-chevron,.mdc-tab-group.tabs-with-background>.mdc-tab-header .focus-indicator:before,.mdc-tab-group.tabs-with-background>.mdc-tab-header-pagination .mdc-tab-header-pagination-chevron,.mdc-tab-group.tabs-with-background>.mdc-tab-header-pagination .focus-indicator:before{border-color:#201a1b}.mdc-tab-group.tabs-with-background>.mdc-tab-header .mdc-tab-header-pagination-chevron,.mdc-tab-group.tabs-with-background>.mdc-tab-header-pagination .mdc-tab-header-pagination-chevron{color:transparent}.mdc-tab-group.mdc-tab-group-inverted-header{flex-direction:column-reverse}.mdc-tab-group.mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline{align-self:flex-start}.mdc-tab-body-wrapper{position:relative;overflow:hidden;display:flex}.focus-indicator{position:relative}.tabs-legacy .mdc-tab-labels{gap:2px}.tabs-legacy .mdc-tab-label-container{border:0px}.mdc-tab-legacy{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;height:36px;padding:0 14px;font-family:Lato;font-size:14px;letter-spacing:0px;line-height:22px;font-weight:400;background-color:#4d4d4d;border-top-left-radius:5px;border-top-right-radius:5px;cursor:pointer;max-width:90px}.mdc-tab-group.mdc-tab-group-stretch-tabs>.mdc-tab-header .mdc-tab-legacy{flex-grow:1}.mdc-tab-legacy.mdc-tab{flex-grow:0}.mdc-tab-legacy .mdc-tab-indicator__content--underline{border-color:#6d5cae;border-top-width:2px;border-radius:0}.mdc-tab-legacy:hover:not(.mdc-tab--active){background-color:#373737}.mdc-tab-legacy:focus .mdc-tab__text-label{color:#fff}.mdc-tab-legacy.mdc-tab--active{background-color:#eaeaea}.mdc-tab-legacy.mdc-tab--active .mdc-tab__text-label{color:#000}.mdc-tab-legacy.mdc-tab--active .mdc-tab__ripple:before{background-color:#fff}.mdc-tab-legacy.mdc-tab-disabled{pointer-events:none}.mdc-tab-legacy.mdc-tab-disabled .mdc-tab__text-label{color:#b4b4b4}.mdc-tab-legacy.mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mdc-tab-legacy .mdc-tab__ripple:before{content:\"\";display:block;position:absolute;inset:0;opacity:0;pointer-events:none;background-color:#fff}.mdc-tab-legacy .mdc-tab__text-label{color:#fff;display:inline-flex;align-items:center;transition:none}.mdc-tab-legacy .mdc-tab__content{position:relative;pointer-events:auto}.mdc-tab-legacy:hover .mdc-tab__ripple:before{opacity:.04}.mdc-tab-legacy.cdk-program-focused .mdc-tab__ripple:before,.mdc-tab-legacy.cdk-keyboard-focused .mdc-tab__ripple:before{opacity:.12}\n"], dependencies: [{ kind: "component", type: MDTabHeader, selector: "md-tab-header", inputs: ["aria-label", "aria-labelledby"] }, { kind: "directive", type: MDTabLabelWrapper, selector: "[mdTabLabelWrapper]", inputs: ["disabled"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MDTabBody, selector: "md-tab-body", inputs: ["content", "animationDuration", "preserveContent", "position"], outputs: ["_onCentering", "_beforeCentering", "_onCentered"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "_allTabs", predicate: MDTab, descendants: true }], viewQueries: [{ propertyName: "_tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "_tabHeader", first: true, predicate: ["tabHeader"], descendants: true }, { propertyName: "_tabBodies", predicate: MDTabBody, descendants: true }], exportAs: ["mdTabGroup"], ngImport: i0, template: "<md-tab-header\r\n    #tabHeader\r\n    [ngClass]=\"{\r\n        'tabs-legacy': isLegacyMode\r\n    }\"\r\n    [hideInkBar]=\"hideInkBar\"\r\n    [selectedIndex]=\"selectedIndex || 0\"\r\n    [disablePagination]=\"disablePagination\"\r\n    [aria-label]=\"ariaLabel\"\r\n    [aria-labelledby]=\"ariaLabelledby\"\r\n    (indexFocused)=\"_focusChanged($event)\"\r\n    (selectFocusedIndex)=\"selectedIndex = $event\"\r\n>\r\n    @for (tab of _tabs; track tab) {\r\n    <div\r\n        class=\"focus-indicator\"\r\n        [ngClass]=\"{\r\n            'mdc-tab': !isLegacyMode,\r\n            'mdc-tab-legacy': isLegacyMode\r\n        }\"\r\n        #tabNode\r\n        role=\"tab\"\r\n        mdTabLabelWrapper\r\n        cdkMonitorElementFocus\r\n        [id]=\"_getTabLabelId(tab, $index)\"\r\n        [attr.tabIndex]=\"_getTabIndex($index)\"\r\n        [attr.aria-posinset]=\"$index + 1\"\r\n        [attr.aria-setsize]=\"_tabs.length\"\r\n        [attr.aria-controls]=\"_getTabContentId($index)\"\r\n        [attr.aria-selected]=\"selectedIndex === $index\"\r\n        [attr.aria-label]=\"tab.ariaLabel || null\"\r\n        [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\r\n        [class.mdc-tab--active]=\"selectedIndex === $index\"\r\n        [class]=\"tab.labelClass\"\r\n        [disabled]=\"tab.disabled\"\r\n        [fitInkBarToContent]=\"fitInkBarToContent\"\r\n        (click)=\"_handleClick(tab, tabHeader, $index)\"\r\n        (cdkFocusChange)=\"_tabFocusChanged($event, $index)\"\r\n    >\r\n        <span class=\"mdc-tab__ripple\"></span>\r\n        <span class=\"mdc-tab__content\">\r\n            <span class=\"mdc-tab__text-label\">\r\n                @if (tab.templateLabel) {\r\n                <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\r\n                } @else {{{tab.textLabel}}}\r\n            </span>\r\n        </span>\r\n    </div>\r\n    }\r\n</md-tab-header>\r\n\r\n@if (_isServer) {\r\n<ng-content />\r\n}\r\n\r\n<div class=\"mdc-tab-body-wrapper\" #tabBodyWrapper>\r\n    @for (tab of _tabs; track tab;) {\r\n    <md-tab-body\r\n        role=\"tabpanel\"\r\n        [id]=\"_getTabContentId($index)\"\r\n        [attr.tabindex]=\"(contentTabIndex != null && selectedIndex === $index) ? contentTabIndex : null\"\r\n        [attr.aria-labelledby]=\"_getTabLabelId(tab, $index)\"\r\n        [attr.aria-hidden]=\"selectedIndex !== $index\"\r\n        [class]=\"tab.bodyClass\"\r\n        [content]=\"tab.content!\"\r\n        [position]=\"tab.position!\"\r\n        [animationDuration]=\"animationDuration\"\r\n        [preserveContent]=\"preserveContent\"\r\n        (_onCentered)=\"_removeTabBodyWrapperHeight()\"\r\n        (_onCentering)=\"_setTabBodyWrapperHeight($event)\"\r\n        (_beforeCentering)=\"_bodyCentered($event)\"\r\n    />\r\n    }\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.mdc-tab{min-width:90px;padding:0 12px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1;touch-action:manipulation}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:.15s color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:.1s}._animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:.25s transform cubic-bezier(.4,0,.2,1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:40px;font-family:Montserrat;font-size:1rem;letter-spacing:.006rem;line-height:1.25rem;font-weight:500}.mdc-tab-group.mdc-tab-group-stretch-tabs>.mdc-tab-header .mdc-tab{flex-grow:1}.mdc-tab.mdc-tab{flex-grow:0}.mdc-tab .mdc-tab-indicator__content--underline{border-color:#6d5cae;border-top-width:2px;border-radius:0}.mdc-tab:hover .mdc-tab__text-label{color:#201a1b}.mdc-tab:focus .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active .mdc-tab__ripple:before{background-color:#201a1b}.mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:#6d5cae}.mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:#6d5cae}.mdc-tab.mdc-tab-disabled{opacity:.4;pointer-events:none}.mdc-tab.mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mdc-tab .mdc-tab__ripple:before{content:\"\";display:block;position:absolute;inset:0;opacity:0;pointer-events:none;background-color:#201a1b}.mdc-tab .mdc-tab__text-label{color:#201a1b;display:inline-flex;align-items:center}.mdc-tab .mdc-tab__content{position:relative;pointer-events:auto}.mdc-tab:hover .mdc-tab__ripple:before{opacity:.04}.mdc-tab.cdk-program-focused .mdc-tab__ripple:before,.mdc-tab.cdk-keyboard-focused .mdc-tab__ripple:before{opacity:.12}.mdc-tab-group{display:flex;flex-direction:column;max-width:100%}.mdc-tab-group.tabs-with-background>.mdc-tab-header .mdc-tab-header-pagination-chevron,.mdc-tab-group.tabs-with-background>.mdc-tab-header .focus-indicator:before,.mdc-tab-group.tabs-with-background>.mdc-tab-header-pagination .mdc-tab-header-pagination-chevron,.mdc-tab-group.tabs-with-background>.mdc-tab-header-pagination .focus-indicator:before{border-color:#201a1b}.mdc-tab-group.tabs-with-background>.mdc-tab-header .mdc-tab-header-pagination-chevron,.mdc-tab-group.tabs-with-background>.mdc-tab-header-pagination .mdc-tab-header-pagination-chevron{color:transparent}.mdc-tab-group.mdc-tab-group-inverted-header{flex-direction:column-reverse}.mdc-tab-group.mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline{align-self:flex-start}.mdc-tab-body-wrapper{position:relative;overflow:hidden;display:flex}.focus-indicator{position:relative}.tabs-legacy .mdc-tab-labels{gap:2px}.tabs-legacy .mdc-tab-label-container{border:0px}.mdc-tab-legacy{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;height:36px;padding:0 14px;font-family:Lato;font-size:14px;letter-spacing:0px;line-height:22px;font-weight:400;background-color:#4d4d4d;border-top-left-radius:5px;border-top-right-radius:5px;cursor:pointer;max-width:90px}.mdc-tab-group.mdc-tab-group-stretch-tabs>.mdc-tab-header .mdc-tab-legacy{flex-grow:1}.mdc-tab-legacy.mdc-tab{flex-grow:0}.mdc-tab-legacy .mdc-tab-indicator__content--underline{border-color:#6d5cae;border-top-width:2px;border-radius:0}.mdc-tab-legacy:hover:not(.mdc-tab--active){background-color:#373737}.mdc-tab-legacy:focus .mdc-tab__text-label{color:#fff}.mdc-tab-legacy.mdc-tab--active{background-color:#eaeaea}.mdc-tab-legacy.mdc-tab--active .mdc-tab__text-label{color:#000}.mdc-tab-legacy.mdc-tab--active .mdc-tab__ripple:before{background-color:#fff}.mdc-tab-legacy.mdc-tab-disabled{pointer-events:none}.mdc-tab-legacy.mdc-tab-disabled .mdc-tab__text-label{color:#bdbdbd}.mdc-tab-legacy.mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mdc-tab-legacy .mdc-tab__ripple:before{content:\"\";display:block;position:absolute;inset:0;opacity:0;pointer-events:none;background-color:#fff}.mdc-tab-legacy .mdc-tab__text-label{color:#fff;display:inline-flex;align-items:center;transition:none}.mdc-tab-legacy .mdc-tab__content{position:relative;pointer-events:auto}.mdc-tab-legacy:hover .mdc-tab__ripple:before{opacity:.04}.mdc-tab-legacy.cdk-program-focused .mdc-tab__ripple:before,.mdc-tab-legacy.cdk-keyboard-focused .mdc-tab__ripple:before{opacity:.12}\n"], dependencies: [{ kind: "component", type: MDTabHeader, selector: "md-tab-header", inputs: ["aria-label", "aria-labelledby"] }, { kind: "directive", type: MDTabLabelWrapper, selector: "[mdTabLabelWrapper]", inputs: ["disabled"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MDTabBody, selector: "md-tab-body", inputs: ["content", "animationDuration", "preserveContent", "position"], outputs: ["_onCentering", "_beforeCentering", "_onCentered"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MDTabGroup, decorators: [{
             type: Component,
@@ -10946,7 +9449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                         '[class.mdc-tab-group-stretch-tabs]': 'stretchTabs',
                         '[attr.align-tabs]': 'alignTabs',
                         '[style.--tab-animation-duration]': 'animationDuration',
-                    }, imports: [MDTabHeader, MDTabLabelWrapper, CdkMonitorFocus, CdkPortalOutlet, MDTabBody, CommonModule], template: "<md-tab-header\r\n    #tabHeader\r\n    [ngClass]=\"{\r\n        'tabs-legacy': isLegacyMode\r\n    }\"\r\n    [hideInkBar]=\"hideInkBar\"\r\n    [selectedIndex]=\"selectedIndex || 0\"\r\n    [disablePagination]=\"disablePagination\"\r\n    [aria-label]=\"ariaLabel\"\r\n    [aria-labelledby]=\"ariaLabelledby\"\r\n    (indexFocused)=\"_focusChanged($event)\"\r\n    (selectFocusedIndex)=\"selectedIndex = $event\"\r\n>\r\n    @for (tab of _tabs; track tab) {\r\n    <div\r\n        class=\"focus-indicator\"\r\n        [ngClass]=\"{\r\n            'mdc-tab': !isLegacyMode,\r\n            'mdc-tab-legacy': isLegacyMode\r\n        }\"\r\n        #tabNode\r\n        role=\"tab\"\r\n        mdTabLabelWrapper\r\n        cdkMonitorElementFocus\r\n        [id]=\"_getTabLabelId(tab, $index)\"\r\n        [attr.tabIndex]=\"_getTabIndex($index)\"\r\n        [attr.aria-posinset]=\"$index + 1\"\r\n        [attr.aria-setsize]=\"_tabs.length\"\r\n        [attr.aria-controls]=\"_getTabContentId($index)\"\r\n        [attr.aria-selected]=\"selectedIndex === $index\"\r\n        [attr.aria-label]=\"tab.ariaLabel || null\"\r\n        [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\r\n        [class.mdc-tab--active]=\"selectedIndex === $index\"\r\n        [class]=\"tab.labelClass\"\r\n        [disabled]=\"tab.disabled\"\r\n        [fitInkBarToContent]=\"fitInkBarToContent\"\r\n        (click)=\"_handleClick(tab, tabHeader, $index)\"\r\n        (cdkFocusChange)=\"_tabFocusChanged($event, $index)\"\r\n    >\r\n        <span class=\"mdc-tab__ripple\"></span>\r\n        <span class=\"mdc-tab__content\">\r\n            <span class=\"mdc-tab__text-label\">\r\n                @if (tab.templateLabel) {\r\n                <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\r\n                } @else {{{tab.textLabel}}}\r\n            </span>\r\n        </span>\r\n    </div>\r\n    }\r\n</md-tab-header>\r\n\r\n@if (_isServer) {\r\n<ng-content />\r\n}\r\n\r\n<div class=\"mdc-tab-body-wrapper\" #tabBodyWrapper>\r\n    @for (tab of _tabs; track tab;) {\r\n    <md-tab-body\r\n        role=\"tabpanel\"\r\n        [id]=\"_getTabContentId($index)\"\r\n        [attr.tabindex]=\"(contentTabIndex != null && selectedIndex === $index) ? contentTabIndex : null\"\r\n        [attr.aria-labelledby]=\"_getTabLabelId(tab, $index)\"\r\n        [attr.aria-hidden]=\"selectedIndex !== $index\"\r\n        [class]=\"tab.bodyClass\"\r\n        [content]=\"tab.content!\"\r\n        [position]=\"tab.position!\"\r\n        [animationDuration]=\"animationDuration\"\r\n        [preserveContent]=\"preserveContent\"\r\n        (_onCentered)=\"_removeTabBodyWrapperHeight()\"\r\n        (_onCentering)=\"_setTabBodyWrapperHeight($event)\"\r\n        (_beforeCentering)=\"_bodyCentered($event)\"\r\n    />\r\n    }\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.mdc-tab{min-width:90px;padding:0 12px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1;touch-action:manipulation}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:.15s color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:.1s}._animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:.25s transform cubic-bezier(.4,0,.2,1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:40px;font-family:Montserrat;font-size:1rem;letter-spacing:.006rem;line-height:1.25rem;font-weight:500}.mdc-tab-group.mdc-tab-group-stretch-tabs>.mdc-tab-header .mdc-tab{flex-grow:1}.mdc-tab.mdc-tab{flex-grow:0}.mdc-tab .mdc-tab-indicator__content--underline{border-color:#6d5cae;border-top-width:2px;border-radius:0}.mdc-tab:hover .mdc-tab__text-label{color:#201a1b}.mdc-tab:focus .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active .mdc-tab__ripple:before{background-color:#201a1b}.mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:#6d5cae}.mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:#6d5cae}.mdc-tab.mdc-tab-disabled{opacity:.4;pointer-events:none}.mdc-tab.mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mdc-tab .mdc-tab__ripple:before{content:\"\";display:block;position:absolute;inset:0;opacity:0;pointer-events:none;background-color:#201a1b}.mdc-tab .mdc-tab__text-label{color:#201a1b;display:inline-flex;align-items:center}.mdc-tab .mdc-tab__content{position:relative;pointer-events:auto}.mdc-tab:hover .mdc-tab__ripple:before{opacity:.04}.mdc-tab.cdk-program-focused .mdc-tab__ripple:before,.mdc-tab.cdk-keyboard-focused .mdc-tab__ripple:before{opacity:.12}.mdc-tab-group{display:flex;flex-direction:column;max-width:100%}.mdc-tab-group.tabs-with-background>.mdc-tab-header .mdc-tab-header-pagination-chevron,.mdc-tab-group.tabs-with-background>.mdc-tab-header .focus-indicator:before,.mdc-tab-group.tabs-with-background>.mdc-tab-header-pagination .mdc-tab-header-pagination-chevron,.mdc-tab-group.tabs-with-background>.mdc-tab-header-pagination .focus-indicator:before{border-color:#201a1b}.mdc-tab-group.tabs-with-background>.mdc-tab-header .mdc-tab-header-pagination-chevron,.mdc-tab-group.tabs-with-background>.mdc-tab-header-pagination .mdc-tab-header-pagination-chevron{color:transparent}.mdc-tab-group.mdc-tab-group-inverted-header{flex-direction:column-reverse}.mdc-tab-group.mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline{align-self:flex-start}.mdc-tab-body-wrapper{position:relative;overflow:hidden;display:flex}.focus-indicator{position:relative}.tabs-legacy .mdc-tab-labels{gap:2px}.tabs-legacy .mdc-tab-label-container{border:0px}.mdc-tab-legacy{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;height:36px;padding:0 14px;font-family:Lato;font-size:14px;letter-spacing:0px;line-height:22px;font-weight:400;background-color:#4d4d4d;border-top-left-radius:5px;border-top-right-radius:5px;cursor:pointer;max-width:90px}.mdc-tab-group.mdc-tab-group-stretch-tabs>.mdc-tab-header .mdc-tab-legacy{flex-grow:1}.mdc-tab-legacy.mdc-tab{flex-grow:0}.mdc-tab-legacy .mdc-tab-indicator__content--underline{border-color:#6d5cae;border-top-width:2px;border-radius:0}.mdc-tab-legacy:hover:not(.mdc-tab--active){background-color:#373737}.mdc-tab-legacy:focus .mdc-tab__text-label{color:#fff}.mdc-tab-legacy.mdc-tab--active{background-color:#eaeaea}.mdc-tab-legacy.mdc-tab--active .mdc-tab__text-label{color:#000}.mdc-tab-legacy.mdc-tab--active .mdc-tab__ripple:before{background-color:#fff}.mdc-tab-legacy.mdc-tab-disabled{pointer-events:none}.mdc-tab-legacy.mdc-tab-disabled .mdc-tab__text-label{color:#b4b4b4}.mdc-tab-legacy.mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mdc-tab-legacy .mdc-tab__ripple:before{content:\"\";display:block;position:absolute;inset:0;opacity:0;pointer-events:none;background-color:#fff}.mdc-tab-legacy .mdc-tab__text-label{color:#fff;display:inline-flex;align-items:center;transition:none}.mdc-tab-legacy .mdc-tab__content{position:relative;pointer-events:auto}.mdc-tab-legacy:hover .mdc-tab__ripple:before{opacity:.04}.mdc-tab-legacy.cdk-program-focused .mdc-tab__ripple:before,.mdc-tab-legacy.cdk-keyboard-focused .mdc-tab__ripple:before{opacity:.12}\n"] }]
+                    }, imports: [MDTabHeader, MDTabLabelWrapper, CdkMonitorFocus, CdkPortalOutlet, MDTabBody, CommonModule], template: "<md-tab-header\r\n    #tabHeader\r\n    [ngClass]=\"{\r\n        'tabs-legacy': isLegacyMode\r\n    }\"\r\n    [hideInkBar]=\"hideInkBar\"\r\n    [selectedIndex]=\"selectedIndex || 0\"\r\n    [disablePagination]=\"disablePagination\"\r\n    [aria-label]=\"ariaLabel\"\r\n    [aria-labelledby]=\"ariaLabelledby\"\r\n    (indexFocused)=\"_focusChanged($event)\"\r\n    (selectFocusedIndex)=\"selectedIndex = $event\"\r\n>\r\n    @for (tab of _tabs; track tab) {\r\n    <div\r\n        class=\"focus-indicator\"\r\n        [ngClass]=\"{\r\n            'mdc-tab': !isLegacyMode,\r\n            'mdc-tab-legacy': isLegacyMode\r\n        }\"\r\n        #tabNode\r\n        role=\"tab\"\r\n        mdTabLabelWrapper\r\n        cdkMonitorElementFocus\r\n        [id]=\"_getTabLabelId(tab, $index)\"\r\n        [attr.tabIndex]=\"_getTabIndex($index)\"\r\n        [attr.aria-posinset]=\"$index + 1\"\r\n        [attr.aria-setsize]=\"_tabs.length\"\r\n        [attr.aria-controls]=\"_getTabContentId($index)\"\r\n        [attr.aria-selected]=\"selectedIndex === $index\"\r\n        [attr.aria-label]=\"tab.ariaLabel || null\"\r\n        [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\r\n        [class.mdc-tab--active]=\"selectedIndex === $index\"\r\n        [class]=\"tab.labelClass\"\r\n        [disabled]=\"tab.disabled\"\r\n        [fitInkBarToContent]=\"fitInkBarToContent\"\r\n        (click)=\"_handleClick(tab, tabHeader, $index)\"\r\n        (cdkFocusChange)=\"_tabFocusChanged($event, $index)\"\r\n    >\r\n        <span class=\"mdc-tab__ripple\"></span>\r\n        <span class=\"mdc-tab__content\">\r\n            <span class=\"mdc-tab__text-label\">\r\n                @if (tab.templateLabel) {\r\n                <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\r\n                } @else {{{tab.textLabel}}}\r\n            </span>\r\n        </span>\r\n    </div>\r\n    }\r\n</md-tab-header>\r\n\r\n@if (_isServer) {\r\n<ng-content />\r\n}\r\n\r\n<div class=\"mdc-tab-body-wrapper\" #tabBodyWrapper>\r\n    @for (tab of _tabs; track tab;) {\r\n    <md-tab-body\r\n        role=\"tabpanel\"\r\n        [id]=\"_getTabContentId($index)\"\r\n        [attr.tabindex]=\"(contentTabIndex != null && selectedIndex === $index) ? contentTabIndex : null\"\r\n        [attr.aria-labelledby]=\"_getTabLabelId(tab, $index)\"\r\n        [attr.aria-hidden]=\"selectedIndex !== $index\"\r\n        [class]=\"tab.bodyClass\"\r\n        [content]=\"tab.content!\"\r\n        [position]=\"tab.position!\"\r\n        [animationDuration]=\"animationDuration\"\r\n        [preserveContent]=\"preserveContent\"\r\n        (_onCentered)=\"_removeTabBodyWrapperHeight()\"\r\n        (_onCentering)=\"_setTabBodyWrapperHeight($event)\"\r\n        (_beforeCentering)=\"_bodyCentered($event)\"\r\n    />\r\n    }\r\n</div>\r\n", styles: ["div.jqxInGridLink{cursor:pointer;color:#00f;margin:2px;text-decoration:underline}div.jqxInGridLink :hover{color:#8a2be2}.pink-text{color:pink!important}.red-text{color:red!important}.turquoise-text{color:#03a796!important}.blue-text{color:#00f!important}.mdc-tab{min-width:90px;padding:0 12px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1;touch-action:manipulation}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:.15s color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:.1s}._animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:.25s transform cubic-bezier(.4,0,.2,1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:40px;font-family:Montserrat;font-size:1rem;letter-spacing:.006rem;line-height:1.25rem;font-weight:500}.mdc-tab-group.mdc-tab-group-stretch-tabs>.mdc-tab-header .mdc-tab{flex-grow:1}.mdc-tab.mdc-tab{flex-grow:0}.mdc-tab .mdc-tab-indicator__content--underline{border-color:#6d5cae;border-top-width:2px;border-radius:0}.mdc-tab:hover .mdc-tab__text-label{color:#201a1b}.mdc-tab:focus .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active .mdc-tab__ripple:before{background-color:#201a1b}.mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:#6d5cae}.mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:#201a1b}.mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:#6d5cae}.mdc-tab.mdc-tab-disabled{opacity:.4;pointer-events:none}.mdc-tab.mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mdc-tab .mdc-tab__ripple:before{content:\"\";display:block;position:absolute;inset:0;opacity:0;pointer-events:none;background-color:#201a1b}.mdc-tab .mdc-tab__text-label{color:#201a1b;display:inline-flex;align-items:center}.mdc-tab .mdc-tab__content{position:relative;pointer-events:auto}.mdc-tab:hover .mdc-tab__ripple:before{opacity:.04}.mdc-tab.cdk-program-focused .mdc-tab__ripple:before,.mdc-tab.cdk-keyboard-focused .mdc-tab__ripple:before{opacity:.12}.mdc-tab-group{display:flex;flex-direction:column;max-width:100%}.mdc-tab-group.tabs-with-background>.mdc-tab-header .mdc-tab-header-pagination-chevron,.mdc-tab-group.tabs-with-background>.mdc-tab-header .focus-indicator:before,.mdc-tab-group.tabs-with-background>.mdc-tab-header-pagination .mdc-tab-header-pagination-chevron,.mdc-tab-group.tabs-with-background>.mdc-tab-header-pagination .focus-indicator:before{border-color:#201a1b}.mdc-tab-group.tabs-with-background>.mdc-tab-header .mdc-tab-header-pagination-chevron,.mdc-tab-group.tabs-with-background>.mdc-tab-header-pagination .mdc-tab-header-pagination-chevron{color:transparent}.mdc-tab-group.mdc-tab-group-inverted-header{flex-direction:column-reverse}.mdc-tab-group.mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline{align-self:flex-start}.mdc-tab-body-wrapper{position:relative;overflow:hidden;display:flex}.focus-indicator{position:relative}.tabs-legacy .mdc-tab-labels{gap:2px}.tabs-legacy .mdc-tab-label-container{border:0px}.mdc-tab-legacy{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;height:36px;padding:0 14px;font-family:Lato;font-size:14px;letter-spacing:0px;line-height:22px;font-weight:400;background-color:#4d4d4d;border-top-left-radius:5px;border-top-right-radius:5px;cursor:pointer;max-width:90px}.mdc-tab-group.mdc-tab-group-stretch-tabs>.mdc-tab-header .mdc-tab-legacy{flex-grow:1}.mdc-tab-legacy.mdc-tab{flex-grow:0}.mdc-tab-legacy .mdc-tab-indicator__content--underline{border-color:#6d5cae;border-top-width:2px;border-radius:0}.mdc-tab-legacy:hover:not(.mdc-tab--active){background-color:#373737}.mdc-tab-legacy:focus .mdc-tab__text-label{color:#fff}.mdc-tab-legacy.mdc-tab--active{background-color:#eaeaea}.mdc-tab-legacy.mdc-tab--active .mdc-tab__text-label{color:#000}.mdc-tab-legacy.mdc-tab--active .mdc-tab__ripple:before{background-color:#fff}.mdc-tab-legacy.mdc-tab-disabled{pointer-events:none}.mdc-tab-legacy.mdc-tab-disabled .mdc-tab__text-label{color:#bdbdbd}.mdc-tab-legacy.mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mdc-tab-legacy .mdc-tab__ripple:before{content:\"\";display:block;position:absolute;inset:0;opacity:0;pointer-events:none;background-color:#fff}.mdc-tab-legacy .mdc-tab__text-label{color:#fff;display:inline-flex;align-items:center;transition:none}.mdc-tab-legacy .mdc-tab__content{position:relative;pointer-events:auto}.mdc-tab-legacy:hover .mdc-tab__ripple:before{opacity:.04}.mdc-tab-legacy.cdk-program-focused .mdc-tab__ripple:before,.mdc-tab-legacy.cdk-keyboard-focused .mdc-tab__ripple:before{opacity:.12}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _allTabs: [{
                 type: ContentChildren,
                 args: [MDTab, { descendants: true }]
@@ -11034,5 +9537,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION, Accordion, CARD_CONFIG, CardComponent, CardLongComponent, CardSimpleComponent, CartTypeColors, CentralPageComponent, CentralPageRowComponent, CollapseComponent, CollapseSetComponent, DIALOG_DATA, DIALOG_DEFAULT_OPTIONS, DIALOG_SCROLL_STRATEGY, DatepickerComponent, DialogState, EXPANSION_PANEL_DEFAULT_OPTIONS, ErrorStateMatcher, ExpansionPanelActionRow, ExpansionPanelDescription, ExpansionPanelTitle, FillComponent, FilteredFieldContainerComponent, FilteredFieldItemComponent, FilteredFieldService, FiltredItemModel, HelpBlockComponent, INK_BAR_POSITIONER, INK_BAR_POSITIONER_FACTORY, InkBar, MDCard, MDCardActions, MDCardAvatar, MDCardContent, MDCardFooter, MDCardHeader, MDCardImage, MDCardLgImage, MDCardMdImage, MDCardModule, MDCardSmImage, MDCardSubtitle, MDCardTitle, MDCardTitleGroup, MDCardXlImage, MDCollapseModule, MDDialog, MDDialogActions, MDDialogClose, MDDialogContainer, MDDialogContent, MDDialogTitle, MDExpansionPanel, MDExpansionPanelContent, MDExpansionPanelHeader, MDModalModule, MDOption, MDOptionGroup, MDOptionSelectionChange, MDSelect, MDSelectModule, MDSelectTrigger, MDStep, MDStepContent, MDStepExecutorModule, MDStepFooter, MDStepHeader, MDStepLabel, MDStepper, MDStepperIcon, MDStepperNext, MDStepperPrevious, MDSwitch, MDSwitchModule, MDTab, MDTabBody, MDTabChangeEvent, MDTabContent, MDTabGroup, MDTabHeader, MDTabLabel, MDTabLabelWrapper, MDTabsModule, MD_EXPANSION_PANEL, MD_SELECT_TRIGGER, MD_TAB, MD_TAB_LABEL, ManagePageComponent, MefDevCardModule, MefDevCollapseModule, MefDevDatepickerModule, MefDevDialogConfig, MefDevDialogRef, MefDevFilteredFieldModule, MefDevHelpBlockModule, MefDevModalModule, MefDevOptionComponent, MefDevPageLayoutsModule, MefDevProgressComponent, MefDevProgressModule, MefDevSelectComponent, MefDevSelectModule, MefDevSliderComponent, MefDevSliderModule, MefDevSpecFlowTestComponent, MefDevSpecFlowTestModule, MefDevStepExecutorModule, MefDevSwitchComponent, MefDevSwitchModule, MefDevTabBodyComponent, MefDevTabComponent, MefDevTabLabelDirective, MefDevTabSetComponent, MefDevTabsInkBarDirective, MefDevTabsModule, MefDevTabsNavComponent, MefdevExecutorPageComponent, MefdevInnerCard, MefdevInnerCardModule, OptionPipe, PaginatedTabHeader, ProfileComponent, ProgressConfig, PseudoCheckbox, RightFilterComponent, STEPPER_INTL_PROVIDER, STEPPER_INTL_PROVIDER_FACTORY, SelectChange, ShowOnDirtyErrorStateMatcher, SlideRightComponent, SlideUpComponent, StageComponent, StepExecutorComponent, StepperIntl, TABS_CONFIG, TAB_CONTENT, TAB_GROUP, TabBodyPortal, TabChangeEvent, TablePageComponent, _closeDialogVia, _countGroupLabelsBeforeOption, _getOptionScrollPosition, components, mefDevCardComponents, mefDevCollapseModuleComponents };
+export { ACCORDION, Accordion, CARD_CONFIG, CardSimpleComponent, CentralPageComponent, CentralPageRowComponent, CollapseComponent, CollapseSetComponent, DIALOG_DATA, DIALOG_DEFAULT_OPTIONS, DIALOG_SCROLL_STRATEGY, DialogState, EXPANSION_PANEL_DEFAULT_OPTIONS, ErrorStateMatcher, ExpansionPanelActionRow, ExpansionPanelDescription, ExpansionPanelTitle, FillComponent, FilteredFieldContainerComponent, FilteredFieldItemComponent, FilteredFieldService, FiltredItemModel, INK_BAR_POSITIONER, INK_BAR_POSITIONER_FACTORY, InkBar, MDCard, MDCardActions, MDCardAvatar, MDCardContent, MDCardFooter, MDCardHeader, MDCardImage, MDCardLgImage, MDCardMdImage, MDCardModule, MDCardSmImage, MDCardSubtitle, MDCardTitle, MDCardTitleGroup, MDCardXlImage, MDCollapseModule, MDDialog, MDDialogActions, MDDialogClose, MDDialogContainer, MDDialogContent, MDDialogTitle, MDExpansionPanel, MDExpansionPanelContent, MDExpansionPanelHeader, MDModalModule, MDOption, MDOptionGroup, MDOptionSelectionChange, MDSelect, MDSelectModule, MDSelectTrigger, MDStep, MDStepContent, MDStepExecutorModule, MDStepFooter, MDStepHeader, MDStepLabel, MDStepper, MDStepperIcon, MDStepperNext, MDStepperPrevious, MDSwitch, MDSwitchModule, MDTab, MDTabBody, MDTabChangeEvent, MDTabContent, MDTabGroup, MDTabHeader, MDTabLabel, MDTabLabelWrapper, MDTabsModule, MD_EXPANSION_PANEL, MD_SELECT_TRIGGER, MD_TAB, MD_TAB_LABEL, ManagePageComponent, MefDevCardModule, MefDevCollapseModule, MefDevDialogConfig, MefDevDialogRef, MefDevDropDownMenuModule, MefDevFilteredFieldModule, MefDevModalModule, MefDevOptionComponent, MefDevPageLayoutsModule, MefDevProgressComponent, MefDevProgressModule, MefDevSelectComponent, MefDevSelectModule, MefDevStepExecutorModule, MefDevSwitchComponent, MefDevSwitchModule, MefDevTabBodyComponent, MefDevTabComponent, MefDevTabLabelDirective, MefDevTabSetComponent, MefDevTabsInkBarDirective, MefDevTabsModule, MefDevTabsNavComponent, MefdevDropdownMenuComponent, MefdevExecutorPageComponent, OptionPipe, PaginatedTabHeader, ProgressConfig, PseudoCheckbox, RightFilterComponent, STEPPER_INTL_PROVIDER, STEPPER_INTL_PROVIDER_FACTORY, SelectChange, ShowOnDirtyErrorStateMatcher, SlideRightComponent, SlideUpComponent, StageComponent, StepExecutorComponent, StepperIntl, TABS_CONFIG, TAB_CONTENT, TAB_GROUP, TabBodyPortal, TabChangeEvent, TablePageComponent, _closeDialogVia, _countGroupLabelsBeforeOption, _getOptionScrollPosition, components, mefDevCardComponents, mefDevCollapseModuleComponents };
 //# sourceMappingURL=natec-mef-dev-ui-kit.mjs.map