@progress-chef/platform-shared-components 0.0.14 → 0.0.16

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

@@ -25,6 +25,8 @@ 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 * as i1$3 from '@progress/kendo-angular-indicators';
+import { IndicatorsModule } from '@progress/kendo-angular-indicators';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i2$3 from '@progress/kendo-angular-progressbar';
 import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
@@ -41,7 +43,6 @@ 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' }); }
 }
@@ -50,7 +51,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return []; } });
+        }] });
 
 class ToastNotificationService {
     constructor(notificationService) {
@@ -113,7 +114,6 @@ 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 }); }
 }
@@ -131,13 +131,12 @@ class AngularPopupComponent {
         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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { show: [{
                 type: Input
             }], anchor: [{
@@ -153,22 +152,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 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() { }
+    get class() {
+        return `${this.c_class} ${this.padding} ${this.margin}`;
+    }
     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: [{
+        }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
             }], c_class: [{
@@ -276,7 +274,6 @@ class TypographyComponent {
         this.input_id = null;
     }
     ngAfterViewChecked() {
-        // this.timeOutRef = setTimeout(this.checkForLabel, 15000);
         if (!this.input_id) {
             this.checkForLabel();
         }
@@ -373,11 +370,11 @@ class AvatarComponent {
         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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { showInitials: [{
                 type: Input
             }], imageURL: [{
@@ -438,7 +435,6 @@ class BreadcrumbComponent {
         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);
@@ -496,7 +492,6 @@ class IconComponent {
         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"] }); }
 }
@@ -542,7 +537,6 @@ class ButtonComponent {
         this.buttonClick = new EventEmitter();
         this.iconButton = false;
     }
-    ngOnInit() { }
     onButtonClick(e) {
         this.buttonClick.emit(e);
     }
@@ -621,13 +615,12 @@ class ButtonGroupComponent {
     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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { buttons: [{
                 type: Input
             }], selection: [{
@@ -675,16 +668,15 @@ class CheckboxComponent {
         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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { control: [{
                 type: Input
             }], id: [{
@@ -736,7 +728,6 @@ class ExpansionPanelComponent {
         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"] }] }); }
 }
@@ -800,6 +791,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+var LoaderSize;
+(function (LoaderSize) {
+    LoaderSize["small"] = "small";
+    LoaderSize["medium"] = "medium";
+    LoaderSize["large"] = "large";
+})(LoaderSize || (LoaderSize = {}));
+var LoaderType;
+(function (LoaderType) {
+    LoaderType["pulsing"] = "pulsing";
+    LoaderType["infiniteSpinner"] = "infinite-spinner";
+    LoaderType["convergingSpinner"] = "converging-spinner";
+})(LoaderType || (LoaderType = {}));
+var LoaderThemeColor;
+(function (LoaderThemeColor) {
+    LoaderThemeColor["primary"] = "primary";
+    LoaderThemeColor["secondary"] = "secondary";
+    LoaderThemeColor["tertiary"] = "tertiary";
+    LoaderThemeColor["info"] = "info";
+    LoaderThemeColor["success"] = "success";
+    LoaderThemeColor["warning"] = "warning";
+    LoaderThemeColor["error"] = "error";
+    LoaderThemeColor["dark"] = "dark";
+    LoaderThemeColor["light"] = "light";
+    LoaderThemeColor["inverse"] = "inverse";
+})(LoaderThemeColor || (LoaderThemeColor = {}));
+class LoaderComponent {
+    constructor() {
+        this.size = LoaderSize.medium;
+        this.type = LoaderType.pulsing;
+        this.themeColor = LoaderThemeColor.primary;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoaderComponent, selector: "lib-loader", inputs: { size: "size", type: "type", themeColor: "themeColor" }, ngImport: i0, template: "<kendo-loader [type]=\"type\" [themeColor]=\"themeColor\" [size]=\"size\">\n</kendo-loader>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"], dependencies: [{ kind: "component", type: i1$3.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-loader', template: "<kendo-loader [type]=\"type\" [themeColor]=\"themeColor\" [size]=\"size\">\n</kendo-loader>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }] } });
+
 class DropdownComponent {
     constructor(themesService) {
         this.themesService = themesService;
@@ -820,6 +856,10 @@ class DropdownComponent {
         this.control = new FormControl();
         this.fontType = 'P_MULISH_14_REGULAR';
         this.focus = false;
+        this.loading = false;
+        this.loaderType = LoaderType.pulsing;
+        this.loaderSize = LoaderSize.medium;
+        this.loaderTheme = LoaderThemeColor.primary;
     }
     ngOnChanges(changes) {
         if (changes['isDisabled']) {
@@ -831,8 +871,6 @@ class DropdownComponent {
             }
         }
     }
-    ngOnInit() {
-    }
     ngAfterViewInit() {
         if (this.focus) {
             this.comboBox.focus();
@@ -842,11 +880,11 @@ class DropdownComponent {
         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"] }] }); }
+    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", loading: "loading", loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme" }, 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    <ng-template *ngIf=\"loading\" kendoComboBoxNoDataTemplate>\n      <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\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: "directive", type: i3$2.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { 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"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }] }); }
 }
 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"] }]
+            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    <ng-template *ngIf=\"loading\" kendoComboBoxNoDataTemplate>\n      <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\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: [{
@@ -889,23 +927,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], focus: [{
                 type: Input
+            }], loading: [{
+                type: Input
+            }], loaderType: [{
+                type: Input
+            }], loaderSize: [{
+                type: Input
+            }], loaderTheme: [{
+                type: Input
             }], comboBox: [{
                 type: ViewChild,
                 args: ['comboBox', { static: false }]
             }] } });
 
+class LoaderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LoaderModule, declarations: [LoaderComponent], imports: [CommonModule,
+            IndicatorsModule], exports: [LoaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderModule, imports: [CommonModule,
+            IndicatorsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        LoaderComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        IndicatorsModule
+                    ],
+                    exports: [
+                        LoaderComponent
+                    ]
+                }]
+        }] });
+
 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] }); }
+            TypographyModule,
+            LoaderModule], 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] }); }
+            TypographyModule,
+            LoaderModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownModule, decorators: [{
             type: NgModule,
@@ -918,7 +989,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         DropDownsModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        TypographyModule
+                        TypographyModule,
+                        LoaderModule
                     ],
                     exports: [
                         DropdownComponent
@@ -933,13 +1005,12 @@ class LabelComponent {
         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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            args: [{ selector: 'lib-label', template: "<lib-typography [isLabel]=\"true\" [hiddenLabel]=\"hiddenLabel\" [defaultText]=\"text\" [type]=\"labelFont\">\n  <ng-content></ng-content>\n</lib-typography>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { text: [{
                 type: Input
             }], hiddenLabel: [{
@@ -969,13 +1040,12 @@ class LoadingSpinnerComponent {
         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"] }] }); }
+    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;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"] }]
+            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;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: [{
@@ -1084,13 +1154,12 @@ class ProgressBarComponent {
         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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            args: [{ selector: 'lib-progress-bar', template: "<kendo-progressbar [value]=\"value\"></kendo-progressbar>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { value: [{
                 type: Input
             }] } });
@@ -1128,16 +1197,15 @@ class RadioButtonComponent {
         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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { size: [{
                 type: Input
             }], name: [{
@@ -1190,69 +1258,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-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;
@@ -1393,7 +1398,7 @@ class SliderComponent {
             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);
+            let style = window.getComputedStyle(element), margin = parseFloat(style.marginRight), top = parseFloat(style.top);
             if (margin) {
                 sliderElement.style.right = '-' + style.marginRight;
             }
@@ -1463,16 +1468,15 @@ class TextAreaComponent {
         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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], resizable: [{
@@ -1645,7 +1649,6 @@ class TimeschedulerComponent {
             }
         }
     }
-    ngOnInit() { }
     emitModelChange(ev) {
         this.modelChange.emit(ev);
     }
@@ -1710,13 +1713,12 @@ class TooltipComponent {
         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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { position: [{
                 type: Input
             }], tooltipWidth: [{
@@ -1776,17 +1778,15 @@ class NumericTextboxComponent {
             }
         }
     }
-    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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ThemesService }]; }, propDecorators: { id: [{
                 type: Input
             }], autoCorrect: [{
@@ -1887,7 +1887,6 @@ class DropdowntreeComponent {
             }
         }
     }
-    ngOnInit() { }
     valueChange(e) {
         this.hasDefaultValue = true;
         this.selectedItem.emit(e);
@@ -2309,6 +2308,7 @@ class AtomsModule {
             FormsModule,
             IconModule,
             LabelsModule,
+            LoaderModule,
             LoadingSpinnerModule,
             MultiSelectDropdownModule,
             NotificationModule,
@@ -2316,7 +2316,6 @@ class AtomsModule {
             ProgressBarsModule,
             RadioButtonModule,
             ReactiveFormsModule,
-            ReportSummaryModule,
             SearchBoxModule,
             SliderModule,
             StyleTokensModule,
@@ -2339,13 +2338,13 @@ class AtomsModule {
             ExpansionPanelModule,
             IconModule,
             LabelsModule,
+            LoaderModule,
             LoadingSpinnerModule,
             MultiSelectDropdownModule,
             NotificationModule,
             NumericTextboxModule,
             ProgressBarsModule,
             RadioButtonModule,
-            ReportSummaryModule,
             SearchBoxModule,
             SliderModule,
             StyleTokensModule,
@@ -2371,6 +2370,7 @@ class AtomsModule {
             FormsModule,
             IconModule,
             LabelsModule,
+            LoaderModule,
             LoadingSpinnerModule,
             MultiSelectDropdownModule,
             NotificationModule,
@@ -2378,7 +2378,6 @@ class AtomsModule {
             ProgressBarsModule,
             RadioButtonModule,
             ReactiveFormsModule,
-            ReportSummaryModule,
             SearchBoxModule,
             SliderModule,
             StyleTokensModule,
@@ -2401,13 +2400,13 @@ class AtomsModule {
             ExpansionPanelModule,
             IconModule,
             LabelsModule,
+            LoaderModule,
             LoadingSpinnerModule,
             MultiSelectDropdownModule,
             NotificationModule,
             NumericTextboxModule,
             ProgressBarsModule,
             RadioButtonModule,
-            ReportSummaryModule,
             SearchBoxModule,
             SliderModule,
             StyleTokensModule,
@@ -2438,6 +2437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormsModule,
                         IconModule,
                         LabelsModule,
+                        LoaderModule,
                         LoadingSpinnerModule,
                         MultiSelectDropdownModule,
                         NotificationModule,
@@ -2445,7 +2445,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ProgressBarsModule,
                         RadioButtonModule,
                         ReactiveFormsModule,
-                        ReportSummaryModule,
                         SearchBoxModule,
                         SliderModule,
                         StyleTokensModule,
@@ -2471,13 +2470,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ExpansionPanelModule,
                         IconModule,
                         LabelsModule,
+                        LoaderModule,
                         LoadingSpinnerModule,
                         MultiSelectDropdownModule,
                         NotificationModule,
                         NumericTextboxModule,
                         ProgressBarsModule,
                         RadioButtonModule,
-                        ReportSummaryModule,
                         SearchBoxModule,
                         SliderModule,
                         StyleTokensModule,
@@ -2497,13 +2496,12 @@ class CardComponent {
         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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            args: [{ selector: 'lib-card', template: "<kendo-card [width]=\"width\" [orientation]=\"orientation\">\n  <ng-content></ng-content>\n</kendo-card>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], propDecorators: { width: [{
                 type: Input
             }], orientation: [{
@@ -2518,14 +2516,13 @@ class CardHeaderComponent {
         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: [{
+        }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input
@@ -2538,44 +2535,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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: [{
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
+        }], 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" }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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 []; } });
+            args: [{ selector: 'lib-card-body', template: "<kendo-card-body>\n  <ng-content></ng-content>\n</kendo-card-body>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
+        }] });
 
 class CardModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -2618,7 +2610,6 @@ class DialogComponent {
         this.renderer = renderer;
         this.opened = true;
     }
-    ngOnInit() { }
     ngAfterViewInit() {
         //detect changes
         this.ref.detectChanges();
@@ -2667,7 +2658,6 @@ class DialogTitlebarComponent {
         this.closeDialog = new EventEmitter();
         this.hideCloseIcon = false;
     }
-    ngOnInit() { }
     close() {
         this.closeDialog.emit();
     }
@@ -2679,11 +2669,11 @@ class DialogTitlebarComponent {
         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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: DialogComponent }]; }, propDecorators: { title: [{
                 type: Input
             }], titleFont: [{
@@ -2698,14 +2688,13 @@ 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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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: [{
+            args: [{ selector: 'lib-dialog-actions', template: "<kendo-dialog-actions [layout]=\"buttonLayout\">\n  <ng-content></ng-content>\n</kendo-dialog-actions>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
+        }], propDecorators: { buttonLayout: [{
                 type: Input
             }] } });
 
@@ -2749,15 +2738,13 @@ class GridLayoutComponent {
         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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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: [{
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
+        }], propDecorators: { horizontalAlign: [{
                 type: Input
             }], verticalAlign: [{
                 type: Input
@@ -2778,8 +2765,6 @@ class GridLayoutItemComponent {
         this.rowSpan = 1;
         this.colSpan = 1;
     }
-    ngOnInit() {
-    }
     ngAfterViewInit() {
         // access the DOM. get the element to unwrap
         const el = this.elRef.nativeElement; // app-page
@@ -2792,11 +2777,11 @@ class GridLayoutItemComponent {
         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"] }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"], 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" }]
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { rowNumber: [{
                 type: Input
             }], columnNumber: [{
@@ -2840,11 +2825,11 @@ class TabstripTabComponent {
         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: [""] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }); }
 }
 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" }]
+            args: [{ selector: 'lib-tabstrip-tab', template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], customHeader: [{
@@ -2869,11 +2854,11 @@ class TabstripComponent {
         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]" }] }); }
+    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: [".random-css-to-not-keep-this-file-empty{display:none}\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.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" }]
+            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", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"] }]
         }], propDecorators: { height: [{
                 type: Input
             }], alignment: [{
@@ -2916,71 +2901,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-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 = [];
@@ -3251,16 +3171,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 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: i5.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({});
@@ -3283,8 +3200,6 @@ class GridFormComponent {
         this.removeRow = new EventEmitter();
         this.saveRow = new EventEmitter();
     }
-    ngOnInit() {
-    }
     onStateChange(state) {
         console.log('onStateChange: ', state);
     }
@@ -3489,6 +3404,10 @@ class GridPaginationComponent {
         this.pageCount = 0;
         this.showDeleteColumn = false;
         this.hideKebabRowIndex = [];
+        this.loading = false;
+        this.loaderType = LoaderType.pulsing;
+        this.loaderSize = LoaderSize.medium;
+        this.loaderTheme = LoaderThemeColor.primary;
         this.gridBottomSpace = 24;
         this.resizeHeight = 0;
         this.selectAllState = 'unchecked';
@@ -3690,11 +3609,11 @@ class GridPaginationComponent {
         }
     }
     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", sizes: "sizes", pageCount: "pageCount", showDeleteColumn: "showDeleteColumn", hideKebabRowIndex: "hideKebabRowIndex", disablePreSelectedRows: "disablePreSelectedRows" }, 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 }], 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()\" (selectedKeysChange)=\"selectedKeysChange($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\" [rowClass]=\"rowClass\">\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\" class=\"checkbox-column\">\n        <ng-template kendoGridHeaderTemplate>\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\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\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [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        <div [ngClass]=\"expandColumnClass()\">\n          <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n            class=\"expand-column-text\">\n            Already added\n          </span>\n          <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n            (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n          <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n            (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n        </div>\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;padding:0;display:block}::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}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}\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: "directive", type: i3$1.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: i5.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: i5.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i5.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i5.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i5.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i5.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { kind: "directive", type: i5.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i5.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i5.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "directive", type: i5.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "component", type: i5.PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons" }, { kind: "component", type: i5.PagerNextButtonsComponent, selector: "kendo-pager-next-buttons" }, { kind: "component", type: i5.PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: ["buttonCount"] }, { kind: "component", type: i5.PagerInfoComponent, selector: "kendo-pager-info" }, { kind: "component", type: i5.PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: ["pageSizes"] }, { kind: "directive", type: i5.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" }] }); }
+    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", sizes: "sizes", pageCount: "pageCount", showDeleteColumn: "showDeleteColumn", hideKebabRowIndex: "hideKebabRowIndex", loading: "loading", loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme", disablePreSelectedRows: "disablePreSelectedRows" }, 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 }], 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()\" (selectedKeysChange)=\"selectedKeysChange($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\" [rowClass]=\"rowClass\">\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 *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n      <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\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\" class=\"checkbox-column\">\n        <ng-template kendoGridHeaderTemplate>\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\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\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [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        <div [ngClass]=\"expandColumnClass()\">\n          <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n            class=\"expand-column-text\">\n            Already added\n          </span>\n          <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n            (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n          <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n            (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n        </div>\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;padding:0;display:block}::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}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}\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: "directive", type: i3$1.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: i5.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: i5.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i5.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i5.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i5.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i5.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { kind: "directive", type: i5.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i5.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i5.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "directive", type: i5.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "component", type: i5.PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons" }, { kind: "component", type: i5.PagerNextButtonsComponent, selector: "kendo-pager-next-buttons" }, { kind: "component", type: i5.PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: ["buttonCount"] }, { kind: "component", type: i5.PagerInfoComponent, selector: "kendo-pager-info" }, { kind: "component", type: i5.PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: ["pageSizes"] }, { kind: "directive", type: i5.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: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }, { 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()\" (selectedKeysChange)=\"selectedKeysChange($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\" [rowClass]=\"rowClass\">\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\" class=\"checkbox-column\">\n        <ng-template kendoGridHeaderTemplate>\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\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\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [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        <div [ngClass]=\"expandColumnClass()\">\n          <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n            class=\"expand-column-text\">\n            Already added\n          </span>\n          <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n            (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n          <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n            (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n        </div>\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;padding:0;display:block}::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}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}\n"] }]
+            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()\" (selectedKeysChange)=\"selectedKeysChange($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\" [rowClass]=\"rowClass\">\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 *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"P_MULISH_16_REGULAR\"></lib-typography>\n      <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\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\" class=\"checkbox-column\">\n        <ng-template kendoGridHeaderTemplate>\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\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\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [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        <div [ngClass]=\"expandColumnClass()\">\n          <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n            class=\"expand-column-text\">\n            Already added\n          </span>\n          <kendo-button *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n            (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n          <kendo-button *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n            (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n          </kendo-button>\n        </div>\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;padding:0;display:block}::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}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { templateRef: [{
                 type: ContentChild,
                 args: ['multiColumnData']
@@ -3802,6 +3721,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], hideKebabRowIndex: [{
                 type: Input
+            }], loading: [{
+                type: Input
+            }], loaderType: [{
+                type: Input
+            }], loaderSize: [{
+                type: Input
+            }], loaderTheme: [{
+                type: Input
             }], disablePreSelectedRows: [{
                 type: Input
             }], resize: [{
@@ -3810,16 +3737,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 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: i5.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 }); }
@@ -3836,7 +3760,8 @@ class GridPaginationModule {
             FormsModule,
             TooltipModule,
             ReactiveFormsModule,
-            TypographyModule], exports: [GridPaginationComponent, GridPaginationSpacerComponent] }); }
+            TypographyModule,
+            LoaderModule], exports: [GridPaginationComponent, GridPaginationSpacerComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationModule, imports: [CommonModule,
             ButtonsModule,
             IconModule,
@@ -3847,7 +3772,8 @@ class GridPaginationModule {
             FormsModule,
             TooltipModule,
             ReactiveFormsModule,
-            TypographyModule] }); }
+            TypographyModule,
+            LoaderModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridPaginationModule, decorators: [{
             type: NgModule,
@@ -3869,7 +3795,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormsModule,
                         TooltipModule,
                         ReactiveFormsModule,
-                        TypographyModule
+                        TypographyModule,
+                        LoaderModule
                     ],
                     exports: [GridPaginationComponent, GridPaginationSpacerComponent],
                 }]
@@ -3885,13 +3812,11 @@ class MoleculesModule {
             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,
@@ -3901,13 +3826,11 @@ class MoleculesModule {
             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: [{
@@ -3923,7 +3846,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GridLayoutModule,
                         GridPaginationModule,
                         ReactiveFormsModule,
-                        SidebarModule,
                         TabstripModule
                     ],
                     exports: [
@@ -3932,7 +3854,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GridsModule,
                         GridLayoutModule,
                         GridPaginationModule,
-                        SidebarModule,
                         TabstripModule
                     ],
                 }]
@@ -3977,5 +3898,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * 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 };
+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, LoaderComponent, LoaderModule, LoaderSize, LoaderThemeColor, LoaderType, LoadingSpinnerComponent, LoadingSpinnerModule, MoleculesModule, MultiSelectDropdownComponent, MultiSelectDropdownModule, NotificationComponent, NotificationModule, NumericTextboxComponent, NumericTextboxModule, ProgressBarComponent, ProgressBarsModule, RadioButtonComponent, RadioButtonModule, SearchBoxComponent, SearchBoxModule, SharedComponent, SharedModule, SharedService, 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