@progress-chef/platform-shared-components 0.0.1

package/fesm2022/progress-chef-platform-shared-components.mjs

@@ -0,0 +1,3970 @@
+import * as i0 from '@angular/core';
+import { Injectable, NgModule, Component, Input, HostBinding, ViewChild, EventEmitter, Output, ContentChild, ContentChildren, Pipe, HostListener, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i1 from '@progress/kendo-angular-notification';
+import { NotificationModule as NotificationModule$1, NotificationService } from '@progress/kendo-angular-notification';
+import * as i1$2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@progress-chef/platform-themes-service';
+import { ThemesModule } from '@progress-chef/platform-themes-service';
+import * as i4 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, FormsModule, FormGroup, Validators } from '@angular/forms';
+import * as i3 from '@progress/kendo-angular-popup';
+import { PopupModule } from '@progress/kendo-angular-popup';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as i2 from '@progress/kendo-angular-layout';
+import { LayoutModule } from '@progress/kendo-angular-layout';
+import { userIcon, homeIcon, moreVerticalIcon, chevronDownIcon, chevronUpIcon, trashIcon } from '@progress/kendo-svg-icons';
+import * as i2$1 from '@progress/kendo-angular-navigation';
+import { NavigationModule } from '@progress/kendo-angular-navigation';
+import * as i2$2 from '@progress/kendo-angular-buttons';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import * as i3$2 from '@progress/kendo-angular-dropdowns';
+import { DropDownsModule, AutoCompleteModule } from '@progress/kendo-angular-dropdowns';
+import * as i3$1 from '@progress/kendo-angular-inputs';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import * as i3$3 from '@progress/kendo-angular-icons';
+import { IconsModule, IconsService } from '@progress/kendo-angular-icons';
+import { LabelModule } from '@progress/kendo-angular-label';
+import { trigger, transition, style, animate } from '@angular/animations';
+import * as i2$3 from '@progress/kendo-angular-progressbar';
+import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
+import { Subject, Subscription, tap, map } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import * as i2$4 from '@progress/kendo-angular-dateinputs';
+import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
+import * as i2$5 from '@progress/kendo-angular-tooltip';
+import { TooltipsModule } from '@progress/kendo-angular-tooltip';
+import * as i2$6 from '@progress/kendo-angular-dialog';
+import { DialogsModule, DialogModule as DialogModule$1 } from '@progress/kendo-angular-dialog';
+import * as i4$1 from '@progress/kendo-angular-grid';
+import { GridComponent, GridModule } from '@progress/kendo-angular-grid';
+import { orderBy } from '@progress/kendo-data-query';
+
+class SharedService {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ToastNotificationService {
+    constructor(notificationService) {
+        this.notificationService = notificationService;
+    }
+    /**
+     * @param notification
+     * default notification config:
+     * - content: '',
+     * - animation: { type: 'slide', duration: 400 },
+     * - position: { horizontal: 'center', vertical: 'top' },
+     * - type: { style: 'success', icon: true },
+     * - hideAfter: 4000,
+     */
+    showToastNotification(notification) {
+        const defaultNotification = {
+            content: '',
+            animation: { type: 'slide', duration: 400 },
+            position: { horizontal: 'center', vertical: 'top' },
+            type: { style: 'success', icon: true },
+            hideAfter: 4000,
+        };
+        const mergedNotification = { ...defaultNotification, ...notification };
+        this.notificationService.show({
+            content: mergedNotification.content,
+            cssClass: mergedNotification.cssClass,
+            animation: mergedNotification.animation,
+            position: mergedNotification.position,
+            type: mergedNotification.type,
+            closable: mergedNotification.closable,
+            hideAfter: mergedNotification.hideAfter,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastNotificationService, deps: [{ token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastNotificationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastNotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.NotificationService }]; } });
+
+class StyleTokensModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StyleTokensModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: StyleTokensModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StyleTokensModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StyleTokensModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class SharedComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SharedComponent, selector: "lib-shared", ngImport: i0, template: ` <p>shared works!</p> `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-shared', template: ` <p>shared works!</p> ` }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; } });
+
+class AngularPopupComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.show = true;
+        this.anchorHorizontalAlign = "right";
+        this.anchorVerticalAlign = "bottom";
+        this.popupHorizontalAlign = "right";
+        this.popupVerticalAlign = "top";
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularPopupComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AngularPopupComponent, selector: "lib-angular-popup", inputs: { show: "show", anchor: "anchor", anchorHorizontalAlign: "anchorHorizontalAlign", anchorVerticalAlign: "anchorVerticalAlign", popupHorizontalAlign: "popupHorizontalAlign", popupVerticalAlign: "popupVerticalAlign" }, ngImport: i0, template: "<kendo-popup\n  *ngIf=\"show\"\n  [anchor]=\"anchor\"\n  [anchorAlign]=\"{ horizontal: anchorHorizontalAlign, vertical: anchorVerticalAlign }\"\n  [popupAlign]=\"{ horizontal: popupHorizontalAlign, vertical: popupVerticalAlign }\"\n>\n  <ng-content></ng-content>\n</kendo-popup>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-angular-popup', template: "<kendo-popup\n  *ngIf=\"show\"\n  [anchor]=\"anchor\"\n  [anchorAlign]=\"{ horizontal: anchorHorizontalAlign, vertical: anchorVerticalAlign }\"\n  [popupAlign]=\"{ horizontal: popupHorizontalAlign, vertical: popupVerticalAlign }\"\n>\n  <ng-content></ng-content>\n</kendo-popup>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { show: [{
+                type: Input
+            }], anchor: [{
+                type: Input
+            }], anchorHorizontalAlign: [{
+                type: Input
+            }], anchorVerticalAlign: [{
+                type: Input
+            }], popupHorizontalAlign: [{
+                type: Input
+            }], popupVerticalAlign: [{
+                type: Input
+            }] } });
+
+class ContainerComponent {
+    get class() {
+        return `${this.c_class} ${this.padding} ${this.margin}`;
+    }
+    constructor() {
+        this.c_class = "";
+        this.padding = "pd-small";
+        this.margin = "mr-small";
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContainerComponent, selector: "lib-container", inputs: { c_class: "c_class", padding: "padding", margin: "margin" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container [class]=\"class\">\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host(.pd-small){padding:8px}:host(.pd-medium){padding:16px}:host(.pd-large){padding:32px}:host(.mr-small){margin:8px}:host(.mr-medium){margin:16px}:host(.mr-large){margin:32px}:host(.cc-border){border:.5px solid gray}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-container', template: "<ng-container [class]=\"class\">\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host(.pd-small){padding:8px}:host(.pd-medium){padding:16px}:host(.pd-large){padding:32px}:host(.mr-small){margin:8px}:host(.mr-medium){margin:16px}:host(.mr-large){margin:32px}:host(.cc-border){border:.5px solid gray}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], c_class: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }] } });
+
+class ContainerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ContainerModule, declarations: [ContainerComponent], imports: [CommonModule], exports: [ContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContainerModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContainerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ContainerComponent
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        ContainerComponent
+                    ]
+                }]
+        }] });
+
+class AngularPopupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AngularPopupModule, declarations: [AngularPopupComponent], imports: [CommonModule,
+            PopupModule,
+            BrowserAnimationsModule,
+            ContainerModule], exports: [AngularPopupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularPopupModule, imports: [CommonModule,
+            PopupModule,
+            BrowserAnimationsModule,
+            ContainerModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularPopupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AngularPopupComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PopupModule,
+                        BrowserAnimationsModule,
+                        ContainerModule
+                    ],
+                    exports: [
+                        AngularPopupComponent
+                    ]
+                }]
+        }] });
+
+const Typography = {
+    // h1 styles
+    H1_MULISH_36_BOLD: 'h1-mulish-36-bold',
+    H1_MULISH_36_REGULAR: 'h1-mulish-36-regular',
+    H1_MULISH_36_LIGHT: 'h1-mulish-36-light',
+    // h2 styles
+    H2_MULISH_24_BOLD: 'h2-mulish-24-bold',
+    H2_MULISH_24_REGULAR: 'h2-mulish-24-regular',
+    H2_MULISH_24_LIGHT: 'h2-mulish-24-light',
+    // h3 styles
+    H3_MULISH_18_BOLD: 'h3-mulish-18-bold',
+    H3_MULISH_18_REGULAR: 'h3-mulish-18-regular',
+    H3_MULISH_18_LIGHT: 'h3-mulish-18-light',
+    // h4, h5 and h6 styles
+    H4_MULISH_14_BOLD: 'h4-mulish-14-bold',
+    H5_MULISH_14_REGULAR: 'h5-mulish-14-regular',
+    H6_MULISH_14_LIGHT: 'h6-mulish-14-light',
+    // p 16px styles
+    P_MULISH_16_BOLD: 'p-mulish-16-bold',
+    P_MULISH_16_REGULAR: 'p-mulish-16-regular',
+    P_MULISH_16_REGULAR_ITALIC: 'p-mulish-16-regular-italic',
+    P_MULISH_16_LIGHT: 'p-mulish-16-light',
+    P_MULISH_16_LIGHT_ITALIC: 'p-mulish-16-light-italic',
+    // p 14px styles
+    P_MULISH_14_BOLD: 'p-mulish-14-bold',
+    P_MULISH_14_REGULAR: 'p-mulish-14-regular',
+    P_MULISH_14_REGULAR_ITALIC: 'p-mulish-14-regular-italic',
+    P_MULISH_14_LIGHT: 'p-mulish-14-light',
+    P_MULISH_14_LIGHT_ITALIC: 'p-mulish-14-light-italic',
+    // small 12px styles
+    SMALL_MULISH_12_BOLD: 'small-mulish-12-bold',
+    SMALL_MULISH_12_REGULAR: 'small-mulish-12-regular',
+    SMALL_MULISH_12_REGULAR_ITALIC: 'small-mulish-12-regular-italic',
+    SMALL_MULISH_12_LIGHT: 'small-mulish-12-light',
+    SMALL_MULISH_12_LIGHT_ITALIC: 'small-mulish-12-light-italic',
+    // Custom
+    BASE_TEXT_MULISH: 'base-text-mulish'
+};
+class TypographyComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.type = 'P_MULISH_14_REGULAR';
+        this.defaultText = "defaultText";
+        this.isLabel = false;
+        this.hiddenLabel = "";
+        this.showDefaultText = true;
+        this.font = Typography[this.type];
+        this.input_id = null;
+    }
+    ngAfterViewChecked() {
+        // this.timeOutRef = setTimeout(this.checkForLabel, 15000);
+        if (!this.input_id) {
+            this.checkForLabel();
+        }
+    }
+    ngOnChanges() {
+        this.font = Typography[this.type];
+    }
+    ngAfterViewInit() {
+        this.checkShowDefaultText();
+    }
+    checkForLabel() {
+        let childrenCount = this.labelChild?.nativeElement.childElementCount;
+        if (childrenCount > 0) {
+            this.input_id = this.labelChild?.nativeElement.getElementsByTagName('input')[0]?.getAttribute('id');
+        }
+    }
+    checkShowDefaultText() {
+        let childrenCount = this.child?.nativeElement.childNodes.length;
+        this.showDefaultText = !this.isLabel && (!childrenCount || childrenCount == 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TypographyComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TypographyComponent, selector: "lib-typography", inputs: { type: "type", defaultText: "defaultText", isLabel: "isLabel", hiddenLabel: "hiddenLabel" }, viewQueries: [{ propertyName: "child", first: true, predicate: ["ref"], descendants: true }, { propertyName: "labelChild", first: true, predicate: ["ref_label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <span *ngIf=\"!isLabel\" #ref [class]=\"font\"><ng-content></ng-content></span>\n  <label *ngIf=\"isLabel\" #ref_label [class]=\"font\" attr.for=\"{{input_id}}\">\n    <span class=\"visually-hidden\">{{hiddenLabel}}</span>\n    {{defaultText}}\n    <ng-content></ng-content>\n  </label>\n  <span *ngIf=\"showDefaultText\" [class]=\"font\">\n    {{defaultText}}\n </span>\n</ng-container>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.h1-mulish-36-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:36px;line-height:54px;letter-spacing:.8px}.h1-mulish-36-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:36px;line-height:54px;letter-spacing:.8px}.h1-mulish-36-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:36px;line-height:54px;letter-spacing:.8px}.h2-mulish-24-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:24px;line-height:36px;letter-spacing:.8px}.h2-mulish-24-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:36px;letter-spacing:.8px}.h2-mulish-24-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:24px;line-height:36px;letter-spacing:.8px}.h3-mulish-18-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:18px;line-height:27px;letter-spacing:.8px}.h3-mulish-18-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:18px;line-height:27px;letter-spacing:.8px}.h3-mulish-18-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:18px;line-height:27px;letter-spacing:.8px}.h4-mulish-14-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}.h5-mulish-14-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}.h6-mulish-14-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}.p-mulish-16-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}.p-mulish-16-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}.p-mulish-16-regular-italic{font-family:Mulish,sans-serif;font-weight:400;font-style:italic;font-size:16px;line-height:24px;letter-spacing:.2px}.p-mulish-16-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}.p-mulish-16-light-italic{font-family:Mulish,sans-serif;font-weight:300;font-style:italic;font-size:16px;line-height:24px;letter-spacing:.2px}.p-mulish-14-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.2px}.p-mulish-14-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.2px}.p-mulish-14-regular-italic{font-family:Mulish,sans-serif;font-weight:400;font-style:italic;font-size:14px;line-height:21px;letter-spacing:.2px}.p-mulish-14-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.2px}.p-mulish-14-light-italic{font-family:Mulish,sans-serif;font-weight:300;font-style:italic;font-size:14px;line-height:21px;letter-spacing:.2px}.small-mulish-12-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:12px;line-height:18px;letter-spacing:.2px}.small-mulish-12-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:18px;letter-spacing:.2px}.small-mulish-12-regular-italic{font-family:Mulish,sans-serif;font-weight:400;font-style:italic;font-size:12px;line-height:18px;letter-spacing:.2px}.small-mulish-12-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:12px;line-height:18px;letter-spacing:.2px}.small-mulish-12-light-italic{font-family:Mulish,sans-serif;font-weight:300;font-style:italic;font-size:12px;line-height:18px;letter-spacing:.2px}.base-text-mulish{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:16px;line-height:24px;letter-spacing:0px;text-align:left}.visually-hidden{border:0;padding:0;margin:0;position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}label{display:inline}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TypographyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-typography', template: "<ng-container>\n  <span *ngIf=\"!isLabel\" #ref [class]=\"font\"><ng-content></ng-content></span>\n  <label *ngIf=\"isLabel\" #ref_label [class]=\"font\" attr.for=\"{{input_id}}\">\n    <span class=\"visually-hidden\">{{hiddenLabel}}</span>\n    {{defaultText}}\n    <ng-content></ng-content>\n  </label>\n  <span *ngIf=\"showDefaultText\" [class]=\"font\">\n    {{defaultText}}\n </span>\n</ng-container>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.h1-mulish-36-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:36px;line-height:54px;letter-spacing:.8px}.h1-mulish-36-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:36px;line-height:54px;letter-spacing:.8px}.h1-mulish-36-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:36px;line-height:54px;letter-spacing:.8px}.h2-mulish-24-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:24px;line-height:36px;letter-spacing:.8px}.h2-mulish-24-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:36px;letter-spacing:.8px}.h2-mulish-24-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:24px;line-height:36px;letter-spacing:.8px}.h3-mulish-18-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:18px;line-height:27px;letter-spacing:.8px}.h3-mulish-18-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:18px;line-height:27px;letter-spacing:.8px}.h3-mulish-18-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:18px;line-height:27px;letter-spacing:.8px}.h4-mulish-14-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}.h5-mulish-14-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}.h6-mulish-14-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}.p-mulish-16-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}.p-mulish-16-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}.p-mulish-16-regular-italic{font-family:Mulish,sans-serif;font-weight:400;font-style:italic;font-size:16px;line-height:24px;letter-spacing:.2px}.p-mulish-16-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}.p-mulish-16-light-italic{font-family:Mulish,sans-serif;font-weight:300;font-style:italic;font-size:16px;line-height:24px;letter-spacing:.2px}.p-mulish-14-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.2px}.p-mulish-14-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.2px}.p-mulish-14-regular-italic{font-family:Mulish,sans-serif;font-weight:400;font-style:italic;font-size:14px;line-height:21px;letter-spacing:.2px}.p-mulish-14-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.2px}.p-mulish-14-light-italic{font-family:Mulish,sans-serif;font-weight:300;font-style:italic;font-size:14px;line-height:21px;letter-spacing:.2px}.small-mulish-12-bold{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:12px;line-height:18px;letter-spacing:.2px}.small-mulish-12-regular{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:18px;letter-spacing:.2px}.small-mulish-12-regular-italic{font-family:Mulish,sans-serif;font-weight:400;font-style:italic;font-size:12px;line-height:18px;letter-spacing:.2px}.small-mulish-12-light{font-family:Mulish,sans-serif;font-weight:300;font-style:normal;font-size:12px;line-height:18px;letter-spacing:.2px}.small-mulish-12-light-italic{font-family:Mulish,sans-serif;font-weight:300;font-style:italic;font-size:12px;line-height:18px;letter-spacing:.2px}.base-text-mulish{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:16px;line-height:24px;letter-spacing:0px;text-align:left}.visually-hidden{border:0;padding:0;margin:0;position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}label{display:inline}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { type: [{
+                type: Input
+            }], defaultText: [{
+                type: Input
+            }], isLabel: [{
+                type: Input
+            }], hiddenLabel: [{
+                type: Input
+            }], child: [{
+                type: ViewChild,
+                args: ['ref', { static: false }]
+            }], labelChild: [{
+                type: ViewChild,
+                args: ['ref_label', { static: false }]
+            }] } });
+
+class TypographyModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TypographyModule, declarations: [TypographyComponent], imports: [CommonModule], exports: [TypographyComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TypographyModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TypographyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TypographyComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        TypographyComponent
+                    ]
+                }]
+        }] });
+
+class AvatarComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.letters = '';
+        this.showInitials = false;
+        this.imageURL = '';
+        this.size = 'medium';
+        this.rounded = 'full';
+        this.fillMode = 'solid';
+        this.themeColor = 'base';
+        this.name = '';
+        this.userSvg = userIcon;
+    }
+    ngOnInit() {
+        if (!this.imageURL && this.name.length > 0) {
+            this.getInitials();
+        }
+    }
+    getInitials() {
+        let letters = '';
+        for (let i = 0; i < this.name.length; i++) {
+            if (this.name.charAt(i) === ' ') {
+                continue;
+            }
+            if (this.name.charAt(i) === this.name.charAt(i).toUpperCase()) {
+                letters += this.name.charAt(i);
+                if (letters.length == 2) {
+                    break;
+                }
+            }
+        }
+        this.letters = letters;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarComponent, selector: "lib-avatar", inputs: { showInitials: "showInitials", imageURL: "imageURL", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", name: "name" }, ngImport: i0, template: "<div class=\"avatar\">\n  <kendo-avatar\n    *ngIf=\"!showInitials && imageURL\"\n    [imageSrc]=\"imageURL\"\n    [themeColor]=\"themeColor\"\n    [rounded]=\"rounded\"\n    [fillMode]=\"fillMode\"\n    [size]=\"size\"\n  ></kendo-avatar>\n  <kendo-avatar\n    *ngIf=\"showInitials && imageURL\"\n    [imageSrc]=\"imageURL\"\n    [themeColor]=\"themeColor\"\n    [rounded]=\"rounded\"\n    [fillMode]=\"fillMode\"\n    [size]=\"size\"\n  ></kendo-avatar>\n  <kendo-avatar\n    *ngIf=\"showInitials && !imageURL\"\n    [initials]=\"letters\"\n    [themeColor]=\"themeColor\"\n    [rounded]=\"rounded\"\n    [fillMode]=\"fillMode\"\n    [size]=\"size\"\n  >\n    <lib-typography [defaultText]=\"letters\" type=\"P_MULISH_14_REGULAR\">\n    </lib-typography>\n  </kendo-avatar>\n  <kendo-avatar\n    *ngIf=\"!imageURL && !showInitials\"\n    [svgIcon]=\"userSvg\"\n    [themeColor]=\"themeColor\"\n    [rounded]=\"rounded\"\n    [fillMode]=\"fillMode\"\n    [size]=\"size\"\n  ></kendo-avatar>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i2.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc", "svgIcon"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-avatar', template: "<div class=\"avatar\">\n  <kendo-avatar\n    *ngIf=\"!showInitials && imageURL\"\n    [imageSrc]=\"imageURL\"\n    [themeColor]=\"themeColor\"\n    [rounded]=\"rounded\"\n    [fillMode]=\"fillMode\"\n    [size]=\"size\"\n  ></kendo-avatar>\n  <kendo-avatar\n    *ngIf=\"showInitials && imageURL\"\n    [imageSrc]=\"imageURL\"\n    [themeColor]=\"themeColor\"\n    [rounded]=\"rounded\"\n    [fillMode]=\"fillMode\"\n    [size]=\"size\"\n  ></kendo-avatar>\n  <kendo-avatar\n    *ngIf=\"showInitials && !imageURL\"\n    [initials]=\"letters\"\n    [themeColor]=\"themeColor\"\n    [rounded]=\"rounded\"\n    [fillMode]=\"fillMode\"\n    [size]=\"size\"\n  >\n    <lib-typography [defaultText]=\"letters\" type=\"P_MULISH_14_REGULAR\">\n    </lib-typography>\n  </kendo-avatar>\n  <kendo-avatar\n    *ngIf=\"!imageURL && !showInitials\"\n    [svgIcon]=\"userSvg\"\n    [themeColor]=\"themeColor\"\n    [rounded]=\"rounded\"\n    [fillMode]=\"fillMode\"\n    [size]=\"size\"\n  ></kendo-avatar>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { showInitials: [{
+                type: Input
+            }], imageURL: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+class AvatarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent], imports: [LayoutModule, TypographyModule, CommonModule], exports: [AvatarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarModule, imports: [LayoutModule, TypographyModule, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AvatarComponent],
+                    imports: [LayoutModule, TypographyModule, CommonModule],
+                    exports: [AvatarComponent]
+                }]
+        }] });
+
+const defaultItems = [
+    {
+        text: 'Home',
+        title: 'Home',
+        svgIcon: homeIcon,
+    },
+    {
+        text: 'Products',
+        title: 'Products',
+    },
+    {
+        text: 'Computer peripherals',
+        title: 'Computer peripherals',
+    },
+    {
+        text: 'Keyboards',
+        title: 'Keyboards',
+    },
+    {
+        text: 'Gaming keyboards',
+        title: 'Gaming keyboards',
+    },
+];
+class BreadcrumbComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.items = [...defaultItems];
+        this.valueChange = new EventEmitter();
+        this.homeIcon = homeIcon;
+    }
+    ngOnInit() { }
+    onItemClick(item) {
+        const index = this.items.findIndex((e) => e.text === item.text);
+        this.items = this.items.slice(0, index + 1);
+        this.emitValueChange(this.items);
+    }
+    refreshBreadCrumb() {
+        this.items = [...defaultItems];
+    }
+    emitValueChange(itemsToBeEmit) {
+        this.valueChange.emit(itemsToBeEmit);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadcrumbComponent, selector: "lib-breadcrumb", inputs: { items: "items" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"item\">\n  <kendo-breadcrumb\n    [items]=\"items\"\n    (itemClick)=\"onItemClick($event)\"\n  ></kendo-breadcrumb>\n</div>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.item .k-breadcrumb{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:12px;line-height:18px;letter-spacing:.2px}\n"], dependencies: [{ kind: "component", type: i2$1.BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: ["items", "separatorIcon", "separatorSVGIcon", "collapseMode", "size"], outputs: ["itemClick"], exportAs: ["kendoBreadCrumb"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-breadcrumb', template: "<div class=\"item\">\n  <kendo-breadcrumb\n    [items]=\"items\"\n    (itemClick)=\"onItemClick($event)\"\n  ></kendo-breadcrumb>\n</div>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.item .k-breadcrumb{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:12px;line-height:18px;letter-spacing:.2px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { items: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class BreadcrumbModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbComponent], imports: [CommonModule,
+            NavigationModule,
+            ButtonsModule,
+            DropDownsModule,
+            InputsModule], exports: [BreadcrumbComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbModule, imports: [CommonModule,
+            NavigationModule,
+            ButtonsModule,
+            DropDownsModule,
+            InputsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BreadcrumbComponent],
+                    imports: [
+                        CommonModule,
+                        NavigationModule,
+                        ButtonsModule,
+                        DropDownsModule,
+                        InputsModule
+                    ],
+                    exports: [BreadcrumbComponent]
+                }]
+        }] });
+
+class IconComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.name = '';
+        this.fontSize = 16;
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IconComponent, selector: "lib-icon", inputs: { name: "name", fontSize: "fontSize", type: "type" }, ngImport: i0, template: "<i\n  class=\"iconfont icon-{{ name }} {{type}}\"\n  attr.aria-label=\"{{ name }}\"\n  role=\"img\"\n  [style.fontSize.px]=\"fontSize\"\n></i>\n", styles: [".error{color:#dc267f}.success{color:#0075db}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-icon', template: "<i\n  class=\"iconfont icon-{{ name }} {{type}}\"\n  attr.aria-label=\"{{ name }}\"\n  role=\"img\"\n  [style.fontSize.px]=\"fontSize\"\n></i>\n", styles: [".error{color:#dc267f}.success{color:#0075db}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { name: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+class IconModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IconModule, declarations: [IconComponent], exports: [IconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [IconComponent],
+                    exports: [IconComponent],
+                }]
+        }] });
+
+class ButtonComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.size = 'medium';
+        this.rounded = 'medium';
+        this.fillMode = 'solid';
+        this.themeColor = 'base';
+        this.label = '';
+        this.iconName = '';
+        this.disabled = false;
+        this.toggleable = false;
+        this.iconPosition = '';
+        this.fontType = 'P_MULISH_16_REGULAR';
+        this.width = '300';
+        this.buttonClick = new EventEmitter();
+        this.iconButton = false;
+    }
+    ngOnInit() { }
+    onButtonClick(e) {
+        this.buttonClick.emit(e);
+    }
+    button_size() {
+        switch (this.size) {
+            case 'small':
+                return 'small-btn';
+            case 'medium':
+                return 'medium-btn';
+            case 'large':
+                return 'large-btn';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "lib-button", inputs: { size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", label: "label", iconName: "iconName", disabled: "disabled", toggleable: "toggleable", iconPosition: "iconPosition", fontType: "fontType", width: "width", iconButton: "iconButton" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button kendoButton [size]=\"size\" [style.width]=\"width\" [fillMode]=\"fillMode\" [rounded]=\"rounded\" [themeColor]=\"themeColor\"\n  (click)=\"onButtonClick($event)\" [disabled]=\"disabled\" [toggleable]=\"toggleable\" [ngClass]=\"button_size()\">\n  <lib-icon *ngIf=\"iconName.length > 0 && iconPosition === 'before'\" [name]=\"iconName\" class=\"btn-icon before\"></lib-icon>\n  <lib-icon *ngIf=\"iconName.length > 0 && iconButton\" [name]=\"iconName\" class=\"btn-icon\"></lib-icon>\n  <lib-typography [defaultText]=\"label\" [type]=\"fontType\" class=\"text\">\n  </lib-typography>\n  <lib-icon *ngIf=\"iconName.length > 0 && iconPosition === 'after'\" [name]=\"iconName\" class=\"btn-icon after\"></lib-icon>\n</button>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.btn-icon{top:1px;position:relative}.before{padding-right:6px}.after{padding-left:6px}button:disabled{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}.small-btn{padding:5px 13px}.medium-btn{padding:7px 13px}.large-btn{padding:9px 13px}.text{bottom:.5px;position:relative}button{border-radius:4px}\n"], dependencies: [{ kind: "component", type: i2$2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-button', template: "<button kendoButton [size]=\"size\" [style.width]=\"width\" [fillMode]=\"fillMode\" [rounded]=\"rounded\" [themeColor]=\"themeColor\"\n  (click)=\"onButtonClick($event)\" [disabled]=\"disabled\" [toggleable]=\"toggleable\" [ngClass]=\"button_size()\">\n  <lib-icon *ngIf=\"iconName.length > 0 && iconPosition === 'before'\" [name]=\"iconName\" class=\"btn-icon before\"></lib-icon>\n  <lib-icon *ngIf=\"iconName.length > 0 && iconButton\" [name]=\"iconName\" class=\"btn-icon\"></lib-icon>\n  <lib-typography [defaultText]=\"label\" [type]=\"fontType\" class=\"text\">\n  </lib-typography>\n  <lib-icon *ngIf=\"iconName.length > 0 && iconPosition === 'after'\" [name]=\"iconName\" class=\"btn-icon after\"></lib-icon>\n</button>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.btn-icon{top:1px;position:relative}.before{padding-right:6px}.after{padding-left:6px}button:disabled{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}.small-btn{padding:5px 13px}.medium-btn{padding:7px 13px}.large-btn{padding:9px 13px}.text{bottom:.5px;position:relative}button{border-radius:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], toggleable: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], fontType: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }], iconButton: [{
+                type: Input
+            }] } });
+
+class ButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [ButtonsModule, TypographyModule, IconModule, CommonModule], exports: [ButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, imports: [ButtonsModule, TypographyModule, IconModule, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [ButtonsModule, TypographyModule, IconModule, CommonModule],
+                    declarations: [ButtonComponent],
+                    exports: [ButtonComponent],
+                }]
+        }] });
+
+class ButtonGroupComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.buttons = [];
+        this.selection = 'single';
+        this.size = 'medium';
+        this.rounded = 'medium';
+        this.fillMode = 'solid';
+        this.themeColor = 'base';
+        this.label = 'button';
+        this.disabled = false;
+        this.toggleable = true;
+        this.buttonClick = new EventEmitter();
+    }
+    onButtonClick(label) {
+        this.buttonClick.emit(label);
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonGroupComponent, selector: "lib-button-group", inputs: { buttons: "buttons", selection: "selection", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", label: "label", disabled: "disabled", toggleable: "toggleable" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<kendo-buttongroup [selection]=\"selection\">\n  <button *ngFor=\"let btn of buttons\"\n    kendoButton\n    [size]=\"size\"\n    [fillMode]=\"fillMode\"\n    [rounded]=\"rounded\"\n    [themeColor]=\"themeColor\"\n    [disabled]=\"disabled\"\n    [toggleable]=\"toggleable\"\n    (click)=\"onButtonClick(btn.label)\"\n    [selected]=\"btn.selected\"\n  >\n    <lib-typography defaultText={{btn.label}} type=\"P_MULISH_16_REGULAR\"></lib-typography>\n    <ng-content></ng-content>\n  </button>\n</kendo-buttongroup>\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: i2$2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-button-group', template: "<kendo-buttongroup [selection]=\"selection\">\n  <button *ngFor=\"let btn of buttons\"\n    kendoButton\n    [size]=\"size\"\n    [fillMode]=\"fillMode\"\n    [rounded]=\"rounded\"\n    [themeColor]=\"themeColor\"\n    [disabled]=\"disabled\"\n    [toggleable]=\"toggleable\"\n    (click)=\"onButtonClick(btn.label)\"\n    [selected]=\"btn.selected\"\n  >\n    <lib-typography defaultText={{btn.label}} type=\"P_MULISH_16_REGULAR\"></lib-typography>\n    <ng-content></ng-content>\n  </button>\n</kendo-buttongroup>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { buttons: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], toggleable: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class ButtonGroupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, declarations: [ButtonGroupComponent], imports: [ButtonsModule, TypographyModule, IconModule, CommonModule], exports: [ButtonGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, imports: [ButtonsModule, TypographyModule, IconModule, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [ButtonsModule, TypographyModule, IconModule, CommonModule],
+                    declarations: [ButtonGroupComponent],
+                    exports: [ButtonGroupComponent],
+                }]
+        }] });
+
+class CheckboxComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.control = new FormControl();
+        this.id = '';
+        this.size = 'medium';
+        this.rounded = 'none';
+        this.label = '';
+        this.labelPosition = 'before';
+        this.modelChange = new EventEmitter();
+    }
+    ngOnInit() { }
+    emitValueChange(ev) {
+        this.modelChange.emit(ev);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxComponent, selector: "lib-checkbox", inputs: { control: "control", id: "id", size: "size", rounded: "rounded", label: "label", labelPosition: "labelPosition" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<span *ngIf=\"label.length > 0 && labelPosition === 'before'\">\n  <label class=\"k-checkbox-label\" for=\"{{ id }}\">\n    <lib-typography [defaultText]=\"label\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </label>\n  &nbsp;\n</span>\n<input type=\"checkbox\" [size]=\"size\" [rounded]=\"rounded\" [id]=\"id\" (ngModelChange)=\"emitValueChange($event)\"\n  [formControl]=\"control\" kendoCheckBox />\n<span *ngIf=\"label.length > 0 && labelPosition === 'after'\">\n  &nbsp;\n  <label class=\"k-checkbox-label\" for=\"{{ id }}\">\n    <lib-typography [defaultText]=\"label\" type=\"P_MULISH_16_REGULAR\">\n    </lib-typography>\n  </label>\n</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-checkbox', template: "<span *ngIf=\"label.length > 0 && labelPosition === 'before'\">\n  <label class=\"k-checkbox-label\" for=\"{{ id }}\">\n    <lib-typography [defaultText]=\"label\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </label>\n  &nbsp;\n</span>\n<input type=\"checkbox\" [size]=\"size\" [rounded]=\"rounded\" [id]=\"id\" (ngModelChange)=\"emitValueChange($event)\"\n  [formControl]=\"control\" kendoCheckBox />\n<span *ngIf=\"label.length > 0 && labelPosition === 'after'\">\n  &nbsp;\n  <label class=\"k-checkbox-label\" for=\"{{ id }}\">\n    <lib-typography [defaultText]=\"label\" type=\"P_MULISH_16_REGULAR\">\n    </lib-typography>\n  </label>\n</span>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { control: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], modelChange: [{
+                type: Output
+            }] } });
+
+class CheckboxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CheckboxModule, declarations: [CheckboxComponent], imports: [CommonModule,
+            InputsModule,
+            ReactiveFormsModule,
+            TypographyModule], exports: [CheckboxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxModule, imports: [CommonModule,
+            InputsModule,
+            ReactiveFormsModule,
+            TypographyModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CheckboxComponent],
+                    imports: [
+                        CommonModule,
+                        InputsModule,
+                        ReactiveFormsModule,
+                        TypographyModule
+                    ],
+                    exports: [CheckboxComponent]
+                }]
+        }] });
+
+class ExpansionPanelComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.title = "Title";
+        this.subtitle = "Subtitle2";
+        this.data = "some data";
+        this.expanded = true;
+        this.customHeader = false;
+        this.disabled = false;
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ExpansionPanelComponent, selector: "lib-expansion-panel", inputs: { title: "title", subtitle: "subtitle", data: "data", expanded: "expanded", customHeader: "customHeader", disabled: "disabled" }, ngImport: i0, template: "<kendo-expansionpanel [expanded]=\"expanded\" [disabled]=\"disabled\">\n  <ng-template kendoExpansionPanelTitleDirective>\n    <div class=\"expansion-header-content\" *ngIf=\"!customHeader\">\n      <lib-typography\n        [defaultText]=\"title\"\n        type=\"H3_MULISH_18_REGULAR\">\n      </lib-typography>\n      <lib-typography\n        [defaultText]=\"subtitle\"\n        type=\"H5_MULISH_14_REGULAR\">\n      </lib-typography>\n    </div>\n    <div class=\"expansion-header-content\" *ngIf=\"customHeader\">\n      <ng-content select=\"header\"></ng-content>\n    </div>\n  </ng-template>\n  <lib-container\n    c_class=\"container\"\n    padding=\"pd-small\"\n    margin=\"mr-small\">\n    <ng-content></ng-content>\n  </lib-container>\n</kendo-expansionpanel>\n", styles: [".expansion-header-content{width:100%;display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "directive", type: i2.ExpansionPanelTitleDirective, selector: "[kendoExpansionPanelTitleDirective]" }, { kind: "component", type: ContainerComponent, selector: "lib-container", inputs: ["c_class", "padding", "margin"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-expansion-panel', template: "<kendo-expansionpanel [expanded]=\"expanded\" [disabled]=\"disabled\">\n  <ng-template kendoExpansionPanelTitleDirective>\n    <div class=\"expansion-header-content\" *ngIf=\"!customHeader\">\n      <lib-typography\n        [defaultText]=\"title\"\n        type=\"H3_MULISH_18_REGULAR\">\n      </lib-typography>\n      <lib-typography\n        [defaultText]=\"subtitle\"\n        type=\"H5_MULISH_14_REGULAR\">\n      </lib-typography>\n    </div>\n    <div class=\"expansion-header-content\" *ngIf=\"customHeader\">\n      <ng-content select=\"header\"></ng-content>\n    </div>\n  </ng-template>\n  <lib-container\n    c_class=\"container\"\n    padding=\"pd-small\"\n    margin=\"mr-small\">\n    <ng-content></ng-content>\n  </lib-container>\n</kendo-expansionpanel>\n", styles: [".expansion-header-content{width:100%;display:flex;justify-content:space-between}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], customHeader: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class ExpansionPanelModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelModule, declarations: [ExpansionPanelComponent], imports: [CommonModule,
+            LayoutModule,
+            IconsModule,
+            ButtonsModule,
+            InputsModule,
+            LabelModule,
+            DropDownsModule,
+            BrowserAnimationsModule,
+            ContainerModule,
+            TypographyModule], exports: [ExpansionPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelModule, imports: [CommonModule,
+            LayoutModule,
+            IconsModule,
+            ButtonsModule,
+            InputsModule,
+            LabelModule,
+            DropDownsModule,
+            BrowserAnimationsModule,
+            ContainerModule,
+            TypographyModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ExpansionPanelComponent],
+                    imports: [
+                        CommonModule,
+                        LayoutModule,
+                        IconsModule,
+                        ButtonsModule,
+                        InputsModule,
+                        LabelModule,
+                        DropDownsModule,
+                        BrowserAnimationsModule,
+                        ContainerModule,
+                        TypographyModule
+                    ],
+                    exports: [ExpansionPanelComponent]
+                }]
+        }] });
+
+class DropdownComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.id = "sampleId";
+        this.label = "";
+        this.data = [];
+        this.isDisabled = false;
+        this.clearButton = false;
+        this.fillMode = "solid";
+        this.filterable = true;
+        this.placeholder = "";
+        this.readonly = false;
+        this.rounded = "medium";
+        this.size = "medium";
+        this.suggest = true;
+        this.valuePrimitive = false;
+        this.modelChange = new EventEmitter();
+        this.control = new FormControl();
+        this.fontType = 'P_MULISH_14_REGULAR';
+        this.focus = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['isDisabled']) {
+            if (changes['isDisabled']?.currentValue) {
+                this.control.disable();
+            }
+            else {
+                this.control.enable();
+            }
+        }
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        if (this.focus) {
+            this.comboBox.focus();
+        }
+    }
+    emitModelChange(ev) {
+        this.modelChange.emit(ev);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "lib-dropdown", inputs: { id: "id", label: "label", data: "data", isDisabled: "isDisabled", clearButton: "clearButton", fillMode: "fillMode", filterable: "filterable", placeholder: "placeholder", readonly: "readonly", rounded: "rounded", size: "size", suggest: "suggest", textField: "textField", value: "value", valueField: "valueField", valuePrimitive: "valuePrimitive", model: "model", control: "control", fontType: "fontType", focus: "focus" }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "comboBox", first: true, predicate: ["comboBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"dropdown\">\n  <span *ngIf=\"label.length > 0\">\n    <label class=\"checkbox-label\" for=\"{{ id }}\">\n      <lib-typography [defaultText]=\"label\" [type]=\"fontType\">\n      </lib-typography>\n    </label>\n    &nbsp;\n  </span>\n  <kendo-combobox #comboBox [id]=\"id\" [data]=\"data\" [clearButton]=\"clearButton\" [fillMode]=\"fillMode\"\n    [filterable]=\"filterable\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [rounded]=\"rounded\" [size]=\"size\"\n    [suggest]=\"suggest\" [textField]=\"textField\" [value]=\"value\" [valueField]=\"valueField\"\n    [valuePrimitive]=\"valuePrimitive\" [ngModel]=\"model\" (ngModelChange)=\"emitModelChange($event)\"\n    [formControl]=\"control\">\n    <ng-template kendoComboBoxHeaderTemplate>\n      <ng-content select=\"header\"></ng-content>\n    </ng-template>\n    <ng-template kendoComboBoxItemTemplate let-data>\n      <img *ngIf=\"data.imageUrl && data.imageUrl.length > 0\" [src]=\"data.imageUrl\" [width]=\"18\" [alt]=\"data.imageUrl\" />\n      <div ngClass=\"data.imageUrl.length > 0 ? 'rowData' : ''\">\n        <lib-typography [defaultText]=\"data.name\" [type]=\"fontType\">\n        </lib-typography>\n      </div>\n    </ng-template>\n  </kendo-combobox>\n</span>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.checkbox-label{margin-bottom:8px}::ng-deep .rowData{padding-left:1rem}::ng-deep .k-list-md .k-list-item,::ng-deep .k-list-md .k-list-optionlabel{border-bottom:1px solid #CDD7DD;padding:8px 16px}::ng-deep .k-list-md{border-radius:0 0 8px 8px}::ng-deep .k-list-container{border-radius:0 0 8px 8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.HeaderTemplateDirective, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]" }, { kind: "directive", type: i3$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i3$2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dropdown', template: "<span class=\"dropdown\">\n  <span *ngIf=\"label.length > 0\">\n    <label class=\"checkbox-label\" for=\"{{ id }}\">\n      <lib-typography [defaultText]=\"label\" [type]=\"fontType\">\n      </lib-typography>\n    </label>\n    &nbsp;\n  </span>\n  <kendo-combobox #comboBox [id]=\"id\" [data]=\"data\" [clearButton]=\"clearButton\" [fillMode]=\"fillMode\"\n    [filterable]=\"filterable\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [rounded]=\"rounded\" [size]=\"size\"\n    [suggest]=\"suggest\" [textField]=\"textField\" [value]=\"value\" [valueField]=\"valueField\"\n    [valuePrimitive]=\"valuePrimitive\" [ngModel]=\"model\" (ngModelChange)=\"emitModelChange($event)\"\n    [formControl]=\"control\">\n    <ng-template kendoComboBoxHeaderTemplate>\n      <ng-content select=\"header\"></ng-content>\n    </ng-template>\n    <ng-template kendoComboBoxItemTemplate let-data>\n      <img *ngIf=\"data.imageUrl && data.imageUrl.length > 0\" [src]=\"data.imageUrl\" [width]=\"18\" [alt]=\"data.imageUrl\" />\n      <div ngClass=\"data.imageUrl.length > 0 ? 'rowData' : ''\">\n        <lib-typography [defaultText]=\"data.name\" [type]=\"fontType\">\n        </lib-typography>\n      </div>\n    </ng-template>\n  </kendo-combobox>\n</span>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.checkbox-label{margin-bottom:8px}::ng-deep .rowData{padding-left:1rem}::ng-deep .k-list-md .k-list-item,::ng-deep .k-list-md .k-list-optionlabel{border-bottom:1px solid #CDD7DD;padding:8px 16px}::ng-deep .k-list-md{border-radius:0 0 8px 8px}::ng-deep .k-list-container{border-radius:0 0 8px 8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], suggest: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], valuePrimitive: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], modelChange: [{
+                type: Output
+            }], control: [{
+                type: Input
+            }], fontType: [{
+                type: Input
+            }], focus: [{
+                type: Input
+            }], comboBox: [{
+                type: ViewChild,
+                args: ['comboBox', { static: false }]
+            }] } });
+
+class DropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent], imports: [CommonModule,
+            DropDownsModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TypographyModule], exports: [DropdownComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownModule, imports: [CommonModule,
+            DropDownsModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TypographyModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DropdownComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        DropDownsModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TypographyModule
+                    ],
+                    exports: [
+                        DropdownComponent
+                    ]
+                }]
+        }] });
+
+class LabelComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.text = '';
+        this.hiddenLabel = '';
+        this.labelFont = 'P_MULISH_14_REGULAR';
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LabelComponent, selector: "lib-label", inputs: { text: "text", hiddenLabel: "hiddenLabel", labelFont: "labelFont" }, ngImport: i0, template: "<lib-typography [isLabel]=\"true\" [hiddenLabel]=\"hiddenLabel\" [defaultText]=\"text\" [type]=\"labelFont\">\n  <ng-content></ng-content>\n</lib-typography>\n", styles: [""], dependencies: [{ kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-label', template: "<lib-typography [isLabel]=\"true\" [hiddenLabel]=\"hiddenLabel\" [defaultText]=\"text\" [type]=\"labelFont\">\n  <ng-content></ng-content>\n</lib-typography>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { text: [{
+                type: Input
+            }], hiddenLabel: [{
+                type: Input
+            }], labelFont: [{
+                type: Input
+            }] } });
+
+class LabelsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LabelsModule, declarations: [LabelComponent], imports: [LabelModule, TypographyModule, CommonModule], exports: [LabelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelsModule, imports: [LabelModule, TypographyModule, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [LabelModule, TypographyModule, CommonModule],
+                    declarations: [LabelComponent],
+                    exports: [LabelComponent]
+                }]
+        }] });
+
+class LoadingSpinnerComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.width = 100;
+        this.height = 100;
+        this.visible = true;
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingSpinnerComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoadingSpinnerComponent, selector: "lib-loading-spinner", inputs: { width: "width", height: "height", visible: "visible" }, ngImport: i0, template: "<div class=\"chef-loading-spinner\" *ngIf=\"visible\">\n  <svg\n    [attr.width]=\"width\"\n    [attr.height]=\"height\"\n    viewBox=\"0 0 100 100\"\n    aria-live=\"polite\"\n    aria-label=\"Page loading, do not refresh the page\"\n    role=\"status\"\n  >\n    <path\n      d=\"M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z\"\n    >\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"2s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\"\n      ></animateTransform>\n    </path>\n    <path\n      d=\"M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z\"\n    >\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"2s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\"\n      ></animateTransform>\n    </path>\n    <path\n      class=\"alt\"\n      d=\"M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5L82,35.7z\"\n    >\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"2s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\"\n      ></animateTransform>\n    </path>\n  </svg>\n</div>\n", styles: [".chef-loading-spinner{--fill: #3864f2;--fill-alt: #597ef4}.chef-loading-spinner{display:inline-block;overflow:hidden}.chef-loading-spinner svg{float:left}.chef-loading-spinner path{fill:var(--fill)}.chef-loading-spinner path.alt{fill:var(--fill-alt)}.chef-loading-spinner[fixed]{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;background:#e0e4e6a6;z-index:190}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-loading-spinner', template: "<div class=\"chef-loading-spinner\" *ngIf=\"visible\">\n  <svg\n    [attr.width]=\"width\"\n    [attr.height]=\"height\"\n    viewBox=\"0 0 100 100\"\n    aria-live=\"polite\"\n    aria-label=\"Page loading, do not refresh the page\"\n    role=\"status\"\n  >\n    <path\n      d=\"M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z\"\n    >\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"2s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\"\n      ></animateTransform>\n    </path>\n    <path\n      d=\"M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z\"\n    >\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"2s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\"\n      ></animateTransform>\n    </path>\n    <path\n      class=\"alt\"\n      d=\"M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5L82,35.7z\"\n    >\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"2s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\"\n      ></animateTransform>\n    </path>\n  </svg>\n</div>\n", styles: [".chef-loading-spinner{--fill: #3864f2;--fill-alt: #597ef4}.chef-loading-spinner{display:inline-block;overflow:hidden}.chef-loading-spinner svg{float:left}.chef-loading-spinner path{fill:var(--fill)}.chef-loading-spinner path.alt{fill:var(--fill-alt)}.chef-loading-spinner[fixed]{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;background:#e0e4e6a6;z-index:190}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }] } });
+
+class LoadingSpinnerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LoadingSpinnerModule, declarations: [LoadingSpinnerComponent], imports: [CommonModule], exports: [LoadingSpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingSpinnerModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingSpinnerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LoadingSpinnerComponent],
+                    imports: [CommonModule],
+                    exports: [LoadingSpinnerComponent],
+                }]
+        }] });
+
+var Type;
+(function (Type) {
+    Type["success"] = "success";
+    Type["error"] = "error";
+    Type["warning"] = "warning";
+    Type["info"] = "info";
+    Type["none"] = "none";
+})(Type || (Type = {}));
+const slideDownAnim = trigger('slideDownAnim', [
+    transition(':enter', [
+        style({
+            opacity: 0,
+            transform: 'translateY(-100%) scale(0.98)',
+        }),
+        animate('300ms ease-out', style({
+            opacity: 1,
+            transform: 'translateY(0%) scale(1)',
+        })),
+    ]),
+    transition(':leave', [
+        style({ opacity: 1 }),
+        animate('195ms ease-in', style({ opacity: 0 })),
+    ]),
+]);
+class NotificationComponent {
+    get theType() {
+        return this.type;
+    }
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.type = Type.info;
+        this.timeout = 8000;
+        this.dismissed = new EventEmitter();
+        this.handleClose = () => {
+            clearTimeout(this.timeOutRef);
+            this.dismissed.emit();
+        };
+    }
+    ngAfterViewInit() {
+        const isInfinite = this.timeout < 1;
+        if (isInfinite) {
+            return;
+        }
+        this.timeOutRef = setTimeout(this.handleClose, this.timeout * 10000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NotificationComponent, selector: "lib-notification", inputs: { type: "type", timeout: "timeout" }, outputs: { dismissed: "dismissed" }, host: { properties: { "@slideDownAnim": "this.slideDownAnim", "class": "this.theType" } }, ngImport: i0, template: "<p>\n  <ng-content></ng-content>\n</p>\n<div class=\"shine\"></div>\n<i role=\"button\" (click)=\"handleClose()\" class=\"closebtn test\"> \u00D7 </i>\n", styles: [":host{display:flex;align-items:center;position:relative;width:100%;color:#fff;background-color:#697272;padding:.5em;overflow:hidden;z-index:9999}:host p{margin:0;color:#fff}:host a{color:#fff}:host .closebtn{position:absolute;right:28px;font-size:22px;text-decoration:none}:host.info{background-color:#0075dbe6}:host.info:before{font-family:Material Icons;content:\"\\e86c\";color:currentColor;padding-right:.5em}:host.error{background-color:#ba1e6ae6}:host.error:before{font-family:Material Icons;content:\"\\e002\";color:currentColor;padding-right:.5em}:host .shine{position:absolute;top:0;left:0;width:25%;height:100%;background:linear-gradient(110deg,#fff0 22%,#ffffff1c 50%,#fff0 83%);animation:shine 3s cubic-bezier(.17,.71,.05,.98) forwards;animation-delay:1s;cursor:none}@keyframes shine{0%{transform:translate(-50%)}to{transform:translate(500%)}}\n"], animations: [slideDownAnim] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-notification', animations: [slideDownAnim], template: "<p>\n  <ng-content></ng-content>\n</p>\n<div class=\"shine\"></div>\n<i role=\"button\" (click)=\"handleClose()\" class=\"closebtn test\"> \u00D7 </i>\n", styles: [":host{display:flex;align-items:center;position:relative;width:100%;color:#fff;background-color:#697272;padding:.5em;overflow:hidden;z-index:9999}:host p{margin:0;color:#fff}:host a{color:#fff}:host .closebtn{position:absolute;right:28px;font-size:22px;text-decoration:none}:host.info{background-color:#0075dbe6}:host.info:before{font-family:Material Icons;content:\"\\e86c\";color:currentColor;padding-right:.5em}:host.error{background-color:#ba1e6ae6}:host.error:before{font-family:Material Icons;content:\"\\e002\";color:currentColor;padding-right:.5em}:host .shine{position:absolute;top:0;left:0;width:25%;height:100%;background:linear-gradient(110deg,#fff0 22%,#ffffff1c 50%,#fff0 83%);animation:shine 3s cubic-bezier(.17,.71,.05,.98) forwards;animation-delay:1s;cursor:none}@keyframes shine{0%{transform:translate(-50%)}to{transform:translate(500%)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { type: [{
+                type: Input
+            }], timeout: [{
+                type: Input
+            }], dismissed: [{
+                type: Output
+            }], slideDownAnim: [{
+                type: HostBinding,
+                args: ['@slideDownAnim']
+            }], theType: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class NotificationModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NotificationModule, declarations: [NotificationComponent], imports: [CommonModule], exports: [NotificationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotificationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NotificationComponent],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [NotificationComponent]
+                }]
+        }] });
+
+class ProgressBarComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.value = 0;
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: { value: "value" }, ngImport: i0, template: "<kendo-progressbar [value]=\"value\"></kendo-progressbar>\n", styles: [""], dependencies: [{ kind: "component", type: i2$3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-progress-bar', template: "<kendo-progressbar [value]=\"value\"></kendo-progressbar>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { value: [{
+                type: Input
+            }] } });
+
+class ProgressBarsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarsModule, declarations: [ProgressBarComponent], imports: [ProgressBarModule], exports: [ProgressBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarsModule, imports: [ProgressBarModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ProgressBarComponent
+                    ],
+                    imports: [
+                        ProgressBarModule
+                    ],
+                    exports: [
+                        ProgressBarComponent
+                    ]
+                }]
+        }] });
+
+class RadioButtonComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.size = "medium";
+        this.name = "radio1";
+        this.value = "radio1";
+        this.control = new FormControl(null);
+        this.label = "radio1";
+        this.labelPosition = "before";
+        this.id = "sampleId";
+        this.model = '';
+        this.modelChange = new EventEmitter();
+    }
+    ngOnInit() { }
+    emitModelChange(ev) {
+        this.modelChange.emit(ev);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonComponent, selector: "lib-radio-button", inputs: { size: "size", name: "name", value: "value", control: "control", label: "label", labelPosition: "labelPosition", id: "id", model: "model" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<span *ngIf=\"label.length > 0 && labelPosition === 'before'\">\n  <label class=\"k-checkbox-label\" for=\"{{ id }}\">\n    <lib-typography\n      [defaultText]=\"label\"\n      type=\"P_MULISH_14_REGULAR\">\n    </lib-typography>\n  </label>\n  &nbsp;\n</span>\n<input \n  type=\"radio\"\n  [size]=\"size\"\n  [name]=\"name\"\n  [value]=\"value\"\n  [formControl]=\"control\"\n  [ngModel]=\"model\"\n  (ngModelChange)=\"emitModelChange($event)\"\n  [id]=\"id\"\n  kendoRadioButton/>\n<span *ngIf=\"label.length > 0 && labelPosition === 'after'\">\n  &nbsp;\n  <label class=\"k-checkbox-label\" for=\"{{ id }}\">\n    <lib-typography\n      [defaultText]=\"label\"\n      type=\"P_MULISH_14_REGULAR\">\n    </lib-typography>\n  </label>\n</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { kind: "directive", type: i4.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: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-radio-button', template: "<span *ngIf=\"label.length > 0 && labelPosition === 'before'\">\n  <label class=\"k-checkbox-label\" for=\"{{ id }}\">\n    <lib-typography\n      [defaultText]=\"label\"\n      type=\"P_MULISH_14_REGULAR\">\n    </lib-typography>\n  </label>\n  &nbsp;\n</span>\n<input \n  type=\"radio\"\n  [size]=\"size\"\n  [name]=\"name\"\n  [value]=\"value\"\n  [formControl]=\"control\"\n  [ngModel]=\"model\"\n  (ngModelChange)=\"emitModelChange($event)\"\n  [id]=\"id\"\n  kendoRadioButton/>\n<span *ngIf=\"label.length > 0 && labelPosition === 'after'\">\n  &nbsp;\n  <label class=\"k-checkbox-label\" for=\"{{ id }}\">\n    <lib-typography\n      [defaultText]=\"label\"\n      type=\"P_MULISH_14_REGULAR\">\n    </lib-typography>\n  </label>\n</span>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { size: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], modelChange: [{
+                type: Output
+            }] } });
+
+class RadioButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonModule, declarations: [RadioButtonComponent], imports: [CommonModule,
+            InputsModule,
+            ReactiveFormsModule,
+            TypographyModule,
+            FormsModule], exports: [RadioButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonModule, imports: [CommonModule,
+            InputsModule,
+            ReactiveFormsModule,
+            TypographyModule,
+            FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        RadioButtonComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        InputsModule,
+                        ReactiveFormsModule,
+                        TypographyModule,
+                        FormsModule
+                    ],
+                    exports: [
+                        RadioButtonComponent
+                    ]
+                }]
+        }] });
+
+class ReportSummaryComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.leftTitle = '';
+        this.rightTitle = '';
+        this.bannerColor = '';
+        this.isCollapsed = false;
+        this.leftMetaData = [];
+        this.rightMetaData = [];
+        this.isOpened = this.isCollapsed;
+    }
+    ngOnInit() { }
+    toggle() {
+        this.expandBox();
+    }
+    expandBox() {
+        this.isCollapsed = !this.isCollapsed;
+        this.isOpened = this.isOpened;
+        console.log(this.isCollapsed);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReportSummaryComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ReportSummaryComponent, selector: "lib-report-summary", inputs: { leftTitle: "leftTitle", rightTitle: "rightTitle", bannerColor: "bannerColor", isCollapsed: "isCollapsed", leftMetaData: "leftMetaData", rightMetaData: "rightMetaData" }, host: { properties: { "class.show": "this.isOpened" } }, ngImport: i0, template: "<ng-container>\n  <div class=\"accordion\">\n    <div class=\"accordion-item\">\n      <h2 class=\"accordion-header\">\n        <div \n          class=\"alert-primary banner-head\"\n          (click)=\"toggle()\">\n          <span *ngIf=\"leftTitle !== ''\" class=\"left-title\">{{leftTitle}}</span>\n          <div class=\"right-head\">\n            <span *ngIf=\"rightTitle !== ''\" class=\"right-title\">{{rightTitle}}</span>\n            <span *ngIf=\"!isCollapsed\" class=\"collapse-icon k-icon k-i-plus\"></span>\n            <span *ngIf=\"isCollapsed\" class=\"collapse-icon k-icon k-i-minus\"></span>\n          </div>\n        </div>\n      </h2>\n      <div\n        class=\"accordion-collapse collapse show\"\n        [ngClass]=\"{ 'show' : isCollapsed }\">\n        <div class=\"accordion-body\">\n          <div class=\"row\">\n            <div class=\"col-sm-6\">\n              <table *ngIf=\"leftMetaData.length > 0\" class=\"table table-borderless\">\n                <tbody>\n                  <tr *ngFor=\"let data of leftMetaData\">\n                    <td class=\"list-title\">{{data.title}}</td>\n                    <td class=\"list-value\">{{data.value}}</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n            <div *ngIf=\"leftMetaData.length > 0\" class=\"vertical\"></div>\n            <div class=\"col-sm-6\">\n              <table *ngIf=\"rightMetaData.length > 0\" class=\"table table-borderless\">\n                <tbody>\n                  <tr *ngFor=\"let data of rightMetaData\">\n                    <td class=\"list-title\">{{data.title}}</td>\n                    <td class=\"list-value\">{{data.value}}</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".accordion-button:focus{box-shadow:none}.banner-head{background:#dfe3e5;padding:18px 10px 18px 12px;font-size:15px;font-weight:400;height:54px}.right-head{float:right}.left-title{text-transform:capitalize}.right-title{margin-right:10px;text-transform:capitalize}.collapse{position:relative}.vertical{border-left:1px solid rgb(223,227,229);position:absolute;left:50%;height:70%}.list-title{font-weight:400}.list-value{font-weight:200}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReportSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-report-summary', template: "<ng-container>\n  <div class=\"accordion\">\n    <div class=\"accordion-item\">\n      <h2 class=\"accordion-header\">\n        <div \n          class=\"alert-primary banner-head\"\n          (click)=\"toggle()\">\n          <span *ngIf=\"leftTitle !== ''\" class=\"left-title\">{{leftTitle}}</span>\n          <div class=\"right-head\">\n            <span *ngIf=\"rightTitle !== ''\" class=\"right-title\">{{rightTitle}}</span>\n            <span *ngIf=\"!isCollapsed\" class=\"collapse-icon k-icon k-i-plus\"></span>\n            <span *ngIf=\"isCollapsed\" class=\"collapse-icon k-icon k-i-minus\"></span>\n          </div>\n        </div>\n      </h2>\n      <div\n        class=\"accordion-collapse collapse show\"\n        [ngClass]=\"{ 'show' : isCollapsed }\">\n        <div class=\"accordion-body\">\n          <div class=\"row\">\n            <div class=\"col-sm-6\">\n              <table *ngIf=\"leftMetaData.length > 0\" class=\"table table-borderless\">\n                <tbody>\n                  <tr *ngFor=\"let data of leftMetaData\">\n                    <td class=\"list-title\">{{data.title}}</td>\n                    <td class=\"list-value\">{{data.value}}</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n            <div *ngIf=\"leftMetaData.length > 0\" class=\"vertical\"></div>\n            <div class=\"col-sm-6\">\n              <table *ngIf=\"rightMetaData.length > 0\" class=\"table table-borderless\">\n                <tbody>\n                  <tr *ngFor=\"let data of rightMetaData\">\n                    <td class=\"list-title\">{{data.title}}</td>\n                    <td class=\"list-value\">{{data.value}}</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".accordion-button:focus{box-shadow:none}.banner-head{background:#dfe3e5;padding:18px 10px 18px 12px;font-size:15px;font-weight:400;height:54px}.right-head{float:right}.left-title{text-transform:capitalize}.right-title{margin-right:10px;text-transform:capitalize}.collapse{position:relative}.vertical{border-left:1px solid rgb(223,227,229);position:absolute;left:50%;height:70%}.list-title{font-weight:400}.list-value{font-weight:200}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { leftTitle: [{
+                type: Input
+            }], rightTitle: [{
+                type: Input
+            }], bannerColor: [{
+                type: Input
+            }], isCollapsed: [{
+                type: Input
+            }], leftMetaData: [{
+                type: Input
+            }], rightMetaData: [{
+                type: Input
+            }], isOpened: [{
+                type: HostBinding,
+                args: ['class.show']
+            }] } });
+
+class ReportSummaryModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReportSummaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ReportSummaryModule, declarations: [ReportSummaryComponent], imports: [CommonModule], exports: [ReportSummaryComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReportSummaryModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReportSummaryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ReportSummaryComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        ReportSummaryComponent
+                    ]
+                }]
+        }] });
+
+class SearchBoxComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.source = [];
+        this.data = [];
+        this.filterable = true;
+        this.size = 'small';
+        this.rounded = "medium";
+        this.fillMode = "outline";
+        this.clearButton = true;
+        this.icon = 'search';
+        this.autoComplete = true;
+        this.placeholder = '';
+        this.width = 200;
+        this.suggest = false;
+        this.modelChange = new EventEmitter();
+        this.searchClick = new EventEmitter();
+        this.control = new FormControl();
+        this.value = "";
+        this.debounceTimeMs = 300;
+        this.searchSubject = new Subject();
+        this.subscription = new Subscription;
+    }
+    ngAfterViewInit() {
+        if (this.autoComplete) {
+            const contains = (searchTerm) => (item) => item.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1;
+            this.autocomplete.filterChange
+                .asObservable()
+                .pipe(tap(() => (this.autocomplete.loading = true)), map((searchTerm) => this.source.filter(contains(searchTerm))))
+                .subscribe((data) => {
+                this.data = data;
+                this.autocomplete.loading = false;
+            });
+        }
+        this.subscription = this.searchSubject
+            .pipe(debounceTime(this.debounceTimeMs))
+            .subscribe((ev) => {
+            this.modelChange.next(ev);
+        });
+    }
+    emitValueChange(ev) {
+        this.searchSubject.next(ev);
+    }
+    onSearchClick() {
+        this.searchClick.emit();
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBoxComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchBoxComponent, selector: "lib-search-box", inputs: { source: "source", data: "data", filterable: "filterable", size: "size", rounded: "rounded", fillMode: "fillMode", clearButton: "clearButton", icon: "icon", autoComplete: "autoComplete", placeholder: "placeholder", width: "width", suggest: "suggest", control: "control", value: "value", debounceTimeMs: "debounceTimeMs" }, outputs: { modelChange: "modelChange", searchClick: "searchClick" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!autoComplete\">\n  <kendo-textbox [placeholder]=\"placeholder\" [clearButton]=\"clearButton\" [fillMode]=\"fillMode\" [size]=\"size\"\n    [rounded]=\"rounded\" [size]=\"size\" [style.width.px]=\"width\" [formControl]=\"control\"\n    (ngModelChange)=\"emitValueChange($event)\" [ngModel]=\"value\">\n    <ng-template kendoTextBoxSuffixTemplate>\n      <lib-icon [name]=\"icon\" (click)=\"onSearchClick()\"></lib-icon>\n    </ng-template>\n  </kendo-textbox>\n</div>\n<div *ngIf=\"autoComplete\">\n  <kendo-autocomplete #autocomplete [data]=\"data\" [filterable]=\"true\" [size]=\"size\" [placeholder]=\"placeholder\"\n    [suggest]=\"suggest\" [formControl]=\"control\" (ngModelChange)=\"emitValueChange($event)\" [ngModel]=\"value\">\n  </kendo-autocomplete>\n</div>\n", styles: ["kendo-autocomplete{width:200px;font-size:14px;line-height:1.4285714286;font-weight:400}kendo-textbox lib-icon{padding-right:12px}lib-icon{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i3$2.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoAutoComplete"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }, { kind: "component", type: i3$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3$1.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-search-box', template: "<div *ngIf=\"!autoComplete\">\n  <kendo-textbox [placeholder]=\"placeholder\" [clearButton]=\"clearButton\" [fillMode]=\"fillMode\" [size]=\"size\"\n    [rounded]=\"rounded\" [size]=\"size\" [style.width.px]=\"width\" [formControl]=\"control\"\n    (ngModelChange)=\"emitValueChange($event)\" [ngModel]=\"value\">\n    <ng-template kendoTextBoxSuffixTemplate>\n      <lib-icon [name]=\"icon\" (click)=\"onSearchClick()\"></lib-icon>\n    </ng-template>\n  </kendo-textbox>\n</div>\n<div *ngIf=\"autoComplete\">\n  <kendo-autocomplete #autocomplete [data]=\"data\" [filterable]=\"true\" [size]=\"size\" [placeholder]=\"placeholder\"\n    [suggest]=\"suggest\" [formControl]=\"control\" (ngModelChange)=\"emitValueChange($event)\" [ngModel]=\"value\">\n  </kendo-autocomplete>\n</div>\n", styles: ["kendo-autocomplete{width:200px;font-size:14px;line-height:1.4285714286;font-weight:400}kendo-textbox lib-icon{padding-right:12px}lib-icon{cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { autocomplete: [{
+                type: ViewChild,
+                args: ['autocomplete', { static: false }]
+            }], textbox: [{
+                type: ViewChild,
+                args: ['textbox', { static: false }]
+            }], source: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], autoComplete: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], suggest: [{
+                type: Input
+            }], modelChange: [{
+                type: Output
+            }], searchClick: [{
+                type: Output
+            }], control: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], debounceTimeMs: [{
+                type: Input
+            }] } });
+
+class SearchBoxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SearchBoxModule, declarations: [SearchBoxComponent], imports: [AutoCompleteModule,
+            IconModule,
+            InputsModule,
+            CommonModule,
+            ReactiveFormsModule], exports: [SearchBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBoxModule, imports: [AutoCompleteModule,
+            IconModule,
+            InputsModule,
+            CommonModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SearchBoxComponent],
+                    imports: [
+                        AutoCompleteModule,
+                        IconModule,
+                        InputsModule,
+                        CommonModule,
+                        ReactiveFormsModule,
+                    ],
+                    exports: [SearchBoxComponent],
+                }]
+        }] });
+
+class SliderComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.opened = false;
+        this.title = "";
+        this.frameNumber = 0;
+        this.isSlideOpen = this.opened;
+        this.sliderClose = new EventEmitter();
+        this.parentId = '';
+    }
+    ngOnInit() {
+        if (this.parentId) {
+            const element = document.getElementById(this.parentId);
+            const sliderElement = document.getElementById('slider');
+            console.log(sliderElement);
+            var style = window.getComputedStyle(element), margin = parseFloat(style.marginRight), top = parseFloat(style.top);
+            if (margin) {
+                sliderElement.style.right = '-' + style.marginRight;
+            }
+            if (top) {
+                sliderElement.style.top = '-' + style.top;
+            }
+        }
+    }
+    closeSlider(e) {
+        this.toggleSlide();
+        this.sliderClose.emit(e);
+    }
+    toggleSlide() {
+        this.opened = false;
+        this.isSlideOpen = this.opened;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SliderComponent, selector: "lib-slider", inputs: { opened: "opened", title: "title", frameNumber: "frameNumber", parentId: "parentId" }, outputs: { sliderClose: "sliderClose" }, host: { properties: { "class.show": "this.isSlideOpen" } }, ngImport: i0, template: "<div class=\"slider-wrap\" [ngClass]=\"{ 'show' : opened }\">\n  <div class=\"slider\"  id=\"slider\">\n    <div class=\"slider-header\">\n      <div class=\"header-content\">\n        <div *ngIf='frameNumber > 0' class=\"frame-number\">{{frameNumber}}\n        </div>\n        <span class=\"head-title\">\n          <lib-typography *ngIf=\"title.length > 0\" [defaultText]=\"title\" type=\"H3_MULISH_18_BOLD\">\n          </lib-typography>\n        </span>\n      </div>\n      <div>\n        <a href=\"javascript:void(0)\" class=\"closebtn\" (click)=\"closeSlider($event)\">\n          &times;\n        </a>\n      </div>\n    </div>\n    <div class=\"slider-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"opened\" class=\"overlay overlay-shown\"></div>\n", styles: [".slider-wrap{position:absolute;top:0;bottom:0;right:0;transform:translate(100%);transition:.3s ease-out;box-shadow:#959da533 6px 20px 14px 14px;width:100%}.slider{position:absolute;inset:0;background:#fff;overflow:auto}.slider-wrap .closebtn{font-size:22px;color:#000;z-index:99;text-decoration:none}.show{transform:translate(0)!important}.overlay{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.overlay.overlay-shown{visibility:hidden;background-color:#0000004d}.overlay-shown{inset:0;position:absolute;display:block;z-index:3;visibility:hidden}.head-title{color:#000;margin-left:20px;font-size:18px;font-weight:600}.frame-number{border-radius:85%;width:24px;height:24px;background:#000;color:#fff;text-align:center;justify-content:center;align-items:center;margin-top:2px;display:flex;font-size:18px;font-weight:600}.slider-header{border-bottom:.4px solid #bbbbbb;display:flex;padding:15px;justify-content:space-between;align-items:center;width:100%;position:sticky;top:0;z-index:10;background:#fff}.header-content{display:flex}.slider-body{margin:24px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-slider', template: "<div class=\"slider-wrap\" [ngClass]=\"{ 'show' : opened }\">\n  <div class=\"slider\"  id=\"slider\">\n    <div class=\"slider-header\">\n      <div class=\"header-content\">\n        <div *ngIf='frameNumber > 0' class=\"frame-number\">{{frameNumber}}\n        </div>\n        <span class=\"head-title\">\n          <lib-typography *ngIf=\"title.length > 0\" [defaultText]=\"title\" type=\"H3_MULISH_18_BOLD\">\n          </lib-typography>\n        </span>\n      </div>\n      <div>\n        <a href=\"javascript:void(0)\" class=\"closebtn\" (click)=\"closeSlider($event)\">\n          &times;\n        </a>\n      </div>\n    </div>\n    <div class=\"slider-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"opened\" class=\"overlay overlay-shown\"></div>\n", styles: [".slider-wrap{position:absolute;top:0;bottom:0;right:0;transform:translate(100%);transition:.3s ease-out;box-shadow:#959da533 6px 20px 14px 14px;width:100%}.slider{position:absolute;inset:0;background:#fff;overflow:auto}.slider-wrap .closebtn{font-size:22px;color:#000;z-index:99;text-decoration:none}.show{transform:translate(0)!important}.overlay{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.overlay.overlay-shown{visibility:hidden;background-color:#0000004d}.overlay-shown{inset:0;position:absolute;display:block;z-index:3;visibility:hidden}.head-title{color:#000;margin-left:20px;font-size:18px;font-weight:600}.frame-number{border-radius:85%;width:24px;height:24px;background:#000;color:#fff;text-align:center;justify-content:center;align-items:center;margin-top:2px;display:flex;font-size:18px;font-weight:600}.slider-header{border-bottom:.4px solid #bbbbbb;display:flex;padding:15px;justify-content:space-between;align-items:center;width:100%;position:sticky;top:0;z-index:10;background:#fff}.header-content{display:flex}.slider-body{margin:24px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { opened: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], frameNumber: [{
+                type: Input
+            }], isSlideOpen: [{
+                type: HostBinding,
+                args: ['class.show']
+            }], sliderClose: [{
+                type: Output
+            }], parentId: [{
+                type: Input
+            }] } });
+
+class SliderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SliderModule, declarations: [SliderComponent], imports: [CommonModule,
+            TypographyModule], exports: [SliderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderModule, imports: [CommonModule,
+            TypographyModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SliderComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        TypographyModule
+                    ],
+                    exports: [
+                        SliderComponent
+                    ]
+                }]
+        }] });
+
+class TextAreaComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.placeholder = 'Enter here';
+        this.resizable = 'vertical';
+        this.value = '';
+        this.control = new FormControl();
+        this.inputChange = new EventEmitter();
+    }
+    ngOnInit() { }
+    emitValueChange(ev) {
+        this.inputChange.emit(ev);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextAreaComponent, selector: "lib-text-area", inputs: { placeholder: "placeholder", resizable: "resizable", rows: "rows", cols: "cols", width: "width", value: "value", control: "control" }, outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<kendo-textarea\n  #textarea\n  [placeholder]=\"placeholder\"\n  [resizable]=\"resizable\"\n  [rows]=\"rows\"\n  [cols]=\"cols\"\n  [style.width.px]=\"width\"\n  [(ngModel)]=\"value\"\n  [formControl]=\"control\"\n  (ngModelChange)=\"emitValueChange($event)\"\n>\n</kendo-textarea>\n", styles: [""], dependencies: [{ kind: "component", type: i3$1.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-text-area', template: "<kendo-textarea\n  #textarea\n  [placeholder]=\"placeholder\"\n  [resizable]=\"resizable\"\n  [rows]=\"rows\"\n  [cols]=\"cols\"\n  [style.width.px]=\"width\"\n  [(ngModel)]=\"value\"\n  [formControl]=\"control\"\n  (ngModelChange)=\"emitValueChange($event)\"\n>\n</kendo-textarea>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], inputChange: [{
+                type: Output
+            }] } });
+
+class TextAreaModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TextAreaModule, declarations: [TextAreaComponent], imports: [CommonModule,
+            InputsModule,
+            ReactiveFormsModule], exports: [TextAreaComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaModule, imports: [CommonModule,
+            InputsModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TextAreaComponent],
+                    imports: [
+                        CommonModule,
+                        InputsModule,
+                        ReactiveFormsModule
+                    ],
+                    exports: [TextAreaComponent],
+                }]
+        }] });
+
+class TextboxComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.showPassword = false;
+        this.showEyeIcon = false;
+        this.clearButton = true;
+        this.placeholder = 'message';
+        this.width = '300';
+        this.isDisabled = false;
+        this.readonly = false;
+        this.size = "medium";
+        this.rounded = "medium";
+        this.fillMode = "outline";
+        this.control = new FormControl();
+        this.value = '';
+        this.type = '';
+        this.inputChange = new EventEmitter();
+        this.focusEvent = new EventEmitter();
+        this.blurEvent = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if (changes['isDisabled']) {
+            if (changes['isDisabled']?.currentValue) {
+                this.control.disable();
+            }
+            else {
+                this.control.enable();
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.textbox.input.nativeElement.type = this.type;
+    }
+    toggleVisibility() {
+        const inputElement = this.textbox.input.nativeElement;
+        if (inputElement.type === "password") {
+            inputElement.type = "text";
+            this.showPassword = true;
+        }
+        else {
+            inputElement.type = "password";
+            this.showPassword = false;
+        }
+    }
+    emitValueChange(ev) {
+        this.inputChange.emit(ev);
+    }
+    onFocus() {
+        this.focusEvent.emit();
+    }
+    onBlur() {
+        this.blurEvent.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextboxComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextboxComponent, selector: "lib-textbox", inputs: { showEyeIcon: "showEyeIcon", clearButton: "clearButton", placeholder: "placeholder", width: "width", isDisabled: "isDisabled", readonly: "readonly", size: "size", rounded: "rounded", fillMode: "fillMode", control: "control", value: "value", type: "type" }, outputs: { inputChange: "inputChange", focusEvent: "focusEvent", blurEvent: "blurEvent" }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<kendo-textbox #textbox [style.width.px]=\"width\" [placeholder]=\"placeholder\" [clearButton]=\"clearButton\"\n  [fillMode]=\"fillMode\" [readonly]=\"readonly\" [size]=\"size\" [rounded]=\"rounded\" [formControl]=\"control\"\n  [(ngModel)]=\"value\" (ngModelChange)=\"emitValueChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\n  <ng-template *ngIf=\"this.type === 'password' && showEyeIcon\" kendoTextBoxSuffixTemplate>\n    <lib-icon name=\"eye-open\" (click)=\"toggleVisibility()\" *ngIf=\"showPassword\"></lib-icon>\n    <lib-icon name=\"eye-closed\" (click)=\"toggleVisibility()\" *ngIf=\"!showPassword\"></lib-icon>\n  </ng-template>\n</kendo-textbox>\n", styles: ["kendo-textbox lib-icon{padding-right:12px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3$1.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-textbox', template: "<kendo-textbox #textbox [style.width.px]=\"width\" [placeholder]=\"placeholder\" [clearButton]=\"clearButton\"\n  [fillMode]=\"fillMode\" [readonly]=\"readonly\" [size]=\"size\" [rounded]=\"rounded\" [formControl]=\"control\"\n  [(ngModel)]=\"value\" (ngModelChange)=\"emitValueChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\">\n  <ng-template *ngIf=\"this.type === 'password' && showEyeIcon\" kendoTextBoxSuffixTemplate>\n    <lib-icon name=\"eye-open\" (click)=\"toggleVisibility()\" *ngIf=\"showPassword\"></lib-icon>\n    <lib-icon name=\"eye-closed\" (click)=\"toggleVisibility()\" *ngIf=\"!showPassword\"></lib-icon>\n  </ng-template>\n</kendo-textbox>\n", styles: ["kendo-textbox lib-icon{padding-right:12px;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { textbox: [{
+                type: ViewChild,
+                args: ['textbox', { static: false }]
+            }], showEyeIcon: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], inputChange: [{
+                type: Output
+            }], focusEvent: [{
+                type: Output
+            }], blurEvent: [{
+                type: Output
+            }] } });
+
+class TextboxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TextboxModule, declarations: [TextboxComponent], imports: [CommonModule, InputsModule, ReactiveFormsModule, IconModule], exports: [TextboxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextboxModule, imports: [CommonModule, InputsModule, ReactiveFormsModule, IconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TextboxComponent],
+                    exports: [TextboxComponent],
+                    imports: [CommonModule, InputsModule, ReactiveFormsModule, IconModule],
+                }]
+        }] });
+
+class TimeschedulerComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.model = new Date();
+        this.modelChange = new EventEmitter();
+        this.size = 'medium';
+        this.rounded = 'medium';
+        this.fillMode = 'solid';
+        this.format = 'MM/dd/yyyy hh:mm a';
+        this.isDisabled = false;
+        this.readonly = false;
+        this.placeholder = '';
+        this.control = new FormControl();
+    }
+    ngOnChanges(changes) {
+        if (changes['isDisabled']) {
+            if (changes['isDisabled']?.currentValue) {
+                this.control.disable();
+            }
+            else {
+                this.control.enable();
+            }
+        }
+    }
+    ngOnInit() { }
+    emitModelChange(ev) {
+        this.modelChange.emit(ev);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeschedulerComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeschedulerComponent, selector: "lib-timescheduler", inputs: { model: "model", size: "size", rounded: "rounded", fillMode: "fillMode", format: "format", isDisabled: "isDisabled", readonly: "readonly", placeholder: "placeholder", control: "control" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "<kendo-datetimepicker [format]=\"format\" [size]=\"size\" [rounded]=\"rounded\" [fillMode]=\"fillMode\" [readonly]=\"readonly\"\n  [value]=\"model\" (valueChange)=\"emitModelChange($event)\" [placeholder]=\"placeholder\" [formControl]=\"control\">\n</kendo-datetimepicker>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.k-input{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}\n"], dependencies: [{ kind: "component", type: i2$4.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "subtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "adaptiveMode", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeschedulerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-timescheduler', template: "<kendo-datetimepicker [format]=\"format\" [size]=\"size\" [rounded]=\"rounded\" [fillMode]=\"fillMode\" [readonly]=\"readonly\"\n  [value]=\"model\" (valueChange)=\"emitModelChange($event)\" [placeholder]=\"placeholder\" [formControl]=\"control\">\n</kendo-datetimepicker>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.k-input{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { model: [{
+                type: Input
+            }], modelChange: [{
+                type: Output
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
+
+class TimeSchedulerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TimeSchedulerModule, declarations: [TimeschedulerComponent], imports: [DateInputsModule,
+            ButtonsModule,
+            FormsModule,
+            ReactiveFormsModule], exports: [TimeschedulerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeSchedulerModule, imports: [DateInputsModule,
+            ButtonsModule,
+            FormsModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeSchedulerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        DateInputsModule,
+                        ButtonsModule,
+                        FormsModule,
+                        ReactiveFormsModule
+                    ],
+                    declarations: [TimeschedulerComponent],
+                    exports: [TimeschedulerComponent]
+                }]
+        }] });
+
+class TooltipComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.position = 'right';
+        this.showOn = 'hover';
+        this.closable = false;
+        this.title = 'tool';
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipComponent, selector: "lib-tooltip", inputs: { position: "position", tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", showOn: "showOn", closable: "closable", title: "title", callout: "callout" }, ngImport: i0, template: "<div kendoTooltip [tooltipTemplate]=\"template\" [position]=\"position\" [title]=\"title\" [callout]=\"callout\"\n  [showOn]=\"showOn\" [tooltipWidth]=\"tooltipWidth\" [tooltipHeight]=\"tooltipHeight\" [closable]=\"closable\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template #template>\n  <ng-content select=\"div.tooltip-content\"></ng-content>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$5.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tooltip', template: "<div kendoTooltip [tooltipTemplate]=\"template\" [position]=\"position\" [title]=\"title\" [callout]=\"callout\"\n  [showOn]=\"showOn\" [tooltipWidth]=\"tooltipWidth\" [tooltipHeight]=\"tooltipHeight\" [closable]=\"closable\">\n  <ng-content></ng-content>\n</div>\n\n<ng-template #template>\n  <ng-content select=\"div.tooltip-content\"></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { position: [{
+                type: Input
+            }], tooltipWidth: [{
+                type: Input
+            }], tooltipHeight: [{
+                type: Input
+            }], showOn: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], callout: [{
+                type: Input
+            }] } });
+
+class TooltipModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, declarations: [TooltipComponent], imports: [TooltipsModule], exports: [TooltipComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, imports: [TooltipsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TooltipComponent],
+                    imports: [
+                        TooltipsModule
+                    ],
+                    exports: [TooltipComponent]
+                }]
+        }] });
+
+class NumericTextboxComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.id = "sampleId";
+        this.autoCorrect = true;
+        this.width = 200;
+        this.isDisabled = false;
+        this.step = 1;
+        this.format = "n0";
+        this.fillMode = "solid";
+        this.rounded = "medium";
+        this.size = "medium";
+        this.readonly = false;
+        this.placeholder = '';
+        this.modelChange = new EventEmitter();
+        this.control = new FormControl();
+    }
+    ngOnChanges(changes) {
+        if (changes['isDisabled']) {
+            if (changes['isDisabled']?.currentValue) {
+                this.control.disable();
+            }
+            else {
+                this.control.enable();
+            }
+        }
+    }
+    ngOnInit() {
+    }
+    emitModelChange(ev) {
+        this.modelChange.emit(ev);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericTextboxComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NumericTextboxComponent, selector: "lib-numeric-textbox", inputs: { id: "id", autoCorrect: "autoCorrect", width: "width", isDisabled: "isDisabled", value: "value", min: "min", max: "max", step: "step", format: "format", fillMode: "fillMode", rounded: "rounded", size: "size", readonly: "readonly", placeholder: "placeholder", model: "model", control: "control" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "<kendo-numerictextbox [id]=\"id\" [autoCorrect]=\"autoCorrect\" [style.width.px]=\"width\" [value]=\"value\" [min]=\"min\"\n  [max]=\"max\" [step]=\"step\" [fillMode]=\"fillMode\" [rounded]=\"rounded\" [size]=\"size\" [readonly]=\"readonly\"\n  [placeholder]=\"placeholder\" [format]=\"format\" [ngModel]=\"model\" (ngModelChange)=\"emitModelChange($event)\"\n  [formControl]=\"control\">\n</kendo-numerictextbox>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericTextboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-numeric-textbox', template: "<kendo-numerictextbox [id]=\"id\" [autoCorrect]=\"autoCorrect\" [style.width.px]=\"width\" [value]=\"value\" [min]=\"min\"\n  [max]=\"max\" [step]=\"step\" [fillMode]=\"fillMode\" [rounded]=\"rounded\" [size]=\"size\" [readonly]=\"readonly\"\n  [placeholder]=\"placeholder\" [format]=\"format\" [ngModel]=\"model\" (ngModelChange)=\"emitModelChange($event)\"\n  [formControl]=\"control\">\n</kendo-numerictextbox>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { id: [{
+                type: Input
+            }], autoCorrect: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], modelChange: [{
+                type: Output
+            }], control: [{
+                type: Input
+            }] } });
+
+class NumericTextboxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericTextboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NumericTextboxModule, declarations: [NumericTextboxComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            InputsModule], exports: [NumericTextboxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericTextboxModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            InputsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericTextboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        NumericTextboxComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        InputsModule
+                    ],
+                    exports: [
+                        NumericTextboxComponent
+                    ]
+                }]
+        }] });
+
+class DropdowntreeComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.childrenField = '';
+        this.hasDefaultValue = false;
+        this.isDisabled = false;
+        this.listHeight = 330;
+        this.placeholder = "";
+        this.clearButton = false;
+        this.expandBy = '';
+        this.expandedKeys = [];
+        this.data = [];
+        this.textField = '';
+        this.readonly = false;
+        this.valueField = '';
+        this.footerBtnLabel = '';
+        this.footerBtnIcon = '';
+        this.hasFooterBtn = false;
+        this.rounded = "medium";
+        this.fillMode = "solid";
+        this.size = "medium";
+        this.control = new FormControl();
+        this.selectedItem = new EventEmitter();
+        this.buttonClick = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if (changes['isDisabled']) {
+            if (changes['isDisabled']?.currentValue) {
+                this.control.disable();
+            }
+            else {
+                this.control.enable();
+            }
+        }
+    }
+    ngOnInit() { }
+    valueChange(e) {
+        this.hasDefaultValue = true;
+        this.selectedItem.emit(e);
+    }
+    onButtonClick(e) {
+        this.buttonClick.emit(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdowntreeComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdowntreeComponent, selector: "lib-dropdowntree", inputs: { childrenField: "childrenField", hasDefaultValue: "hasDefaultValue", isDisabled: "isDisabled", listHeight: "listHeight", value: "value", placeholder: "placeholder", clearButton: "clearButton", expandBy: "expandBy", expandedKeys: "expandedKeys", data: "data", textField: "textField", readonly: "readonly", valueField: "valueField", footerBtnLabel: "footerBtnLabel", footerBtnIcon: "footerBtnIcon", hasFooterBtn: "hasFooterBtn", rounded: "rounded", fillMode: "fillMode", size: "size", control: "control" }, outputs: { selectedItem: "selectedItem", buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "<kendo-dropdowntree kendoDropDownTreeExpandable [kendoDropDownTreeHierarchyBinding]=\"data\"\n  [childrenField]=\"childrenField\" [textField]=\"textField\" [valueField]=\"valueField\"\n  class=\"dropdown\" (valueChange)=\"valueChange($event)\" [placeholder]=\"placeholder\" [ngModel]=\"value\"\n  [listHeight]=\"listHeight\" [expandBy]=\"expandBy\" [(expandedKeys)]=\"expandedKeys\" [clearButton]=\"clearButton\"\n  [rounded]=\"rounded\" [size]=\"size\" [fillMode]=\"fillMode\" [readonly]=\"readonly\" [formControl]=\"control\">\n\n  <ng-template kendoDropDownTreeNodeTemplate let-dataItem>\n    <img *ngIf=\"dataItem.imageUrl && dataItem.imageUrl.length > 0\" [src]=\"dataItem.imageUrl\" width=\"24\" height=\"24\"\n      [alt]=\"dataItem.imageUrl\" class=\"image\" />\n    {{ dataItem.text }}\n  </ng-template>\n\n  <ng-template *ngIf=\"hasDefaultValue; else myTemplate\" kendoDropDownTreeValueTemplate let-dataItem>\n    <img *ngIf=\"dataItem.imageUrl && dataItem.imageUrl.length > 0\" [src]=\"dataItem.imageUrl\" width=\"24\" height=\"24\"\n      [alt]=\"dataItem.imageUrl\" class=\"image\" />\n    {{ dataItem.text }}\n  </ng-template>\n\n  <ng-template kendoDropDownTreeItemTemplate let-dataItem #myTemplate>\n    {{ dataItem.text }}\n  </ng-template>\n\n  <ng-template *ngIf=\"hasFooterBtn\" kendoDropDownTreeFooterTemplate>\n    <lib-button [label]=\"footerBtnLabel\" fillMode=\"flat\" themeColor=\"primary\" (buttonClick)=\"onButtonClick($event)\"\n      iconPosition=\"before\" size=\"medium\" [iconName]=\"footerBtnIcon\" fontType=\"P_MULISH_16_BOLD\"\n      class=\"footer-btn\"></lib-button>\n  </ng-template>\n\n</kendo-dropdowntree>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.dropdown{width:310px}.image{margin-right:10px;margin-bottom:2px}::ng-deep li .k-treeview-item{padding-top:8px}::ng-deep .k-treeview-md .k-treeview-leaf{width:284px}::ng-deep .k-treeview-item{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}::ng-deep li .k-treeview-item :hover{cursor:pointer}::ng-deep .footer-btn .k-button{height:34px;margin:6px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i3$2.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "component", type: i3$2.DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: ["icon", "svgIcon", "loading", "clearButton", "data", "value", "textField", "valueField", "valueDepth", "hasChildren", "fetchChildren", "placeholder", "popupSettings", "dataItem", "listHeight", "disabled", "readonly", "valuePrimitive", "tabindex", "size", "rounded", "fillMode", "itemDisabled", "isNodeExpanded", "isNodeVisible", "loadOnDemand", "filterable", "filter", "focusableId", "adaptiveMode", "title", "subtitle"], outputs: ["open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "focus", "blur", "valueChange", "filterChange"], exportAs: ["kendoDropDownTree"] }, { kind: "directive", type: i3$2.DropDownTreeHierarchyBindingDirective, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: ["kendoDropDownTreeHierarchyBinding"] }, { kind: "directive", type: i3$2.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { kind: "directive", type: i3$2.NodeTemplateDirective, selector: "[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton"], outputs: ["buttonClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdowntreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dropdowntree', template: "<kendo-dropdowntree kendoDropDownTreeExpandable [kendoDropDownTreeHierarchyBinding]=\"data\"\n  [childrenField]=\"childrenField\" [textField]=\"textField\" [valueField]=\"valueField\"\n  class=\"dropdown\" (valueChange)=\"valueChange($event)\" [placeholder]=\"placeholder\" [ngModel]=\"value\"\n  [listHeight]=\"listHeight\" [expandBy]=\"expandBy\" [(expandedKeys)]=\"expandedKeys\" [clearButton]=\"clearButton\"\n  [rounded]=\"rounded\" [size]=\"size\" [fillMode]=\"fillMode\" [readonly]=\"readonly\" [formControl]=\"control\">\n\n  <ng-template kendoDropDownTreeNodeTemplate let-dataItem>\n    <img *ngIf=\"dataItem.imageUrl && dataItem.imageUrl.length > 0\" [src]=\"dataItem.imageUrl\" width=\"24\" height=\"24\"\n      [alt]=\"dataItem.imageUrl\" class=\"image\" />\n    {{ dataItem.text }}\n  </ng-template>\n\n  <ng-template *ngIf=\"hasDefaultValue; else myTemplate\" kendoDropDownTreeValueTemplate let-dataItem>\n    <img *ngIf=\"dataItem.imageUrl && dataItem.imageUrl.length > 0\" [src]=\"dataItem.imageUrl\" width=\"24\" height=\"24\"\n      [alt]=\"dataItem.imageUrl\" class=\"image\" />\n    {{ dataItem.text }}\n  </ng-template>\n\n  <ng-template kendoDropDownTreeItemTemplate let-dataItem #myTemplate>\n    {{ dataItem.text }}\n  </ng-template>\n\n  <ng-template *ngIf=\"hasFooterBtn\" kendoDropDownTreeFooterTemplate>\n    <lib-button [label]=\"footerBtnLabel\" fillMode=\"flat\" themeColor=\"primary\" (buttonClick)=\"onButtonClick($event)\"\n      iconPosition=\"before\" size=\"medium\" [iconName]=\"footerBtnIcon\" fontType=\"P_MULISH_16_BOLD\"\n      class=\"footer-btn\"></lib-button>\n  </ng-template>\n\n</kendo-dropdowntree>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.dropdown{width:310px}.image{margin-right:10px;margin-bottom:2px}::ng-deep li .k-treeview-item{padding-top:8px}::ng-deep .k-treeview-md .k-treeview-leaf{width:284px}::ng-deep .k-treeview-item{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}::ng-deep li .k-treeview-item :hover{cursor:pointer}::ng-deep .footer-btn .k-button{height:34px;margin:6px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { childrenField: [{
+                type: Input
+            }], hasDefaultValue: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], listHeight: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], expandBy: [{
+                type: Input
+            }], expandedKeys: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], footerBtnLabel: [{
+                type: Input
+            }], footerBtnIcon: [{
+                type: Input
+            }], hasFooterBtn: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], selectedItem: [{
+                type: Output
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class DropdownTreeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DropdownTreeModule, declarations: [DropdowntreeComponent], imports: [CommonModule,
+            DropDownsModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TypographyModule,
+            ButtonModule], exports: [DropdowntreeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownTreeModule, imports: [CommonModule,
+            DropDownsModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TypographyModule,
+            ButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownTreeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DropdowntreeComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        DropDownsModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TypographyModule,
+                        ButtonModule,
+                    ],
+                    exports: [
+                        DropdowntreeComponent
+                    ]
+                }]
+        }] });
+
+class ClipboardComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.clipboardData = "";
+        this.tooltipPosition = 'top';
+        this.preCopyText = "Copy";
+        this.postCopyText = "Copied!";
+        this.tooltipText = "";
+    }
+    ngOnInit() {
+        this.tooltipText = this.preCopyText;
+    }
+    async copyToClipboard() {
+        if (!this.clipboardData || this.clipboardData.trim() === '') {
+            throw new Error('Text to copy is empty or invalid.');
+        }
+        await this.copy(this.clipboardData);
+        this.tooltipText = this.postCopyText;
+    }
+    /**
+     * Asynchronously copies text to the clipboard.
+     * @param clipboardData The text to be copied to the clipboard.
+     */
+    async copy(clipboardData) {
+        // Check if the modern Clipboard API is supported in the browser
+        if (window.navigator.clipboard) {
+            // If supported, use the modern copy method
+            await this.copyModern(clipboardData);
+            return;
+        }
+        // If not supported, fallback to the legacy copy method
+        await this.copyLegacy(clipboardData);
+    }
+    /**
+     * Asynchronously copies text to the clipboard using the modern Clipboard API.
+     * @param clipboardData The text to be copied to the clipboard.
+     */
+    async copyModern(clipboardData) {
+        try {
+            // Attempt to copy using the modern Clipboard API
+            await window.navigator.clipboard.writeText(clipboardData);
+        }
+        catch (err) {
+            // Handle any errors that occur during the copy operation
+            console.log("Error using the modern Clipboard API[window.navigator.clipboard.writeText]:\n", err);
+            // If there's an error, fall back to the legacy copy method
+            await this.copyLegacy(clipboardData);
+        }
+    }
+    /**
+     * Asynchronously copies text to the clipboard using a legacy method.
+     * @param clipboardData The text to be copied to the clipboard.
+     * @returns A Promise that resolves with a boolean indicating success.
+     */
+    async copyLegacy(clipboardData) {
+        return new Promise((resolve, reject) => {
+            try {
+                // Create a hidden textarea element off-screen
+                const el = document.createElement('textarea');
+                el.style.position = 'fixed';
+                el.style.left = '-9999px';
+                el.value = clipboardData;
+                // Append the element to the document body
+                document.body.appendChild(el);
+                // Select the text within the textarea and attempt to copy
+                el.select();
+                const copied = document.execCommand('copy');
+                // Clean up by removing the textarea element
+                document.body.removeChild(el);
+                // Resolve the Promise with a boolean indicating success
+                resolve(copied);
+            }
+            catch (err) {
+                // If there's an error during the legacy copy operation, reject the Promise
+                reject(err);
+            }
+        });
+    }
+    // Once mouse leave the action button reverting the tooltip to original state.
+    revertTooltipText() {
+        this.tooltipText = this.preCopyText;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClipboardComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ClipboardComponent, selector: "lib-clipboard", inputs: { clipboardData: "clipboardData", tooltipPosition: "tooltipPosition", preCopyText: "preCopyText", postCopyText: "postCopyText" }, ngImport: i0, template: "<lib-tooltip [callout]=\"true\" [position]=\"tooltipPosition\" [showOn]=\" !!tooltipText === false ? 'none' : 'hover' \">\n  <div class=\"clipboard\"  (click)=\"copyToClipboard()\" (mouseleave)=\"revertTooltipText()\">\n    <lib-icon name=\"copy\"></lib-icon>\n    <lib-typography defaultText=\"Copy\"></lib-typography>\n  </div>\n  <div class=\"cb-tooltip-text tooltip-content\">\n    {{tooltipText}}\n  </div>\n</lib-tooltip>\n", styles: [".clipboard{color:#3864f2;width:5.375rem;height:2.125rem;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:4px 12px;border-radius:.25rem;background-color:#ebecec;border:1px solid #e6eaec}.clipboard:hover{color:#174af0;background-color:#dcdddd;border:1px solid #e4e7eb}.clipboard:active{color:#0e3dd5}.clipboard lib-icon,.clipboard lib-typography{color:#222435}.clipboard lib-typography{padding-left:4px}.cb-tooltip-text{padding:.25rem}\n"], dependencies: [{ kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClipboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-clipboard', template: "<lib-tooltip [callout]=\"true\" [position]=\"tooltipPosition\" [showOn]=\" !!tooltipText === false ? 'none' : 'hover' \">\n  <div class=\"clipboard\"  (click)=\"copyToClipboard()\" (mouseleave)=\"revertTooltipText()\">\n    <lib-icon name=\"copy\"></lib-icon>\n    <lib-typography defaultText=\"Copy\"></lib-typography>\n  </div>\n  <div class=\"cb-tooltip-text tooltip-content\">\n    {{tooltipText}}\n  </div>\n</lib-tooltip>\n", styles: [".clipboard{color:#3864f2;width:5.375rem;height:2.125rem;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:4px 12px;border-radius:.25rem;background-color:#ebecec;border:1px solid #e6eaec}.clipboard:hover{color:#174af0;background-color:#dcdddd;border:1px solid #e4e7eb}.clipboard:active{color:#0e3dd5}.clipboard lib-icon,.clipboard lib-typography{color:#222435}.clipboard lib-typography{padding-left:4px}.cb-tooltip-text{padding:.25rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { clipboardData: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
+            }], preCopyText: [{
+                type: Input
+            }], postCopyText: [{
+                type: Input
+            }] } });
+
+class ClipboardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClipboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ClipboardModule, declarations: [ClipboardComponent], imports: [CommonModule,
+            TooltipModule,
+            IconModule,
+            TypographyModule], exports: [ClipboardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClipboardModule, imports: [CommonModule,
+            TooltipModule,
+            IconModule,
+            TypographyModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClipboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ClipboardComponent],
+                    imports: [
+                        CommonModule,
+                        TooltipModule,
+                        IconModule,
+                        TypographyModule
+                    ],
+                    exports: [ClipboardComponent]
+                }]
+        }] });
+
+const ALERT_TYPE = {
+    success: 'success',
+    error: 'error',
+    warning: 'warning',
+    info: 'information',
+};
+class AlertComponent {
+    get theType() {
+        return this.type;
+    }
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.type = ALERT_TYPE.info;
+        this.dismissed = new EventEmitter();
+        this.onClose = () => {
+            this.dismissed.emit();
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertComponent, selector: "lib-alert", inputs: { type: "type" }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "this.theType" } }, ngImport: i0, template: "<div class=\"icon\">\n  <lib-icon name=\"info\"></lib-icon>\n</div>\n<div>\n    <ng-content></ng-content>\n</div>\n<div class=\"close\" (click)=\"onClose()\">\n  <lib-icon name=\"close\" [fontSize]=\"20\"></lib-icon>\n</div>\n", styles: [":host{display:flex;border-radius:4px;padding:1.125rem 3rem 1.125rem 1rem;position:relative}:host .icon{margin-right:.5rem;display:flex;position:relative}:host.information{color:#003b6e;background-color:#b8d8f5}:host .close{font-weight:700;position:absolute;right:1rem;top:.75rem;cursor:pointer}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-alert', template: "<div class=\"icon\">\n  <lib-icon name=\"info\"></lib-icon>\n</div>\n<div>\n    <ng-content></ng-content>\n</div>\n<div class=\"close\" (click)=\"onClose()\">\n  <lib-icon name=\"close\" [fontSize]=\"20\"></lib-icon>\n</div>\n", styles: [":host{display:flex;border-radius:4px;padding:1.125rem 3rem 1.125rem 1rem;position:relative}:host .icon{margin-right:.5rem;display:flex;position:relative}:host.information{color:#003b6e;background-color:#b8d8f5}:host .close{font-weight:700;position:absolute;right:1rem;top:.75rem;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { type: [{
+                type: Input
+            }], dismissed: [{
+                type: Output
+            }], theType: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AlertModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [IconModule], exports: [AlertComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertModule, imports: [IconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AlertComponent],
+                    imports: [
+                        IconModule
+                    ],
+                    exports: [AlertComponent]
+                }]
+        }] });
+
+class MultiSelectDropdownComponent {
+    constructor(themesService) {
+        this.themesService = themesService;
+        this.label = "";
+        this.id = "sampleId";
+        this.data = [];
+        this.isDisabled = false;
+        this.clearButton = false;
+        this.fillMode = "solid";
+        this.checkboxes = true;
+        this.filterable = true;
+        this.placeholder = "";
+        this.readonly = false;
+        this.rounded = "medium";
+        this.size = "medium";
+        this.valuePrimitive = true;
+        this.modelChange = new EventEmitter();
+        this.control = new FormControl();
+        this.fontType = 'P_MULISH_14_REGULAR';
+        this.focus = false;
+        this.autoClose = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['isDisabled']) {
+            if (changes['isDisabled']?.currentValue) {
+                this.control.disable();
+            }
+            else {
+                this.control.enable();
+            }
+        }
+    }
+    ngAfterViewInit() {
+        if (this.focus) {
+            this.multiSelect.focus();
+        }
+    }
+    emitModelChange(ev) {
+        this.modelChange.emit(ev);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectDropdownComponent, deps: [{ token: i1$1.ThemesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectDropdownComponent, selector: "lib-multi-select-dropdown", inputs: { label: "label", id: "id", data: "data", isDisabled: "isDisabled", clearButton: "clearButton", fillMode: "fillMode", checkboxes: "checkboxes", filterable: "filterable", placeholder: "placeholder", readonly: "readonly", rounded: "rounded", size: "size", textField: "textField", valueField: "valueField", model: "model", valuePrimitive: "valuePrimitive", control: "control", fontType: "fontType", focus: "focus", autoClose: "autoClose" }, outputs: { modelChange: "modelChange" }, viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"multiselect\">\n  <span *ngIf=\"label.length > 0\">\n    <label class=\"multiselect-label\" for=\"{{ id }}\">\n      <lib-typography [defaultText]=\"label\" [type]=\"fontType\">\n      </lib-typography>\n    </label>\n    &nbsp;\n  </span>\n  <kendo-multiselect #multiSelect [checkboxes]=\"checkboxes\" [autoClose]=\"autoClose\" [id]=\"id\" [data]=\"data\" [(ngModel)]=\"model\"\n    [textField]=\"textField\" [valueField]=\"valueField\" [valuePrimitive]=\"valuePrimitive\" [fillMode]=\"fillMode\"\n    [clearButton]=\"clearButton\" [filterable]=\"filterable\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n    [rounded]=\"rounded\" [size]=\"size\" [formControl]=\"control\"\n    (ngModelChange)=\"emitModelChange($event)\"></kendo-multiselect>\n</span>\n", styles: [".multiselect-label{margin-bottom:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "title", "subtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-multi-select-dropdown', template: "<span class=\"multiselect\">\n  <span *ngIf=\"label.length > 0\">\n    <label class=\"multiselect-label\" for=\"{{ id }}\">\n      <lib-typography [defaultText]=\"label\" [type]=\"fontType\">\n      </lib-typography>\n    </label>\n    &nbsp;\n  </span>\n  <kendo-multiselect #multiSelect [checkboxes]=\"checkboxes\" [autoClose]=\"autoClose\" [id]=\"id\" [data]=\"data\" [(ngModel)]=\"model\"\n    [textField]=\"textField\" [valueField]=\"valueField\" [valuePrimitive]=\"valuePrimitive\" [fillMode]=\"fillMode\"\n    [clearButton]=\"clearButton\" [filterable]=\"filterable\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n    [rounded]=\"rounded\" [size]=\"size\" [formControl]=\"control\"\n    (ngModelChange)=\"emitModelChange($event)\"></kendo-multiselect>\n</span>\n", styles: [".multiselect-label{margin-bottom:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], checkboxes: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], valuePrimitive: [{
+                type: Input
+            }], modelChange: [{
+                type: Output
+            }], control: [{
+                type: Input
+            }], fontType: [{
+                type: Input
+            }], focus: [{
+                type: Input
+            }], autoClose: [{
+                type: Input
+            }], multiSelect: [{
+                type: ViewChild,
+                args: ['multiSelect', { static: false }]
+            }] } });
+
+class MultiSelectDropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectDropdownModule, declarations: [MultiSelectDropdownComponent], imports: [CommonModule,
+            DropDownsModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TypographyModule], exports: [MultiSelectDropdownComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectDropdownModule, imports: [CommonModule,
+            DropDownsModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TypographyModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MultiSelectDropdownComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        DropDownsModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TypographyModule,
+                    ],
+                    exports: [
+                        MultiSelectDropdownComponent
+                    ],
+                }]
+        }] });
+
+class ToastNotificationModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ToastNotificationModule, imports: [CommonModule, NotificationModule$1] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastNotificationModule, providers: [IconsService, NotificationService], imports: [CommonModule, NotificationModule$1] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastNotificationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, NotificationModule$1],
+                    providers: [IconsService, NotificationService],
+                }]
+        }] });
+
+class AtomsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AtomsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AtomsModule, imports: [AlertModule,
+            AngularPopupModule,
+            AvatarModule,
+            BreadcrumbModule,
+            ButtonModule,
+            ButtonGroupModule,
+            CheckboxModule,
+            CommonModule,
+            ContainerModule,
+            DropdownModule,
+            DropdownTreeModule,
+            ExpansionPanelModule,
+            FormsModule,
+            IconModule,
+            LabelsModule,
+            LoadingSpinnerModule,
+            MultiSelectDropdownModule,
+            NotificationModule,
+            NumericTextboxModule,
+            ProgressBarsModule,
+            RadioButtonModule,
+            ReactiveFormsModule,
+            ReportSummaryModule,
+            SearchBoxModule,
+            SliderModule,
+            StyleTokensModule,
+            TextAreaModule,
+            TextboxModule,
+            TimeSchedulerModule,
+            ToastNotificationModule,
+            TooltipModule,
+            TypographyModule,
+            ClipboardModule], exports: [AlertModule,
+            AngularPopupModule,
+            AvatarModule,
+            BreadcrumbModule,
+            ButtonModule,
+            ButtonGroupModule,
+            CheckboxModule,
+            ContainerModule,
+            DropdownModule,
+            DropdownTreeModule,
+            ExpansionPanelModule,
+            IconModule,
+            LabelsModule,
+            LoadingSpinnerModule,
+            MultiSelectDropdownModule,
+            NotificationModule,
+            NumericTextboxModule,
+            ProgressBarsModule,
+            RadioButtonModule,
+            ReportSummaryModule,
+            SearchBoxModule,
+            SliderModule,
+            StyleTokensModule,
+            TextAreaModule,
+            TextboxModule,
+            TimeSchedulerModule,
+            ToastNotificationModule,
+            TooltipModule,
+            TypographyModule,
+            ClipboardModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AtomsModule, imports: [AlertModule,
+            AngularPopupModule,
+            AvatarModule,
+            BreadcrumbModule,
+            ButtonModule,
+            ButtonGroupModule,
+            CheckboxModule,
+            CommonModule,
+            ContainerModule,
+            DropdownModule,
+            DropdownTreeModule,
+            ExpansionPanelModule,
+            FormsModule,
+            IconModule,
+            LabelsModule,
+            LoadingSpinnerModule,
+            MultiSelectDropdownModule,
+            NotificationModule,
+            NumericTextboxModule,
+            ProgressBarsModule,
+            RadioButtonModule,
+            ReactiveFormsModule,
+            ReportSummaryModule,
+            SearchBoxModule,
+            SliderModule,
+            StyleTokensModule,
+            TextAreaModule,
+            TextboxModule,
+            TimeSchedulerModule,
+            ToastNotificationModule,
+            TooltipModule,
+            TypographyModule,
+            ClipboardModule, AlertModule,
+            AngularPopupModule,
+            AvatarModule,
+            BreadcrumbModule,
+            ButtonModule,
+            ButtonGroupModule,
+            CheckboxModule,
+            ContainerModule,
+            DropdownModule,
+            DropdownTreeModule,
+            ExpansionPanelModule,
+            IconModule,
+            LabelsModule,
+            LoadingSpinnerModule,
+            MultiSelectDropdownModule,
+            NotificationModule,
+            NumericTextboxModule,
+            ProgressBarsModule,
+            RadioButtonModule,
+            ReportSummaryModule,
+            SearchBoxModule,
+            SliderModule,
+            StyleTokensModule,
+            TextAreaModule,
+            TextboxModule,
+            TimeSchedulerModule,
+            ToastNotificationModule,
+            TooltipModule,
+            TypographyModule,
+            ClipboardModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AtomsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        AlertModule,
+                        AngularPopupModule,
+                        AvatarModule,
+                        BreadcrumbModule,
+                        ButtonModule,
+                        ButtonGroupModule,
+                        CheckboxModule,
+                        CommonModule,
+                        ContainerModule,
+                        DropdownModule,
+                        DropdownTreeModule,
+                        ExpansionPanelModule,
+                        FormsModule,
+                        IconModule,
+                        LabelsModule,
+                        LoadingSpinnerModule,
+                        MultiSelectDropdownModule,
+                        NotificationModule,
+                        NumericTextboxModule,
+                        ProgressBarsModule,
+                        RadioButtonModule,
+                        ReactiveFormsModule,
+                        ReportSummaryModule,
+                        SearchBoxModule,
+                        SliderModule,
+                        StyleTokensModule,
+                        TextAreaModule,
+                        TextboxModule,
+                        TimeSchedulerModule,
+                        ToastNotificationModule,
+                        TooltipModule,
+                        TypographyModule,
+                        ClipboardModule
+                    ],
+                    exports: [
+                        AlertModule,
+                        AngularPopupModule,
+                        AvatarModule,
+                        BreadcrumbModule,
+                        ButtonModule,
+                        ButtonGroupModule,
+                        CheckboxModule,
+                        ContainerModule,
+                        DropdownModule,
+                        DropdownTreeModule,
+                        ExpansionPanelModule,
+                        IconModule,
+                        LabelsModule,
+                        LoadingSpinnerModule,
+                        MultiSelectDropdownModule,
+                        NotificationModule,
+                        NumericTextboxModule,
+                        ProgressBarsModule,
+                        RadioButtonModule,
+                        ReportSummaryModule,
+                        SearchBoxModule,
+                        SliderModule,
+                        StyleTokensModule,
+                        TextAreaModule,
+                        TextboxModule,
+                        TimeSchedulerModule,
+                        ToastNotificationModule,
+                        TooltipModule,
+                        TypographyModule,
+                        ClipboardModule
+                    ],
+                }]
+        }] });
+
+class CardComponent {
+    constructor() {
+        this.width = '300px';
+        this.orientation = 'vertical';
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardComponent, selector: "lib-card", inputs: { width: "width", orientation: "orientation" }, ngImport: i0, template: "<kendo-card [width]=\"width\" [orientation]=\"orientation\">\n  <ng-content></ng-content>\n</kendo-card>\n", styles: [""], dependencies: [{ kind: "component", type: i2.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-card', template: "<kendo-card [width]=\"width\" [orientation]=\"orientation\">\n  <ng-content></ng-content>\n</kendo-card>\n" }]
+        }], propDecorators: { width: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }] } });
+
+class CardHeaderComponent {
+    constructor() {
+        this.title = "";
+        this.subtitle = "";
+        this.cardNumber = 0;
+        this.titleFont = 'H2_MULISH_24_BOLD';
+        this.subtitleFont = 'H5_MULISH_14_REGULAR';
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardHeaderComponent, selector: "lib-card-header", inputs: { title: "title", subtitle: "subtitle", cardNumber: "cardNumber", titleFont: "titleFont", subtitleFont: "subtitleFont" }, ngImport: i0, template: "<kendo-card-header class=\"k-hstack\">\n  <div *ngIf='cardNumber > 0' class=\"card-number\">{{cardNumber}}</div>\n  <div class=\"card-title\">\n    <lib-typography *ngIf=\"title.length > 0\" [type]=\"titleFont\"  [defaultText]=\"title\" kendoCardTitle></lib-typography>\n    <lib-typography *ngIf=\"subtitle.length > 0\" [type]=\"subtitleFont\" [defaultText]=\"subtitle\" kendoCardSubtitle></lib-typography>\n  </div>\n  <ng-content></ng-content>\n</kendo-card-header>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.card-title{display:flex;flex-direction:column}.k-card-header{align-items:center}.card-number{border-radius:85%;width:1.5rem;height:1.5rem;background:#000;color:#fff;text-align:center;justify-content:center;align-items:center;margin-top:.125rem;display:flex;font-size:1.125rem;font-weight:600;margin-right:1rem}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: i2.CardTitleDirective, selector: "[kendoCardTitle]" }, { kind: "directive", type: i2.CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-card-header', template: "<kendo-card-header class=\"k-hstack\">\n  <div *ngIf='cardNumber > 0' class=\"card-number\">{{cardNumber}}</div>\n  <div class=\"card-title\">\n    <lib-typography *ngIf=\"title.length > 0\" [type]=\"titleFont\"  [defaultText]=\"title\" kendoCardTitle></lib-typography>\n    <lib-typography *ngIf=\"subtitle.length > 0\" [type]=\"subtitleFont\" [defaultText]=\"subtitle\" kendoCardSubtitle></lib-typography>\n  </div>\n  <ng-content></ng-content>\n</kendo-card-header>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}.card-title{display:flex;flex-direction:column}.k-card-header{align-items:center}.card-number{border-radius:85%;width:1.5rem;height:1.5rem;background:#000;color:#fff;text-align:center;justify-content:center;align-items:center;margin-top:.125rem;display:flex;font-size:1.125rem;font-weight:600;margin-right:1rem}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], cardNumber: [{
+                type: Input
+            }], titleFont: [{
+                type: Input
+            }], subtitleFont: [{
+                type: Input
+            }] } });
+
+class CardFooterComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardFooterComponent, selector: "lib-card-footer", ngImport: i0, template: "<kendo-card-footer class=\"k-hstack\">\n  <ng-content></ng-content>\n</kendo-card-footer>\n", styles: [".k-card-footer{justify-content:space-between}\n"], dependencies: [{ kind: "component", type: i2.CardFooterComponent, selector: "kendo-card-footer" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-card-footer', template: "<kendo-card-footer class=\"k-hstack\">\n  <ng-content></ng-content>\n</kendo-card-footer>\n", styles: [".k-card-footer{justify-content:space-between}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class CardActionsComponent {
+    constructor() {
+        this.layout = 'stretched';
+        this.orientation = 'horizontal';
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardActionsComponent, selector: "lib-card-actions", inputs: { layout: "layout", orientation: "orientation" }, ngImport: i0, template: "<kendo-card-actions\n  [orientation]=\"orientation\"\n  [layout]=\"layout\">\n  <ng-content></ng-content>\n</kendo-card-actions>\n", styles: [""], dependencies: [{ kind: "component", type: i2.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-card-actions', template: "<kendo-card-actions\n  [orientation]=\"orientation\"\n  [layout]=\"layout\">\n  <ng-content></ng-content>\n</kendo-card-actions>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { layout: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }] } });
+
+class CardBodyComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardBodyComponent, selector: "lib-card-body", ngImport: i0, template: "<kendo-card-body>\n  <ng-content></ng-content>\n</kendo-card-body>\n", styles: [""], dependencies: [{ kind: "component", type: i2.CardBodyComponent, selector: "kendo-card-body" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-card-body', template: "<kendo-card-body>\n  <ng-content></ng-content>\n</kendo-card-body>\n" }]
+        }], ctorParameters: function () { return []; } });
+
+class CardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CardModule, declarations: [CardComponent,
+            CardHeaderComponent,
+            CardFooterComponent,
+            CardActionsComponent,
+            CardBodyComponent], imports: [CommonModule, LayoutModule, TypographyModule], exports: [CardComponent,
+            CardHeaderComponent,
+            CardFooterComponent,
+            CardActionsComponent,
+            CardBodyComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardModule, imports: [CommonModule, LayoutModule, TypographyModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CardComponent,
+                        CardHeaderComponent,
+                        CardFooterComponent,
+                        CardActionsComponent,
+                        CardBodyComponent
+                    ],
+                    imports: [CommonModule, LayoutModule, TypographyModule],
+                    exports: [
+                        CardComponent,
+                        CardHeaderComponent,
+                        CardFooterComponent,
+                        CardActionsComponent,
+                        CardBodyComponent
+                    ],
+                }]
+        }] });
+
+class DialogComponent {
+    constructor(elt, ref, renderer) {
+        this.elt = elt;
+        this.ref = ref;
+        this.renderer = renderer;
+        this.opened = true;
+    }
+    ngOnInit() { }
+    ngAfterViewInit() {
+        //detect changes
+        this.ref.detectChanges();
+        // swap the node positions in ng-content to match the original kendo dom structure
+        const contentRefElement = this.contentRef?.nativeElement;
+        const dialogRefElement = this.dialogRef?.nativeElement;
+        const parentDialogElement = dialogRefElement.getElementsByClassName('k-dialog');
+        const libActionsBar = contentRefElement.getElementsByTagName('lib-dialog-actions');
+        const libTitleBar = dialogRefElement.getElementsByTagName('lib-dialog-titlebar');
+        this.renderer.insertBefore(parentDialogElement[0], libTitleBar[0].childNodes[0], contentRefElement.parentElement);
+        this.renderer.appendChild(parentDialogElement[0], libActionsBar[0].childNodes[0]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogComponent, selector: "lib-dialog", inputs: { width: "width", height: "height", minWidth: "minWidth", maxWidth: "maxWidth", minHeight: "minHeight", maxHeight: "maxHeight", opened: "opened" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }, { propertyName: "dialogRef", first: true, predicate: ["dialogRef"], descendants: true }], ngImport: i0, template: "<div #dialogRef>\n  <kendo-dialog\n    *ngIf=\"opened\"\n    [width]=\"width\"\n    [height]=\"height\"\n    [minWidth]=\"minWidth\"\n    [maxWidth]=\"maxWidth\"\n    [minHeight]=\"minHeight\"\n    [maxHeight]=\"maxHeight\">\n    <div #contentRef>\n      <ng-content></ng-content>\n    </div>\n  </kendo-dialog>\n</div>\n", styles: [":host ::ng-deep .dialog-title .k-button{display:none!important}:host ::ng-deep .k-window-content,:host ::ng-deep .k-prompt-container{padding:1.5rem}:host ::ng-deep .k-window-titlebar{padding:1rem 1.5rem}:host ::ng-deep .k-window-actions{margin:0;border-width:1px 0 0;padding:1rem 1.5rem;position:sticky;z-index:100;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$6.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dialog', template: "<div #dialogRef>\n  <kendo-dialog\n    *ngIf=\"opened\"\n    [width]=\"width\"\n    [height]=\"height\"\n    [minWidth]=\"minWidth\"\n    [maxWidth]=\"maxWidth\"\n    [minHeight]=\"minHeight\"\n    [maxHeight]=\"maxHeight\">\n    <div #contentRef>\n      <ng-content></ng-content>\n    </div>\n  </kendo-dialog>\n</div>\n", styles: [":host ::ng-deep .dialog-title .k-button{display:none!important}:host ::ng-deep .k-window-content,:host ::ng-deep .k-prompt-container{padding:1.5rem}:host ::ng-deep .k-window-titlebar{padding:1rem 1.5rem}:host ::ng-deep .k-window-actions{margin:0;border-width:1px 0 0;padding:1rem 1.5rem;position:sticky;z-index:100;gap:1rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { contentRef: [{
+                type: ViewChild,
+                args: ['contentRef', { static: false }]
+            }], dialogRef: [{
+                type: ViewChild,
+                args: ['dialogRef', { static: false }]
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }] } });
+
+class DialogTitlebarComponent {
+    constructor(dialogComponent) {
+        this.dialogComponent = dialogComponent;
+        this.title = '';
+        this.titleFont = 'P_MULISH_14_REGULAR';
+        this.closeDialog = new EventEmitter();
+        this.hideCloseIcon = false;
+    }
+    ngOnInit() { }
+    close() {
+        this.closeDialog.emit();
+    }
+    ;
+    closeBtn() {
+        if (this.hideCloseIcon) {
+            return 'dialog-title';
+        }
+        return;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogTitlebarComponent, deps: [{ token: DialogComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogTitlebarComponent, selector: "lib-dialog-titlebar", inputs: { title: "title", titleFont: "titleFont", hideCloseIcon: "hideCloseIcon" }, outputs: { closeDialog: "closeDialog" }, ngImport: i0, template: "<kendo-dialog-titlebar (close)=\"close()\" [ngClass]=\"closeBtn()\">\n  <lib-typography\n    [defaultText]=\"title\"\n    [type]=\"titleFont\"\n  ></lib-typography>\n</kendo-dialog-titlebar>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$6.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogTitlebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dialog-titlebar', template: "<kendo-dialog-titlebar (close)=\"close()\" [ngClass]=\"closeBtn()\">\n  <lib-typography\n    [defaultText]=\"title\"\n    [type]=\"titleFont\"\n  ></lib-typography>\n</kendo-dialog-titlebar>\n" }]
+        }], ctorParameters: function () { return [{ type: DialogComponent }]; }, propDecorators: { title: [{
+                type: Input
+            }], titleFont: [{
+                type: Input
+            }], closeDialog: [{
+                type: Output
+            }], hideCloseIcon: [{
+                type: Input
+            }] } });
+
+class DialogActionsComponent {
+    constructor() {
+        this.buttonLayout = 'start';
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogActionsComponent, selector: "lib-dialog-actions", inputs: { buttonLayout: "buttonLayout" }, ngImport: i0, template: "<kendo-dialog-actions [layout]=\"buttonLayout\">\n  <ng-content></ng-content>\n</kendo-dialog-actions>\n", styles: [""], dependencies: [{ kind: "component", type: i2$6.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dialog-actions', template: "<kendo-dialog-actions [layout]=\"buttonLayout\">\n  <ng-content></ng-content>\n</kendo-dialog-actions>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { buttonLayout: [{
+                type: Input
+            }] } });
+
+class DialogModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DialogModule, declarations: [DialogComponent,
+            DialogTitlebarComponent,
+            DialogActionsComponent], imports: [CommonModule,
+            DialogsModule,
+            ButtonsModule,
+            TypographyModule], exports: [DialogComponent, DialogTitlebarComponent, DialogActionsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogModule, imports: [CommonModule,
+            DialogsModule,
+            ButtonsModule,
+            TypographyModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DialogComponent,
+                        DialogTitlebarComponent,
+                        DialogActionsComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        DialogsModule,
+                        ButtonsModule,
+                        TypographyModule
+                    ],
+                    exports: [DialogComponent, DialogTitlebarComponent, DialogActionsComponent],
+                }]
+        }] });
+
+class GridLayoutComponent {
+    constructor() {
+        this.horizontalAlign = "stretch";
+        this.verticalAlign = "stretch";
+        this.rowGap = 0;
+        this.columnGap = 0;
+        this.rows = [];
+        this.columns = [];
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridLayoutComponent, selector: "lib-grid-layout", inputs: { horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", rowGap: "rowGap", columnGap: "columnGap", rows: "rows", columns: "columns" }, ngImport: i0, template: "<kendo-gridlayout\n  [align]=\"{ horizontal: horizontalAlign, vertical: verticalAlign }\"\n  [rows]=\"rows\"\n  [cols]=\"columns\"\n  [gap]=\"{ rows: rowGap, cols: columnGap }\"\n>\n  <ng-content></ng-content>\n</kendo-gridlayout>\n", styles: [""], dependencies: [{ kind: "component", type: i2.GridLayoutComponent, selector: "kendo-gridlayout", inputs: ["rows", "cols", "gap", "align"], exportAs: ["kendoGridLayout"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-grid-layout', template: "<kendo-gridlayout\n  [align]=\"{ horizontal: horizontalAlign, vertical: verticalAlign }\"\n  [rows]=\"rows\"\n  [cols]=\"columns\"\n  [gap]=\"{ rows: rowGap, cols: columnGap }\"\n>\n  <ng-content></ng-content>\n</kendo-gridlayout>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { horizontalAlign: [{
+                type: Input
+            }], verticalAlign: [{
+                type: Input
+            }], rowGap: [{
+                type: Input
+            }], columnGap: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }] } });
+
+class GridLayoutItemComponent {
+    constructor(renderer, elRef) {
+        this.renderer = renderer;
+        this.elRef = elRef;
+        this.rowSpan = 1;
+        this.colSpan = 1;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        // access the DOM. get the element to unwrap
+        const el = this.elRef.nativeElement; // app-page
+        const parent = this.renderer.parentNode(this.elRef.nativeElement); // parent
+        // move children to parent (everything is moved including comments which angular depends on)
+        while (el.firstChild) { // this line doesn't work with server-rendering
+            this.renderer.appendChild(parent, el.firstChild);
+        }
+        // remove empty element from parent - true to signal that this removed element is a host element
+        this.renderer.removeChild(parent, el, true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutItemComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridLayoutItemComponent, selector: "lib-grid-layout-item", inputs: { rowNumber: "rowNumber", columnNumber: "columnNumber", rowSpan: "rowSpan", colSpan: "colSpan" }, ngImport: i0, template: "<kendo-gridlayout-item\n  [row]=\"rowNumber\"\n  [col]=\"columnNumber\"\n  [rowSpan]=\"rowSpan\"\n  [colSpan]=\"colSpan\"\n>\n  <ng-content></ng-content>\n</kendo-gridlayout-item>\n", styles: [""], dependencies: [{ kind: "component", type: i2.GridLayoutItemComponent, selector: "kendo-gridlayout-item", inputs: ["row", "col", "rowSpan", "colSpan"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-grid-layout-item', template: "<kendo-gridlayout-item\n  [row]=\"rowNumber\"\n  [col]=\"columnNumber\"\n  [rowSpan]=\"rowSpan\"\n  [colSpan]=\"colSpan\"\n>\n  <ng-content></ng-content>\n</kendo-gridlayout-item>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { rowNumber: [{
+                type: Input
+            }], columnNumber: [{
+                type: Input
+            }], rowSpan: [{
+                type: Input
+            }], colSpan: [{
+                type: Input
+            }] } });
+
+class GridLayoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutModule, declarations: [GridLayoutComponent,
+            GridLayoutItemComponent], imports: [CommonModule,
+            LayoutModule], exports: [GridLayoutComponent,
+            GridLayoutItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutModule, imports: [CommonModule,
+            LayoutModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        GridLayoutComponent,
+                        GridLayoutItemComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        LayoutModule
+                    ],
+                    exports: [
+                        GridLayoutComponent,
+                        GridLayoutItemComponent
+                    ]
+                }]
+        }] });
+
+class TabstripTabComponent {
+    constructor() {
+        this.title = null;
+        this.customHeader = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabstripTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabstripTabComponent, selector: "lib-tabstrip-tab", inputs: { title: "title", customHeader: "customHeader" }, queries: [{ propertyName: "titleRef", first: true, predicate: ["titleRef"], descendants: true }, { propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabstripTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tabstrip-tab', template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], customHeader: [{
+                type: Input
+            }], titleRef: [{
+                type: ContentChild,
+                args: ['titleRef']
+            }], contentRef: [{
+                type: ContentChild,
+                args: ['contentRef']
+            }] } });
+
+class TabstripComponent {
+    constructor() {
+        this.height = "50";
+        this.alignment = "start";
+        this.position = "top";
+        this.onTabSelect = new EventEmitter();
+        this.selectedTab = 0;
+    }
+    onTabSelectEvent(e) {
+        this.onTabSelect.emit(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabstripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabstripComponent, selector: "lib-tabstrip", inputs: { height: "height", alignment: "alignment", position: "position", selectedTab: "selectedTab" }, outputs: { onTabSelect: "onTabSelect" }, queries: [{ propertyName: "tabstripTabComponents", predicate: TabstripTabComponent, descendants: true }], ngImport: i0, template: "<kendo-tabstrip\n  [tabPosition]=\"position\"\n  [tabAlignment]=\"alignment\"\n  [height]=\"height\"\n  (tabSelect)=\"onTabSelectEvent($event)\"\n  [keepTabContent]=\"true\"\n>\n  <kendo-tabstrip-tab\n    *ngFor=\"let tabstripTabComponent of tabstripTabComponents; let i = index\"\n    title=\"{{ tabstripTabComponent.title }}\"\n    [selected]=\"i == selectedTab\"\n  >\n    <ng-template kendoTabTitle *ngIf=\"tabstripTabComponent.customHeader\">\n      <ng-container *ngTemplateOutlet=\"tabstripTabComponent.titleRef\">\n      </ng-container>\n    </ng-template>\n    <ng-template kendoTabContent>\n      <ng-container *ngTemplateOutlet=\"tabstripTabComponent.contentRef\">\n      </ng-container>\n    </ng-template>\n  </kendo-tabstrip-tab>\n</kendo-tabstrip>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i2.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i2.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "directive", type: i2.TabTitleDirective, selector: "[kendoTabTitle]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabstripComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tabstrip', template: "<kendo-tabstrip\n  [tabPosition]=\"position\"\n  [tabAlignment]=\"alignment\"\n  [height]=\"height\"\n  (tabSelect)=\"onTabSelectEvent($event)\"\n  [keepTabContent]=\"true\"\n>\n  <kendo-tabstrip-tab\n    *ngFor=\"let tabstripTabComponent of tabstripTabComponents; let i = index\"\n    title=\"{{ tabstripTabComponent.title }}\"\n    [selected]=\"i == selectedTab\"\n  >\n    <ng-template kendoTabTitle *ngIf=\"tabstripTabComponent.customHeader\">\n      <ng-container *ngTemplateOutlet=\"tabstripTabComponent.titleRef\">\n      </ng-container>\n    </ng-template>\n    <ng-template kendoTabContent>\n      <ng-container *ngTemplateOutlet=\"tabstripTabComponent.contentRef\">\n      </ng-container>\n    </ng-template>\n  </kendo-tabstrip-tab>\n</kendo-tabstrip>\n" }]
+        }], propDecorators: { height: [{
+                type: Input
+            }], alignment: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], onTabSelect: [{
+                type: Output
+            }], selectedTab: [{
+                type: Input
+            }], tabstripTabComponents: [{
+                type: ContentChildren,
+                args: [TabstripTabComponent, { descendants: true }]
+            }] } });
+
+class TabstripModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabstripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TabstripModule, declarations: [TabstripComponent,
+            TabstripTabComponent], imports: [CommonModule,
+            LayoutModule], exports: [TabstripComponent,
+            TabstripTabComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabstripModule, imports: [CommonModule,
+            LayoutModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabstripModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TabstripComponent,
+                        TabstripTabComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        LayoutModule
+                    ],
+                    exports: [
+                        TabstripComponent,
+                        TabstripTabComponent
+                    ]
+                }]
+        }] });
+
+class SidebarComponent {
+    constructor() {
+        this.isSidebarOpen = true;
+        this.sideNavbarMenus = [];
+        this.routeSideNavItem = new EventEmitter();
+    }
+    ngOnInit() {
+        console.log("Sidebar loaded successfully!");
+    }
+    selectSidenav(event, selectedMenu) {
+        event.stopPropagation();
+        // if (selectedMenu.submenus && selectedMenu.submenus?.length > 0) {
+        //   this.toggleSubmenus(event);
+        // }
+        // deactivate all nav
+        this.sideNavbarMenus.forEach(function (menu) {
+            if (menu.submenus && menu.submenus?.length > 0) {
+                menu.submenus.forEach(submenu => (submenu.active = false));
+            }
+            menu.active = false;
+        });
+        // activate the nav the user has clicked on.
+        selectedMenu.active = true;
+        this.routeSideNavItem.emit(selectedMenu);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SidebarComponent, selector: "lib-sidebar", inputs: { isSidebarOpen: "isSidebarOpen", sideNavbarMenus: "sideNavbarMenus" }, outputs: { routeSideNavItem: "routeSideNavItem" }, ngImport: i0, template: "<div class=\"sidebar\" [ngClass]=\"{'open': isSidebarOpen}\">\n  <ul class=\"nav-list\">\n    <li *ngFor=\"let menu of sideNavbarMenus\" (click)=\"selectSidenav($event, menu)\" [class.hidden]=\"!menu.visible\">\n      <a [class.active]=\"menu.active\">\n        <i class=\"material-icons-outlined icon-size\">{{menu.icon}}</i>\n        <lib-typography class=\"links_name\" defaultText={{menu.name}} type=\"BASE_TEXT_MULISH\"></lib-typography>\n        <i *ngIf=\"menu.submenus?.length\" class=\"material-icons submenu-arrow\">keyboard_arrow_down</i>\n      </a>\n\n      <!-- <ul *ngIf=\"menu.submenus?.length\" class=\"submenu\">\n        <li *ngFor=\"let submenu of menu.submenus\" (click)=\"selectSidenav($event, submenu)\"\n          [class.hidden]=\"!submenu.visible\">\n          <a routerLink=\"{{submenu.route}}\" [class.active]=\"submenu.active\">\n            <lib-tooltip title=\"{{submenu.name}}\" showOn=\"hover\">\n              <i class=\"material-icons-outlined\">{{submenu.icon}}</i>\n            </lib-tooltip>\n            <lib-typography class=\"links_name\" defaultText={{submenu.name}} type=\"H5_MULISH_14_REGULAR\">\n            </lib-typography>\n          </a>\n        </li>\n      </ul> -->\n\n    </li>\n  </ul>\n</div>\n", styles: ["@import\"material-icons/iconfont/material-icons.css\";.sidebar{position:fixed;left:0;top:69px;height:100vh;width:50px;padding:0;z-index:98;border-right:.5px solid #CCCCCC}.nav-list{padding:initial;height:100%}li{position:relative;list-style:none}li.hidden{display:none}a{display:flex;height:100%;width:100%;padding:12px 0 12px 16px;align-items:center;text-decoration:none;cursor:pointer}.links_name{white-space:nowrap;opacity:0;pointer-events:none}lib-tooltip{height:17px}i{padding-right:2px;font-size:18px}.submenu{list-style:none;margin:0;padding:0}.sidebar .submenu-arrow{display:none}.submenu:not(.show){display:none}.links_name,i{color:var(--font-color)}a.active .links_name,a:hover .links_name,a.active i,a:hover i{color:#3864f2!important}.sidebar.open{width:199px;overflow:hidden}.sidebar.open .links_name{opacity:1;pointer-events:auto;margin-left:16px}.sidebar.open .submenu-arrow{display:block;margin-left:auto;padding-top:3px;padding-right:6px}.sidebar.open .submenu a{padding-left:2rem}.icon-size{width:20px!important;height:18px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-sidebar', template: "<div class=\"sidebar\" [ngClass]=\"{'open': isSidebarOpen}\">\n  <ul class=\"nav-list\">\n    <li *ngFor=\"let menu of sideNavbarMenus\" (click)=\"selectSidenav($event, menu)\" [class.hidden]=\"!menu.visible\">\n      <a [class.active]=\"menu.active\">\n        <i class=\"material-icons-outlined icon-size\">{{menu.icon}}</i>\n        <lib-typography class=\"links_name\" defaultText={{menu.name}} type=\"BASE_TEXT_MULISH\"></lib-typography>\n        <i *ngIf=\"menu.submenus?.length\" class=\"material-icons submenu-arrow\">keyboard_arrow_down</i>\n      </a>\n\n      <!-- <ul *ngIf=\"menu.submenus?.length\" class=\"submenu\">\n        <li *ngFor=\"let submenu of menu.submenus\" (click)=\"selectSidenav($event, submenu)\"\n          [class.hidden]=\"!submenu.visible\">\n          <a routerLink=\"{{submenu.route}}\" [class.active]=\"submenu.active\">\n            <lib-tooltip title=\"{{submenu.name}}\" showOn=\"hover\">\n              <i class=\"material-icons-outlined\">{{submenu.icon}}</i>\n            </lib-tooltip>\n            <lib-typography class=\"links_name\" defaultText={{submenu.name}} type=\"H5_MULISH_14_REGULAR\">\n            </lib-typography>\n          </a>\n        </li>\n      </ul> -->\n\n    </li>\n  </ul>\n</div>\n", styles: ["@import\"material-icons/iconfont/material-icons.css\";.sidebar{position:fixed;left:0;top:69px;height:100vh;width:50px;padding:0;z-index:98;border-right:.5px solid #CCCCCC}.nav-list{padding:initial;height:100%}li{position:relative;list-style:none}li.hidden{display:none}a{display:flex;height:100%;width:100%;padding:12px 0 12px 16px;align-items:center;text-decoration:none;cursor:pointer}.links_name{white-space:nowrap;opacity:0;pointer-events:none}lib-tooltip{height:17px}i{padding-right:2px;font-size:18px}.submenu{list-style:none;margin:0;padding:0}.sidebar .submenu-arrow{display:none}.submenu:not(.show){display:none}.links_name,i{color:var(--font-color)}a.active .links_name,a:hover .links_name,a.active i,a:hover i{color:#3864f2!important}.sidebar.open{width:199px;overflow:hidden}.sidebar.open .links_name{opacity:1;pointer-events:auto;margin-left:16px}.sidebar.open .submenu-arrow{display:block;margin-left:auto;padding-top:3px;padding-right:6px}.sidebar.open .submenu a{padding-left:2rem}.icon-size{width:20px!important;height:18px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { isSidebarOpen: [{
+                type: Input
+            }], sideNavbarMenus: [{
+                type: Input
+            }], routeSideNavItem: [{
+                type: Output
+            }] } });
+
+class SidebarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SidebarModule, declarations: [SidebarComponent], imports: [CommonModule,
+            TypographyModule,
+            TooltipModule], exports: [SidebarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarModule, imports: [CommonModule,
+            TypographyModule,
+            TooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SidebarComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        TypographyModule,
+                        TooltipModule
+                    ],
+                    exports: [
+                        SidebarComponent
+                    ]
+                }]
+        }] });
+
+class LibGridComponent {
+    constructor() {
+        this.gridData = [];
+        this.columnData = [];
+        this.pageSize = 0;
+        this.pageable = false;
+        this.sortable = false;
+        this.groupable = false;
+        this.reorderable = false;
+        this.resizable = false;
+        this.checkBoxWidth = 28;
+        this.checkBoxColumnResizable = false;
+        this.checkBoxColumnMenu = false;
+        this.checkBoxColumnShowSelectedAll = true;
+        this.checkBoxRequired = false;
+        this.columnMenu = false;
+        this.mode = 'multiple';
+        this.checkboxOnly = true;
+        this.dragColumns = false;
+        this.navigable = true;
+        this.gridRowSelectByValue = '';
+        this.noRecordsContent = 'No Records Available';
+        this.selectedRowData = new EventEmitter();
+        this.showToolbar = false;
+        this.selectableSettings = {};
+        this.kebabList = [];
+        this.showKebab = false;
+        this.rowDetails = new EventEmitter();
+        this.kebabItemClick = new EventEmitter();
+        this.icon = moreVerticalIcon;
+        this.kebabColumnWidth = 60;
+        this.data = [];
+        this.rowDataOfClickedCell = new EventEmitter();
+        this.preSelected = [];
+        this.preSelectedRecords = [];
+        this.ignoreColumnCellClick = [];
+        this.allowColumnClick = true;
+        this.arrowDownIcon = chevronDownIcon;
+        this.arrowUpIcon = chevronUpIcon;
+        this.expandRowIndex = [];
+        this.customExpandRowColumn = true;
+        this.deleteIcon = trashIcon;
+        this.deleteColumnWidth = 42;
+        this.expandRowColumnWidth = 42;
+        this.deletedRowData = new EventEmitter();
+        this.expandRows = false;
+        this.showDeleteColumn = false;
+        this.setSelectableSettings();
+    }
+    ngOnChanges(changes) {
+        let prevPreSelected = JSON.stringify(changes['preSelected']?.previousValue);
+        let currPreSelected = JSON.stringify(changes['preSelected']?.currentValue);
+        // Check if there is a change in this.preSelected input
+        if (prevPreSelected !== currPreSelected) {
+            // Clear the this.preSelectedRecords array
+            this.preSelectedRecords = [];
+            for (let row = 0; row < changes['preSelected'].currentValue.length; row++) {
+                for (let col = 0; col < this.gridData.length; col++) {
+                    // Find the relevant record for a particular id
+                    if (this.gridData[col][this.gridRowSelectByValue] ===
+                        changes['preSelected'].currentValue[row]) {
+                        let found = false;
+                        // Check if this record is present in this.data, if yes don't push it in this.preSelectedRecords else push it
+                        for (let index = 0; index < this.data.length; index++) {
+                            if (this.data[index][this.gridRowSelectByValue] ===
+                                this.gridData[col][this.gridRowSelectByValue]) {
+                                found = true;
+                            }
+                        }
+                        if (!found) {
+                            this.preSelectedRecords.push(this.gridData[col]);
+                        }
+                    }
+                }
+            }
+            this.selectedRowData.emit(this.preSelectedRecords.concat(this.data));
+        }
+    }
+    ngAfterContentInit() {
+        if (!this.pageable) {
+            this.pageSize = this.gridData.length;
+        }
+    }
+    ngAfterViewInit() {
+        if (this.customExpandRowColumn) {
+            this.expandRowIndex.forEach((id) => {
+                this.grid.expandRow(id);
+            });
+        }
+    }
+    setSelectableSettings() {
+        if (this.checkboxOnly || this.mode === 'single') {
+            this.dragColumns = false;
+        }
+        this.selectableSettings = {
+            checkboxOnly: this.checkboxOnly,
+            mode: this.mode,
+            drag: this.dragColumns,
+        };
+    }
+    // We can extract data out of row number using below function
+    /* extract() {
+      this.extractDataItems = this.mySelection.map(idx => {
+        return this.gridData.find((data: { ProductID: number; }) => data.ProductID === idx);
+      });
+      console.log(this.extractDataItems)
+      this.selectedRowData.emit(this.extractDataItems);
+    } */
+    onSelectionChange(args) {
+        for (let row = 0; row < args.selectedRows.length; row++) {
+            var found = false;
+            for (let col = 0; col < this.data.length; col++) {
+                if (this.data[col][this.gridRowSelectByValue] ===
+                    args.selectedRows[row].dataItem[this.gridRowSelectByValue]) {
+                    found = true;
+                }
+            }
+            if (!found) {
+                this.data.push(args.selectedRows[row].dataItem);
+            }
+        }
+        if (args.deselectedRows.length !== 0) {
+            for (let row = 0; row < args.deselectedRows.length; row++) {
+                for (let col = 0; col < this.data.length; col++) {
+                    if (this.data[col][this.gridRowSelectByValue] ===
+                        args.deselectedRows[row].dataItem[this.gridRowSelectByValue]) {
+                        this.data.splice(col, 1);
+                    }
+                }
+                for (let col = 0; col < this.preSelectedRecords.length; col++) {
+                    if (this.preSelectedRecords[col][this.gridRowSelectByValue] ===
+                        args.deselectedRows[row].dataItem[this.gridRowSelectByValue]) {
+                        this.preSelectedRecords.splice(col, 1);
+                        // Remove this element from preselected
+                        let index = this.preSelected.indexOf(args.deselectedRows[row].dataItem[this.gridRowSelectByValue]);
+                        if (index !== -1) {
+                            this.preSelected.splice(index, 1);
+                        }
+                    }
+                }
+            }
+        }
+        this.selectedRowData.emit(this.preSelectedRecords.concat(this.data));
+    }
+    onKebabClick(item, rowDetails) {
+        this.kebabItemClick.emit({ action: item, rowDetails });
+    }
+    onDetailExpand(rowData) {
+        this.rowDetails.emit(rowData.dataItem);
+    }
+    cellClickHandler(args) {
+        if (this.allowColumnClick) {
+            if (this.ignoreColumnCellClick.includes(args.columnIndex)) {
+                return;
+            }
+            this.rowDataOfClickedCell.emit(args.dataItem);
+        }
+    }
+    expandRow(id) {
+        this.grid.expandRow(id);
+        this.expandRowIndex.push(id);
+    }
+    collapseRow(id) {
+        this.grid.collapseRow(id);
+        this.expandRowIndex.splice(this.expandRowIndex.indexOf(id), 1);
+    }
+    onDelete(rowDetails) {
+        this.deletedRowData.emit(rowDetails);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LibGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LibGridComponent, selector: "lib-grid", inputs: { gridData: "gridData", columnData: "columnData", pageSize: "pageSize", pageable: "pageable", sortable: "sortable", groupable: "groupable", reorderable: "reorderable", resizable: "resizable", checkBoxWidth: "checkBoxWidth", checkBoxColumnResizable: "checkBoxColumnResizable", checkBoxColumnMenu: "checkBoxColumnMenu", checkBoxColumnShowSelectedAll: "checkBoxColumnShowSelectedAll", checkBoxRequired: "checkBoxRequired", columnMenu: "columnMenu", mode: "mode", checkboxOnly: "checkboxOnly", dragColumns: "dragColumns", navigable: "navigable", height: "height", gridRowSelectByValue: "gridRowSelectByValue", noRecordsContent: "noRecordsContent", showToolbar: "showToolbar", kebabList: "kebabList", showKebab: "showKebab", icon: "icon", kebabColumnWidth: "kebabColumnWidth", preSelected: "preSelected", ignoreColumnCellClick: "ignoreColumnCellClick", allowColumnClick: "allowColumnClick", expandRowIndex: "expandRowIndex", customExpandRowColumn: "customExpandRowColumn", deleteColumnWidth: "deleteColumnWidth", expandRowColumnWidth: "expandRowColumnWidth", expandRows: "expandRows", showDeleteColumn: "showDeleteColumn" }, outputs: { selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", deletedRowData: "deletedRowData" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["multiColumnData"], descendants: true }, { propertyName: "detailTemplate", first: true, predicate: ["detailTemplate"], descendants: true }, { propertyName: "impactColumn", first: true, predicate: ["impactColumn"], descendants: true }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<kendo-grid [kendoGridBinding]=\"gridData\" [pageSize]=\"pageSize\" [selectable]=\"selectableSettings\" [pageable]=\"pageable\"\n  [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\" [resizable]=\"resizable\"\n  [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" (change)=\"setSelectableSettings()\"\n  (selectionChange)=\"onSelectionChange($event)\" [kendoGridSelectBy]=\"gridRowSelectByValue\"\n  (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\" (cellClick)=\"cellClickHandler($event)\">\n\n  <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n    <ng-content></ng-content>\n  </ng-template>\n\n  <ng-template *ngIf=\"this.gridData.length === 0\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n\n  <ng-container *ngIf=\"gridData.length > 0\">\n    <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n      [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\"\n      [showSelectAll]=\"checkBoxColumnShowSelectedAll\" class=\"checkbox-column\">\n    </kendo-grid-checkbox-column>\n\n    <kendo-grid-column *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n      [width]=\"item.columnWidth\" class=\"grid-column\">\n      <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n      <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n          <kendo-button [svgIcon]=\"deleteIcon\" title=\"delete\" fillMode=\"clear\" (click)=\"onDelete(dataItem)\"\n            class=\"trash-icon\"></kendo-button>\n          <div class=\"tooltip-content\">\n            <p>Remove</p>\n          </div>\n        </lib-tooltip>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <kendo-dropdownbutton [svgIcon]=\"icon\" fillMode=\"clear\" [data]=\"kebabList\" class=\"kebab\"\n          (itemClick)=\"onKebabClick($event, dataItem)\"\n          [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\"></kendo-dropdownbutton>\n      </ng-template>\n    </kendo-grid-column>\n  </ng-container>\n\n  <ng-template kendoGridDetailTemplate let-dataItem>\n    <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n  </ng-template>\n\n  <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column\">\n    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n      <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\" (click)=\"expandRow(rowIndex)\"\n        fillMode=\"flat\" class=\"arrow-btn\">\n      </kendo-button>\n      <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\" (click)=\"collapseRow(rowIndex)\"\n        fillMode=\"flat\" class=\"arrow-btn\">\n      </kendo-button>\n    </ng-template>\n  </kendo-grid-column>\n\n</kendo-grid>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}::ng-deep .k-menu-group .k-item.k-focus>.k-link{box-shadow:none}::ng-deep .k-grid tr{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::ng-deep .k-grid tr:hover{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::ng-deep .k-grid-norecords{text-align:left;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep .k-column-title{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}::ng-deep .k-grid .k-hierarchy-cell{width:0;display:none}::ng-deep .k-grid th.k-header{border-width:0}::ng-deep .kebab-column,::ng-deep .delete-column,::ng-deep .grid-column,::ng-deep .checkbox-column{border-left:hidden!important}::ng-deep .checkbox-column{padding:.75rem 0rem .5rem 1rem!important}::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{padding:16px 8px 8px 16px}::ng-deep .k-grid th.k-header input.k-checkbox{margin-left:.5rem}::ng-deep .arrow-btn{padding:.5rem!important}::ng-deep .trash-icon path{color:#dc267f!important}::ng-deep kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .delete-column{padding:8px 0}::ng-deep .k-grid-header{border-bottom-width:0px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2$2.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: i4$1.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i4$1.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i4$1.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"] }, { kind: "directive", type: i4$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i4$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i4$1.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i4$1.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { kind: "directive", type: i4$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i4$1.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LibGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-grid', template: "<kendo-grid [kendoGridBinding]=\"gridData\" [pageSize]=\"pageSize\" [selectable]=\"selectableSettings\" [pageable]=\"pageable\"\n  [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\" [resizable]=\"resizable\"\n  [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" (change)=\"setSelectableSettings()\"\n  (selectionChange)=\"onSelectionChange($event)\" [kendoGridSelectBy]=\"gridRowSelectByValue\"\n  (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\" (cellClick)=\"cellClickHandler($event)\">\n\n  <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n    <ng-content></ng-content>\n  </ng-template>\n\n  <ng-template *ngIf=\"this.gridData.length === 0\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n\n  <ng-container *ngIf=\"gridData.length > 0\">\n    <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n      [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\"\n      [showSelectAll]=\"checkBoxColumnShowSelectedAll\" class=\"checkbox-column\">\n    </kendo-grid-checkbox-column>\n\n    <kendo-grid-column *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n      [width]=\"item.columnWidth\" class=\"grid-column\">\n      <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n      <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n          <kendo-button [svgIcon]=\"deleteIcon\" title=\"delete\" fillMode=\"clear\" (click)=\"onDelete(dataItem)\"\n            class=\"trash-icon\"></kendo-button>\n          <div class=\"tooltip-content\">\n            <p>Remove</p>\n          </div>\n        </lib-tooltip>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <kendo-dropdownbutton [svgIcon]=\"icon\" fillMode=\"clear\" [data]=\"kebabList\" class=\"kebab\"\n          (itemClick)=\"onKebabClick($event, dataItem)\"\n          [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\"></kendo-dropdownbutton>\n      </ng-template>\n    </kendo-grid-column>\n  </ng-container>\n\n  <ng-template kendoGridDetailTemplate let-dataItem>\n    <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n  </ng-template>\n\n  <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column\">\n    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n      <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\" (click)=\"expandRow(rowIndex)\"\n        fillMode=\"flat\" class=\"arrow-btn\">\n      </kendo-button>\n      <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\" (click)=\"collapseRow(rowIndex)\"\n        fillMode=\"flat\" class=\"arrow-btn\">\n      </kendo-button>\n    </ng-template>\n  </kendo-grid-column>\n\n</kendo-grid>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}::ng-deep .k-menu-group .k-item.k-focus>.k-link{box-shadow:none}::ng-deep .k-grid tr{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::ng-deep .k-grid tr:hover{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::ng-deep .k-grid-norecords{text-align:left;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep .k-column-title{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}::ng-deep .k-grid .k-hierarchy-cell{width:0;display:none}::ng-deep .k-grid th.k-header{border-width:0}::ng-deep .kebab-column,::ng-deep .delete-column,::ng-deep .grid-column,::ng-deep .checkbox-column{border-left:hidden!important}::ng-deep .checkbox-column{padding:.75rem 0rem .5rem 1rem!important}::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{padding:16px 8px 8px 16px}::ng-deep .k-grid th.k-header input.k-checkbox{margin-left:.5rem}::ng-deep .arrow-btn{padding:.5rem!important}::ng-deep .trash-icon path{color:#dc267f!important}::ng-deep kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .delete-column{padding:8px 0}::ng-deep .k-grid-header{border-bottom-width:0px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { templateRef: [{
+                type: ContentChild,
+                args: ['multiColumnData']
+            }], detailTemplate: [{
+                type: ContentChild,
+                args: ['detailTemplate']
+            }], impactColumn: [{
+                type: ContentChild,
+                args: ['impactColumn']
+            }], grid: [{
+                type: ViewChild,
+                args: [GridComponent]
+            }], gridData: [{
+                type: Input
+            }], columnData: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageable: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], groupable: [{
+                type: Input
+            }], reorderable: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], checkBoxWidth: [{
+                type: Input
+            }], checkBoxColumnResizable: [{
+                type: Input
+            }], checkBoxColumnMenu: [{
+                type: Input
+            }], checkBoxColumnShowSelectedAll: [{
+                type: Input
+            }], checkBoxRequired: [{
+                type: Input
+            }], columnMenu: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], checkboxOnly: [{
+                type: Input
+            }], dragColumns: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], gridRowSelectByValue: [{
+                type: Input
+            }], noRecordsContent: [{
+                type: Input
+            }], selectedRowData: [{
+                type: Output
+            }], showToolbar: [{
+                type: Input
+            }], kebabList: [{
+                type: Input
+            }], showKebab: [{
+                type: Input
+            }], rowDetails: [{
+                type: Output
+            }], kebabItemClick: [{
+                type: Output
+            }], icon: [{
+                type: Input
+            }], kebabColumnWidth: [{
+                type: Input
+            }], rowDataOfClickedCell: [{
+                type: Output
+            }], preSelected: [{
+                type: Input
+            }], ignoreColumnCellClick: [{
+                type: Input
+            }], allowColumnClick: [{
+                type: Input
+            }], expandRowIndex: [{
+                type: Input
+            }], customExpandRowColumn: [{
+                type: Input
+            }], deleteColumnWidth: [{
+                type: Input
+            }], expandRowColumnWidth: [{
+                type: Input
+            }], deletedRowData: [{
+                type: Output
+            }], expandRows: [{
+                type: Input
+            }], showDeleteColumn: [{
+                type: Input
+            }] } });
+
+class GridSpacerComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridSpacerComponent, selector: "lib-grid-spacer", ngImport: i0, template: "<kendo-grid-spacer></kendo-grid-spacer>\n", styles: [":host{flex:1 0 auto}\n"], dependencies: [{ kind: "component", type: i4$1.GridSpacerComponent, selector: "kendo-grid-spacer, kendo-pager-spacer", inputs: ["width"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridSpacerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-grid-spacer', template: "<kendo-grid-spacer></kendo-grid-spacer>\n", styles: [":host{flex:1 0 auto}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+const createFormGroup = (controls) => {
+    const form = new FormGroup({});
+    for (let controlName of Object.keys(controls)) {
+        form.addControl(controlName, new FormControl(controls[controlName], Validators.required));
+    }
+    return form;
+};
+class GridFormComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.showToolbar = false;
+        this.noRecordsContent = 'No tags added yet';
+        this.showColumns = false;
+        this.gridData = [];
+        this.columnData = [];
+        this.controls = {};
+        this.addOrUpdateRow = new EventEmitter();
+        this.deletedRow = new EventEmitter();
+        this.removeRow = new EventEmitter();
+        this.saveRow = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    onStateChange(state) {
+        console.log('onStateChange: ', state);
+    }
+    addHandler(args) {
+        this.showColumns = true;
+        this.closeEditor(args.sender);
+        // define all editable fields validators and default values
+        this.formGroup = createFormGroup(this.controls);
+        ;
+        // show the new row editor, with the `FormGroup` build above
+        args.sender.addRow(this.formGroup);
+    }
+    editHandler(args) {
+        // define all editable fields validators and default values
+        const { dataItem } = args;
+        this.closeEditor(args.sender);
+        this.formGroup = createFormGroup(dataItem);
+        this.editedRowIndex = args.rowIndex;
+        // put the row in edit mode, with the `FormGroup` build above
+        args.sender.editRow(args.rowIndex, this.formGroup);
+    }
+    cancelHandler(args) {
+        // close the editor for the given row
+        this.closeEditor(args.sender, args.rowIndex);
+        if (this.gridData.length === 0) {
+            this.showColumns = false;
+        }
+    }
+    saveHandler({ sender, rowIndex, formGroup, isNew }) {
+        this.saveRow.emit({ rowData: formGroup.value, isNew });
+        // Close the editor for a given row 
+        sender.closeRow(rowIndex);
+    }
+    removeHandler(args) {
+        // remove the current dataItem from the current data source,
+        this.removeRow.emit(args.dataItem);
+        if (this.gridData.length === 0) {
+            this.showColumns = false;
+        }
+    }
+    closeEditor(grid, rowIndex = this.editedRowIndex) {
+        // close the editor
+        grid.closeRow(rowIndex);
+        // reset the helpers
+        this.editedRowIndex = undefined;
+        this.formGroup = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridFormComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridFormComponent, selector: "lib-grid-form", inputs: { showToolbar: "showToolbar", noRecordsContent: "noRecordsContent", gridData: "gridData", columnData: "columnData", controls: "controls" }, outputs: { addOrUpdateRow: "addOrUpdateRow", deletedRow: "deletedRow", removeRow: "removeRow", saveRow: "saveRow" }, queries: [{ propertyName: "templateRef1", first: true, predicate: ["tmp1"], descendants: true }, { propertyName: "templateRef2", first: true, predicate: ["tmp2"], descendants: true }], ngImport: i0, template: "<kendo-grid [kendoGridBinding]=\"gridData\" (dataStateChange)=\"onStateChange($event)\" (edit)=\"editHandler($event)\"\n  (cancel)=\"cancelHandler($event)\" (save)=\"saveHandler($event)\" (remove)=\"removeHandler($event)\"\n  (add)=\"addHandler($event)\" [navigable]=\"true\">\n  <ng-template kendoGridToolbarTemplate>\n    <ng-content select=\"header\"></ng-content>\n    <lib-grid-spacer></lib-grid-spacer>\n    <button kendoGridAddCommand themeColor=\"primary\">\n      <ng-content select=\"div.header-add-btn\"></ng-content>\n    </button>\n  </ng-template>\n  <ng-template *ngIf=\"!showColumns\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n  <ng-container *ngIf=\"showColumns\">\n    <kendo-grid-column *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\" [editor]=\"item.editor\">\n      <ng-template *ngIf=\"item.custom\" kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <ng-container\n          *ngTemplateOutlet=\"templateRef1; context: {$implicit: dataItem, formGroup: formGroup}\"></ng-container>\n      </ng-template>\n      <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"templateRef2; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n    </kendo-grid-column>\n    <kendo-grid-command-column [width]=\"120\">\n      <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\n        <div class=\"command-column\">\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Edit</div>\n            <button kendoGridEditCommand fillMode=\"clear\" themeColor=\"primary\">\n              <kendo-icon name=\"pencil\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Remove</div>\n            <button kendoGridRemoveCommand fillMode=\"clear\" themeColor=\"error\">\n              <kendo-icon name=\"trash\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n        </div>\n        <div class=\"command-column\">\n          <button kendoGridSaveCommand [disabled]=\"formGroup && formGroup.invalid\" fillMode=\"clear\" themeColor=\"primary\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Save</div>\n              <kendo-icon name=\"save\"></kendo-icon>\n            </lib-tooltip>\n          </button>\n          <button kendoGridCancelCommand fillMode=\"clear\" themeColor=\"error\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Cancel</div>\n              <lib-icon name=\"close\" [fontSize]=\"20\"></lib-icon>\n            </lib-tooltip>\n          </button>\n        </div>\n      </ng-template>\n    </kendo-grid-command-column>\n  </ng-container>\n</kendo-grid>\n", styles: [".command-column{display:flex;justify-content:space-between}::ng-deep .k-grid-header{border-bottom-width:0px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }, { kind: "component", type: i3$3.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "component", type: i4$1.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i4$1.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i4$1.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"] }, { kind: "directive", type: i4$1.GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: i4$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i4$1.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: i4$1.CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: i4$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i4$1.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i4$1.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { kind: "component", type: i4$1.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { kind: "component", type: i4$1.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { kind: "component", type: i4$1.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { kind: "component", type: i4$1.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }, { kind: "component", type: i4$1.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: GridSpacerComponent, selector: "lib-grid-spacer" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-grid-form', template: "<kendo-grid [kendoGridBinding]=\"gridData\" (dataStateChange)=\"onStateChange($event)\" (edit)=\"editHandler($event)\"\n  (cancel)=\"cancelHandler($event)\" (save)=\"saveHandler($event)\" (remove)=\"removeHandler($event)\"\n  (add)=\"addHandler($event)\" [navigable]=\"true\">\n  <ng-template kendoGridToolbarTemplate>\n    <ng-content select=\"header\"></ng-content>\n    <lib-grid-spacer></lib-grid-spacer>\n    <button kendoGridAddCommand themeColor=\"primary\">\n      <ng-content select=\"div.header-add-btn\"></ng-content>\n    </button>\n  </ng-template>\n  <ng-template *ngIf=\"!showColumns\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n  <ng-container *ngIf=\"showColumns\">\n    <kendo-grid-column *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\" [editor]=\"item.editor\">\n      <ng-template *ngIf=\"item.custom\" kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <ng-container\n          *ngTemplateOutlet=\"templateRef1; context: {$implicit: dataItem, formGroup: formGroup}\"></ng-container>\n      </ng-template>\n      <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"templateRef2; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n    </kendo-grid-column>\n    <kendo-grid-command-column [width]=\"120\">\n      <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\n        <div class=\"command-column\">\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Edit</div>\n            <button kendoGridEditCommand fillMode=\"clear\" themeColor=\"primary\">\n              <kendo-icon name=\"pencil\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Remove</div>\n            <button kendoGridRemoveCommand fillMode=\"clear\" themeColor=\"error\">\n              <kendo-icon name=\"trash\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n        </div>\n        <div class=\"command-column\">\n          <button kendoGridSaveCommand [disabled]=\"formGroup && formGroup.invalid\" fillMode=\"clear\" themeColor=\"primary\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Save</div>\n              <kendo-icon name=\"save\"></kendo-icon>\n            </lib-tooltip>\n          </button>\n          <button kendoGridCancelCommand fillMode=\"clear\" themeColor=\"error\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Cancel</div>\n              <lib-icon name=\"close\" [fontSize]=\"20\"></lib-icon>\n            </lib-tooltip>\n          </button>\n        </div>\n      </ng-template>\n    </kendo-grid-command-column>\n  </ng-container>\n</kendo-grid>\n", styles: [".command-column{display:flex;justify-content:space-between}::ng-deep .k-grid-header{border-bottom-width:0px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { showToolbar: [{
+                type: Input
+            }], noRecordsContent: [{
+                type: Input
+            }], templateRef1: [{
+                type: ContentChild,
+                args: ['tmp1']
+            }], templateRef2: [{
+                type: ContentChild,
+                args: ['tmp2']
+            }], gridData: [{
+                type: Input
+            }], columnData: [{
+                type: Input
+            }], controls: [{
+                type: Input
+            }], addOrUpdateRow: [{
+                type: Output
+            }], deletedRow: [{
+                type: Output
+            }], removeRow: [{
+                type: Output
+            }], saveRow: [{
+                type: Output
+            }] } });
+
+class GridsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridsModule, declarations: [LibGridComponent, GridSpacerComponent, GridFormComponent], imports: [CommonModule,
+            ButtonsModule,
+            IconModule,
+            IconsModule,
+            InputsModule,
+            GridModule,
+            DialogModule$1,
+            FormsModule,
+            TooltipModule,
+            ReactiveFormsModule,
+            TypographyModule], exports: [LibGridComponent, GridSpacerComponent, GridFormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridsModule, imports: [CommonModule,
+            ButtonsModule,
+            IconModule,
+            IconsModule,
+            InputsModule,
+            GridModule,
+            DialogModule$1,
+            FormsModule,
+            TooltipModule,
+            ReactiveFormsModule,
+            TypographyModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LibGridComponent, GridSpacerComponent, GridFormComponent],
+                    imports: [
+                        CommonModule,
+                        ButtonsModule,
+                        IconModule,
+                        IconsModule,
+                        InputsModule,
+                        GridModule,
+                        DialogModule$1,
+                        FormsModule,
+                        TooltipModule,
+                        ReactiveFormsModule,
+                        TypographyModule
+                    ],
+                    exports: [LibGridComponent, GridSpacerComponent, GridFormComponent],
+                }]
+        }] });
+
+class KebabMenuFilterPipe {
+    transform(menu, ...args) {
+        const dataItem = args[0];
+        if (Array.isArray(menu)) {
+            return menu.filter((kebabItem) => {
+                return kebabItem?.isVisible ? kebabItem.isVisible(dataItem) : true;
+            });
+        }
+        return [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KebabMenuFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: KebabMenuFilterPipe, name: "kebabMenuFilter" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KebabMenuFilterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "kebabMenuFilter"
+                }]
+        }] });
+
+class GridPaginationComponent {
+    constructor() {
+        this.gridView = { data: [], total: 0 };
+        this.skip = 0;
+        this.columnData = [];
+        this.pageSize = 0;
+        this.pageable = false;
+        this.sortable = false;
+        this.groupable = false;
+        this.reorderable = false;
+        this.resizable = false;
+        this.checkBoxWidth = 45;
+        this.checkBoxColumnResizable = false;
+        this.checkBoxColumnMenu = false;
+        this.checkBoxColumnShowSelectedAll = true;
+        this.checkBoxRequired = false;
+        this.columnMenu = false;
+        this.mode = 'multiple';
+        this.checkboxOnly = true;
+        this.dragColumns = false;
+        this.navigable = true;
+        this.gridRowSelectByValue = '';
+        this.noRecordsContent = 'No Records Available';
+        this.selectedRowData = new EventEmitter();
+        this.showToolbar = false;
+        this.selectableSettings = {};
+        this.kebabList = [];
+        this.showKebab = false;
+        this.rowDetails = new EventEmitter();
+        this.kebabItemClick = new EventEmitter();
+        this.icon = moreVerticalIcon;
+        this.kebabColumnWidth = 60;
+        this.data = [];
+        this.selectColumn = '';
+        this.rowDataOfClickedCell = new EventEmitter();
+        this.preSelected = [];
+        this.preSelectedRecords = [];
+        this.onPageChange = new EventEmitter();
+        this.ignoreColumnCellClick = [];
+        this.allowColumnClick = false;
+        this.sort = [
+            {
+                field: '',
+                dir: undefined,
+            },
+        ];
+        this.hasApiSorting = false;
+        this.sortDirection = new EventEmitter();
+        this.arrowDownIcon = chevronDownIcon;
+        this.arrowUpIcon = chevronUpIcon;
+        this.expandRowIndex = [];
+        this.customExpandRowColumn = false;
+        this.deleteColumnWidth = 42;
+        this.expandRowColumnWidth = 42;
+        this.deletedRowData = new EventEmitter();
+        this.sizes = [];
+        this.pageCount = 0;
+        this.showDeleteColumn = false;
+        this.hideKebabRowIndex = [];
+        this.gridBottomSpace = 24;
+        this.resizeHeight = 0;
+        this.setSelectableSettings();
+    }
+    ngOnInit() {
+        for (let column of this.columnData) {
+            column.sortable = column.sortable == undefined ? true : column.sortable;
+        }
+        if (!this.hasApiSorting) {
+            this.loadGridData();
+        }
+    }
+    ngOnChanges(changes) {
+        let prevPreSelected = JSON.stringify(changes['preSelected']?.previousValue);
+        let currPreSelected = JSON.stringify(changes['preSelected']?.currentValue);
+        // Check if there is a change in this.preSelected input
+        if (prevPreSelected !== currPreSelected) {
+            // Clear the this.preSelectedRecords array
+            this.preSelectedRecords = [];
+            for (let row = 0; row < changes['preSelected'].currentValue.length; row++) {
+                for (let col = 0; col < this.gridView.data.length; col++) {
+                    // Find the relevant record for a particular id
+                    if (this.gridView.data[col][this.gridRowSelectByValue] ===
+                        changes['preSelected'].currentValue[row]) {
+                        let found = false;
+                        // Check if this record is present in this.data, if yes don't push it in this.preSelectedRecords else push it
+                        for (let index = 0; index < this.data.length; index++) {
+                            if (this.data[index][this.gridRowSelectByValue] ===
+                                this.gridView.data[col][this.gridRowSelectByValue]) {
+                                found = true;
+                            }
+                        }
+                        if (!found) {
+                            this.preSelectedRecords.push(this.gridView.data[col]);
+                        }
+                    }
+                }
+            }
+            this.selectedRowData.emit(this.preSelectedRecords.concat(this.data));
+        }
+    }
+    ngAfterContentInit() {
+        if (!this.pageable) {
+            this.pageSize = this.gridView.data.length;
+        }
+    }
+    ngAfterViewInit() {
+        if (this.customExpandRowColumn) {
+            this.expandRowIndex.forEach((id) => {
+                this.grid.expandRow(id);
+            });
+        }
+        this.initialGridHeight = this.gridElement.nativeElement.offsetHeight + this.gridBottomSpace;
+        this.getGridHeight();
+    }
+    pageChange(event) {
+        this.onPageChange.emit(event);
+    }
+    setSelectableSettings() {
+        if (this.checkboxOnly || this.mode === 'single') {
+            this.dragColumns = false;
+        }
+        this.selectableSettings = {
+            checkboxOnly: this.checkboxOnly,
+            mode: this.mode,
+            drag: this.dragColumns,
+        };
+    }
+    // We can extract data out of row number using below function
+    /* extract() {
+      this.extractDataItems = this.mySelection.map(idx => {
+        return this.gridData.find((data: { ProductID: number; }) => data.ProductID === idx);
+      });
+      console.log(this.extractDataItems)
+      this.selectedRowData.emit(this.extractDataItems);
+    } */
+    onSelectionChange(args) {
+        for (let row = 0; row < args.selectedRows.length; row++) {
+            var found = false;
+            for (let col = 0; col < this.data.length; col++) {
+                if (this.data[col][this.gridRowSelectByValue] ===
+                    args.selectedRows[row].dataItem[this.gridRowSelectByValue]) {
+                    found = true;
+                }
+            }
+            if (!found) {
+                this.data.push(args.selectedRows[row].dataItem);
+            }
+        }
+        if (args.deselectedRows.length !== 0) {
+            for (let row = 0; row < args.deselectedRows.length; row++) {
+                for (let col = 0; col < this.data.length; col++) {
+                    if (this.data[col][this.gridRowSelectByValue] ===
+                        args.deselectedRows[row].dataItem[this.gridRowSelectByValue]) {
+                        this.data.splice(col, 1);
+                    }
+                }
+                for (let col = 0; col < this.preSelectedRecords.length; col++) {
+                    if (this.preSelectedRecords[col][this.gridRowSelectByValue] ===
+                        args.deselectedRows[row].dataItem[this.gridRowSelectByValue]) {
+                        this.preSelectedRecords.splice(col, 1);
+                        // Remove this element from preselected
+                        let index = this.preSelected.indexOf(args.deselectedRows[row].dataItem[this.gridRowSelectByValue]);
+                        if (index !== -1) {
+                            this.preSelected.splice(index, 1);
+                        }
+                    }
+                }
+            }
+        }
+        this.selectedRowData.emit(this.preSelectedRecords.concat(this.data));
+    }
+    onKebabClick(item, rowDetails) {
+        this.kebabItemClick.emit({ action: item, rowDetails });
+    }
+    onDetailExpand(rowData) {
+        this.rowDetails.emit(rowData.dataItem);
+    }
+    cellClickHandler(args) {
+        if (this.allowColumnClick) {
+            if (this.ignoreColumnCellClick.includes(args.columnIndex)) {
+                return;
+            }
+            this.rowDataOfClickedCell.emit(args.dataItem);
+        }
+    }
+    sortChange(sort) {
+        this.sort = sort;
+        if (!this.hasApiSorting) {
+            this.loadGridData();
+        }
+        this.sortDirection.emit(this.sort);
+    }
+    loadGridData() {
+        this.gridView = {
+            data: orderBy(this.gridView?.data, this.sort),
+            total: this.gridView?.total,
+        };
+    }
+    expandRow(id) {
+        this.grid.expandRow(id);
+        this.expandRowIndex.push(id);
+        setTimeout(() => {
+            this.getGridHeight();
+        }, 0);
+    }
+    collapseRow(id) {
+        this.grid.collapseRow(id);
+        this.expandRowIndex.splice(this.expandRowIndex.indexOf(id), 1);
+        if (this.expandRowIndex.length == 0) {
+            const windowHeight = window.innerHeight;
+            const viewport = document.getElementById('lib-grid');
+            const gridOffset = viewport.getBoundingClientRect().top + window.scrollY;
+            if (windowHeight > (gridOffset + this.initialGridHeight)) {
+                this.height = '100%';
+                return;
+            }
+            this.getGridHeight();
+        }
+    }
+    onDelete(rowDetails) {
+        this.deletedRowData.emit(rowDetails);
+    }
+    getHeaderHeight() {
+        if (this.gridView?.data?.length === 0) {
+            return 'hide-header';
+        }
+        return 'view-header';
+    }
+    getGridHeight() {
+        const windowHeight = window.innerHeight;
+        const viewport = document.getElementById('lib-grid');
+        const gridOffset = viewport.getBoundingClientRect().top + window.scrollY;
+        const gridHeight = this.gridElement.nativeElement.offsetHeight
+            + this.gridBottomSpace; //grid should have 24px space at bottom
+        if (gridOffset + gridHeight >= windowHeight) {
+            this.height = windowHeight - (gridOffset + this.gridBottomSpace);
+        }
+    }
+    resize(ev) {
+        if (ev.target.innerHeight > this.resizeHeight) {
+            this.resizeHeight = ev.target.innerHeight;
+            this.height = '100%';
+        }
+        if (this.resizeHeight > window.innerHeight) {
+            this.resizeHeight = 0;
+        }
+        this.getGridHeight();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridPaginationComponent, selector: "lib-grid-pagination", inputs: { gridView: "gridView", skip: "skip", columnData: "columnData", pageSize: "pageSize", pageable: "pageable", sortable: "sortable", groupable: "groupable", reorderable: "reorderable", resizable: "resizable", checkBoxWidth: "checkBoxWidth", checkBoxColumnResizable: "checkBoxColumnResizable", checkBoxColumnMenu: "checkBoxColumnMenu", checkBoxColumnShowSelectedAll: "checkBoxColumnShowSelectedAll", checkBoxRequired: "checkBoxRequired", columnMenu: "columnMenu", mode: "mode", checkboxOnly: "checkboxOnly", dragColumns: "dragColumns", navigable: "navigable", gridRowSelectByValue: "gridRowSelectByValue", noRecordsContent: "noRecordsContent", showToolbar: "showToolbar", kebabList: "kebabList", showKebab: "showKebab", icon: "icon", kebabColumnWidth: "kebabColumnWidth", selectColumn: "selectColumn", preSelected: "preSelected", ignoreColumnCellClick: "ignoreColumnCellClick", allowColumnClick: "allowColumnClick", sort: "sort", hasApiSorting: "hasApiSorting", expandRowIndex: "expandRowIndex", customExpandRowColumn: "customExpandRowColumn", deleteColumnWidth: "deleteColumnWidth", expandRowColumnWidth: "expandRowColumnWidth", sizes: "sizes", pageCount: "pageCount", showDeleteColumn: "showDeleteColumn", hideKebabRowIndex: "hideKebabRowIndex" }, outputs: { selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", onPageChange: "onPageChange", sortDirection: "sortDirection", deletedRowData: "deletedRowData" }, host: { listeners: { "window:resize": "resize($event)" } }, queries: [{ propertyName: "templateRef", first: true, predicate: ["multiColumnData"], descendants: true }, { propertyName: "detailTemplate", first: true, predicate: ["detailTemplate"], descendants: true }, { propertyName: "impactColumn", first: true, predicate: ["impactColumn"], descendants: true }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #gridElement (window:resize)=\"resize($event)\" >\n<kendo-grid [data]=\"gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n  [pageable]=\"pageable\" [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n  [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" [style.height]=\"height\"\n  (change)=\"setSelectableSettings()\" (selectionChange)=\"onSelectionChange($event)\"\n  [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n  (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" [sort]=\"sort\"\n  (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\">\n\n  <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n    <ng-content></ng-content>\n  </ng-template>\n\n  <ng-template *ngIf=\"this.gridView.data.length === 0\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n\n  <ng-container *ngIf=\"this.gridView.data.length > 0\">\n    <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n      [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\"\n      [showSelectAll]=\"checkBoxColumnShowSelectedAll\" class=\"checkbox-column\">\n    </kendo-grid-checkbox-column>\n\n    <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n      [width]=\"item.columnWidth\" [sortable]=\"item.sortable\">\n\n      <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n        {{item.title}}\n        <span *ngIf=\"sort[0].field === item.field\">\n          <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n          <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n        </span>\n      </ng-template>\n\n      <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n      <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n            <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n          <div class=\"tooltip-content\">\n            <lib-typography defaultText=\"Remove\"></lib-typography>\n          </div>\n        </lib-tooltip>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\" [data]=\"kebabList | kebabMenuFilter : dataItem\"  class=\"kebab\"\n          (itemClick)=\"onKebabClick($event, dataItem)\" [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n        </kendo-dropdownbutton>\n      </ng-template>\n    </kendo-grid-column>\n  </ng-container>\n\n  <ng-template kendoGridDetailTemplate let-dataItem>\n    <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n  </ng-template>\n\n  <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n      <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\" (click)=\"expandRow(rowIndex)\"\n        fillMode=\"none\" class=\"arrow-btn\">\n      </kendo-button>\n      <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\" (click)=\"collapseRow(rowIndex)\"\n        fillMode=\"none\" class=\"arrow-btn\">\n      </kendo-button>\n    </ng-template>\n  </kendo-grid-column>\n\n  <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n    <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n    <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n    <kendo-pager-next-buttons></kendo-pager-next-buttons>\n    <kendo-pager-info></kendo-pager-info>\n    <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n  </ng-template>\n\n</kendo-grid>\n</div>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}::ng-deep .k-grid th{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}::ng-deep .k-grid tr{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px;height:50px}::ng-deep .k-grid tr:hover{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.2px}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:0}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:50px}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2$2.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "fontSize", "type"] }, { kind: "component", type: i4$1.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i4$1.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i4$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i4$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i4$1.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i4$1.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { kind: "directive", type: i4$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i4$1.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i4$1.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i4$1.PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons" }, { kind: "component", type: i4$1.PagerNextButtonsComponent, selector: "kendo-pager-next-buttons" }, { kind: "component", type: i4$1.PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: ["buttonCount"] }, { kind: "component", type: i4$1.PagerInfoComponent, selector: "kendo-pager-info" }, { kind: "component", type: i4$1.PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: ["pageSizes"] }, { kind: "directive", type: i4$1.PagerTemplateDirective, selector: "[kendoPagerTemplate]" }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "pipe", type: KebabMenuFilterPipe, name: "kebabMenuFilter" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-grid-pagination', template: "<div #gridElement (window:resize)=\"resize($event)\" >\n<kendo-grid [data]=\"gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n  [pageable]=\"pageable\" [sortable]=\"sortable\" [groupable]=\"groupable\" [reorderable]=\"reorderable\"\n  [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\" [height]=\"height\" [style.height]=\"height\"\n  (change)=\"setSelectableSettings()\" (selectionChange)=\"onSelectionChange($event)\"\n  [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"preSelected\"\n  (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" [sort]=\"sort\"\n  (sortChange)=\"sortChange($event)\" [ngClass]=\"getHeaderHeight()\" id=\"lib-grid\">\n\n  <ng-template *ngIf=\"showToolbar\" kendoGridToolbarTemplate>\n    <ng-content></ng-content>\n  </ng-template>\n\n  <ng-template *ngIf=\"this.gridView.data.length === 0\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n  </ng-template>\n\n  <ng-container *ngIf=\"this.gridView.data.length > 0\">\n    <kendo-grid-checkbox-column *ngIf=\"checkBoxRequired === true\" [width]=\"checkBoxWidth\"\n      [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\"\n      [showSelectAll]=\"checkBoxColumnShowSelectedAll\" class=\"checkbox-column\">\n    </kendo-grid-checkbox-column>\n\n    <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n      [width]=\"item.columnWidth\" [sortable]=\"item.sortable\">\n\n      <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n        {{item.title}}\n        <span *ngIf=\"sort[0].field === item.field\">\n          <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n          <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n        </span>\n      </ng-template>\n\n      <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n      <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n            <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n          <div class=\"tooltip-content\">\n            <lib-typography defaultText=\"Remove\"></lib-typography>\n          </div>\n        </lib-tooltip>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\">\n      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n        <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\" [data]=\"kebabList | kebabMenuFilter : dataItem\"  class=\"kebab\"\n          (itemClick)=\"onKebabClick($event, dataItem)\" [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n        </kendo-dropdownbutton>\n      </ng-template>\n    </kendo-grid-column>\n  </ng-container>\n\n  <ng-template kendoGridDetailTemplate let-dataItem>\n    <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n  </ng-template>\n\n  <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n      <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\" (click)=\"expandRow(rowIndex)\"\n        fillMode=\"none\" class=\"arrow-btn\">\n      </kendo-button>\n      <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\" (click)=\"collapseRow(rowIndex)\"\n        fillMode=\"none\" class=\"arrow-btn\">\n      </kendo-button>\n    </ng-template>\n  </kendo-grid-column>\n\n  <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n    <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n    <kendo-pager-numeric-buttons [buttonCount]=\"pageCount\"></kendo-pager-numeric-buttons>\n    <kendo-pager-next-buttons></kendo-pager-next-buttons>\n    <kendo-pager-info></kendo-pager-info>\n    <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n  </ng-template>\n\n</kendo-grid>\n</div>\n", styles: ["@font-face{font-family:Mulish;src:url(/assets/fonts/Mulish-Light.ttf);font-weight:300;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-LightItalic.ttf);font-weight:300;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Italic.ttf);font-weight:400;font-style:italic}@font-face{font-family:Mulish;src:url(../assets/fonts/Mulish-Bold.ttf);font-weight:700;font-style:normal}::ng-deep .k-grid th{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:16px;line-height:24px;letter-spacing:.2px}::ng-deep .k-grid tr{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px;height:50px}::ng-deep .k-grid tr:hover{font-family:Mulish,sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.8px}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Mulish,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:21px;letter-spacing:.2px}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:0}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:50px}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { templateRef: [{
+                type: ContentChild,
+                args: ['multiColumnData']
+            }], detailTemplate: [{
+                type: ContentChild,
+                args: ['detailTemplate']
+            }], impactColumn: [{
+                type: ContentChild,
+                args: ['impactColumn']
+            }], grid: [{
+                type: ViewChild,
+                args: [GridComponent]
+            }], gridElement: [{
+                type: ViewChild,
+                args: ['gridElement']
+            }], gridView: [{
+                type: Input
+            }], skip: [{
+                type: Input
+            }], columnData: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageable: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], groupable: [{
+                type: Input
+            }], reorderable: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], checkBoxWidth: [{
+                type: Input
+            }], checkBoxColumnResizable: [{
+                type: Input
+            }], checkBoxColumnMenu: [{
+                type: Input
+            }], checkBoxColumnShowSelectedAll: [{
+                type: Input
+            }], checkBoxRequired: [{
+                type: Input
+            }], columnMenu: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], checkboxOnly: [{
+                type: Input
+            }], dragColumns: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], gridRowSelectByValue: [{
+                type: Input
+            }], noRecordsContent: [{
+                type: Input
+            }], selectedRowData: [{
+                type: Output
+            }], showToolbar: [{
+                type: Input
+            }], kebabList: [{
+                type: Input
+            }], showKebab: [{
+                type: Input
+            }], rowDetails: [{
+                type: Output
+            }], kebabItemClick: [{
+                type: Output
+            }], icon: [{
+                type: Input
+            }], kebabColumnWidth: [{
+                type: Input
+            }], selectColumn: [{
+                type: Input
+            }], rowDataOfClickedCell: [{
+                type: Output
+            }], preSelected: [{
+                type: Input
+            }], onPageChange: [{
+                type: Output
+            }], ignoreColumnCellClick: [{
+                type: Input
+            }], allowColumnClick: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], hasApiSorting: [{
+                type: Input
+            }], sortDirection: [{
+                type: Output
+            }], expandRowIndex: [{
+                type: Input
+            }], customExpandRowColumn: [{
+                type: Input
+            }], deleteColumnWidth: [{
+                type: Input
+            }], expandRowColumnWidth: [{
+                type: Input
+            }], deletedRowData: [{
+                type: Output
+            }], sizes: [{
+                type: Input
+            }], pageCount: [{
+                type: Input
+            }], showDeleteColumn: [{
+                type: Input
+            }], hideKebabRowIndex: [{
+                type: Input
+            }], resize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class GridPaginationSpacerComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridPaginationSpacerComponent, selector: "lib-grid-pagination-spacer", ngImport: i0, template: "<kendo-grid-spacer></kendo-grid-spacer>\n", styles: [":host{flex:1 0 auto}\n"], dependencies: [{ kind: "component", type: i4$1.GridSpacerComponent, selector: "kendo-grid-spacer, kendo-pager-spacer", inputs: ["width"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationSpacerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-grid-pagination-spacer', template: "<kendo-grid-spacer></kendo-grid-spacer>\n", styles: [":host{flex:1 0 auto}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class GridPaginationModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationModule, declarations: [GridPaginationComponent,
+            GridPaginationSpacerComponent,
+            GridPaginationSpacerComponent,
+            KebabMenuFilterPipe], imports: [CommonModule,
+            ButtonsModule,
+            IconModule,
+            IconsModule,
+            InputsModule,
+            GridModule,
+            DialogModule$1,
+            FormsModule,
+            TooltipModule,
+            ReactiveFormsModule,
+            TypographyModule], exports: [GridPaginationComponent, GridPaginationSpacerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationModule, imports: [CommonModule,
+            ButtonsModule,
+            IconModule,
+            IconsModule,
+            InputsModule,
+            GridModule,
+            DialogModule$1,
+            FormsModule,
+            TooltipModule,
+            ReactiveFormsModule,
+            TypographyModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        GridPaginationComponent,
+                        GridPaginationSpacerComponent,
+                        GridPaginationSpacerComponent,
+                        KebabMenuFilterPipe
+                    ],
+                    imports: [
+                        CommonModule,
+                        ButtonsModule,
+                        IconModule,
+                        IconsModule,
+                        InputsModule,
+                        GridModule,
+                        DialogModule$1,
+                        FormsModule,
+                        TooltipModule,
+                        ReactiveFormsModule,
+                        TypographyModule
+                    ],
+                    exports: [GridPaginationComponent, GridPaginationSpacerComponent],
+                }]
+        }] });
+
+class MoleculesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MoleculesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MoleculesModule, imports: [CardModule,
+            CommonModule,
+            DialogModule,
+            FormsModule,
+            GridsModule,
+            GridLayoutModule,
+            GridPaginationModule,
+            ReactiveFormsModule,
+            SidebarModule,
+            TabstripModule], exports: [CardModule,
+            DialogModule,
+            GridsModule,
+            GridLayoutModule,
+            GridPaginationModule,
+            SidebarModule,
+            TabstripModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MoleculesModule, imports: [CardModule,
+            CommonModule,
+            DialogModule,
+            FormsModule,
+            GridsModule,
+            GridLayoutModule,
+            GridPaginationModule,
+            ReactiveFormsModule,
+            SidebarModule,
+            TabstripModule, CardModule,
+            DialogModule,
+            GridsModule,
+            GridLayoutModule,
+            GridPaginationModule,
+            SidebarModule,
+            TabstripModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MoleculesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CardModule,
+                        CommonModule,
+                        DialogModule,
+                        FormsModule,
+                        GridsModule,
+                        GridLayoutModule,
+                        GridPaginationModule,
+                        ReactiveFormsModule,
+                        SidebarModule,
+                        TabstripModule
+                    ],
+                    exports: [
+                        CardModule,
+                        DialogModule,
+                        GridsModule,
+                        GridLayoutModule,
+                        GridPaginationModule,
+                        SidebarModule,
+                        TabstripModule
+                    ],
+                }]
+        }] });
+
+class SharedModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, declarations: [SharedComponent], imports: [AtomsModule,
+            CommonModule,
+            MoleculesModule,
+            ThemesModule], exports: [SharedComponent,
+            AtomsModule,
+            MoleculesModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, imports: [AtomsModule,
+            CommonModule,
+            MoleculesModule,
+            ThemesModule, AtomsModule,
+            MoleculesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SharedComponent],
+                    imports: [
+                        AtomsModule,
+                        CommonModule,
+                        MoleculesModule,
+                        ThemesModule
+                    ],
+                    exports: [
+                        SharedComponent,
+                        AtomsModule,
+                        MoleculesModule
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+// services
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ALERT_TYPE, AlertComponent, AlertModule, AngularPopupComponent, AngularPopupModule, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonGroupModule, ButtonModule, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardModule, CheckboxComponent, CheckboxModule, ClipboardComponent, ClipboardModule, ContainerComponent, ContainerModule, DialogActionsComponent, DialogComponent, DialogModule, DialogTitlebarComponent, DropdownComponent, DropdownModule, DropdownTreeModule, DropdowntreeComponent, ExpansionPanelComponent, ExpansionPanelModule, GridFormComponent, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, GridPaginationComponent, GridPaginationModule, GridPaginationSpacerComponent, GridSpacerComponent, GridsModule, IconComponent, IconModule, LabelComponent, LabelsModule, LibGridComponent, LoadingSpinnerComponent, LoadingSpinnerModule, MoleculesModule, MultiSelectDropdownComponent, MultiSelectDropdownModule, NotificationComponent, NotificationModule, NumericTextboxComponent, NumericTextboxModule, ProgressBarComponent, ProgressBarsModule, RadioButtonComponent, RadioButtonModule, ReportSummaryComponent, ReportSummaryModule, SearchBoxComponent, SearchBoxModule, SharedComponent, SharedModule, SharedService, SidebarComponent, SidebarModule, SliderComponent, SliderModule, StyleTokensModule, TabstripComponent, TabstripModule, TabstripTabComponent, TextAreaComponent, TextAreaModule, TextboxComponent, TextboxModule, TimeSchedulerModule, TimeschedulerComponent, ToastNotificationModule, ToastNotificationService, TooltipComponent, TooltipModule, Type, TypographyComponent, TypographyModule };
+//# sourceMappingURL=progress-chef-platform-shared-components.mjs.map