ng-zenduit 1.0.0

package/fesm2020/ng-zenduit.mjs

@@ -0,0 +1,3735 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, HostListener, ViewChild, Directive, ContentChild, NgModule } from '@angular/core';
+import { show } from 'node-snackbar';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2$1 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import moment from 'moment/moment';
+import uniqBy from 'lodash.uniqby';
+import { PhoneNumberUtil } from 'google-libphonenumber';
+import { fabric } from 'fabric';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+class ZenNotifyService {
+    info(msg, duration = 5000, hasDismiss = true) {
+        console.log(msg);
+        show({
+            pos: "top-center",
+            text: msg,
+            textColor: "white",
+            duration: duration,
+            actionText: "dismiss",
+            actionTextColor: "white",
+            showAction: hasDismiss
+        });
+    }
+    success(msg, duration = 5000, hasDismiss = true) {
+        console.log(msg);
+        show({
+            pos: "top-center",
+            text: msg,
+            textColor: "white",
+            backgroundColor: "#5cbb3a",
+            duration: duration,
+            actionText: "dismiss",
+            actionTextColor: "white",
+            showAction: hasDismiss
+        });
+    }
+    warn(msg, duration = 5000, hasDismiss = true) {
+        console.warn(msg);
+        show({
+            pos: "top-center",
+            text: msg,
+            textColor: "white",
+            backgroundColor: "#f1b10b",
+            duration: duration,
+            actionText: "dismiss",
+            actionTextColor: "white",
+            showAction: hasDismiss
+        });
+    }
+    error(err, duration = 5000, hasDismiss = true) {
+        console.error(err);
+        show({
+            pos: "top-center",
+            text: this.getErrorMessage(err),
+            textColor: "white",
+            backgroundColor: "#dc3e33",
+            duration: duration,
+            actionText: "dismiss",
+            actionTextColor: "white",
+            showAction: hasDismiss
+        });
+    }
+    getErrorMessage(ex) {
+        if (!ex) {
+            return '';
+        }
+        if (typeof ex === 'string') {
+            return ex;
+        }
+        else if (typeof ex.error === 'string') {
+            return ex.error;
+        }
+        else if (ex.error && ex.error.message) {
+            return ex.error.message;
+        }
+        else if (ex.message) {
+            return ex.message;
+        }
+        else if (ex.status && ex.statusText) {
+            return `Http error ${ex.status} ${ex.statusText}`;
+        }
+        else if (ex.statusText) {
+            return ex.statusText;
+        }
+        else {
+            console.warn('Can\'t extract error message from object:', ex);
+            return '';
+        }
+    }
+}
+ZenNotifyService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenNotifyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ZenNotifyService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenNotifyService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenNotifyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ZenduCheckboxComponent {
+    constructor() {
+        this.checkedChange = new EventEmitter();
+        this.label = 'Enable';
+        this.disabled = false;
+        this.disableValueChange = false;
+        this.indeterminate = false;
+    }
+    /**
+     * Toggle state
+     */
+    toggle() {
+        if (this.disabled || this.disableValueChange) {
+            return;
+        }
+        this.checked = !this.checked;
+        this.indeterminate = false;
+        this.checkedChange.emit(this.checked);
+    }
+}
+ZenduCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: { checked: "checked", label: "label", disabled: "disabled", disableValueChange: "disableValueChange", indeterminate: "indeterminate", imageUrl: "imageUrl" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div class=\"checkbox-component\"\n     [ngClass]=\"{'app-disabled': disabled}\"\n     (click)=\"toggle()\">\n   <button class=\"app-checkbox\"\n        [ngClass]=\"{ 'app-checked': checked && !indeterminate, 'app-indeterminate': indeterminate }\">\n      <i *ngIf=\"checked && !indeterminate\"\n         class=\"material-icons app-checkbox-icon\">done</i>\n      <i *ngIf=\"indeterminate\"\n         class=\"material-icons app-checkbox-icon\">remove</i>\n   </button>\n   <div class=\"app-checkbox-label\"\n        *ngIf=\"label\">\n      <img class=\"checkbox-image\"\n           [src]=\"imageUrl\"\n           *ngIf=\"imageUrl\">\n      {{label}}\n   </div>\n</div>", styles: [".checkbox-component{display:flex;align-items:center;cursor:pointer;gap:8px}.checkbox-component .app-checkbox{padding:4px;position:relative;width:20px;min-width:20px;height:20px;min-height:20px;border:1.6px solid #d6d6d8;border-radius:2px;box-sizing:border-box;color:#fff;background:transparent}.checkbox-component .app-checkbox:focus{outline:none;box-shadow:0 0 2px 2px #2188d94d}.checkbox-component .app-checkbox.app-checked{border-color:var(--color-primary, #2188d9);color:var(--color-primary, #2188d9)}.checkbox-component .app-checkbox.app-checked+.app-checkbox-label{color:#4f4f4f}.checkbox-component .app-checkbox.app-indeterminate{border-color:var(--color-primary, #2188d9);color:var(--color-primary, #2188d9)}.checkbox-component .app-checkbox .app-checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px}.checkbox-component .app-checkbox-label{font-weight:400;font-size:14px;line-height:130%;color:#828282;display:flex;align-items:center}.checkbox-component .app-checkbox-label .checkbox-image{margin-right:8px;width:36px}.checkbox-component:hover,.checkbox-component:focus{outline:none;text-decoration:none}.checkbox-component:hover .app-checkbox,.checkbox-component:focus .app-checkbox{border-color:#16598d}.checkbox-component:hover .app-checkbox.app-checked,.checkbox-component:focus .app-checkbox.app-checked{border-color:#16598d;color:#16598d}.checkbox-component:hover .app-checkbox.app-indeterminate,.checkbox-component:focus .app-checkbox.app-indeterminate{border-color:#16598d;color:#16598d}.checkbox-component.app-disabled{cursor:not-allowed}.checkbox-component.app-disabled .app-checkbox{border-color:#ececed}.checkbox-component.app-disabled .app-checkbox.app-checked,.checkbox-component.app-disabled .app-checkbox.app-indeterminate{border-color:#ececed;color:#ececed}.checkbox-component.app-disabled .app-checkbox-label{color:#ececed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-checkbox', template: "<div class=\"checkbox-component\"\n     [ngClass]=\"{'app-disabled': disabled}\"\n     (click)=\"toggle()\">\n   <button class=\"app-checkbox\"\n        [ngClass]=\"{ 'app-checked': checked && !indeterminate, 'app-indeterminate': indeterminate }\">\n      <i *ngIf=\"checked && !indeterminate\"\n         class=\"material-icons app-checkbox-icon\">done</i>\n      <i *ngIf=\"indeterminate\"\n         class=\"material-icons app-checkbox-icon\">remove</i>\n   </button>\n   <div class=\"app-checkbox-label\"\n        *ngIf=\"label\">\n      <img class=\"checkbox-image\"\n           [src]=\"imageUrl\"\n           *ngIf=\"imageUrl\">\n      {{label}}\n   </div>\n</div>", styles: [".checkbox-component{display:flex;align-items:center;cursor:pointer;gap:8px}.checkbox-component .app-checkbox{padding:4px;position:relative;width:20px;min-width:20px;height:20px;min-height:20px;border:1.6px solid #d6d6d8;border-radius:2px;box-sizing:border-box;color:#fff;background:transparent}.checkbox-component .app-checkbox:focus{outline:none;box-shadow:0 0 2px 2px #2188d94d}.checkbox-component .app-checkbox.app-checked{border-color:var(--color-primary, #2188d9);color:var(--color-primary, #2188d9)}.checkbox-component .app-checkbox.app-checked+.app-checkbox-label{color:#4f4f4f}.checkbox-component .app-checkbox.app-indeterminate{border-color:var(--color-primary, #2188d9);color:var(--color-primary, #2188d9)}.checkbox-component .app-checkbox .app-checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px}.checkbox-component .app-checkbox-label{font-weight:400;font-size:14px;line-height:130%;color:#828282;display:flex;align-items:center}.checkbox-component .app-checkbox-label .checkbox-image{margin-right:8px;width:36px}.checkbox-component:hover,.checkbox-component:focus{outline:none;text-decoration:none}.checkbox-component:hover .app-checkbox,.checkbox-component:focus .app-checkbox{border-color:#16598d}.checkbox-component:hover .app-checkbox.app-checked,.checkbox-component:focus .app-checkbox.app-checked{border-color:#16598d;color:#16598d}.checkbox-component:hover .app-checkbox.app-indeterminate,.checkbox-component:focus .app-checkbox.app-indeterminate{border-color:#16598d;color:#16598d}.checkbox-component.app-disabled{cursor:not-allowed}.checkbox-component.app-disabled .app-checkbox{border-color:#ececed}.checkbox-component.app-disabled .app-checkbox.app-checked,.checkbox-component.app-disabled .app-checkbox.app-indeterminate{border-color:#ececed;color:#ececed}.checkbox-component.app-disabled .app-checkbox-label{color:#ececed}\n"] }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], disableValueChange: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }] } });
+
+class ZenduColorPickerComponent {
+    constructor(_element) {
+        this._element = _element;
+        this.colorChange = new EventEmitter();
+        this.icon = "text";
+        this.showNone = true;
+        this.opened = false;
+        this.menuLeft = "0px";
+        this.menuTop = "";
+        this.menuBottom = "";
+        this.colorsRows = [
+            { colors: ["#000000", "#666666", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#ffffff"] },
+            { colors: ["#CC0000", "#E69138", "#F1C232", "#6AA84F", "#3C78D8", "#674EA7", "#A64D79"] },
+            { colors: ["#E06666", "#F6B26B", "#FFD966", "#93C47D", "#6D9EEB", "#8E7CC3", "#C27BA0"] },
+            { colors: ["#EA9999", "#F9CB9C", "#FFE599", "#B6D7A8", "#A4C2F4", "#B4A7D6", "#D5A6BD"] },
+            { colors: ["#F4CCCC", "#FCE5CD", "#FFF2CC", "#D9EAD3", "#C9DAF8", "#D9D2E9", "#EAD1DC"] }
+        ];
+    }
+    outsideHandling(event) {
+        if (!document.body.contains(event.target)) {
+            // element not in the DOM
+            return;
+        }
+        if (this._element.nativeElement.contains(event.target)) {
+            return;
+        }
+        this.hidePicker();
+    }
+    scroll() {
+        this.updatePlacement();
+    }
+    ngOnChanges(changes) {
+        if (changes["customTarget"] &&
+            changes["customTarget"].currentValue &&
+            this.customTarget) {
+            this.customTarget.addEventListener("click", this.toggleEvent.bind(this));
+        }
+        this.updatePlacement();
+    }
+    toggleEvent(evt) {
+        this.toggle();
+        evt.stopPropagation();
+    }
+    toggle() {
+        this.updatePlacement();
+        this.opened = !this.opened;
+    }
+    updatePlacement() {
+        let container;
+        if (this.customTarget) {
+            container = this.customTarget;
+        }
+        else {
+            const component = this._element.nativeElement;
+            container = component.getElementsByClassName("colorpicker-component").item(0);
+        }
+        const left = container.getBoundingClientRect().left;
+        const top = container.getBoundingClientRect().top;
+        const bottom = container.getBoundingClientRect().bottom;
+        const margin = 8;
+        this.menuLeft = `${left}px`;
+        const distToBottomOfPage = window.innerHeight - top;
+        if (distToBottomOfPage > 150) {
+            this.menuTop = `${bottom + margin}px`;
+            this.menuBottom = "";
+        }
+        else {
+            const bottomFixed = window.innerHeight - top + margin;
+            this.menuBottom = `${bottomFixed}px`;
+            this.menuTop = "";
+        }
+    }
+    hidePicker() {
+        this.opened = false;
+    }
+    selectColor(color) {
+        this.color = color;
+        this.colorChange.emit(color);
+    }
+}
+ZenduColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduColorPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ZenduColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduColorPickerComponent, selector: "zen-colorpicker", inputs: { color: "color", icon: "icon", customTarget: "customTarget", showNone: "showNone" }, outputs: { colorChange: "colorChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:scroll": "scroll()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"colorpicker-component\"\n     (click)=\"toggle()\"\n     [class.opened]=\"opened\"\n     [class.no-size]=\"customTarget\">\n\n   <ng-container *ngIf=\"!customTarget\">\n      <div *ngIf=\"icon == 'text'\">\n         <img src=\"https://storage.googleapis.com/zenduit-icons/components/color_picker_text.svg\"\n              class=\"icon-text\">\n      </div>\n\n      <div *ngIf=\"icon == 'paint'\">\n         <img src=\"https://storage.googleapis.com/zenduit-icons/components/color_picker_paint.svg\"\n              class=\"icon-paint\">\n      </div>\n\n      <div class=\"toggle\">\n         <i class=\"material-icons\">arrow_drop_down</i>\n      </div>\n\n      <div class=\"color-line\"\n           [ngStyle]=\"{'border-color': color}\">\n      </div>\n   </ng-container>\n\n   <div *ngIf=\"opened\"\n        class=\"color-menu\"\n        [ngStyle]=\"{ 'left': menuLeft, 'top': menuTop, 'bottom': menuBottom }\">\n\n      <div class=\"colors-container\">\n         <div *ngFor=\"let row of colorsRows\"\n              class=\"color-row\">\n            <div *ngFor=\"let rowColor of row.colors\"\n                 (click)=\"selectColor(rowColor)\"\n                 class=\"color-item\"\n                 [ngStyle]=\"{'background-color': rowColor}\">\n               <div *ngIf=\"rowColor == color\"\n                    class=\"select-icon\">\n                  <i class=\"material-icons\">check</i>\n               </div>\n            </div>\n         </div>\n      </div>\n\n      <div *ngIf=\"showNone\"\n           class=\"no-color\"\n           (click)=\"selectColor('')\">\n         None\n      </div>\n   </div>\n</div>\n", styles: [".colorpicker-component{border:1px solid var(--color-primary, #2188d9);position:relative;border-radius:4px;padding:3px 4px;width:29px;height:19px;display:flex;cursor:pointer}.colorpicker-component.no-size{border:0;width:0px;height:0px;padding:0;margin:0}.colorpicker-component .color-line{width:14px;border:2px solid;position:absolute;bottom:5px;left:3px;z-index:1;background-color:#000}.colorpicker-component .material-icons{color:#333;font-size:16px}.colorpicker-component .icon-paint{margin-bottom:2px;margin-left:2px;height:13px;width:13px}.colorpicker-component .icon-text{margin-bottom:4px;margin-left:2px;height:11px;width:11px}.colorpicker-component .toggle{padding-top:4px}.colorpicker-component.opened{background:rgba(33,136,217,.1)}.colorpicker-component.opened .material-icons{color:var(--color-primary, #2188d9)!important}.colorpicker-component .color-menu{background:#ffffff;box-shadow:0 2px 4px -1px #00000008,0 4px 5px #0000003d,0 1px 10px #0000001a;border-radius:8px;position:fixed;overflow-y:auto;white-space:initial;padding:4px;z-index:10}.colorpicker-component .color-menu .colors-container .color-row{display:flex;align-items:center;justify-content:space-between}.colorpicker-component .color-menu .colors-container .color-row .color-item{width:14px;height:14px;cursor:pointer;border:1px solid #d5d5d5;border-radius:1px;margin:1px}.colorpicker-component .color-menu .colors-container .color-row .select-icon{position:relative}.colorpicker-component .color-menu .colors-container .color-row .select-icon .material-icons{position:absolute;color:#fff!important;font-size:12px;font-weight:700}.colorpicker-component .color-menu .no-color{background:#ffffff;border:1px solid #b0b0b0;border-radius:5px;font-family:Roboto;font-style:normal;font-weight:400;font-size:12px;display:flex;justify-content:center;margin-top:5px;cursor:pointer;color:#333}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-colorpicker', template: "<div class=\"colorpicker-component\"\n     (click)=\"toggle()\"\n     [class.opened]=\"opened\"\n     [class.no-size]=\"customTarget\">\n\n   <ng-container *ngIf=\"!customTarget\">\n      <div *ngIf=\"icon == 'text'\">\n         <img src=\"https://storage.googleapis.com/zenduit-icons/components/color_picker_text.svg\"\n              class=\"icon-text\">\n      </div>\n\n      <div *ngIf=\"icon == 'paint'\">\n         <img src=\"https://storage.googleapis.com/zenduit-icons/components/color_picker_paint.svg\"\n              class=\"icon-paint\">\n      </div>\n\n      <div class=\"toggle\">\n         <i class=\"material-icons\">arrow_drop_down</i>\n      </div>\n\n      <div class=\"color-line\"\n           [ngStyle]=\"{'border-color': color}\">\n      </div>\n   </ng-container>\n\n   <div *ngIf=\"opened\"\n        class=\"color-menu\"\n        [ngStyle]=\"{ 'left': menuLeft, 'top': menuTop, 'bottom': menuBottom }\">\n\n      <div class=\"colors-container\">\n         <div *ngFor=\"let row of colorsRows\"\n              class=\"color-row\">\n            <div *ngFor=\"let rowColor of row.colors\"\n                 (click)=\"selectColor(rowColor)\"\n                 class=\"color-item\"\n                 [ngStyle]=\"{'background-color': rowColor}\">\n               <div *ngIf=\"rowColor == color\"\n                    class=\"select-icon\">\n                  <i class=\"material-icons\">check</i>\n               </div>\n            </div>\n         </div>\n      </div>\n\n      <div *ngIf=\"showNone\"\n           class=\"no-color\"\n           (click)=\"selectColor('')\">\n         None\n      </div>\n   </div>\n</div>\n", styles: [".colorpicker-component{border:1px solid var(--color-primary, #2188d9);position:relative;border-radius:4px;padding:3px 4px;width:29px;height:19px;display:flex;cursor:pointer}.colorpicker-component.no-size{border:0;width:0px;height:0px;padding:0;margin:0}.colorpicker-component .color-line{width:14px;border:2px solid;position:absolute;bottom:5px;left:3px;z-index:1;background-color:#000}.colorpicker-component .material-icons{color:#333;font-size:16px}.colorpicker-component .icon-paint{margin-bottom:2px;margin-left:2px;height:13px;width:13px}.colorpicker-component .icon-text{margin-bottom:4px;margin-left:2px;height:11px;width:11px}.colorpicker-component .toggle{padding-top:4px}.colorpicker-component.opened{background:rgba(33,136,217,.1)}.colorpicker-component.opened .material-icons{color:var(--color-primary, #2188d9)!important}.colorpicker-component .color-menu{background:#ffffff;box-shadow:0 2px 4px -1px #00000008,0 4px 5px #0000003d,0 1px 10px #0000001a;border-radius:8px;position:fixed;overflow-y:auto;white-space:initial;padding:4px;z-index:10}.colorpicker-component .color-menu .colors-container .color-row{display:flex;align-items:center;justify-content:space-between}.colorpicker-component .color-menu .colors-container .color-row .color-item{width:14px;height:14px;cursor:pointer;border:1px solid #d5d5d5;border-radius:1px;margin:1px}.colorpicker-component .color-menu .colors-container .color-row .select-icon{position:relative}.colorpicker-component .color-menu .colors-container .color-row .select-icon .material-icons{position:absolute;color:#fff!important;font-size:12px;font-weight:700}.colorpicker-component .color-menu .no-color{background:#ffffff;border:1px solid #b0b0b0;border-radius:5px;font-family:Roboto;font-style:normal;font-weight:400;font-size:12px;display:flex;justify-content:center;margin-top:5px;cursor:pointer;color:#333}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { color: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
+            }], icon: [{
+                type: Input
+            }], customTarget: [{
+                type: Input
+            }], showNone: [{
+                type: Input
+            }], outsideHandling: [{
+                type: HostListener,
+                args: ['window:mousedown', ['$event']]
+            }], scroll: [{
+                type: HostListener,
+                args: ['window:scroll', []]
+            }] } });
+
+class Util {
+    static debounce(func, wait, immediate) {
+        let timeout;
+        const context = this;
+        return function executedFunction() {
+            const args = arguments;
+            const later = function () {
+                timeout = null;
+                if (!immediate) {
+                    func.apply(context, args);
+                }
+            };
+            const callNow = immediate && !timeout;
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+            if (callNow) {
+                func.apply(context, args);
+            }
+        };
+    }
+    static clone(source) {
+        let str = JSON.stringify(source);
+        let outObj = JSON.parse(str);
+        this.updateClone(outObj);
+        // Convert in the output object ISO string to Date object
+        //
+        // @ts-ignore
+        for (let key of Object.keys(source)) {
+            const val = source[key];
+            if (val &&
+                typeof val == "object" &&
+                typeof val.getTime == "function" &&
+                typeof val.getDate == "function") {
+                outObj[key] = new Date(val);
+            }
+        }
+        return outObj;
+    }
+    /**
+     * Remove internal angularjs properties
+     * @param obj
+     */
+    static updateClone(obj) {
+        if (!obj) {
+            return;
+        }
+        if (Array.isArray(obj)) {
+            for (let item of obj) {
+                if (!item) {
+                    item = item;
+                }
+                this.updateClone(item);
+            }
+            return;
+        }
+        let type = typeof obj;
+        if (type == "string" || type == "number") {
+            return;
+        }
+        // Remove invalid props
+        let keys = Object.keys(obj);
+        keys.forEach((key) => {
+            if (key[0] == '$' ||
+                key[0] == '&') {
+                delete obj[key];
+                return;
+            }
+            let val = obj[key];
+            if (Array.isArray(val)) {
+                let arr = val;
+                for (let k of arr) {
+                    this.updateClone(k);
+                }
+            }
+            else if (typeof val == "object") {
+                this.updateClone(val);
+            }
+        });
+    }
+    static copyProperties(source, dest) {
+        for (let key of Object.keys(source)) {
+            dest[key] = source[key];
+        }
+    }
+    static sleep(ms) {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve();
+            }, ms);
+        });
+    }
+}
+
+class ZenduSearchBoxComponent {
+    constructor(_element, _ngZone) {
+        this._element = _element;
+        this._ngZone = _ngZone;
+        this.textChange = new EventEmitter();
+        this.autoFocus = true;
+        this.placeholder = "Search";
+        this._focusAttempts = 0;
+        this.setDelay(500);
+    }
+    set delay(val) {
+        this.setDelay(val);
+    }
+    ngOnInit() {
+        // give 100ms for autoFocus initalization
+        setTimeout(() => {
+            if (this.autoFocus) {
+                this.doFocus();
+            }
+        }, 100);
+    }
+    onChange() {
+        this._debouncedInvoke();
+    }
+    clearFromParent() {
+        this.text = "";
+    }
+    clear() {
+        this.text = "";
+        this._debouncedInvoke();
+    }
+    invokeChange() {
+        this._ngZone.run(() => {
+            this.textChange.emit(this.text);
+        });
+    }
+    setDelay(delay) {
+        this._debouncedInvoke = Util.debounce(() => {
+            this.invokeChange();
+        }, delay);
+    }
+    activateSearchBox() {
+        this.searchInput.nativeElement.focus();
+    }
+    doFocus() {
+        this._focusAttempts++;
+        if (this._focusAttempts > 100) {
+            // stop attempts to initalize
+            return;
+        }
+        const input = this.getInput(this._element.nativeElement);
+        if (!input) {
+            // wait 100ms to run the next check
+            setTimeout(() => {
+                this.doFocus();
+            }, 100);
+            return;
+        }
+        // check if element visible or not
+        const height = input.clientHeight;
+        if (height == 0) {
+            // wait 100ms to run the next check
+            setTimeout(() => {
+                this.doFocus();
+            }, 100);
+            return;
+        }
+        // set focus to element
+        setTimeout(() => {
+            input.focus();
+        }, 1);
+    }
+    getInput(element) {
+        if (!element) {
+            return null;
+        }
+        if (element.nodeName == "INPUT") {
+            return element;
+        }
+        for (let idx = 0; idx < element.children.length; idx++) {
+            const el = element.children.item(idx);
+            if (el && el.nodeName == "INPUT") {
+                return el;
+            }
+        }
+        // find input in the children tree
+        for (let idx = 0; idx < element.children.length; idx++) {
+            const el = element.children.item(idx);
+            if (!el) {
+                continue;
+            }
+            const elInput = this.getInput(el);
+            if (elInput) {
+                return elInput;
+            }
+        }
+        return null;
+    }
+}
+ZenduSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSearchBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ZenduSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: { text: "text", delay: "delay", autoFocus: "autoFocus", placeholder: "placeholder" }, outputs: { textChange: "textChange" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"search-box-component\">\n   <i class=\"svg-icons\"\n      (click)=\"activateSearchBox()\">\n      <svg width=\"20\"\n           height=\"20\"\n           viewBox=\"0 0 20 20\"\n           fill=\"none\"\n           xmlns=\"http://www.w3.org/2000/svg\">\n         <circle cx=\"8.33333\"\n                 cy=\"8.33333\"\n                 r=\"5.83333\"\n                 stroke=\"#828282\"\n                 stroke-width=\"1.6\" />\n         <path d=\"M17.5 17.5001L12.9166 12.9167\"\n               stroke=\"#828282\"\n               stroke-width=\"1.6\"\n               stroke-linecap=\"round\" />\n      </svg>\n   </i>\n   <input [(ngModel)]=\"text\"\n          class=\"search-box\"\n          (ngModelChange)=\"onChange()\"\n          placeholder=\"{{placeholder}}\"\n          #searchInput>\n   <i class=\"material-icons close-icon\"\n      *ngIf=\"text\"\n      (click)=\"clear()\">close</i>\n</div>", styles: [".search-box-component{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;width:100%;height:40px;background:#FFFFFF;border:1px solid #F2F2F2;box-sizing:border-box;border-radius:4px;padding:8px}.search-box-component:hover{border-color:#b8b9bc}.search-box-component:focus-within{box-shadow:0 0 2px 2px #2188d94d}.search-box-component input{border:0;font-style:normal;font-weight:400;font-size:14px;line-height:130%;width:100%;outline:none;color:#4f4f4f;font-family:Roboto}.search-box-component input::placeholder{color:#828282}.search-box-component .svg-icons{display:flex}.search-box-component .material-icons{color:#828282;-webkit-user-select:none;user-select:none}.search-box-component .material-icons.close-icon{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSearchBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-search-box', template: "<div class=\"search-box-component\">\n   <i class=\"svg-icons\"\n      (click)=\"activateSearchBox()\">\n      <svg width=\"20\"\n           height=\"20\"\n           viewBox=\"0 0 20 20\"\n           fill=\"none\"\n           xmlns=\"http://www.w3.org/2000/svg\">\n         <circle cx=\"8.33333\"\n                 cy=\"8.33333\"\n                 r=\"5.83333\"\n                 stroke=\"#828282\"\n                 stroke-width=\"1.6\" />\n         <path d=\"M17.5 17.5001L12.9166 12.9167\"\n               stroke=\"#828282\"\n               stroke-width=\"1.6\"\n               stroke-linecap=\"round\" />\n      </svg>\n   </i>\n   <input [(ngModel)]=\"text\"\n          class=\"search-box\"\n          (ngModelChange)=\"onChange()\"\n          placeholder=\"{{placeholder}}\"\n          #searchInput>\n   <i class=\"material-icons close-icon\"\n      *ngIf=\"text\"\n      (click)=\"clear()\">close</i>\n</div>", styles: [".search-box-component{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;width:100%;height:40px;background:#FFFFFF;border:1px solid #F2F2F2;box-sizing:border-box;border-radius:4px;padding:8px}.search-box-component:hover{border-color:#b8b9bc}.search-box-component:focus-within{box-shadow:0 0 2px 2px #2188d94d}.search-box-component input{border:0;font-style:normal;font-weight:400;font-size:14px;line-height:130%;width:100%;outline:none;color:#4f4f4f;font-family:Roboto}.search-box-component input::placeholder{color:#828282}.search-box-component .svg-icons{display:flex}.search-box-component .material-icons{color:#828282;-webkit-user-select:none;user-select:none}.search-box-component .material-icons.close-icon{cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { text: [{
+                type: Input
+            }], textChange: [{
+                type: Output
+            }], delay: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput', { static: false }]
+            }] } });
+
+class ZenduColumnConfigurationComponent {
+    constructor(_element) {
+        this._element = _element;
+        /**
+         * callback to emit changes for parent component
+         */
+        this.configurationChange = new EventEmitter();
+        /**
+         * input propery
+         */
+        this.configuration = [];
+        /**
+         * Default configuration for reset button
+         */
+        this.defaultConfiguration = [];
+        /**
+         * dropdown position
+         */
+        this.dropdownPosition = 'right';
+        /**
+         * Inital configuration
+         */
+        this._sourceConfiguration = [];
+        this.tempColumnConfiguration = [];
+        this.filteredColumnsConfiguration = [];
+        this.showPanel = false;
+        this.searchText = '';
+    }
+    outsideHandling(event) {
+        if (!document.body.contains(event.target)) {
+            // element not in the DOM
+            return;
+        }
+        if (this._element.nativeElement.contains(event.target)) {
+            return;
+        }
+        // hide the menu for outside click
+        this.hide();
+    }
+    ngOnChanges(changes) {
+        if (changes.configuration.currentValue && this.configuration) {
+            this.initData();
+        }
+    }
+    initData() {
+        this.tempColumnConfiguration = Util.clone(this.configuration);
+        this._sourceConfiguration = Util.clone(this.configuration);
+        this.filterItems();
+    }
+    togglePanel() {
+        this.showPanel = !this.showPanel;
+        // clear search
+        this.searchText = '';
+        if (this.showPanel) {
+            // restore inital values on open
+            this.tempColumnConfiguration = Util.clone(this._sourceConfiguration);
+        }
+        this.filterItems();
+    }
+    apply() {
+        this.configuration = Util.clone(this.tempColumnConfiguration);
+        // overwrite the default as well
+        this._sourceConfiguration = Util.clone(this.tempColumnConfiguration);
+        this.showPanel = false;
+        this.configurationChange.emit(this.configuration);
+    }
+    hide() {
+        this.showPanel = false;
+    }
+    onDrop(event) {
+        moveItemInArray(this.filteredColumnsConfiguration, event.previousIndex, event.currentIndex);
+        this.tempColumnConfiguration = this.filteredColumnsConfiguration;
+    }
+    reset() {
+        if (this.defaultConfiguration && this.defaultConfiguration.length) {
+            // use the default configuration
+            this.tempColumnConfiguration = Util.clone(this.defaultConfiguration);
+        }
+        else {
+            // activate all items
+            for (const item of this.tempColumnConfiguration) {
+                item.isVisible = true;
+            }
+        }
+        this.filterItems();
+    }
+    filterItems() {
+        this.filteredColumnsConfiguration = this.tempColumnConfiguration.filter((col) => col.displayName
+            .toLowerCase()
+            .includes(this.searchText.trim().toLowerCase()));
+    }
+}
+ZenduColumnConfigurationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduColumnConfigurationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ZenduColumnConfigurationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduColumnConfigurationComponent, selector: "zen-column-configuration", inputs: { configuration: "configuration", defaultConfiguration: "defaultConfiguration", dropdownPosition: "dropdownPosition" }, outputs: { configurationChange: "configurationChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-config-component\">\n    <button class=\"button-basic button-icon\"\n            [ngClass]=\"{ 'active': showPanel }\"\n            (click)=\"togglePanel()\">\n        <i class=\"material-icons\">view_column</i>\n    </button>\n\n    <div *ngIf=\"showPanel\"\n         class=\"action-menu column-config-menu\"\n         [ngClass]=\"{'right': dropdownPosition === 'right'}\">\n        <div class=\"action-menu-header\">\n            <div class=\"title\">Manage Columns</div>\n            <zen-search-box [(text)]=\"searchText\"\n                            (textChange)=\"filterItems()\"></zen-search-box>\n        </div>\n\n\n        <div class=\"action-menu-body dnd-container\"\n             cdkDropList\n             (cdkDropListDropped)=\"onDrop($event)\">\n            <div *ngFor=\"let config of filteredColumnsConfiguration\"\n                 class=\"action-item-checkbox drag-item\"\n                 cdkDrag>\n                <zen-checkbox class=\"flex-1\"\n                              [(checked)]=\"config.isVisible\"\n                              [label]=\"config.displayName\"></zen-checkbox>\n                <i class=\"material-icons drag-icon\">drag_handle</i>\n            </div>\n        </div>\n\n        <div class=\"action-menu-footer\">\n            <button (click)=\"reset()\"\n                    type=\"button\"\n                    class=\"button-stroked full-width\">Reset</button>\n            <button (click)=\"apply()\"\n                    type=\"button\"\n                    class=\"button-flat full-width\">Apply</button>\n        </div>\n    </div>\n</div>\n", styles: [".column-config-component{display:inline-block;position:relative}.column-config-component .column-config-menu{top:115%;width:300px}.column-config-component .column-config-menu.right{right:0}.column-config-component .column-config-menu .dnd-container{max-height:218px;overflow-y:auto}.column-config-component .column-config-menu .dnd-container .drag-item{justify-content:space-between}.column-config-component .column-config-menu .dnd-container .drag-item .drag-icon{cursor:move;color:#b8b9bc}.column-config-component .column-config-menu .dnd-container .dndDraggingSource{display:none}.column-config-component .column-config-menu .dnd-container .dndPlaceholder{background-color:#b8b9bc;display:block;min-height:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "disabled", "disableValueChange", "indeterminate", "imageUrl"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "placeholder"], outputs: ["textChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduColumnConfigurationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-column-configuration', template: "<div class=\"column-config-component\">\n    <button class=\"button-basic button-icon\"\n            [ngClass]=\"{ 'active': showPanel }\"\n            (click)=\"togglePanel()\">\n        <i class=\"material-icons\">view_column</i>\n    </button>\n\n    <div *ngIf=\"showPanel\"\n         class=\"action-menu column-config-menu\"\n         [ngClass]=\"{'right': dropdownPosition === 'right'}\">\n        <div class=\"action-menu-header\">\n            <div class=\"title\">Manage Columns</div>\n            <zen-search-box [(text)]=\"searchText\"\n                            (textChange)=\"filterItems()\"></zen-search-box>\n        </div>\n\n\n        <div class=\"action-menu-body dnd-container\"\n             cdkDropList\n             (cdkDropListDropped)=\"onDrop($event)\">\n            <div *ngFor=\"let config of filteredColumnsConfiguration\"\n                 class=\"action-item-checkbox drag-item\"\n                 cdkDrag>\n                <zen-checkbox class=\"flex-1\"\n                              [(checked)]=\"config.isVisible\"\n                              [label]=\"config.displayName\"></zen-checkbox>\n                <i class=\"material-icons drag-icon\">drag_handle</i>\n            </div>\n        </div>\n\n        <div class=\"action-menu-footer\">\n            <button (click)=\"reset()\"\n                    type=\"button\"\n                    class=\"button-stroked full-width\">Reset</button>\n            <button (click)=\"apply()\"\n                    type=\"button\"\n                    class=\"button-flat full-width\">Apply</button>\n        </div>\n    </div>\n</div>\n", styles: [".column-config-component{display:inline-block;position:relative}.column-config-component .column-config-menu{top:115%;width:300px}.column-config-component .column-config-menu.right{right:0}.column-config-component .column-config-menu .dnd-container{max-height:218px;overflow-y:auto}.column-config-component .column-config-menu .dnd-container .drag-item{justify-content:space-between}.column-config-component .column-config-menu .dnd-container .drag-item .drag-icon{cursor:move;color:#b8b9bc}.column-config-component .column-config-menu .dnd-container .dndDraggingSource{display:none}.column-config-component .column-config-menu .dnd-container .dndPlaceholder{background-color:#b8b9bc;display:block;min-height:40px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { configurationChange: [{
+                type: Output
+            }], configuration: [{
+                type: Input
+            }], defaultConfiguration: [{
+                type: Input
+            }], dropdownPosition: [{
+                type: Input
+            }], outsideHandling: [{
+                type: HostListener,
+                args: ['window:mousedown', ['$event']]
+            }] } });
+
+var DATEPICKER_POSITION;
+(function (DATEPICKER_POSITION) {
+    DATEPICKER_POSITION["AUTO"] = "auto";
+    DATEPICKER_POSITION["LEFT"] = "left";
+    DATEPICKER_POSITION["RIGHT"] = "right";
+    DATEPICKER_POSITION["TOP"] = "top";
+    DATEPICKER_POSITION["BOTTOM"] = "bottom";
+})(DATEPICKER_POSITION || (DATEPICKER_POSITION = {}));
+
+class ZenduIconComponent {
+    constructor(_host) {
+        this._host = _host;
+    }
+    ngOnChanges(changes) {
+        if (this.src) {
+            // apply styles to host
+            const host = this._host.nativeElement;
+            host.style["mask-image"] = `url(${this.src})`;
+            host.style["-webkit-mask-image"] = `url(${this.src})`;
+        }
+    }
+}
+ZenduIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduIconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ZenduIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduIconComponent, selector: "zen-icon", inputs: { src: "src" }, usesOnChanges: true, ngImport: i0, template: "", styles: [":host{background-color:#000;width:24px;height:24px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;display:block}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-icon', template: "", styles: [":host{background-color:#000;width:24px;height:24px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { src: [{
+                type: Input
+            }] } });
+
+const defaultHours = '12';
+const defaultMinuts = '00';
+class ZenduDatepickerComponent {
+    constructor(_element) {
+        this._element = _element;
+        /**
+         * callback to emit changes for parent component
+         */
+        this.dateChange = new EventEmitter();
+        this.showTime = false;
+        this.showDate = true;
+        this.boxDesign = false;
+        this.highlightDays = [];
+        this.autoConfirm = false;
+        /**
+         * datepicker states
+         */
+        this.highlightError = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.xPosition = DATEPICKER_POSITION.AUTO;
+        this.yPosition = DATEPICKER_POSITION.AUTO;
+        this.selectedTime = { Hr: 1, Min: 0 };
+        this.isPickerVisible = false;
+        this.dayRows = [];
+        this.daysTitle = "";
+        this.weekDays = ["Mo", "Tu", "We", "Th", "Fri", "Sa", "Su"];
+        this.currentSlot = new Date();
+        this.hour = defaultHours;
+        this.min = defaultMinuts;
+        this.isPM = false;
+        this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        this.years = [];
+        this.monthPickerVisible = false;
+        this.yearPickerVisible = false;
+        this.right = false;
+        this.bottom = false;
+    }
+    outsideHandling(event) {
+        if (!document.body.contains(event.target)) {
+            // element not in the DOM
+            return;
+        }
+        if (this._element.nativeElement.contains(event.target)) {
+            return;
+        }
+        this.hideTimePicker();
+    }
+    scroll() {
+        this.updatePlacement();
+    }
+    ngOnChanges(changes) {
+        if (this.date) {
+            this._dateToSet = new Date(this.date);
+            this.selectedTime = {
+                Hr: moment(this.date).hours(),
+                Min: moment(this.date).minutes()
+            };
+        }
+    }
+    updatePlacement() {
+        this.right = false;
+        this.bottom = false;
+        if (this.xPosition === DATEPICKER_POSITION.AUTO && this.getHorizontalMenuDirection() === DATEPICKER_POSITION.LEFT) {
+            this.right = true;
+        }
+        if (this.yPosition === DATEPICKER_POSITION.AUTO && this.getVerticalMenuDirection() === DATEPICKER_POSITION.TOP) {
+            this.bottom = true;
+        }
+        if (this.xPosition === DATEPICKER_POSITION.RIGHT) {
+            this.right = true;
+        }
+        if (this.yPosition === DATEPICKER_POSITION.TOP) {
+            this.bottom = true;
+        }
+    }
+    getVerticalMenuDirection() {
+        const element = this._element.nativeElement;
+        const top = element.getBoundingClientRect().top;
+        const height = window.innerHeight;
+        if (top > (height / 2)) {
+            return DATEPICKER_POSITION.TOP;
+        }
+        else {
+            return DATEPICKER_POSITION.BOTTOM;
+        }
+    }
+    /**
+     * Used to get datepicker position
+     * @returns either "left" or "right"
+     */
+    getHorizontalMenuDirection() {
+        const element = this._element.nativeElement;
+        const left = element.getBoundingClientRect().left;
+        const width = window.innerWidth;
+        if (left > (width / 2)) {
+            return DATEPICKER_POSITION.LEFT;
+        }
+        else {
+            return DATEPICKER_POSITION.RIGHT;
+        }
+    }
+    togglePicker() {
+        if (this.disabled)
+            return;
+        this._dateToSet = this.date ? new Date(this.date) : null;
+        this.isPickerVisible = !this.isPickerVisible;
+        if (this.showDate) {
+            this.currentSlot = this._dateToSet || new Date();
+            this.updateDays();
+        }
+        if (this.showTime) {
+            this.selectedTime = {
+                Hr: moment(this.date).hours(),
+                Min: moment(this.date).minutes()
+            };
+            if (this.date) {
+                const formatted = moment(this.date).format('hh:mm A');
+                this.isPM = formatted.includes('PM');
+                this.hour = formatted.slice(0, 2);
+                this.min = formatted.slice(3, 5);
+            }
+        }
+        this.updatePlacement();
+    }
+    updateDays() {
+        if (!this.currentSlot) {
+            this.currentSlot = new Date();
+        }
+        this.daysTitle = moment(this.currentSlot).format("MMM yyyy");
+        this.dayRows = [];
+        let current = moment(this.currentSlot).startOf("month").startOf("week").add(1, "day");
+        let end = moment(this.currentSlot).endOf("month").endOf("week").add(1, "day");
+        const currentMonth = moment(this.currentSlot).month();
+        const date = moment(this._dateToSet);
+        while (current <= end) {
+            const row = { days: [] };
+            this.dayRows.push(row);
+            for (let idx = 0; idx < 7; idx++) {
+                let isSelected = false;
+                if (date) {
+                    isSelected = current.date() == date.date() &&
+                        date.month() == current.month();
+                }
+                let isOutside = currentMonth != current.month();
+                let isDisabled = false;
+                if (this.minDate && current.toDate() < this.minDate) {
+                    isDisabled = true;
+                }
+                else if (this.maxDate && current.toDate() > this.maxDate) {
+                    isDisabled = true;
+                }
+                let isHighlighted = false;
+                if (this.highlightDays && this.highlightDays.length) {
+                    isHighlighted = this.highlightDays.indexOf(current.valueOf()) >= 0;
+                }
+                row.days.push({
+                    date: current.toDate(),
+                    lbl: moment(current).date().toString(),
+                    isOutside: isOutside,
+                    selected: isSelected,
+                    isDisabled: isDisabled,
+                    isHighlighted: isHighlighted
+                });
+                current = moment(current).add(1, "day");
+            }
+        }
+    }
+    nextMonth() {
+        this.currentSlot = moment(this.currentSlot).add(1, "month").toDate();
+        this.updateDays();
+    }
+    prevMonth() {
+        this.currentSlot = moment(this.currentSlot).subtract(1, "month").toDate();
+        this.updateDays();
+    }
+    nextYear() {
+        this.currentSlot = moment(this.currentSlot).add(1, "year").toDate();
+        this.updateDays();
+    }
+    prevYear() {
+        this.currentSlot = moment(this.currentSlot).subtract(1, "year").toDate();
+        this.updateDays();
+    }
+    nextYearGroup() {
+        this.years = this.years.map(year => year + 15);
+    }
+    prevYearGroup() {
+        this.years = this.years.map(year => year - 15);
+    }
+    selectDay(day) {
+        if (day.isDisabled) {
+            // day is disabled
+            return;
+        }
+        if (this.showTime) {
+            this._dateToSet = moment(day.date).hour(this.selectedTime.Hr).minute(this.selectedTime.Min).toDate();
+        }
+        else {
+            this._dateToSet = new Date(day.date);
+            if (this.autoConfirm) {
+                this.apply();
+            }
+        }
+        this.updateDays();
+    }
+    selectMonth(month) {
+        const newDate = new Date(this.currentSlot);
+        newDate.setMonth(month);
+        this.currentSlot = newDate;
+        this.updateDays();
+        this.monthPickerVisible = false;
+    }
+    selectYear(year) {
+        const newDate = new Date(this.currentSlot);
+        newDate.setFullYear(year);
+        this.currentSlot = newDate;
+        this.updateDays();
+        this.yearPickerVisible = false;
+    }
+    hideTimePicker() {
+        this.isPickerVisible = false;
+    }
+    timeChanged() {
+        let min = parseInt(this.min);
+        let hour = parseInt(this.hour);
+        if (isNaN(hour) || isNaN(min)) {
+            return;
+        }
+        hour = Math.min(hour, 12);
+        hour = Math.max(hour, 1);
+        min = Math.min(min, 59);
+        min = Math.max(min, 0);
+        const time = moment(`${hour} ${min} ${this.isPM ? "pm" : "am"}`, "h:m a");
+        this.selectedTime = {
+            Hr: time.hours(),
+            Min: time.minutes()
+        };
+        // added below condition because we can select the time without date, and it was showing invalid date in the input box
+        // second condition is required to disable apply button when date is not selected
+        if (this._dateToSet) {
+            this._dateToSet = moment(this._dateToSet).hour(this.selectedTime.Hr).minute(this.selectedTime.Min).toDate();
+        }
+        else if (!this.showDate) {
+            this._dateToSet = moment().hour(this.selectedTime.Hr).minute(this.selectedTime.Min).toDate();
+        }
+        // format
+        if (hour < 10) {
+            this.hour = `0${hour}`;
+        }
+        else {
+            this.hour = `${hour}`;
+        }
+        if (min < 10) {
+            this.min = `0${min}`;
+        }
+        else {
+            this.min = `${min}`;
+        }
+    }
+    formattedDate() {
+        if (!this.date) {
+            return "";
+        }
+        if (this.boxDesign && moment(this.date).isSame(moment(), "day")) {
+            return 'Today';
+        }
+        if (this.showDate && !this.showTime && !this.boxDesign) {
+            // Expanded formatting for date only picker
+            return moment(this.date).format("ddd, DD MMM YYYY");
+        }
+        return moment(this.date).format("MMM DD, YY");
+    }
+    formattedTime() {
+        if (!this.date) {
+            return "";
+        }
+        return moment(this.date).format("h:mm A");
+    }
+    toggleTime() {
+        this.isPM = !this.isPM;
+        this.timeChanged();
+    }
+    showMonthPicker() {
+        this.monthPickerVisible = true;
+    }
+    showYearPicker() {
+        this.yearPickerVisible = true;
+        this.years = [];
+        for (let i = this.currentSlot.getFullYear() - 7; i < this.currentSlot.getFullYear() + 8; i++) {
+            this.years.push(i);
+        }
+    }
+    hourUp() {
+        let hour = parseInt(this.hour);
+        if (isNaN(hour)) {
+            return;
+        }
+        hour++;
+        this.hour = hour.toString();
+        this.timeChanged();
+    }
+    hourDown() {
+        let hour = parseInt(this.hour);
+        if (isNaN(hour)) {
+            return;
+        }
+        hour--;
+        this.hour = hour.toString();
+        this.timeChanged();
+    }
+    minUp() {
+        let min = parseInt(this.min);
+        if (isNaN(min)) {
+            return;
+        }
+        min++;
+        this.min = min.toString();
+        this.timeChanged();
+    }
+    minDown() {
+        let min = parseInt(this.min);
+        if (isNaN(min)) {
+            return;
+        }
+        min--;
+        this.min = min.toString();
+        this.timeChanged();
+    }
+    apply() {
+        if (this._dateToSet) {
+            // If time selection has enabled and user keeps default time then triggering the timeChanged function
+            if (this.showTime && this.hour === defaultHours && this.min === defaultMinuts) {
+                this.timeChanged();
+            }
+            this.date = new Date(this._dateToSet);
+        }
+        this.dateChange.emit(this.date);
+        this.hideTimePicker();
+    }
+    cancel() {
+        this.hideTimePicker();
+    }
+    clear() {
+        this._dateToSet = null;
+        this.hour = defaultHours;
+        this.min = defaultMinuts;
+        this.date = null;
+        this.apply();
+    }
+    getIcon() {
+        // Change picker icon based on mode
+        switch (true) {
+            case this.showDate && this.showTime:
+                // Date + Time
+                return 'assets/ng-zenduit/icons/date.svg';
+            case this.showDate && !this.showTime:
+                // Date only
+                return 'assets/ng-zenduit/icons/calendar.svg';
+            case !this.showDate && this.showTime:
+                // Time only
+                return 'assets/ng-zenduit/icons/time.svg';
+            default:
+                return 'assets/ng-zenduit/icons/date.svg';
+        }
+    }
+    selectHintDate(date) {
+        if (!date) {
+            console.error('Invalid hint');
+            return;
+        }
+        this._dateToSet = new Date(date);
+        this.selectedTime = {
+            Hr: moment(date).hours(),
+            Min: moment(date).minutes()
+        };
+        if (this.autoConfirm) {
+            this.apply();
+        }
+        this.updateDays();
+    }
+}
+ZenduDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduDatepickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ZenduDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduDatepickerComponent, selector: "zen-datepicker", inputs: { date: "date", showTime: "showTime", showDate: "showDate", containerClass: "containerClass", minDate: "minDate", maxDate: "maxDate", boxDesign: "boxDesign", highlightDays: "highlightDays", autoConfirm: "autoConfirm", hint: "hint", highlightError: "highlightError", disabled: "disabled", readonly: "readonly", xPosition: "xPosition", yPosition: "yPosition" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:scroll": "scroll()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"date-component\">\n    <!-- Material design datepicker toggle -->\n    <ng-container *ngIf=\"!boxDesign\">\n        <button class=\"date-toggle\"\n                [disabled]=\"disabled || readonly\"\n                (click)=\"togglePicker()\"\n                [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n\n            <div class=\"date-content\">\n                <!-- date placeholder -->\n                <div class=\"date-placeholder\"\n                     *ngIf=\"!date\">\n                    Select Date\n                </div>\n\n                <!-- Selected datetime -->\n                <div *ngIf=\"date\">\n                    <span *ngIf=\"showDate\">{{formattedDate()}}</span>\n                    <span *ngIf=\"showTime\">&nbsp;{{formattedTime()}}</span>\n                </div>\n            </div>\n\n            <!-- Datepicker icon, depends on picker type -->\n            <zen-icon class=\"date-icon\"\n                      [src]=\"getIcon()\"\n                      [ngClass]=\"{'filled': date}\">\n            </zen-icon>\n        </button>\n    </ng-container>\n\n    <!-- Box design datepicker toggle -->\n    <ng-container *ngIf=\"boxDesign\">\n        <button class=\"date-toggle new-box-design\"\n                [disabled]=\"disabled || readonly\"\n                (click)=\"togglePicker()\"\n                [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n\n            <!-- Datepicker icon, depends on picker type -->\n            <zen-icon class=\"date-icon\"\n                      [src]=\"getIcon()\"\n                      [ngClass]=\"{'filled': date}\">\n            </zen-icon>\n\n            <div class=\"date-content new-box-design\">\n                <!-- date placeholder -->\n                <div class=\"date-placeholder\"\n                     *ngIf=\"!date\">\n                    Select Date\n                </div>\n\n                <!-- Selected datetime -->\n                <div *ngIf=\"date\">\n                    <span *ngIf=\"showDate\">{{formattedDate()}}</span>\n                    <span *ngIf=\"showTime\">&nbsp;{{formattedTime()}}</span>\n                </div>\n            </div>\n        </button>\n    </ng-container>\n\n    <!-- Datepicker popup -->\n    <div *ngIf=\"isPickerVisible\"\n         class=\"date-menu\"\n         [ngClass]=\"{ 'right': right, 'bottom': bottom }\">\n        <div class=\"date-modal\">\n            <ng-container *ngIf=\"showDate\">\n                <div class=\"days-toolbar\">\n                    <i (click)=\"prevMonth()\"\n                       class=\"material-icons\">navigate_before</i>\n                    <span class=\"title\"\n                          (click)=\"showMonthPicker()\">{{daysTitle}}</span>\n                    <i (click)=\"nextMonth()\"\n                       class=\"material-icons\">navigate_next</i>\n                </div>\n                <div class=\"days-container\">\n                    <div class=\"week-days\">\n                        <div *ngFor=\"let weekDay of weekDays\"\n                             class=\"week-day\">\n                            {{weekDay}}\n                        </div>\n                    </div>\n                    <div *ngFor=\"let row of dayRows\"\n                         class=\"day-row\">\n                        <div *ngFor=\"let day of row.days\"\n                             (click)=\"selectDay(day)\"\n                             class=\"day-item\"\n                             [class.ousideRange]=\"day.isOutside\"\n                             [class.selected]=\"day.selected\"\n                             [class.disabledDay]=\"day.isDisabled\">\n                            {{day.lbl}}\n                            <zen-icon *ngIf=\"day.isHighlighted\"\n                                      class=\"highlight-icon\"\n                                      src=\"assets/ng-zenduit/icons/play.svg\"></zen-icon>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n            <div *ngIf=\"showTime\"\n                 class=\"time-container\">\n\n                <div class=\"time-lbl\">\n                    Select Time:\n                </div>\n\n                <div class=\"time-picker\">\n                    <div class=\"input-wrapper\">\n                        <zen-icon (click)=\"hourUp()\"\n                                  src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                        <input [(ngModel)]=\"hour\"\n                               (ngModelChange)=\"timeChanged()\" />\n                        <zen-icon (click)=\"hourDown()\"\n                                  src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                    </div>\n                    <label>:</label>\n                    <div class=\"input-wrapper\">\n                        <zen-icon (click)=\"minUp()\"\n                                  src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                        <input [(ngModel)]=\"min\"\n                               (ngModelChange)=\"timeChanged()\" />\n                        <zen-icon (click)=\"minDown()\"\n                                  src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                    </div>\n                    <div class=\"am-pm-picker\">\n                        <div class=\"main\"\n                             (click)=\"toggleTime()\">\n                            {{isPM ? 'PM' : 'AM'}}\n                        </div>\n                        <div class=\"sub\"\n                             (click)=\"toggleTime()\">\n                            {{isPM ? 'AM' : 'PM'}}\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint\"\n                 *ngIf=\"hint\">\n                <div class=\"hint-description\">\n                    {{hint.description}}\n                </div>\n                <div class=\"hint-date\"\n                     (click)=\"selectHintDate(hint.date)\">\n                    {{hint.maskText}}\n                </div>\n            </div>\n\n            <div class=\"footer\"\n                 *ngIf=\"!autoConfirm || showTime\">\n                <button *ngIf=\"date\"\n                        (click)=\"clear()\"\n                        class=\"button-stroked\">\n                    Clear\n                </button>\n                <button *ngIf=\"!date\"\n                        (click)=\"cancel()\"\n                        class=\"button-stroked\">\n                    Cancel\n                </button>\n                <button [disabled]=\"!_dateToSet\"\n                        (click)=\"apply()\"\n                        class=\"button-flat\">\n                    Apply\n                </button>\n            </div>\n\n            <ng-container *ngIf=\"monthPickerVisible\">\n                <div class=\"month-picker\">\n                    <div class=\"days-toolbar\">\n                        <i (click)=\"prevYear()\"\n                           class=\"material-icons\">navigate_before</i>\n                        <span class=\"title\"\n                              (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n                        <i (click)=\"nextYear()\"\n                           class=\"material-icons\">navigate_next</i>\n                    </div>\n                    <div class=\"months-container\">\n                        <div class=\"month-item\"\n                             *ngFor=\"let month of months; index as index\"\n                             (click)=\"selectMonth(index)\">\n                            {{ month }}\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"yearPickerVisible\">\n                <div class=\"month-picker\">\n                    <div class=\"days-toolbar\">\n                        <i (click)=\"prevYearGroup()\"\n                           class=\"material-icons\">navigate_before</i>\n                        <span class=\"title\"\n                              (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n                        <i (click)=\"nextYearGroup()\"\n                           class=\"material-icons\">navigate_next</i>\n                    </div>\n                    <div class=\"months-container\">\n                        <div class=\"month-item\"\n                             *ngFor=\"let year of years\"\n                             (click)=\"selectYear(year)\">\n                            {{ year }}\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"date-modal-extra-space\"></div>\n    </div>\n</div>\n", styles: [".date-component{width:100%;position:relative}.date-component .date-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;gap:9px;transition:.3s;width:100%;background:var(--color-white-primary, #ffffff);-webkit-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid var(--color-white-tint-4, #d6d6d8);padding:0 0 8px;font-size:14px;font-style:normal;font-weight:400;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.date-component .date-toggle.new-box-design{border:1px solid var(--color-white-tint-1, #f2f2f2);border-radius:2px;padding:6px 12px;gap:4px!important}.date-component .date-toggle:hover .date-placeholder{color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:hover .date-icon{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:focus,.date-component .date-toggle.active{border-color:var(--color-blue-primary, #2188d9)}.date-component .date-toggle:focus .date-icon,.date-component .date-toggle.active .date-icon{background-color:var(--color-blue-primary, #2188d9)!important}.date-component .date-toggle[disabled]{cursor:not-allowed;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle[disabled] .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle[disabled] .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly{cursor:default;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle.readonly .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.error{border-color:var(--color-error-primary, #dc3e33)}.date-component .date-toggle.error .date-icon{background-color:var(--color-error-primary, #dc3e33)!important}.date-component .date-toggle.error .date-content.new-box-design{color:var(--color-error-primary, #dc3e33)!important}.date-component .date-content{flex:1;font-size:16px;text-align:left;height:18px;min-width:30px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap;transition:.3s}.date-component .date-content .date-placeholder{transition:.3s;color:var(--color-white-tint-6, #bebebe)}.date-component .date-content.new-box-design{color:var(--color-grey-shade-2, #828282)}.date-component .date-icon{width:24px;height:24px;background-color:var(--color-white-tint-6, #bebebe);transition:.3s}.date-component .date-icon.filled{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-menu{width:320px;background:transparent;position:absolute;z-index:10}.date-component .date-menu .date-modal{border-radius:8px;width:320px;overflow-y:auto;white-space:initial;background:#ffffff;box-shadow:0 2px 4px -1px #00000008,0 4px 5px #0000003d,0 1px 10px #0000001a}.date-component .date-menu .date-modal-extra-space{height:10px;margin:0 0 -10px;background:transparent}.date-component .date-menu .days-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 34px}.date-component .date-menu .days-toolbar .material-icons{color:#333;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none}.date-component .date-menu .days-toolbar .title{font-size:14px;font-weight:500;color:var(--color-grey-primary, #4f4f4f);cursor:pointer}.date-component .date-menu .days-container{border-bottom:1px solid #f2f2f2;padding:0 24px}.date-component .date-menu .days-container .week-days{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--color-grey-primary, #4f4f4f);font-weight:500;margin-bottom:8px;cursor:default}.date-component .date-menu .days-container .week-days .week-day{width:39px;text-align:center}.date-component .date-menu .days-container .day-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:400;color:var(--color-grey-primary, #4f4f4f)}.date-component .date-menu .days-container .day-row .day-item{position:relative;width:39px;height:39px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:4px}.date-component .date-menu .days-container .day-row .day-item .highlight-icon{position:absolute;right:0;height:14px;width:14px;background-color:#5cbb3a}.date-component .date-menu .days-container .day-row .day-item:hover{background:var(--color-blue-tint-1, #f4f9fd);color:var(--color-blue-primary, #2188d9)}.date-component .date-menu .days-container .day-row .day-item.selected{background:var(--color-primary, #2188d9);color:#fff}.date-component .date-menu .days-container .day-row .day-item.selected .highlight-icon{background-color:#fff}.date-component .date-menu .days-container .day-row .day-item.ousideRange{color:#b8b9bc}.date-component .date-menu .days-container .day-row .day-item.disabledDay{color:#b8b9bc;cursor:not-allowed!important}.date-component .time-container{display:flex;padding:16px 24px;justify-content:space-between;border-bottom:1px solid #f2f2f2;align-items:center}.date-component .time-container .time-lbl{font-weight:500;font-size:14px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap}.date-component .time-container .time-picker{display:flex;align-items:center;gap:7px}.date-component .time-container .time-picker .input-wrapper{display:flex;flex-direction:column;align-items:center}.date-component .time-container .time-picker .input-wrapper zen-icon{background-color:var(--color-white-tint-4, #d6d6d8);width:16px;height:16px;cursor:pointer}.date-component .time-container .time-picker .input-wrapper input{width:30px;height:25px;text-align:center;border:1px solid var(--color-white-tint-1, #f2f2f2);font-weight:400;font-size:14px;color:var(--color-grey-primary, #4f4f4f);border-radius:2px}.date-component .time-container .time-picker .input-wrapper input:focus{outline:none;border-color:var(--color-blue-primary, #2188d9)}.date-component .time-container .time-picker .am-pm-picker{font-weight:400;font-size:14px;padding-top:18px;cursor:pointer}.date-component .time-container .time-picker .am-pm-picker .main{color:var(--color-grey-primary, #4f4f4f)}.date-component .time-container .time-picker .am-pm-picker .sub{color:var(--color-white-tint-4, #d6d6d8)}.date-component .hint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 24px;border-bottom:1px solid #ECECED;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:#4f4f4f}.date-component .hint .hint-date{cursor:pointer;text-decoration-line:underline}.date-component .footer{display:flex;justify-content:end;gap:16px;padding:16px 24px}.date-component .month-picker{position:absolute;inset:0;background:white}.date-component .month-picker .months-container{display:flex;flex-wrap:wrap;justify-content:space-between;padding:10px 20px}.date-component .month-picker .months-container .month-item{display:inline-flex;align-items:center;justify-content:center;height:50px;width:30%;cursor:pointer;color:var(--color-grey-shade-2, #828282);border-radius:4px}.date-component .month-picker .months-container .month-item:hover{color:#fff;background-color:var(--color-blue-primary, #2188d9)}.date-component .right{right:0}.date-component .bottom{bottom:42px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-datepicker', template: "<div class=\"date-component\">\n    <!-- Material design datepicker toggle -->\n    <ng-container *ngIf=\"!boxDesign\">\n        <button class=\"date-toggle\"\n                [disabled]=\"disabled || readonly\"\n                (click)=\"togglePicker()\"\n                [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n\n            <div class=\"date-content\">\n                <!-- date placeholder -->\n                <div class=\"date-placeholder\"\n                     *ngIf=\"!date\">\n                    Select Date\n                </div>\n\n                <!-- Selected datetime -->\n                <div *ngIf=\"date\">\n                    <span *ngIf=\"showDate\">{{formattedDate()}}</span>\n                    <span *ngIf=\"showTime\">&nbsp;{{formattedTime()}}</span>\n                </div>\n            </div>\n\n            <!-- Datepicker icon, depends on picker type -->\n            <zen-icon class=\"date-icon\"\n                      [src]=\"getIcon()\"\n                      [ngClass]=\"{'filled': date}\">\n            </zen-icon>\n        </button>\n    </ng-container>\n\n    <!-- Box design datepicker toggle -->\n    <ng-container *ngIf=\"boxDesign\">\n        <button class=\"date-toggle new-box-design\"\n                [disabled]=\"disabled || readonly\"\n                (click)=\"togglePicker()\"\n                [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n\n            <!-- Datepicker icon, depends on picker type -->\n            <zen-icon class=\"date-icon\"\n                      [src]=\"getIcon()\"\n                      [ngClass]=\"{'filled': date}\">\n            </zen-icon>\n\n            <div class=\"date-content new-box-design\">\n                <!-- date placeholder -->\n                <div class=\"date-placeholder\"\n                     *ngIf=\"!date\">\n                    Select Date\n                </div>\n\n                <!-- Selected datetime -->\n                <div *ngIf=\"date\">\n                    <span *ngIf=\"showDate\">{{formattedDate()}}</span>\n                    <span *ngIf=\"showTime\">&nbsp;{{formattedTime()}}</span>\n                </div>\n            </div>\n        </button>\n    </ng-container>\n\n    <!-- Datepicker popup -->\n    <div *ngIf=\"isPickerVisible\"\n         class=\"date-menu\"\n         [ngClass]=\"{ 'right': right, 'bottom': bottom }\">\n        <div class=\"date-modal\">\n            <ng-container *ngIf=\"showDate\">\n                <div class=\"days-toolbar\">\n                    <i (click)=\"prevMonth()\"\n                       class=\"material-icons\">navigate_before</i>\n                    <span class=\"title\"\n                          (click)=\"showMonthPicker()\">{{daysTitle}}</span>\n                    <i (click)=\"nextMonth()\"\n                       class=\"material-icons\">navigate_next</i>\n                </div>\n                <div class=\"days-container\">\n                    <div class=\"week-days\">\n                        <div *ngFor=\"let weekDay of weekDays\"\n                             class=\"week-day\">\n                            {{weekDay}}\n                        </div>\n                    </div>\n                    <div *ngFor=\"let row of dayRows\"\n                         class=\"day-row\">\n                        <div *ngFor=\"let day of row.days\"\n                             (click)=\"selectDay(day)\"\n                             class=\"day-item\"\n                             [class.ousideRange]=\"day.isOutside\"\n                             [class.selected]=\"day.selected\"\n                             [class.disabledDay]=\"day.isDisabled\">\n                            {{day.lbl}}\n                            <zen-icon *ngIf=\"day.isHighlighted\"\n                                      class=\"highlight-icon\"\n                                      src=\"assets/ng-zenduit/icons/play.svg\"></zen-icon>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n            <div *ngIf=\"showTime\"\n                 class=\"time-container\">\n\n                <div class=\"time-lbl\">\n                    Select Time:\n                </div>\n\n                <div class=\"time-picker\">\n                    <div class=\"input-wrapper\">\n                        <zen-icon (click)=\"hourUp()\"\n                                  src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                        <input [(ngModel)]=\"hour\"\n                               (ngModelChange)=\"timeChanged()\" />\n                        <zen-icon (click)=\"hourDown()\"\n                                  src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                    </div>\n                    <label>:</label>\n                    <div class=\"input-wrapper\">\n                        <zen-icon (click)=\"minUp()\"\n                                  src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                        <input [(ngModel)]=\"min\"\n                               (ngModelChange)=\"timeChanged()\" />\n                        <zen-icon (click)=\"minDown()\"\n                                  src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                    </div>\n                    <div class=\"am-pm-picker\">\n                        <div class=\"main\"\n                             (click)=\"toggleTime()\">\n                            {{isPM ? 'PM' : 'AM'}}\n                        </div>\n                        <div class=\"sub\"\n                             (click)=\"toggleTime()\">\n                            {{isPM ? 'AM' : 'PM'}}\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"hint\"\n                 *ngIf=\"hint\">\n                <div class=\"hint-description\">\n                    {{hint.description}}\n                </div>\n                <div class=\"hint-date\"\n                     (click)=\"selectHintDate(hint.date)\">\n                    {{hint.maskText}}\n                </div>\n            </div>\n\n            <div class=\"footer\"\n                 *ngIf=\"!autoConfirm || showTime\">\n                <button *ngIf=\"date\"\n                        (click)=\"clear()\"\n                        class=\"button-stroked\">\n                    Clear\n                </button>\n                <button *ngIf=\"!date\"\n                        (click)=\"cancel()\"\n                        class=\"button-stroked\">\n                    Cancel\n                </button>\n                <button [disabled]=\"!_dateToSet\"\n                        (click)=\"apply()\"\n                        class=\"button-flat\">\n                    Apply\n                </button>\n            </div>\n\n            <ng-container *ngIf=\"monthPickerVisible\">\n                <div class=\"month-picker\">\n                    <div class=\"days-toolbar\">\n                        <i (click)=\"prevYear()\"\n                           class=\"material-icons\">navigate_before</i>\n                        <span class=\"title\"\n                              (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n                        <i (click)=\"nextYear()\"\n                           class=\"material-icons\">navigate_next</i>\n                    </div>\n                    <div class=\"months-container\">\n                        <div class=\"month-item\"\n                             *ngFor=\"let month of months; index as index\"\n                             (click)=\"selectMonth(index)\">\n                            {{ month }}\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"yearPickerVisible\">\n                <div class=\"month-picker\">\n                    <div class=\"days-toolbar\">\n                        <i (click)=\"prevYearGroup()\"\n                           class=\"material-icons\">navigate_before</i>\n                        <span class=\"title\"\n                              (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n                        <i (click)=\"nextYearGroup()\"\n                           class=\"material-icons\">navigate_next</i>\n                    </div>\n                    <div class=\"months-container\">\n                        <div class=\"month-item\"\n                             *ngFor=\"let year of years\"\n                             (click)=\"selectYear(year)\">\n                            {{ year }}\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"date-modal-extra-space\"></div>\n    </div>\n</div>\n", styles: [".date-component{width:100%;position:relative}.date-component .date-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;gap:9px;transition:.3s;width:100%;background:var(--color-white-primary, #ffffff);-webkit-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid var(--color-white-tint-4, #d6d6d8);padding:0 0 8px;font-size:14px;font-style:normal;font-weight:400;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.date-component .date-toggle.new-box-design{border:1px solid var(--color-white-tint-1, #f2f2f2);border-radius:2px;padding:6px 12px;gap:4px!important}.date-component .date-toggle:hover .date-placeholder{color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:hover .date-icon{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:focus,.date-component .date-toggle.active{border-color:var(--color-blue-primary, #2188d9)}.date-component .date-toggle:focus .date-icon,.date-component .date-toggle.active .date-icon{background-color:var(--color-blue-primary, #2188d9)!important}.date-component .date-toggle[disabled]{cursor:not-allowed;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle[disabled] .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle[disabled] .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly{cursor:default;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle.readonly .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.error{border-color:var(--color-error-primary, #dc3e33)}.date-component .date-toggle.error .date-icon{background-color:var(--color-error-primary, #dc3e33)!important}.date-component .date-toggle.error .date-content.new-box-design{color:var(--color-error-primary, #dc3e33)!important}.date-component .date-content{flex:1;font-size:16px;text-align:left;height:18px;min-width:30px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap;transition:.3s}.date-component .date-content .date-placeholder{transition:.3s;color:var(--color-white-tint-6, #bebebe)}.date-component .date-content.new-box-design{color:var(--color-grey-shade-2, #828282)}.date-component .date-icon{width:24px;height:24px;background-color:var(--color-white-tint-6, #bebebe);transition:.3s}.date-component .date-icon.filled{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-menu{width:320px;background:transparent;position:absolute;z-index:10}.date-component .date-menu .date-modal{border-radius:8px;width:320px;overflow-y:auto;white-space:initial;background:#ffffff;box-shadow:0 2px 4px -1px #00000008,0 4px 5px #0000003d,0 1px 10px #0000001a}.date-component .date-menu .date-modal-extra-space{height:10px;margin:0 0 -10px;background:transparent}.date-component .date-menu .days-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 34px}.date-component .date-menu .days-toolbar .material-icons{color:#333;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none}.date-component .date-menu .days-toolbar .title{font-size:14px;font-weight:500;color:var(--color-grey-primary, #4f4f4f);cursor:pointer}.date-component .date-menu .days-container{border-bottom:1px solid #f2f2f2;padding:0 24px}.date-component .date-menu .days-container .week-days{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--color-grey-primary, #4f4f4f);font-weight:500;margin-bottom:8px;cursor:default}.date-component .date-menu .days-container .week-days .week-day{width:39px;text-align:center}.date-component .date-menu .days-container .day-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:400;color:var(--color-grey-primary, #4f4f4f)}.date-component .date-menu .days-container .day-row .day-item{position:relative;width:39px;height:39px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:4px}.date-component .date-menu .days-container .day-row .day-item .highlight-icon{position:absolute;right:0;height:14px;width:14px;background-color:#5cbb3a}.date-component .date-menu .days-container .day-row .day-item:hover{background:var(--color-blue-tint-1, #f4f9fd);color:var(--color-blue-primary, #2188d9)}.date-component .date-menu .days-container .day-row .day-item.selected{background:var(--color-primary, #2188d9);color:#fff}.date-component .date-menu .days-container .day-row .day-item.selected .highlight-icon{background-color:#fff}.date-component .date-menu .days-container .day-row .day-item.ousideRange{color:#b8b9bc}.date-component .date-menu .days-container .day-row .day-item.disabledDay{color:#b8b9bc;cursor:not-allowed!important}.date-component .time-container{display:flex;padding:16px 24px;justify-content:space-between;border-bottom:1px solid #f2f2f2;align-items:center}.date-component .time-container .time-lbl{font-weight:500;font-size:14px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap}.date-component .time-container .time-picker{display:flex;align-items:center;gap:7px}.date-component .time-container .time-picker .input-wrapper{display:flex;flex-direction:column;align-items:center}.date-component .time-container .time-picker .input-wrapper zen-icon{background-color:var(--color-white-tint-4, #d6d6d8);width:16px;height:16px;cursor:pointer}.date-component .time-container .time-picker .input-wrapper input{width:30px;height:25px;text-align:center;border:1px solid var(--color-white-tint-1, #f2f2f2);font-weight:400;font-size:14px;color:var(--color-grey-primary, #4f4f4f);border-radius:2px}.date-component .time-container .time-picker .input-wrapper input:focus{outline:none;border-color:var(--color-blue-primary, #2188d9)}.date-component .time-container .time-picker .am-pm-picker{font-weight:400;font-size:14px;padding-top:18px;cursor:pointer}.date-component .time-container .time-picker .am-pm-picker .main{color:var(--color-grey-primary, #4f4f4f)}.date-component .time-container .time-picker .am-pm-picker .sub{color:var(--color-white-tint-4, #d6d6d8)}.date-component .hint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 24px;border-bottom:1px solid #ECECED;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:#4f4f4f}.date-component .hint .hint-date{cursor:pointer;text-decoration-line:underline}.date-component .footer{display:flex;justify-content:end;gap:16px;padding:16px 24px}.date-component .month-picker{position:absolute;inset:0;background:white}.date-component .month-picker .months-container{display:flex;flex-wrap:wrap;justify-content:space-between;padding:10px 20px}.date-component .month-picker .months-container .month-item{display:inline-flex;align-items:center;justify-content:center;height:50px;width:30%;cursor:pointer;color:var(--color-grey-shade-2, #828282);border-radius:4px}.date-component .month-picker .months-container .month-item:hover{color:#fff;background-color:var(--color-blue-primary, #2188d9)}.date-component .right{right:0}.date-component .bottom{bottom:42px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { date: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }], showTime: [{
+                type: Input
+            }], showDate: [{
+                type: Input
+            }], containerClass: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], boxDesign: [{
+                type: Input
+            }], highlightDays: [{
+                type: Input
+            }], autoConfirm: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], highlightError: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], xPosition: [{
+                type: Input
+            }], yPosition: [{
+                type: Input
+            }], outsideHandling: [{
+                type: HostListener,
+                args: ['window:mousedown', ['$event']]
+            }], scroll: [{
+                type: HostListener,
+                args: ['window:scroll', []]
+            }] } });
+
+class ZenduToggleSlideComponent {
+    constructor() {
+        this.enabledChange = new EventEmitter();
+    }
+    /**
+     * Toggle state
+     */
+    toggle() {
+        this.enabled = !this.enabled;
+        this.enabledChange.emit(this.enabled);
+    }
+}
+ZenduToggleSlideComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduToggleSlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduToggleSlideComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduToggleSlideComponent, selector: "zen-toggle-slide", inputs: { enabled: "enabled", disabled: "disabled" }, outputs: { enabledChange: "enabledChange" }, ngImport: i0, template: "<button class=\"toggle-slide-component\"\n     (click)=\"toggle()\"\n     [disabled]=\"disabled\"\n     [class.active]=\"enabled\"\n     [class.disabled]=\"disabled\">\n\n        <div class=\"toggle-slider\"></div>\n        <div class=\"toggle-btn\"></div>\n</button>\n", styles: [".toggle-slide-component{position:relative;padding:8px;background:none;border:none;cursor:pointer;outline:none}.toggle-slide-component .toggle-slider{width:25px;height:4px;background:#def0ff;border-radius:2px}.toggle-slide-component .toggle-btn{position:absolute;left:2px;top:3px;background:#ffffff;width:15px;height:15px;border-radius:8px;box-shadow:0 0 10px #bee1fd;transition:.4s}.toggle-slide-component:focus .toggle-slider,.toggle-slide-component:focus .toggle-btn{box-shadow:0 0 2px 2px #2188d94d}.toggle-slide-component:hover .toggle-slider{background:#d5ebfd}.toggle-slide-component.active .toggle-slider,.toggle-slide-component.active .toggle-btn{background:var(--color-primary, #2188d9)}.toggle-slide-component.active .toggle-btn{left:24px;background:var(--color-primary, #2188d9)}.toggle-slide-component.active:hover .toggle-slider,.toggle-slide-component.active:hover .toggle-btn{background-color:#0d74c5}.toggle-slide-component.disabled{cursor:not-allowed}.toggle-slide-component.disabled .toggle-slider,.toggle-slide-component.disabled .toggle-btn{background:#d0d0d2}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduToggleSlideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-toggle-slide', template: "<button class=\"toggle-slide-component\"\n     (click)=\"toggle()\"\n     [disabled]=\"disabled\"\n     [class.active]=\"enabled\"\n     [class.disabled]=\"disabled\">\n\n        <div class=\"toggle-slider\"></div>\n        <div class=\"toggle-btn\"></div>\n</button>\n", styles: [".toggle-slide-component{position:relative;padding:8px;background:none;border:none;cursor:pointer;outline:none}.toggle-slide-component .toggle-slider{width:25px;height:4px;background:#def0ff;border-radius:2px}.toggle-slide-component .toggle-btn{position:absolute;left:2px;top:3px;background:#ffffff;width:15px;height:15px;border-radius:8px;box-shadow:0 0 10px #bee1fd;transition:.4s}.toggle-slide-component:focus .toggle-slider,.toggle-slide-component:focus .toggle-btn{box-shadow:0 0 2px 2px #2188d94d}.toggle-slide-component:hover .toggle-slider{background:#d5ebfd}.toggle-slide-component.active .toggle-slider,.toggle-slide-component.active .toggle-btn{background:var(--color-primary, #2188d9)}.toggle-slide-component.active .toggle-btn{left:24px;background:var(--color-primary, #2188d9)}.toggle-slide-component.active:hover .toggle-slider,.toggle-slide-component.active:hover .toggle-btn{background-color:#0d74c5}.toggle-slide-component.disabled{cursor:not-allowed}.toggle-slide-component.disabled .toggle-slider,.toggle-slide-component.disabled .toggle-btn{background:#d0d0d2}\n"] }]
+        }], propDecorators: { enabled: [{
+                type: Input
+            }], enabledChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class ZenduRadioButtonComponent {
+    constructor() {
+        this.radioChange = new EventEmitter();
+        this.disabled = false;
+    }
+    ngOnInit() {
+    }
+    ngOnChanges(changes) {
+        if (changes["selected"]) {
+            if (changes["selected"].currentValue) {
+                this.selectedRadio = this.value;
+            }
+            else {
+                this.selectedRadio = "";
+            }
+        }
+    }
+    emitChange(event) {
+        if (this.disabled) {
+            return;
+        }
+        this.radioChange.emit(event.target.value);
+    }
+}
+ZenduRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduRadioButtonComponent, selector: "zen-radio", inputs: { selected: "selected", label: "label", value: "value", name: "name", disabled: "disabled", imageUrl: "imageUrl" }, outputs: { radioChange: "radioChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"radio-component\"\n     [ngClass]=\"{'disabled-radio': disabled}\">\n       <input type=\"radio\"\n              class=\"radio-input\"\n              name=\"{{name}}\"\n              [value]=\"value\"\n              [disabled]=\"disabled\"\n              id=\"{{value}}\"\n              [checked]=\"selectedRadio === value\"\n              (change)=\"emitChange($event)\" />\n\n       <label class=\"app-radio-button-label\"\n              for=\"{{value}}\">\n              <img class=\"radio-image\"\n                   [src]=\"imageUrl\"\n                   *ngIf=\"imageUrl\">\n              {{label}}\n       </label>\n</div>", styles: [".radio-component{display:flex;align-items:center;cursor:pointer;gap:8px;color:#828282;font-size:14px}.radio-component .radio-input{position:absolute;left:-9999px}.radio-component .radio-input+label{position:relative;padding:0 0 0 24px;cursor:pointer;display:flex;align-items:center;font-weight:400;width:100%}.radio-component .radio-input+label:before{content:\"\";background:#fff;border:1.6px solid #D6D6D8;height:16.67px;width:16.67px;border-radius:50%;position:absolute;left:0}.radio-component .radio-input+label:hover:before{border:1.6px solid #828282}.radio-component .radio-input+label:after{content:\"\";background:#2188D9;width:10px;height:10px;border-radius:50%;position:absolute;left:5px;opacity:0;transform:scale(2);transition:transform .3s linear,opacity .3s linear}.radio-component .radio-input:checked+label{color:#4f4f4f}.radio-component .radio-input:checked+label:before{border:1.6px solid #2188D9}.radio-component .radio-input:checked+label:hover:before{border:1.6px solid #16598D}.radio-component .radio-input:checked+label:after{opacity:1;transform:scale(1)}.radio-component .radio-input:checked+label:hover:after{background:#16598D}.radio-component .radio-image{margin-right:8px}.radio-component.disabled-radio .radio-input+label{cursor:not-allowed;color:#e0e0e0}.radio-component.disabled-radio .radio-input+label:before{border:1.6px solid #E0E0E0}.radio-component.disabled-radio .radio-input:checked+label:hover:before{border:1.6px solid #E0E0E0}.radio-component.disabled-radio .radio-input:checked+label:after{background:#E0E0E0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduRadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-radio', template: "<div class=\"radio-component\"\n     [ngClass]=\"{'disabled-radio': disabled}\">\n       <input type=\"radio\"\n              class=\"radio-input\"\n              name=\"{{name}}\"\n              [value]=\"value\"\n              [disabled]=\"disabled\"\n              id=\"{{value}}\"\n              [checked]=\"selectedRadio === value\"\n              (change)=\"emitChange($event)\" />\n\n       <label class=\"app-radio-button-label\"\n              for=\"{{value}}\">\n              <img class=\"radio-image\"\n                   [src]=\"imageUrl\"\n                   *ngIf=\"imageUrl\">\n              {{label}}\n       </label>\n</div>", styles: [".radio-component{display:flex;align-items:center;cursor:pointer;gap:8px;color:#828282;font-size:14px}.radio-component .radio-input{position:absolute;left:-9999px}.radio-component .radio-input+label{position:relative;padding:0 0 0 24px;cursor:pointer;display:flex;align-items:center;font-weight:400;width:100%}.radio-component .radio-input+label:before{content:\"\";background:#fff;border:1.6px solid #D6D6D8;height:16.67px;width:16.67px;border-radius:50%;position:absolute;left:0}.radio-component .radio-input+label:hover:before{border:1.6px solid #828282}.radio-component .radio-input+label:after{content:\"\";background:#2188D9;width:10px;height:10px;border-radius:50%;position:absolute;left:5px;opacity:0;transform:scale(2);transition:transform .3s linear,opacity .3s linear}.radio-component .radio-input:checked+label{color:#4f4f4f}.radio-component .radio-input:checked+label:before{border:1.6px solid #2188D9}.radio-component .radio-input:checked+label:hover:before{border:1.6px solid #16598D}.radio-component .radio-input:checked+label:after{opacity:1;transform:scale(1)}.radio-component .radio-input:checked+label:hover:after{background:#16598D}.radio-component .radio-image{margin-right:8px}.radio-component.disabled-radio .radio-input+label{cursor:not-allowed;color:#e0e0e0}.radio-component.disabled-radio .radio-input+label:before{border:1.6px solid #E0E0E0}.radio-component.disabled-radio .radio-input:checked+label:hover:before{border:1.6px solid #E0E0E0}.radio-component.disabled-radio .radio-input:checked+label:after{background:#E0E0E0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { selected: [{
+                type: Input
+            }], radioChange: [{
+                type: Output
+            }], label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }] } });
+
+class ZenduFilterComponent {
+    constructor() {
+        this.config = { items: [] };
+        this.position = 'right';
+        this.resetBehavior = 'clear';
+        this.filterChange = new EventEmitter();
+        this.isVisible = false;
+        this.isVisibleChange = new EventEmitter();
+        this.customTrigger = false;
+        this.searchText = '';
+        this.isApplied = false;
+        this.lastAppliedFilter = {};
+        this.menuLeft = "0px";
+        this.menuRight = "0px";
+        this.menuTop = "0px";
+        this.menuBottom = "0px";
+        this.errorMessage = [];
+        this.datepickerPosition = DATEPICKER_POSITION;
+    }
+    ngOnChanges(changes) {
+        if (changes.config && changes.config.currentValue) {
+            // init values
+            for (const item of this.config.items) {
+                if (item.type === 'multiselect') {
+                    item.dataSource = item.dataSource ? this.extractUniqueDataSource(item.dataSource) : [];
+                }
+                else if (item.type === 'dateRange' && !item.dateRange) {
+                    item.dateRange = { start: null, end: null };
+                }
+                else if (item.type === 'numberRange' && !item.numberRange) {
+                    item.numberRange = {};
+                }
+                if (typeof item.showTime !== 'boolean') {
+                    item.showTime = true;
+                }
+            }
+            this.filterItems();
+            this.resetedFilter = this.getFilterObject();
+            this.filter = this.getFilterObject();
+            this.lastAppliedFilter = Util.clone(this.filter);
+        }
+        if (changes.filter && changes.filter.currentValue) {
+            this.lastAppliedFilter = Util.clone(changes.filter.currentValue);
+            this.updateAppliedState();
+        }
+        if (changes.isVisible && changes.isVisible.currentValue) {
+            this.updatePlacement();
+            this.focusSearchBox();
+        }
+    }
+    outsideHandling(event) {
+        if (!this.isVisible) {
+            return;
+        }
+        const target = event.target;
+        if (!document.body.contains(target)) {
+            // element not in the DOM
+            return;
+        }
+        if (this._componentElement.nativeElement.contains(target)) {
+            return;
+        }
+        // hide the menu for outside click
+        this.hide();
+        // restore values
+        this.restorePreviousApplied();
+    }
+    windowSizeHandling() {
+        if (!this.isVisible) {
+            return;
+        }
+        this.updatePlacement();
+    }
+    windowScroll() {
+        if (!this.isVisible) {
+            return;
+        }
+        this.updatePlacement();
+    }
+    handleMouseScroll(event) {
+        if (!this.isVisible) {
+            return;
+        }
+        const target = event.target;
+        if (!document.body.contains(target)) {
+            return;
+        }
+        if (this._componentElement.nativeElement.contains(target) && !target.classList.contains('button-stroked')) {
+            return;
+        }
+        this.hide();
+        this.restorePreviousApplied();
+    }
+    onWindowKeyDown(event) {
+        if (!this.isVisible) {
+            return;
+        }
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'PageUp' || event.key === 'PageDown' || event.key === 'Home' || event.key === 'End') {
+            const target = event.target;
+            if (!document.body.contains(target)) {
+                return;
+            }
+            if (this._componentElement.nativeElement.contains(target) && !target.classList.contains('button-stroked')) {
+                return;
+            }
+            this.hide();
+            this.restorePreviousApplied();
+        }
+    }
+    focusSearchBox() {
+        this.searchBox.doFocus();
+    }
+    isMenuIsVisible(item) {
+        if (item.filteredDataSource && this.searchText) {
+            if (!item.filteredDataSource.length) {
+                return false;
+            }
+        }
+        return true;
+    }
+    extractUniqueDataSource(array) {
+        const items = array.filter(el => {
+            return Boolean(typeof el.id === 'number' ? typeof el.id !== undefined : el.id &&
+                typeof el.name === 'number' ? typeof el.name !== undefined : el.name);
+        });
+        return uniqBy(items, (el) => el.id);
+    }
+    onSelectAll(item) {
+        item.dataSource.forEach(d => d.checked = item.isSelectedAll);
+    }
+    isItemActive(item) {
+        if (item.type === 'multiselect') {
+            const checkedItems = item.dataSource.filter(el => el.checked);
+            item.isSelectedAll = checkedItems.length === item.dataSource.length;
+            return checkedItems.length > 0;
+        }
+        else if (item.type === 'radio') {
+            const selectedRadio = item.radioOptions.find(ro => ro.selected);
+            return selectedRadio ? true : false;
+        }
+        else if (item.type === 'numberRange') {
+            return Boolean(item.numberRange.from || item.numberRange.to);
+        }
+        else if (item.type === 'dateRange') {
+            return Boolean(item.dateRange.start || item.dateRange.end);
+        }
+        else if (item.type === 'date') {
+            return Boolean(item.date);
+        }
+        else {
+            return false;
+        }
+    }
+    searchTextChanged() {
+        this.filterItems();
+    }
+    filterItems() {
+        let filteredItemsCount = 0; // Initialize with 0
+        for (const configItem of this.config.items) {
+            if (configItem.type === 'multiselect') {
+                configItem.filteredDataSource = configItem.dataSource.filter(el => {
+                    const preparedName = typeof el.name === 'number' ? el.name.toString() : el.name;
+                    return preparedName.toLowerCase().includes(this.searchText.toLowerCase());
+                });
+                filteredItemsCount += configItem.filteredDataSource.length; // Increment the count by the length of filteredDataSource
+            }
+            else if (configItem.type === 'dateRange') {
+                if (this.searchText && !Boolean(configItem.dateRange.start || configItem.dateRange.end)) {
+                    configItem.filteredDataSource = [];
+                }
+            }
+            else if (configItem.type === 'numberRange') {
+                if (this.searchText && !Boolean(configItem.numberRange.from || configItem.numberRange.to)) {
+                    configItem.filteredDataSource = [];
+                }
+            }
+        }
+        this.showNoFilterResult = this.searchText && filteredItemsCount === 0;
+    }
+    resetFilters() {
+        let selectAll = this.resetBehavior === "set_all";
+        for (const item of this.config.items) {
+            if (item.dataSource) {
+                item.isSelectedAll = selectAll;
+                for (const dsItem of item.dataSource) {
+                    dsItem.checked = selectAll;
+                }
+            }
+            if (item.dateRange) {
+                item.dateRange = { start: null, end: null };
+            }
+            if (item.numberRange) {
+                item.numberRange = { from: null, to: null };
+            }
+            if (item.date) {
+                item.date = new Date();
+            }
+            if (item.type === 'toggle') {
+                item.enabled = false;
+            }
+            if (item.type === 'radio') {
+                item.radioOptions.forEach(e => {
+                    if (e.id === item.selectedRadio) {
+                        e.selected = true;
+                    }
+                    else {
+                        e.selected = false;
+                    }
+                });
+            }
+        }
+    }
+    restorePreviousApplied() {
+        for (const item of this.config.items) {
+            switch (item.type) {
+                case 'multiselect':
+                    if (item.dataSource) {
+                        const selection = this.lastAppliedFilter[item.key];
+                        for (const dataItem of item.dataSource) {
+                            dataItem.checked = selection ? selection.includes(dataItem.id) : false;
+                        }
+                    }
+                    break;
+                case 'dateRange':
+                    item.dateRange = this.lastAppliedFilter[item.key] || { start: null, end: null };
+                    break;
+                case 'numberRange':
+                    item.numberRange = this.lastAppliedFilter[item.key] || {};
+                    break;
+                case 'toggle':
+                    item.dateRange = this.lastAppliedFilter[item.key];
+                    break;
+                case 'date':
+                    item.date = this.lastAppliedFilter[item.key];
+                    break;
+                case 'radio':
+                    item.selectedRadio = this.lastAppliedFilter[item.key];
+                    break;
+            }
+        }
+    }
+    reset() {
+        this.resetFilters();
+        this.filter = this.getFilterObject();
+        this.resetedFilter = this.getFilterObject();
+    }
+    apply() {
+        this.filter = this.getFilterObject();
+        let hasError = false;
+        for (const iterator of this.config.items) {
+            const itemFlag = this.onCheckValidity(iterator);
+            if (!itemFlag) {
+                hasError = true;
+            }
+        }
+        if (hasError) {
+            setTimeout(() => this.errorMessage = [], 5000);
+            return;
+        }
+        else {
+            this.errorMessage = [];
+        }
+        this.lastAppliedFilter = Util.clone(this.filter);
+        this.filterChange.emit(this.filter);
+        // update the apply state
+        this.updateAppliedState();
+        this.hide();
+    }
+    updateAppliedState() {
+        this.isApplied = false;
+        if (Object.keys(this.filter).length > 0) {
+            if (this.resetedFilter) {
+                // Filter was reset, so compare the reset filter object with the current filter
+                // When user click on Reset and Then Apply, filter must unhighlighted
+                if (JSON.stringify(this.resetedFilter) !== JSON.stringify(this.filter)) {
+                    this.isApplied = true;
+                }
+            }
+            else {
+                this.isApplied = true;
+            }
+        }
+    }
+    getFilterObject() {
+        const filter = {};
+        for (const item of this.config.items) {
+            switch (item.type) {
+                case 'multiselect':
+                    if (item.dataSource && item.dataSource.length) {
+                        const checkedIds = item.dataSource
+                            .filter(i => i.checked)
+                            .map(i => i.id);
+                        if (checkedIds.length) {
+                            filter[item.key] = checkedIds;
+                        }
+                    }
+                    break;
+                case 'dateRange':
+                    if (item.dateRange &&
+                        item.dateRange.start &&
+                        item.dateRange.end) {
+                        filter[item.key] = item.dateRange;
+                    }
+                    break;
+                case 'numberRange':
+                    if (item.numberRange &&
+                        typeof item?.numberRange?.from === 'number' &&
+                        typeof item?.numberRange?.to === 'number') {
+                        filter[item.key] = item.numberRange;
+                    }
+                    break;
+                case 'toggle':
+                    filter[item.key] = item.enabled || false;
+                    break;
+                case 'date':
+                    if (item.date) {
+                        filter[item.key] = item.date;
+                    }
+                    break;
+                case 'radio':
+                    filter[item.key] = item.radioOptions.find(ro => ro.selected)?.id;
+                    break;
+            }
+        }
+        return filter;
+    }
+    hide() {
+        this.isVisible = false;
+        this.searchText = '';
+        this.filterItems();
+        this.isVisibleChange.emit(false);
+    }
+    radioChanged(value, item) {
+        item.radioOptions.forEach(opt => opt.selected = opt.id === value);
+    }
+    toggle() {
+        this.isVisible = !this.isVisible;
+        this.updatePlacement();
+        this.focusSearchBox();
+    }
+    onCheckValidity(item) {
+        if (item.type === 'numberRange') {
+            if (typeof item.numberRange.from === 'number' && typeof item.numberRange.to === 'number' && item.numberRange.from >= item.numberRange.to) {
+                this.errorMessage.push(`Invalid Number range, Min number should be less than Max number.`);
+                return false;
+            }
+        }
+        if (item.type === 'dateRange') {
+            if (item.dateRange.start && item.dateRange.end && new Date(item.dateRange.start) >= new Date(item.dateRange.end)) {
+                this.errorMessage.push(`Invalid Date range, Start date should be less than End date.`);
+                return false;
+            }
+        }
+        return true;
+    }
+    updatePlacement() {
+        const container = this._componentElement.nativeElement;
+        const rect = container.getBoundingClientRect();
+        const left = rect.left;
+        const right = rect.right;
+        const top = rect.top;
+        const bottom = window.innerHeight - top;
+        //Update left-right position 
+        if (this.position.includes("auto")) {
+            const horizontalPosition = this.getHorizontalPosition();
+            this.menuRight = horizontalPosition === "left" ? `${window.innerWidth - right}px` : "unset";
+            this.menuLeft = horizontalPosition === "right" ? `${left}px` : "unset";
+        }
+        else if (this.position.includes("left")) {
+            this.menuRight = `${window.innerWidth - right}px`;
+            this.menuLeft = "unset";
+        }
+        else {
+            this.menuLeft = `${left}px`;
+            this.menuRight = "unset";
+        }
+        //Update top-bottom position 
+        if (this.position.includes("auto")) {
+            const verticalPosition = this.getVerticalPosition();
+            this.menuTop = verticalPosition === "bottom" ? `${top + 42}px` : "unset";
+            this.menuBottom = verticalPosition === "top" ? `${bottom}px` : "unset";
+        }
+        else if (this.position.includes("top")) {
+            this.menuTop = "unset";
+            this.menuBottom = `${bottom + 10}px`;
+        }
+        else {
+            this.menuTop = `${top + 55}px`;
+            this.menuBottom = "unset";
+        }
+    }
+    getVerticalPosition() {
+        const top = this._componentElement.nativeElement.getBoundingClientRect().top;
+        return top > window.innerHeight / 2 ? "top" : "bottom";
+    }
+    getHorizontalPosition() {
+        const left = this._componentElement.nativeElement.getBoundingClientRect().left;
+        return left > window.innerWidth / 2 ? "left" : "right";
+    }
+}
+ZenduFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduFilterComponent, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label" }, outputs: { filterChange: "filterChange", isVisibleChange: "isVisibleChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:resize": "windowSizeHandling($event)", "window:scroll": "windowScroll($event)", "window:wheel": "handleMouseScroll($event)", "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"filters-component\"\n\t #mainComponent\n\t click-out=\"isVisible && hide()\">\n\n\t<ng-container *ngIf=\"!customTrigger\">\n\t\t<button (click)=\"toggle()\"\n\t\t\t\tclass=\"button-stroked filter {{isApplied ? 'applied' : ''}}\">\n\t\t\t<zen-icon [src]=\"imageUrl\"\n\t\t\t\t\t  *ngIf=\"imageUrl\"></zen-icon>\n\t\t\t<i class=\"filter-icon material-icons\"\n\t\t\t   *ngIf=\"!imageUrl\">filter_list</i>\n\t\t\t<span *ngIf=\"label\">{{ label }}</span>\n\t\t</button>\n\t</ng-container>\n\n\t<ng-content *ngIf=\"customTrigger\"></ng-content>\n\n\t<div [hidden]=\"!isVisible\"\n\t\t class=\"action-menu menu-content\"\n\t\t [class.customTrigger]=\"customTrigger\"\n\t\t [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom  }\">\n\t\t<div class=\"action-menu-header\">\n\t\t\t<zen-search-box [(text)]=\"searchText\"\n\t\t\t\t\t\t\t#searchBox\n\t\t\t\t\t\t\t(textChange)=\"searchTextChanged()\"></zen-search-box>\n\t\t</div>\n\n\t\t<div class=\"action-menu-body items-wrapper\">\n\t\t\t<ng-container *ngIf=\"errorMessage.length\">\n\t\t\t\t<li *ngFor=\"let item of errorMessage\" class=\"error-msg\">{{item}}</li>\n\t\t\t</ng-container>\n\t\t\t\n\t\t\t<div *ngFor=\"let item of config.items\">\n\t\t\t\t<div class=\"menu-item\"\n\t\t\t\t\t *ngIf=\"isMenuIsVisible(item)\">\n\n\t\t\t\t\t<!-- Divider between two filter -->\n\t\t\t\t\t<div *ngIf=\"item.type === 'divider'\">\n\t\t\t\t\t\t<p class=\"filter-divider\"></p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Boolean toggle -->\n\t\t\t\t\t<div *ngIf=\"item.type === 'toggle'\"\n\t\t\t\t\t\t class=\"action-item toggle-row\">\n\t\t\t\t\t\t<div>{{item.title}}</div>\n\t\t\t\t\t\t<zen-toggle-slide [(enabled)]=\"item.enabled\"></zen-toggle-slide>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<button class=\"action-item expander-item\"\n\t\t\t\t\t\t\t*ngIf=\"item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse\"\n\t\t\t\t\t\t\t(click)=\"item.expanded = !item.expanded\"\n\t\t\t\t\t\t\t[ngClass]=\"{'active': isItemActive(item), 'expanded': item.expanded}\">\n\t\t\t\t\t\t<i class=\"material-icons expand-icon\"\n\t\t\t\t\t\t   [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n\t\t\t\t\t\t{{item.title}}\n\t\t\t\t\t</button>\n\n\t\t\t\t\t<ng-container *ngIf=\"item.expanded || item.disableCollapse\">\n\t\t\t\t\t\t<div [ngSwitch]=\"item.type\">\n\t\t\t\t\t\t\t<!-- Multiselect -->\n\t\t\t\t\t\t\t<div *ngSwitchCase=\"'multiselect'\">\n\t\t\t\t\t\t\t\t<div class=\"action-item-checkbox ds-item select-all\">\n\t\t\t\t\t\t\t\t\t<zen-checkbox *ngIf=\"item.dataSource.length === item.filteredDataSource.length\"\n\t\t\t\t\t\t\t\t\t\t\t\t  [(checked)]=\"item.isSelectedAll\"\n\t\t\t\t\t\t\t\t\t\t\t\t  [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n\t\t\t\t\t\t\t\t\t\t\t\t  label=\"Select All\"\n\t\t\t\t\t\t\t\t\t\t\t\t  (checkedChange)=\"onSelectAll(item)\">\n\t\t\t\t\t\t\t\t\t</zen-checkbox>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div *ngFor=\"let dsItem of item.filteredDataSource\"\n\t\t\t\t\t\t\t\t\t class=\"action-item-checkbox ds-item\">\n\t\t\t\t\t\t\t\t\t<zen-checkbox [(checked)]=\"dsItem.checked\"\n\t\t\t\t\t\t\t\t\t\t\t\t  [imageUrl]=\"dsItem.imageUrl\"\n\t\t\t\t\t\t\t\t\t\t\t\t  [label]=\"dsItem.name\"></zen-checkbox>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Date range picker -->\n\t\t\t\t\t\t\t<div *ngSwitchCase=\"'dateRange'\">\n\t\t\t\t\t\t\t\t<div class=\"ds-item filter-row\">\n\t\t\t\t\t\t\t\t\t<div class=\"lbl\">From:</div>\n\t\t\t\t\t\t\t\t\t<zen-datepicker class=\"width-full\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[(date)]=\"item.dateRange.start\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[showTime]=\"item.showTime\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\">\n\t\t\t\t\t\t\t\t\t</zen-datepicker>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"ds-item filter-row\">\n\t\t\t\t\t\t\t\t\t<div class=\"lbl\">To:</div>\n\t\t\t\t\t\t\t\t\t<zen-datepicker class=\"width-full\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[(date)]=\"item.dateRange.end\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[showTime]=\"item.showTime\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\">\n\t\t\t\t\t\t\t\t\t</zen-datepicker>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Date picker -->\n\t\t\t\t\t\t\t<div *ngSwitchCase=\"'date'\">\n\t\t\t\t\t\t\t\t<div class=\"ds-item filter-row\">\n\t\t\t\t\t\t\t\t\t<div class=\"lbl\">Date:</div>\n\t\t\t\t\t\t\t\t\t<zen-datepicker class=\"width-full\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[(date)]=\"item.date\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[showTime]=\"item.showTime\">\n\t\t\t\t\t\t\t\t\t</zen-datepicker>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Number range -->\n\t\t\t\t\t\t\t<div *ngSwitchCase=\"'numberRange'\"\n\t\t\t\t\t\t\t\t class=\"filter-row number-range-row\">\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<div class=\"lbl\">Min:</div>\n\t\t\t\t\t\t\t\t\t<input class=\"material-input\"\n\t\t\t\t\t\t\t\t\t\t   [(ngModel)]=\"item.numberRange.from\"\n\t\t\t\t\t\t\t\t\t\t   type=\"number\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<div class=\"lbl\">Max:</div>\n\t\t\t\t\t\t\t\t\t<input class=\"material-input\"\n\t\t\t\t\t\t\t\t\t\t   [(ngModel)]=\"item.numberRange.to\"\n\t\t\t\t\t\t\t\t\t\t   type=\"number\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Radio -->\n\t\t\t\t\t\t\t<div *ngSwitchCase=\"'radio'\">\n\t\t\t\t\t\t\t\t<div *ngFor=\"let option of item.radioOptions\"\n\t\t\t\t\t\t\t\t\t class=\"action-item-radio ds-item\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{'active': option.selected}\">\n\t\t\t\t\t\t\t\t\t<zen-radio [value]=\"option.id\"\n\t\t\t\t\t\t\t\t\t\t\t   [label]=\"option.name\"\n\t\t\t\t\t\t\t\t\t\t\t   [name]=\"item.key\"\n\t\t\t\t\t\t\t\t\t\t\t   [imageUrl]=\"option.imageUrl\"\n\t\t\t\t\t\t\t\t\t\t\t   [selected]=\"option.selected\"\n\t\t\t\t\t\t\t\t\t\t\t   (radioChange)=\"radioChanged($event, item)\"\n\t\t\t\t\t\t\t\t\t\t\t   [disabled]=\"option.disabled\"></zen-radio>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<span *ngIf=\"showNoFilterResult\"\n\t\t\t\t  class=\"no-item\">No Results Found..</span>\n\t\t</div>\n\n\t\t<div class=\"action-menu-footer\">\n\t\t\t<button (click)=\"reset()\"\n\t\t\t\t\tclass=\"button-stroked full-width\">\n\t\t\t\tReset\n\t\t\t</button>\n\t\t\t<button (click)=\"apply()\"\n\t\t\t\t\tclass=\"button-flat full-width\">\n\t\t\t\tApply\n\t\t\t</button>\n\t\t</div>\n\n\t</div>\n</div>", styles: [".filters-component{display:inline-block;position:relative}.filters-component .filter{color:#828282;position:relative;border-color:#ececed;padding:0 7px;height:38px}.filters-component .filter zen-icon{background:#828282}.filters-component .filter.applied{color:var(--color-primary, #2188d9);background:#f4f9fd;border:1px solid var(--color-primary, #2188d9)}.filters-component .filter.applied zen-icon{background:var(--color-primary, #2188d9)}.filters-component .filter .dot{background:var(--color-primary, #2188d9);width:4px;height:4px;position:absolute;border-radius:50%;left:42px;top:9px}.filters-component .menu-content{width:360px;white-space:initial;position:fixed}.filters-component .menu-content.customTrigger{top:30px}.filters-component .menu-content .items-wrapper{overflow-y:auto;max-height:calc(100vh - 407px);position:relative}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%}.filters-component .menu-content .items-wrapper .action-item{color:#828282}.filters-component .menu-content .items-wrapper .action-item.expanded,.filters-component .menu-content .items-wrapper .action-item.active{background:#f4f9fd;color:#4f4f4f}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:48px}.filters-component .menu-content .items-wrapper .no-item,.filters-component .menu-content .items-wrapper .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 16px;font-weight:400;font-size:14px}.filters-component .menu-content .items-wrapper .select-all{font-weight:500}.filters-component .menu-content .items-wrapper .filter-row{padding:0 16px}.filters-component .menu-content .items-wrapper .filter-row:not(:last-of-type){margin-bottom:20px}.filters-component .menu-content .items-wrapper .filter-row .lbl{color:#60636c;font-size:14px;margin-bottom:8px}.filters-component .menu-content .items-wrapper .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .menu-content .items-wrapper .number-range-row{display:flex;margin-left:32px;gap:16px;margin-bottom:10px}.filters-component .menu-content .items-wrapper .toggle-row{justify-content:space-between}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "disabled", "disableValueChange", "indeterminate", "imageUrl"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduToggleSlideComponent, selector: "zen-toggle-slide", inputs: ["enabled", "disabled"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduDatepickerComponent, selector: "zen-datepicker", inputs: ["date", "showTime", "showDate", "containerClass", "minDate", "maxDate", "boxDesign", "highlightDays", "autoConfirm", "hint", "highlightError", "disabled", "readonly", "xPosition", "yPosition"], outputs: ["dateChange"] }, { kind: "component", type: ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl"], outputs: ["radioChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-filter', template: "<div class=\"filters-component\"\n\t #mainComponent\n\t click-out=\"isVisible && hide()\">\n\n\t<ng-container *ngIf=\"!customTrigger\">\n\t\t<button (click)=\"toggle()\"\n\t\t\t\tclass=\"button-stroked filter {{isApplied ? 'applied' : ''}}\">\n\t\t\t<zen-icon [src]=\"imageUrl\"\n\t\t\t\t\t  *ngIf=\"imageUrl\"></zen-icon>\n\t\t\t<i class=\"filter-icon material-icons\"\n\t\t\t   *ngIf=\"!imageUrl\">filter_list</i>\n\t\t\t<span *ngIf=\"label\">{{ label }}</span>\n\t\t</button>\n\t</ng-container>\n\n\t<ng-content *ngIf=\"customTrigger\"></ng-content>\n\n\t<div [hidden]=\"!isVisible\"\n\t\t class=\"action-menu menu-content\"\n\t\t [class.customTrigger]=\"customTrigger\"\n\t\t [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom  }\">\n\t\t<div class=\"action-menu-header\">\n\t\t\t<zen-search-box [(text)]=\"searchText\"\n\t\t\t\t\t\t\t#searchBox\n\t\t\t\t\t\t\t(textChange)=\"searchTextChanged()\"></zen-search-box>\n\t\t</div>\n\n\t\t<div class=\"action-menu-body items-wrapper\">\n\t\t\t<ng-container *ngIf=\"errorMessage.length\">\n\t\t\t\t<li *ngFor=\"let item of errorMessage\" class=\"error-msg\">{{item}}</li>\n\t\t\t</ng-container>\n\t\t\t\n\t\t\t<div *ngFor=\"let item of config.items\">\n\t\t\t\t<div class=\"menu-item\"\n\t\t\t\t\t *ngIf=\"isMenuIsVisible(item)\">\n\n\t\t\t\t\t<!-- Divider between two filter -->\n\t\t\t\t\t<div *ngIf=\"item.type === 'divider'\">\n\t\t\t\t\t\t<p class=\"filter-divider\"></p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Boolean toggle -->\n\t\t\t\t\t<div *ngIf=\"item.type === 'toggle'\"\n\t\t\t\t\t\t class=\"action-item toggle-row\">\n\t\t\t\t\t\t<div>{{item.title}}</div>\n\t\t\t\t\t\t<zen-toggle-slide [(enabled)]=\"item.enabled\"></zen-toggle-slide>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<button class=\"action-item expander-item\"\n\t\t\t\t\t\t\t*ngIf=\"item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse\"\n\t\t\t\t\t\t\t(click)=\"item.expanded = !item.expanded\"\n\t\t\t\t\t\t\t[ngClass]=\"{'active': isItemActive(item), 'expanded': item.expanded}\">\n\t\t\t\t\t\t<i class=\"material-icons expand-icon\"\n\t\t\t\t\t\t   [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n\t\t\t\t\t\t{{item.title}}\n\t\t\t\t\t</button>\n\n\t\t\t\t\t<ng-container *ngIf=\"item.expanded || item.disableCollapse\">\n\t\t\t\t\t\t<div [ngSwitch]=\"item.type\">\n\t\t\t\t\t\t\t<!-- Multiselect -->\n\t\t\t\t\t\t\t<div *ngSwitchCase=\"'multiselect'\">\n\t\t\t\t\t\t\t\t<div class=\"action-item-checkbox ds-item select-all\">\n\t\t\t\t\t\t\t\t\t<zen-checkbox *ngIf=\"item.dataSource.length === item.filteredDataSource.length\"\n\t\t\t\t\t\t\t\t\t\t\t\t  [(checked)]=\"item.isSelectedAll\"\n\t\t\t\t\t\t\t\t\t\t\t\t  [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n\t\t\t\t\t\t\t\t\t\t\t\t  label=\"Select All\"\n\t\t\t\t\t\t\t\t\t\t\t\t  (checkedChange)=\"onSelectAll(item)\">\n\t\t\t\t\t\t\t\t\t</zen-checkbox>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div *ngFor=\"let dsItem of item.filteredDataSource\"\n\t\t\t\t\t\t\t\t\t class=\"action-item-checkbox ds-item\">\n\t\t\t\t\t\t\t\t\t<zen-checkbox [(checked)]=\"dsItem.checked\"\n\t\t\t\t\t\t\t\t\t\t\t\t  [imageUrl]=\"dsItem.imageUrl\"\n\t\t\t\t\t\t\t\t\t\t\t\t  [label]=\"dsItem.name\"></zen-checkbox>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Date range picker -->\n\t\t\t\t\t\t\t<div *ngSwitchCase=\"'dateRange'\">\n\t\t\t\t\t\t\t\t<div class=\"ds-item filter-row\">\n\t\t\t\t\t\t\t\t\t<div class=\"lbl\">From:</div>\n\t\t\t\t\t\t\t\t\t<zen-datepicker class=\"width-full\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[(date)]=\"item.dateRange.start\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[showTime]=\"item.showTime\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\">\n\t\t\t\t\t\t\t\t\t</zen-datepicker>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"ds-item filter-row\">\n\t\t\t\t\t\t\t\t\t<div class=\"lbl\">To:</div>\n\t\t\t\t\t\t\t\t\t<zen-datepicker class=\"width-full\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[(date)]=\"item.dateRange.end\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[showTime]=\"item.showTime\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\">\n\t\t\t\t\t\t\t\t\t</zen-datepicker>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Date picker -->\n\t\t\t\t\t\t\t<div *ngSwitchCase=\"'date'\">\n\t\t\t\t\t\t\t\t<div class=\"ds-item filter-row\">\n\t\t\t\t\t\t\t\t\t<div class=\"lbl\">Date:</div>\n\t\t\t\t\t\t\t\t\t<zen-datepicker class=\"width-full\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[(date)]=\"item.date\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[showTime]=\"item.showTime\">\n\t\t\t\t\t\t\t\t\t</zen-datepicker>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Number range -->\n\t\t\t\t\t\t\t<div *ngSwitchCase=\"'numberRange'\"\n\t\t\t\t\t\t\t\t class=\"filter-row number-range-row\">\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<div class=\"lbl\">Min:</div>\n\t\t\t\t\t\t\t\t\t<input class=\"material-input\"\n\t\t\t\t\t\t\t\t\t\t   [(ngModel)]=\"item.numberRange.from\"\n\t\t\t\t\t\t\t\t\t\t   type=\"number\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<div class=\"lbl\">Max:</div>\n\t\t\t\t\t\t\t\t\t<input class=\"material-input\"\n\t\t\t\t\t\t\t\t\t\t   [(ngModel)]=\"item.numberRange.to\"\n\t\t\t\t\t\t\t\t\t\t   type=\"number\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Radio -->\n\t\t\t\t\t\t\t<div *ngSwitchCase=\"'radio'\">\n\t\t\t\t\t\t\t\t<div *ngFor=\"let option of item.radioOptions\"\n\t\t\t\t\t\t\t\t\t class=\"action-item-radio ds-item\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{'active': option.selected}\">\n\t\t\t\t\t\t\t\t\t<zen-radio [value]=\"option.id\"\n\t\t\t\t\t\t\t\t\t\t\t   [label]=\"option.name\"\n\t\t\t\t\t\t\t\t\t\t\t   [name]=\"item.key\"\n\t\t\t\t\t\t\t\t\t\t\t   [imageUrl]=\"option.imageUrl\"\n\t\t\t\t\t\t\t\t\t\t\t   [selected]=\"option.selected\"\n\t\t\t\t\t\t\t\t\t\t\t   (radioChange)=\"radioChanged($event, item)\"\n\t\t\t\t\t\t\t\t\t\t\t   [disabled]=\"option.disabled\"></zen-radio>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<span *ngIf=\"showNoFilterResult\"\n\t\t\t\t  class=\"no-item\">No Results Found..</span>\n\t\t</div>\n\n\t\t<div class=\"action-menu-footer\">\n\t\t\t<button (click)=\"reset()\"\n\t\t\t\t\tclass=\"button-stroked full-width\">\n\t\t\t\tReset\n\t\t\t</button>\n\t\t\t<button (click)=\"apply()\"\n\t\t\t\t\tclass=\"button-flat full-width\">\n\t\t\t\tApply\n\t\t\t</button>\n\t\t</div>\n\n\t</div>\n</div>", styles: [".filters-component{display:inline-block;position:relative}.filters-component .filter{color:#828282;position:relative;border-color:#ececed;padding:0 7px;height:38px}.filters-component .filter zen-icon{background:#828282}.filters-component .filter.applied{color:var(--color-primary, #2188d9);background:#f4f9fd;border:1px solid var(--color-primary, #2188d9)}.filters-component .filter.applied zen-icon{background:var(--color-primary, #2188d9)}.filters-component .filter .dot{background:var(--color-primary, #2188d9);width:4px;height:4px;position:absolute;border-radius:50%;left:42px;top:9px}.filters-component .menu-content{width:360px;white-space:initial;position:fixed}.filters-component .menu-content.customTrigger{top:30px}.filters-component .menu-content .items-wrapper{overflow-y:auto;max-height:calc(100vh - 407px);position:relative}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%}.filters-component .menu-content .items-wrapper .action-item{color:#828282}.filters-component .menu-content .items-wrapper .action-item.expanded,.filters-component .menu-content .items-wrapper .action-item.active{background:#f4f9fd;color:#4f4f4f}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:48px}.filters-component .menu-content .items-wrapper .no-item,.filters-component .menu-content .items-wrapper .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 16px;font-weight:400;font-size:14px}.filters-component .menu-content .items-wrapper .select-all{font-weight:500}.filters-component .menu-content .items-wrapper .filter-row{padding:0 16px}.filters-component .menu-content .items-wrapper .filter-row:not(:last-of-type){margin-bottom:20px}.filters-component .menu-content .items-wrapper .filter-row .lbl{color:#60636c;font-size:14px;margin-bottom:8px}.filters-component .menu-content .items-wrapper .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .menu-content .items-wrapper .number-range-row{display:flex;margin-left:32px;gap:16px;margin-bottom:10px}.filters-component .menu-content .items-wrapper .toggle-row{justify-content:space-between}.hidden{display:none}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], resetBehavior: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }], isVisible: [{
+                type: Input
+            }], isVisibleChange: [{
+                type: Output
+            }], customTrigger: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], searchBox: [{
+                type: ViewChild,
+                args: ['searchBox', { static: false }]
+            }], _componentElement: [{
+                type: ViewChild,
+                args: ['mainComponent', { static: false }]
+            }], outsideHandling: [{
+                type: HostListener,
+                args: ['window:mousedown', ['$event']]
+            }], windowSizeHandling: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }], windowScroll: [{
+                type: HostListener,
+                args: ['window:scroll', ['$event']]
+            }], handleMouseScroll: [{
+                type: HostListener,
+                args: ['window:wheel', ['$event']]
+            }], onWindowKeyDown: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
+            }] } });
+
+class ZenduSelectOptionDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+ZenduSelectOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSelectOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ZenduSelectOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ZenduSelectOptionDirective, selector: "[zen-select-option]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSelectOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[zen-select-option]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class ZenduSelectValueDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+ZenduSelectValueDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSelectValueDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ZenduSelectValueDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ZenduSelectValueDirective, selector: "[zen-select-value]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSelectValueDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[zen-select-value]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class ZenduSelectComponent {
+    constructor(_element) {
+        this._element = _element;
+        /**
+         * callback to emit changes for parent component
+         */
+        this.selectModelChange = new EventEmitter();
+        /**
+         * List of options for select
+         */
+        this.options = [];
+        /**
+         * Property to set custom placeholder value
+         */
+        this.placeholder = 'Select Items';
+        /**
+         * Component property to disable component
+         */
+        this.disabled = false;
+        /**
+         * Show the custom icon for toggle
+         */
+        this.customIcon = "";
+        /**
+         * Color for custom icon
+         */
+        this.customIconColor = "";
+        /**
+         * Truncate text with "..." at the end
+         */
+        this.isTruncate = false;
+        /**
+         * Is dropdown expanded
+         */
+        this.isExpanded = false;
+        this.searchText = '';
+        this.labelText = '';
+        this.isTopMenuDirection = false;
+    }
+    outsideHandling(event) {
+        if (!document.body.contains(event.target)) {
+            // element not in the DOM
+            return;
+        }
+        if (this._element.nativeElement.contains(event.target)) {
+            return;
+        }
+        // hide the menu for outside click
+        this.hideDropDown();
+    }
+    scroll() {
+        this.updatePlacement();
+    }
+    ngOnChanges(changeObj) {
+        this.filterOptions();
+        this.updateLabel();
+    }
+    isModelEmpty() {
+        if (this.isMultiselect) {
+            return !this.selectModel || !this.selectModel.length;
+        }
+        else {
+            return typeof this.selectModel === 'undefined' || this.selectModel === null;
+        }
+    }
+    handleOptionClick(option) {
+        const optionValue = this.returnOption ? option : this.getId(option);
+        if (this.isMultiselect) {
+            this.toggleOption(optionValue);
+        }
+        else {
+            this.singleSelect(optionValue);
+        }
+        this.emitChange();
+    }
+    // Logic for single select
+    singleSelect(value) {
+        this.selectModel = value;
+        //  Hide dropdown if single select
+        this.hideDropDown();
+    }
+    toggleExpand() {
+        this.isExpanded = !this.isExpanded;
+        this.searchText = "";
+        this.filterOptions();
+        this.updatePlacement();
+    }
+    // Logic for multiselect
+    toggleOption(value) {
+        if (!Array.isArray(this.selectModel)) {
+            this.selectModel = [];
+        }
+        const index = this.getElementIndex(value);
+        if (index < 0) {
+            this.selectModel.push(value);
+        }
+        else {
+            this.selectModel.splice(index, 1);
+        }
+        this.updateLabel();
+    }
+    getElementIndex(value) {
+        if (typeof value === 'object') {
+            const valueId = this.getId(value);
+            return this.selectModel.findIndex(el => this.getId(el) === valueId);
+        }
+        else {
+            return this.selectModel.indexOf(value);
+        }
+    }
+    toggleAll() {
+        if (this.selectModel.length !== this.options.length) {
+            this.selectModel = this.options.map(el => this.returnOption ? el : this.getId(el));
+        }
+        else {
+            this.selectModel = [];
+        }
+        this.emitChange();
+    }
+    onSearchChange() {
+        this.filterOptions();
+    }
+    filterOptions() {
+        const options = this.options.slice(0);
+        if (!this.searchText) {
+            this.filteredOptions = options;
+            return;
+        }
+        const regex = new RegExp(this.searchText, 'i');
+        this.filteredOptions = options.filter(option => regex.test(this.getName(option)));
+    }
+    isSelected(option) {
+        if (this.isModelEmpty()) {
+            return false;
+        }
+        const optionId = this.getId(option);
+        if (this.isMultiselect) {
+            return this.selectModel.findIndex(el => this.getId(el) === optionId) >= 0;
+        }
+        else {
+            return this.getId(this.selectModel) === optionId;
+        }
+    }
+    updateLabel() {
+        if (this.isModelEmpty()) {
+            return;
+        }
+        if (this.isMultiselect) {
+            const selectedCount = this.selectModel.length;
+            if (selectedCount === 1) {
+                this.labelText = this.getNameFromValue(this.selectModel[0]);
+            }
+            else {
+                this.labelText = `${selectedCount} Selected`;
+            }
+        }
+        else {
+            this.labelText = this.getNameFromValue(this.selectModel);
+        }
+    }
+    getNameFromValue(val) {
+        if (this.returnOption) {
+            return this.getName(val);
+        }
+        else {
+            if (!this.options || !this.options.length) {
+                return '';
+            }
+            return this.getName(this.options.find(el => this.getId(el) === val));
+        }
+    }
+    getName(option) {
+        if (typeof option === 'object') {
+            if (this.displayProp) {
+                return this.GetRecursiveProperty(option, this.displayProp);
+            }
+            else {
+                console.error('App-Select: when using objects as model, a displayProp value is mandatory.');
+                return "";
+            }
+        }
+        else {
+            return option;
+        }
+    }
+    getId(option) {
+        if (typeof option === 'object') {
+            if (this.idProp) {
+                return this.GetRecursiveProperty(option, this.idProp);
+            }
+            else {
+                console.error('App-Select: when using objects as model, a idProp value is mandatory.');
+                return "";
+            }
+        }
+        else {
+            return option;
+        }
+    }
+    GetRecursiveProperty(object, path) {
+        return path.split('.').reduce((obj, x) => {
+            if (obj) {
+                return obj[x];
+            }
+            else {
+                return null;
+            }
+        }, object);
+    }
+    async hideDropDown() {
+        this.isExpanded = false;
+    }
+    emitChange() {
+        // notify with timeout
+        // allow output property "enabled" applied by parent first and then emit the onChange
+        setTimeout(() => {
+            this.selectModelChange.emit(this.selectModel);
+        }, 1);
+    }
+    updatePlacement() {
+        // update menu position base on scroll
+        this.isTopMenuDirection = this.getMenuDirection() === "top";
+    }
+    getMenuDirection() {
+        const element = this._element.nativeElement;
+        const top = element.getBoundingClientRect().top;
+        const height = window.innerHeight;
+        if (top > (height / 2)) {
+            return "top";
+        }
+        else {
+            return "bottom";
+        }
+    }
+    getMaxMenuHeight() {
+        const containerElement = this.getContainerElement();
+        if (!containerElement || !containerElement.clientHeight) {
+            return "190px";
+        }
+        const parentHeight = containerElement.clientHeight;
+        let height = Math.round((parentHeight / 2) - 25);
+        height = Math.min(216, height);
+        height = Math.max(96, height);
+        return `${height}px`;
+    }
+    getContainerElement() {
+        const component = this._element.nativeElement;
+        const container = component.getElementsByClassName("app-select").item(0);
+        return container.offsetParent;
+    }
+}
+ZenduSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ZenduSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduSelectComponent, selector: "zen-select", inputs: { selectModel: "selectModel", options: "options", placeholder: "placeholder", displayProp: "displayProp", idProp: "idProp", hasSearch: "hasSearch", returnOption: "returnOption", isMultiselect: "isMultiselect", disabled: "disabled", customIcon: "customIcon", customIconColor: "customIconColor", isTruncate: "isTruncate" }, outputs: { selectModelChange: "selectModelChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:scroll": "scroll()" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ZenduSelectOptionDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ZenduSelectValueDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"app-select\">\n        <button class=\"app-select-toggle\"\n                [disabled]=\"disabled\"\n                (click)=\"toggleExpand()\"\n                [ngClass]=\"{'active': isExpanded}\">\n                <div class=\"app-select-label\">\n                        <div class=\"placeholder\"\n                             *ngIf=\"isModelEmpty()\">\n                                <span>{{placeholder}}</span>\n                        </div>\n                        <div class=\"selected-item\"\n                             *ngIf=\"!isMultiselect && !isModelEmpty()\">\n                                <ng-template *ngIf=\"valueTemplate && selectModel[0]; else tplValueText\"\n                                             [ngTemplateOutlet]=\"valueTemplate.template\"\n                                             [ngTemplateOutletContext]=\"{ selectModel: selectModel, labelText: labelText }\"></ng-template>\n                                <ng-template #tplValueText>\n                                        <span>{{ labelText }}</span>\n                                </ng-template>\n                        </div>\n                        <div class=\"selected-item\"\n                             *ngIf=\"isMultiselect && !isModelEmpty()\">\n                                <span>{{ labelText }}</span>\n                        </div>\n                </div>\n                <i *ngIf=\"!customIcon\"\n                   class=\"material-icons app-select-icon\">expand_more</i>\n                <i *ngIf=\"customIcon\"\n                   class=\"material-icons-outlined custom-icon\"\n                   [style.color]=\"customIconColor\">{{customIcon}}</i>\n        </button>\n\n        <div class=\"action-menu-container\">\n                <div class=\"action-menu app-select-dropdown-wrapper\"\n                     [ngClass]=\"{ 'show-top': isTopMenuDirection }\">\n                        <div class=\"app-select-dropdown\"\n                             *ngIf=\"isExpanded\">\n                                <div class=\"action-menu-header\"\n                                     *ngIf=\"hasSearch\">\n                                        <!--Search options-->\n                                        <div class=\"search-wrapper\">\n                                                <zen-search-box [(text)]=\"searchText\"\n                                                                (textChange)=\"onSearchChange()\"></zen-search-box>\n                                        </div>\n                                </div>\n                                <div class=\"action-menu-body\">\n                                        <!--No options found-->\n                                        <div class=\"no-options-found\"\n                                             *ngIf=\"!filteredOptions.length\">\n                                                No matching options found\n                                        </div>\n\n                                        <!--Select All Option-->\n                                        <div class=\"action-item-checkbox select-all\"\n                                             *ngIf=\"isMultiselect && !searchText\"\n                                             (click)=\"toggleAll()\">\n                                                <zen-checkbox [checked]=\"selectModel.length === options.length\"\n                                                              [indeterminate]=\"selectModel.length !== options.length && selectModel.length\"\n                                                              [disableValueChange]=\"true\"\n                                                              [label]=\"'Select All'\"></zen-checkbox>\n                                        </div>\n\n                                        <!--Single select Options-->\n                                        <ng-container *ngIf=\"!isMultiselect\">\n                                                <a class=\"action-item\"\n                                                   *ngFor=\"let option of filteredOptions\"\n                                                   (click)=\"handleOptionClick(option)\"\n                                                   [ngClass]=\"{ 'active': isSelected(option) }\">\n                                                        <span *ngIf=\"!isMultiselect\"\n                                                              [class.action-item-truncate]=\"isTruncate\">\n                                                                <ng-template *ngIf=\"optionTemplate; else tplOptionText\"\n                                                                             [ngTemplateOutlet]=\"optionTemplate.template\"\n                                                                             [ngTemplateOutletContext]=\"{ option: option }\">\n                                                                </ng-template>\n                                                                <ng-template #tplOptionText>\n                                                                        {{ getName(option) }}\n                                                                </ng-template>\n                                                        </span>\n                                                </a>\n                                        </ng-container>\n\n                                        <!--Multiselect Options-->\n                                        <ng-container *ngIf=\"isMultiselect\">\n                                                <div class=\"action-item-checkbox\"\n                                                     *ngFor=\"let option of filteredOptions\"\n                                                     (click)=\"handleOptionClick(option)\">\n                                                        <zen-checkbox *ngIf=\"isMultiselect\"\n                                                                      [checked]=\"isSelected(option)\"\n                                                                      [label]=\"getName(option)\"\n                                                                      [disableValueChange]=\"true\"></zen-checkbox>\n                                                </div>\n                                        </ng-container>\n                                </div>\n                        </div>\n                </div>\n        </div>\n</div>", styles: [".app-select{width:100%;position:relative}.app-select ::-webkit-scrollbar-thumb{background-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;transition:.3s;width:100%;background:#ffffff;-webkit-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid #d6d6d8;padding:0 0 8px;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333}.app-select .app-select-toggle .app-select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:24px}.app-select .app-select-toggle .app-select-label .placeholder{color:#bebebe}.app-select .app-select-toggle .app-select-label .selected-item{color:#333}.app-select .app-select-toggle .custom-icon{color:#bebebe}.app-select .app-select-toggle .app-select-icon{color:#bebebe;transition:.3s}.app-select .app-select-toggle:focus{border-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle:focus .app-select-icon,.app-select .app-select-toggle:focus .custom-icon{color:var(--color-primary, #2188d9)!important}.app-select .app-select-toggle[readonly],.app-select .app-select-toggle[disabled]{cursor:not-allowed;color:#b8b9bc;border-color:#d0d0d2}.app-select .app-select-toggle.active{border-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle.active .custom-icon{color:var(--color-primary, #2188d9)!important}.app-select .app-select-toggle.active .app-select-icon{transform:rotate(180deg);color:var(--color-primary, #2188d9)}.app-select .action-menu-container{position:sticky;width:inherit;z-index:10}.app-select .app-select-dropdown-wrapper{top:115%;width:inherit}.app-select .app-select-dropdown-wrapper.show-top{top:unset;bottom:115%}.app-select .app-select-dropdown-wrapper .action-menu-body{max-height:200px;overflow:auto}.app-select .app-select-dropdown-wrapper .no-options-found{background:#ffffff;color:#b8b9bc;padding:8px 16px;text-decoration:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px}.app-select .app-select-dropdown-wrapper .select-all{font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "disabled", "disableValueChange", "indeterminate", "imageUrl"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "placeholder"], outputs: ["textChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-select', template: "<div class=\"app-select\">\n        <button class=\"app-select-toggle\"\n                [disabled]=\"disabled\"\n                (click)=\"toggleExpand()\"\n                [ngClass]=\"{'active': isExpanded}\">\n                <div class=\"app-select-label\">\n                        <div class=\"placeholder\"\n                             *ngIf=\"isModelEmpty()\">\n                                <span>{{placeholder}}</span>\n                        </div>\n                        <div class=\"selected-item\"\n                             *ngIf=\"!isMultiselect && !isModelEmpty()\">\n                                <ng-template *ngIf=\"valueTemplate && selectModel[0]; else tplValueText\"\n                                             [ngTemplateOutlet]=\"valueTemplate.template\"\n                                             [ngTemplateOutletContext]=\"{ selectModel: selectModel, labelText: labelText }\"></ng-template>\n                                <ng-template #tplValueText>\n                                        <span>{{ labelText }}</span>\n                                </ng-template>\n                        </div>\n                        <div class=\"selected-item\"\n                             *ngIf=\"isMultiselect && !isModelEmpty()\">\n                                <span>{{ labelText }}</span>\n                        </div>\n                </div>\n                <i *ngIf=\"!customIcon\"\n                   class=\"material-icons app-select-icon\">expand_more</i>\n                <i *ngIf=\"customIcon\"\n                   class=\"material-icons-outlined custom-icon\"\n                   [style.color]=\"customIconColor\">{{customIcon}}</i>\n        </button>\n\n        <div class=\"action-menu-container\">\n                <div class=\"action-menu app-select-dropdown-wrapper\"\n                     [ngClass]=\"{ 'show-top': isTopMenuDirection }\">\n                        <div class=\"app-select-dropdown\"\n                             *ngIf=\"isExpanded\">\n                                <div class=\"action-menu-header\"\n                                     *ngIf=\"hasSearch\">\n                                        <!--Search options-->\n                                        <div class=\"search-wrapper\">\n                                                <zen-search-box [(text)]=\"searchText\"\n                                                                (textChange)=\"onSearchChange()\"></zen-search-box>\n                                        </div>\n                                </div>\n                                <div class=\"action-menu-body\">\n                                        <!--No options found-->\n                                        <div class=\"no-options-found\"\n                                             *ngIf=\"!filteredOptions.length\">\n                                                No matching options found\n                                        </div>\n\n                                        <!--Select All Option-->\n                                        <div class=\"action-item-checkbox select-all\"\n                                             *ngIf=\"isMultiselect && !searchText\"\n                                             (click)=\"toggleAll()\">\n                                                <zen-checkbox [checked]=\"selectModel.length === options.length\"\n                                                              [indeterminate]=\"selectModel.length !== options.length && selectModel.length\"\n                                                              [disableValueChange]=\"true\"\n                                                              [label]=\"'Select All'\"></zen-checkbox>\n                                        </div>\n\n                                        <!--Single select Options-->\n                                        <ng-container *ngIf=\"!isMultiselect\">\n                                                <a class=\"action-item\"\n                                                   *ngFor=\"let option of filteredOptions\"\n                                                   (click)=\"handleOptionClick(option)\"\n                                                   [ngClass]=\"{ 'active': isSelected(option) }\">\n                                                        <span *ngIf=\"!isMultiselect\"\n                                                              [class.action-item-truncate]=\"isTruncate\">\n                                                                <ng-template *ngIf=\"optionTemplate; else tplOptionText\"\n                                                                             [ngTemplateOutlet]=\"optionTemplate.template\"\n                                                                             [ngTemplateOutletContext]=\"{ option: option }\">\n                                                                </ng-template>\n                                                                <ng-template #tplOptionText>\n                                                                        {{ getName(option) }}\n                                                                </ng-template>\n                                                        </span>\n                                                </a>\n                                        </ng-container>\n\n                                        <!--Multiselect Options-->\n                                        <ng-container *ngIf=\"isMultiselect\">\n                                                <div class=\"action-item-checkbox\"\n                                                     *ngFor=\"let option of filteredOptions\"\n                                                     (click)=\"handleOptionClick(option)\">\n                                                        <zen-checkbox *ngIf=\"isMultiselect\"\n                                                                      [checked]=\"isSelected(option)\"\n                                                                      [label]=\"getName(option)\"\n                                                                      [disableValueChange]=\"true\"></zen-checkbox>\n                                                </div>\n                                        </ng-container>\n                                </div>\n                        </div>\n                </div>\n        </div>\n</div>", styles: [".app-select{width:100%;position:relative}.app-select ::-webkit-scrollbar-thumb{background-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;transition:.3s;width:100%;background:#ffffff;-webkit-appearance:none;appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid #d6d6d8;padding:0 0 8px;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333}.app-select .app-select-toggle .app-select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:24px}.app-select .app-select-toggle .app-select-label .placeholder{color:#bebebe}.app-select .app-select-toggle .app-select-label .selected-item{color:#333}.app-select .app-select-toggle .custom-icon{color:#bebebe}.app-select .app-select-toggle .app-select-icon{color:#bebebe;transition:.3s}.app-select .app-select-toggle:focus{border-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle:focus .app-select-icon,.app-select .app-select-toggle:focus .custom-icon{color:var(--color-primary, #2188d9)!important}.app-select .app-select-toggle[readonly],.app-select .app-select-toggle[disabled]{cursor:not-allowed;color:#b8b9bc;border-color:#d0d0d2}.app-select .app-select-toggle.active{border-color:var(--color-primary, #2188d9)}.app-select .app-select-toggle.active .custom-icon{color:var(--color-primary, #2188d9)!important}.app-select .app-select-toggle.active .app-select-icon{transform:rotate(180deg);color:var(--color-primary, #2188d9)}.app-select .action-menu-container{position:sticky;width:inherit;z-index:10}.app-select .app-select-dropdown-wrapper{top:115%;width:inherit}.app-select .app-select-dropdown-wrapper.show-top{top:unset;bottom:115%}.app-select .app-select-dropdown-wrapper .action-menu-body{max-height:200px;overflow:auto}.app-select .app-select-dropdown-wrapper .no-options-found{background:#ffffff;color:#b8b9bc;padding:8px 16px;text-decoration:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px}.app-select .app-select-dropdown-wrapper .select-all{font-weight:500}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { selectModel: [{
+                type: Input
+            }], selectModelChange: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], displayProp: [{
+                type: Input
+            }], idProp: [{
+                type: Input
+            }], hasSearch: [{
+                type: Input
+            }], returnOption: [{
+                type: Input
+            }], isMultiselect: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], customIcon: [{
+                type: Input
+            }], customIconColor: [{
+                type: Input
+            }], isTruncate: [{
+                type: Input
+            }], optionTemplate: [{
+                type: ContentChild,
+                args: [ZenduSelectOptionDirective]
+            }], valueTemplate: [{
+                type: ContentChild,
+                args: [ZenduSelectValueDirective]
+            }], outsideHandling: [{
+                type: HostListener,
+                args: ['window:mousedown', ['$event']]
+            }], scroll: [{
+                type: HostListener,
+                args: ['window:scroll', []]
+            }] } });
+
+class ZenduPaginationBarComponent {
+    constructor() {
+        this.pageChange = new EventEmitter();
+        this.perPageChange = new EventEmitter();
+        this.pagesInGroup = 7;
+        this.availablePagesSize = [10, 20, 30, 40, 50];
+        this.page = 1;
+        this.perPage = 10;
+    }
+    ngOnChanges(changes) {
+        if (changes["count"]) {
+            this.reCalculatePageCount();
+        }
+    }
+    nextPage() {
+        if (this.page + 1 > this.totalPages) {
+            return;
+        }
+        this.page++;
+        this.pageChange.emit(this.page);
+    }
+    prevPage() {
+        if (this.page - 1 <= 0) {
+            return;
+        }
+        this.page--;
+        this.pageChange.emit(this.page);
+    }
+    updatePageSize() {
+        this.reCalculatePageCount();
+        this.page = 1;
+        this.pageChange.emit(this.page);
+        this.perPageChange.emit(this.perPage);
+    }
+    endRowSize() {
+        const to = this.page * this.perPage;
+        if (to <= this.count) {
+            return to;
+        }
+        else {
+            return this.count;
+        }
+    }
+    reCalculatePageCount() {
+        let pages = this.count / this.perPage;
+        if (this.count % this.perPage !== 0) {
+            pages++;
+        }
+        this.totalPages = pages;
+    }
+}
+ZenduPaginationBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduPaginationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduPaginationBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduPaginationBarComponent, selector: "zen-pagination-bar", inputs: { page: "page", perPage: "perPage", count: "count" }, outputs: { pageChange: "pageChange", perPageChange: "perPageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-component\">\n   <div class=\"select-dropdown\">\n      <label>Rows per page:</label>\n      <zen-select [(selectModel)]=\"perPage\"\n                [options]=\"availablePagesSize\"\n                (selectModelChange)=\"updatePageSize()\"></zen-select>\n   </div>\n   <div class=\"pages\">\n      <button class=\"pagination-button\"\n              [disabled]=\"page - 1 <= 0\"\n              (click)=\"prevPage()\">\n         <i class=\"material-icons\">keyboard_arrow_left</i>\n      </button>\n      <label>{{((page - 1) * perPage) + 1 }} - {{endRowSize()}} of {{count}}</label>\n      <button class=\"pagination-button\"\n              [disabled]=\"page + 1 > totalPages\"\n              (click)=\"nextPage()\">\n         <i class=\"material-icons\">keyboard_arrow_right</i>\n      </button>\n   </div>\n</div>\n", styles: [".pagination-component{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.pagination-component .select-dropdown{display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .select-dropdown label{margin:0;font-style:normal;font-weight:400;font-size:12px;line-height:120%;color:#4f4f4f}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .pages label{margin:0;font-style:normal;font-weight:400;font-size:12px;line-height:16px;color:#828282}.pagination-component .pages .pagination-button{display:flex;flex-direction:row;align-items:center;height:16px;padding:0;box-sizing:border-box;white-space:nowrap;border:none;border-radius:50%;transition:.1s;cursor:pointer;color:#828282;background:#FFFFFF}.pagination-component .pages .pagination-button:hover{color:#4f4f4f;background:#F2F2F2}.pagination-component .pages .pagination-button:focus{outline:none;color:#2188d9;background:#F4F9FD}.pagination-component .pages .pagination-button:disabled{color:#e0e0e0;background:#FFFFFF;cursor:not-allowed}.pagination-component .pages .pagination-button .material-icons{font-size:16px;height:16px;width:16px}\n"], dependencies: [{ kind: "component", type: ZenduSelectComponent, selector: "zen-select", inputs: ["selectModel", "options", "placeholder", "displayProp", "idProp", "hasSearch", "returnOption", "isMultiselect", "disabled", "customIcon", "customIconColor", "isTruncate"], outputs: ["selectModelChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduPaginationBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-pagination-bar', template: "<div class=\"pagination-component\">\n   <div class=\"select-dropdown\">\n      <label>Rows per page:</label>\n      <zen-select [(selectModel)]=\"perPage\"\n                [options]=\"availablePagesSize\"\n                (selectModelChange)=\"updatePageSize()\"></zen-select>\n   </div>\n   <div class=\"pages\">\n      <button class=\"pagination-button\"\n              [disabled]=\"page - 1 <= 0\"\n              (click)=\"prevPage()\">\n         <i class=\"material-icons\">keyboard_arrow_left</i>\n      </button>\n      <label>{{((page - 1) * perPage) + 1 }} - {{endRowSize()}} of {{count}}</label>\n      <button class=\"pagination-button\"\n              [disabled]=\"page + 1 > totalPages\"\n              (click)=\"nextPage()\">\n         <i class=\"material-icons\">keyboard_arrow_right</i>\n      </button>\n   </div>\n</div>\n", styles: [".pagination-component{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.pagination-component .select-dropdown{display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .select-dropdown label{margin:0;font-style:normal;font-weight:400;font-size:12px;line-height:120%;color:#4f4f4f}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .pages label{margin:0;font-style:normal;font-weight:400;font-size:12px;line-height:16px;color:#828282}.pagination-component .pages .pagination-button{display:flex;flex-direction:row;align-items:center;height:16px;padding:0;box-sizing:border-box;white-space:nowrap;border:none;border-radius:50%;transition:.1s;cursor:pointer;color:#828282;background:#FFFFFF}.pagination-component .pages .pagination-button:hover{color:#4f4f4f;background:#F2F2F2}.pagination-component .pages .pagination-button:focus{outline:none;color:#2188d9;background:#F4F9FD}.pagination-component .pages .pagination-button:disabled{color:#e0e0e0;background:#FFFFFF;cursor:not-allowed}.pagination-component .pages .pagination-button .material-icons{font-size:16px;height:16px;width:16px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { page: [{
+                type: Input
+            }], perPage: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], perPageChange: [{
+                type: Output
+            }] } });
+
+class ZenduPhoneInputComponent {
+    constructor() {
+        this.maxLength = 12;
+        this.phoneChange = new EventEmitter();
+        this.validChange = new EventEmitter();
+        this.disabled = false;
+        this.phoneText = "";
+        this.countryList = [
+            {
+                countryCode: "US",
+                countryName: "America",
+                countryCallingCode: "+1",
+                flag: "https://storage.googleapis.com/zenduit-icons/Flags/USA.svg"
+            },
+            {
+                countryCode: "CA",
+                countryName: "Canada",
+                countryCallingCode: "+1",
+                flag: "https://storage.googleapis.com/zenduit-icons/Flags/Canada.svg"
+            },
+            {
+                countryCode: "MX",
+                countryName: "Mexico",
+                countryCallingCode: "+52",
+                flag: "https://storage.googleapis.com/zenduit-icons/Flags/Mexico.svg"
+            }
+        ];
+        this.customCountry = {
+            countryCode: "",
+            countryName: "Custom",
+            countryCallingCode: "",
+            flag: "https://storage.googleapis.com/zenduit-icons/Flags/Custom.svg"
+        };
+        this.isExpanded = false;
+        this.selectedCountry = this.countryList[1];
+    }
+    ngOnInit() {
+        this.parseNumber();
+    }
+    ngOnChanges(changes) {
+        if (changes["phone"] && (!this.selectedCountry || !this.selectedCountry.countryCode)) {
+            this.parseNumber();
+        }
+    }
+    parseNumber() {
+        try {
+            this.phoneText = this.phone;
+            if (this.phone) {
+                const countryFromList = this.countryList.find(country => this.phone.startsWith(country.countryCallingCode) || `+${this.phone}`.startsWith(country.countryCallingCode));
+                if (countryFromList) {
+                    this.selectedCountry = countryFromList || this.customCountry;
+                    const phoneNumberUtil = PhoneNumberUtil.getInstance();
+                    const parsedPhone = phoneNumberUtil.parse(this.phone || "", 'US');
+                    setTimeout(() => {
+                        if (this.phoneText.startsWith('+')) {
+                            this.phoneText = this.phoneText.replace(`+${parsedPhone.getCountryCode()}`, "");
+                        }
+                        else if (this.phoneText.startsWith(parsedPhone.getCountryCode())) {
+                            this.phoneText = this.phoneText.replace(parsedPhone.getCountryCode(), "");
+                        }
+                        this.phoneChanged();
+                    });
+                }
+                else {
+                    this.selectedCountry = this.customCountry;
+                }
+            }
+            else {
+                this.selectedCountry = this.customCountry;
+            }
+        }
+        catch (err) {
+            console.warn(`Can't parse phone: ${this.phone}`, err);
+            this.selectedCountry = this.customCountry;
+        }
+    }
+    countryChanged(country) {
+        this.isExpanded = false;
+        this.selectedCountry = country;
+        this.phoneChanged();
+    }
+    phoneChanged(input) {
+        // allow + in custom country
+        let custom = false;
+        if (this.selectedCountry === this.customCountry && this.phoneText.includes('+')) {
+            custom = true;
+        }
+        const phoneText = (this.phoneText || '').replace(/\D/g, '');
+        this.phoneText = custom ? `+${phoneText}` : phoneText;
+        if (input && input.value !== this.phoneText) {
+            input.value = this.phoneText;
+        }
+        const fullNumber = `${this.selectedCountry.countryCallingCode}${this.phoneText}`;
+        if (this.phone !== fullNumber) {
+            this.phoneChange.emit(fullNumber);
+        }
+        const phoneNumberUtil = PhoneNumberUtil.getInstance();
+        if (this.selectedCountry === this.customCountry) {
+            this.validChange.emit(true);
+        }
+        else {
+            try {
+                this.validChange.emit(phoneNumberUtil.isValidNumber(phoneNumberUtil.parseAndKeepRawInput(fullNumber)));
+            }
+            catch {
+                this.validChange.emit(false);
+            }
+        }
+    }
+    hideDropDown() {
+        this.isExpanded = false;
+    }
+    toggle() {
+        if (this.disabled) {
+            return;
+        }
+        this.isExpanded = !this.isExpanded;
+    }
+}
+ZenduPhoneInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduPhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduPhoneInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduPhoneInputComponent, selector: "zen-phone-input", inputs: { phone: "phone", maxLength: "maxLength", disabled: "disabled" }, outputs: { phoneChange: "phoneChange", validChange: "validChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"phone-input-component\">\n   <div class=\"material-input\">\n      <a class=\"country-select\"\n         (click)=\"toggle()\">\n         <img class=\"country-flag\"\n              [src]=\"selectedCountry.flag\">\n         <i class=\"material-icons expand-icon\"\n            [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n         <div class=\"code\">{{ selectedCountry.countryCallingCode }}</div>\n      </a>\n      <input class=\"phone-input\"\n             type=\"text\"\n             [(ngModel)]=\"phoneText\"\n             (ngModelChange)=\"phoneChanged(input)\"\n             (click)=\"isExpanded = false\"\n             [disabled]=\"disabled\"\n             country-code=\"selectedCountry.countryCode\"\n             [maxlength]=\"maxLength\"\n             #input>\n   </div>\n\n   <div class=\"action-menu country-dropdown-list\"\n        *ngIf=\"isExpanded\">\n      <div class=\"action-menu-body\">\n         <!--Country's List-->\n         <a class=\"action-item\"\n            *ngFor=\"let country of countryList\"\n            [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n            (click)=\"countryChanged(country)\">\n            <img class=\"country-flag\"\n                 [src]=\"country.flag\">\n            <div>{{ country.countryName }}</div>\n            <div>{{ country.countryCallingCode }}</div>\n         </a>\n\n         <!--Custom Country-->\n         <a class=\"action-item\"\n            [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n            (click)=\"countryChanged(customCountry)\">\n            <img class=\"country-flag\"\n                 [src]=\"customCountry.flag\">\n            <div>{{ customCountry.countryName }}</div>\n            <div>{{ customCountry.countryCallingCode }}</div>\n         </a>\n      </div>\n   </div>\n</div>\n", styles: [".phone-input-component{position:relative;width:100%}.phone-input-component .material-input,.phone-input-component .zen-input{display:flex;align-items:center;gap:8px}.phone-input-component .material-input .country-select,.phone-input-component .zen-input .country-select{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none}.phone-input-component .material-input .country-select .expand-icon,.phone-input-component .zen-input .country-select .expand-icon{color:#60636c;transition:.3s}.phone-input-component .material-input .country-select .expand-icon.active,.phone-input-component .zen-input .country-select .expand-icon.active{color:#2188d9;transform:rotate(180deg)}.phone-input-component .material-input .country-select .code,.phone-input-component .zen-input .country-select .code{font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333}.phone-input-component .material-input .country-select:focus .expand-icon,.phone-input-component .zen-input .country-select:focus .expand-icon{color:#2188d9}.phone-input-component .material-input .phone-input,.phone-input-component .zen-input .phone-input{flex:1;border:none;outline:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333;background:transparent}.phone-input-component .country-dropdown-list{width:inherit;margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduPhoneInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-phone-input', template: "<div class=\"phone-input-component\">\n   <div class=\"material-input\">\n      <a class=\"country-select\"\n         (click)=\"toggle()\">\n         <img class=\"country-flag\"\n              [src]=\"selectedCountry.flag\">\n         <i class=\"material-icons expand-icon\"\n            [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n         <div class=\"code\">{{ selectedCountry.countryCallingCode }}</div>\n      </a>\n      <input class=\"phone-input\"\n             type=\"text\"\n             [(ngModel)]=\"phoneText\"\n             (ngModelChange)=\"phoneChanged(input)\"\n             (click)=\"isExpanded = false\"\n             [disabled]=\"disabled\"\n             country-code=\"selectedCountry.countryCode\"\n             [maxlength]=\"maxLength\"\n             #input>\n   </div>\n\n   <div class=\"action-menu country-dropdown-list\"\n        *ngIf=\"isExpanded\">\n      <div class=\"action-menu-body\">\n         <!--Country's List-->\n         <a class=\"action-item\"\n            *ngFor=\"let country of countryList\"\n            [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n            (click)=\"countryChanged(country)\">\n            <img class=\"country-flag\"\n                 [src]=\"country.flag\">\n            <div>{{ country.countryName }}</div>\n            <div>{{ country.countryCallingCode }}</div>\n         </a>\n\n         <!--Custom Country-->\n         <a class=\"action-item\"\n            [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n            (click)=\"countryChanged(customCountry)\">\n            <img class=\"country-flag\"\n                 [src]=\"customCountry.flag\">\n            <div>{{ customCountry.countryName }}</div>\n            <div>{{ customCountry.countryCallingCode }}</div>\n         </a>\n      </div>\n   </div>\n</div>\n", styles: [".phone-input-component{position:relative;width:100%}.phone-input-component .material-input,.phone-input-component .zen-input{display:flex;align-items:center;gap:8px}.phone-input-component .material-input .country-select,.phone-input-component .zen-input .country-select{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none}.phone-input-component .material-input .country-select .expand-icon,.phone-input-component .zen-input .country-select .expand-icon{color:#60636c;transition:.3s}.phone-input-component .material-input .country-select .expand-icon.active,.phone-input-component .zen-input .country-select .expand-icon.active{color:#2188d9;transform:rotate(180deg)}.phone-input-component .material-input .country-select .code,.phone-input-component .zen-input .country-select .code{font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333}.phone-input-component .material-input .country-select:focus .expand-icon,.phone-input-component .zen-input .country-select:focus .expand-icon{color:#2188d9}.phone-input-component .material-input .phone-input,.phone-input-component .zen-input .phone-input{flex:1;border:none;outline:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333;background:transparent}.phone-input-component .country-dropdown-list{width:inherit;margin-top:8px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { phone: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], phoneChange: [{
+                type: Output
+            }], validChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class ZenduSortHeaderComponent {
+    constructor() {
+        this.sortChange = new EventEmitter();
+    }
+    toggleSort() {
+        switch (this.sort) {
+            case 'asc':
+                this.sort = 'desc';
+                this.sortChange.emit(this.sort);
+                break;
+            case 'desc':
+                this.sort = 'asc';
+                this.sortChange.emit(this.sort);
+                break;
+            default:
+                this.sort = 'asc';
+                this.sortChange.emit(this.sort);
+        }
+    }
+}
+ZenduSortHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduSortHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduSortHeaderComponent, selector: "zen-sort", inputs: { sort: "sort", active: "active" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div class=\"sort-option\"\n     (click)=\"toggleSort()\">\n   <div>\n      <i class=\"material-icons sort-icon\"\n         [ngClass]=\"active && sort === 'asc' ? 'sort-icon-active' : ''\">\n         keyboard_arrow_up\n      </i>\n   </div>\n   <div>\n      <i class=\"material-icons sort-icon\"\n         [ngClass]=\"active && sort === 'desc' ? 'sort-icon-active' : ''\">\n         keyboard_arrow_down\n      </i>\n   </div>\n</div>\n", styles: [".sort-option{display:flex;flex-direction:column;cursor:pointer;-webkit-user-select:none;user-select:none}.sort-option .sort-icon{display:flex;color:#cfe9fd;height:10px;align-items:center;font-weight:500;font-size:20px;transition:.3s}.sort-option .sort-icon-active{color:#2188d9}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSortHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-sort', template: "<div class=\"sort-option\"\n     (click)=\"toggleSort()\">\n   <div>\n      <i class=\"material-icons sort-icon\"\n         [ngClass]=\"active && sort === 'asc' ? 'sort-icon-active' : ''\">\n         keyboard_arrow_up\n      </i>\n   </div>\n   <div>\n      <i class=\"material-icons sort-icon\"\n         [ngClass]=\"active && sort === 'desc' ? 'sort-icon-active' : ''\">\n         keyboard_arrow_down\n      </i>\n   </div>\n</div>\n", styles: [".sort-option{display:flex;flex-direction:column;cursor:pointer;-webkit-user-select:none;user-select:none}.sort-option .sort-icon{display:flex;color:#cfe9fd;height:10px;align-items:center;font-weight:500;font-size:20px;transition:.3s}.sort-option .sort-icon-active{color:#2188d9}\n"] }]
+        }], propDecorators: { sort: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }], active: [{
+                type: Input
+            }] } });
+
+class ZenduToggleComponent {
+    constructor() {
+        this.enabledChange = new EventEmitter();
+        this.onLabel = "On";
+        this.offLabel = "Off";
+    }
+    /**
+     * Toggle state
+     */
+    toggle() {
+        this.enabled = !this.enabled;
+        this.enabledChange.emit(this.enabled);
+    }
+}
+ZenduToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduToggleComponent, selector: "zen-toggle", inputs: { enabled: "enabled", onLabel: "onLabel", offLabel: "offLabel" }, outputs: { enabledChange: "enabledChange" }, ngImport: i0, template: "<div class=\"toggle-component\">\n   <div class=\"toggle-component-content\"\n        (click)=\"toggle()\">\n      <div class=\"toggle-state toggle-state-left\"\n           [ngClass]=\"enabled ? 'toggle-active' : ''\">\n         {{onLabel}}\n      </div>\n      <div class=\"toggle-state toggle-state-right\"\n           [ngClass]=\"enabled ? '' : 'toggle-active'\">\n         {{offLabel}}\n      </div>\n   </div>\n</div>", styles: [".toggle-component{display:inline-block}.toggle-component .toggle-component-content{display:flex;flex-direction:row;align-items:center;justify-content:stretch;color:var(--color-grey-shade-2, #828282);cursor:pointer}.toggle-component .toggle-state{border:1px solid var(--color-grey-shade-2, #828282);padding:10px 16px;min-width:70px;text-align:center}.toggle-component .toggle-state-left{border-radius:4px 0 0 4px;border-right:1px solid var(--color-primary, #2188d9)}.toggle-component .toggle-state-right{border-radius:0 4px 4px 0;border-left:none}.toggle-component .toggle-active{background-color:var(--color-blue-tint-1, #f4f9fd);color:var(--color-primary, #2188d9);border-color:var(--color-primary, #2188d9)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-toggle', template: "<div class=\"toggle-component\">\n   <div class=\"toggle-component-content\"\n        (click)=\"toggle()\">\n      <div class=\"toggle-state toggle-state-left\"\n           [ngClass]=\"enabled ? 'toggle-active' : ''\">\n         {{onLabel}}\n      </div>\n      <div class=\"toggle-state toggle-state-right\"\n           [ngClass]=\"enabled ? '' : 'toggle-active'\">\n         {{offLabel}}\n      </div>\n   </div>\n</div>", styles: [".toggle-component{display:inline-block}.toggle-component .toggle-component-content{display:flex;flex-direction:row;align-items:center;justify-content:stretch;color:var(--color-grey-shade-2, #828282);cursor:pointer}.toggle-component .toggle-state{border:1px solid var(--color-grey-shade-2, #828282);padding:10px 16px;min-width:70px;text-align:center}.toggle-component .toggle-state-left{border-radius:4px 0 0 4px;border-right:1px solid var(--color-primary, #2188d9)}.toggle-component .toggle-state-right{border-radius:0 4px 4px 0;border-left:none}.toggle-component .toggle-active{background-color:var(--color-blue-tint-1, #f4f9fd);color:var(--color-primary, #2188d9);border-color:var(--color-primary, #2188d9)}\n"] }]
+        }], propDecorators: { enabled: [{
+                type: Input
+            }], enabledChange: [{
+                type: Output
+            }], onLabel: [{
+                type: Input
+            }], offLabel: [{
+                type: Input
+            }] } });
+
+class ZenduCardBlockComponent {
+}
+ZenduCardBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduCardBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduCardBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduCardBlockComponent, selector: "zen-card-block", inputs: { icon: "icon", title: "title", text: "text", selected: "selected" }, ngImport: i0, template: "<div class=\"component\">\n    <zen-icon *ngIf=\"icon\"\n              [src]=\"icon\"></zen-icon>\n\n    <div class=\"title\">\n        {{title}}\n    </div>\n    <div class=\"text\">\n        {{text}}\n    </div>\n</div>\n", styles: [".component{border-radius:10px;border:2px solid transparent;background:var(--color-white-primary, #ffffff);box-shadow:0 0 20px 2px #f0f0f0;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%}.component:hover{border:2px solid var(--color-grey-shade-7, #121212)}.component zen-icon{width:50px;height:50px}.component .title{width:167px;text-align:center;font-family:Roboto;font-size:32px;font-style:normal;font-weight:500}.component .text{color:var(--color-white-tint-6, #bebebe);text-align:center;margin-top:22px;font-size:16px;font-style:normal;font-weight:400;line-height:130%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduCardBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-card-block', template: "<div class=\"component\">\n    <zen-icon *ngIf=\"icon\"\n              [src]=\"icon\"></zen-icon>\n\n    <div class=\"title\">\n        {{title}}\n    </div>\n    <div class=\"text\">\n        {{text}}\n    </div>\n</div>\n", styles: [".component{border-radius:10px;border:2px solid transparent;background:var(--color-white-primary, #ffffff);box-shadow:0 0 20px 2px #f0f0f0;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%}.component:hover{border:2px solid var(--color-grey-shade-7, #121212)}.component zen-icon{width:50px;height:50px}.component .title{width:167px;text-align:center;font-family:Roboto;font-size:32px;font-style:normal;font-weight:500}.component .text{color:var(--color-white-tint-6, #bebebe);text-align:center;margin-top:22px;font-size:16px;font-style:normal;font-weight:400;line-height:130%}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }] } });
+
+class ZenduMapPreviewComponent {
+    constructor() {
+        this.source = "";
+    }
+    ngOnChanges(changes) {
+        if (this.apiKey && this.lat && this.lng) {
+            this.source = `https://image.maps.ls.hereapi.com/mia/1.6/mapview?apiKey=${this.apiKey}&c=${this.lat},${this.lng}` +
+                `&z=14&w=222&h=80&&base=reduced.night&incidents=off&traffic=off`;
+        }
+        else {
+            this.source = "";
+        }
+    }
+}
+ZenduMapPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduMapPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduMapPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduMapPreviewComponent, selector: "zen-map-preview", inputs: { lat: "lat", lng: "lng", apiKey: "apiKey" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"component\"\n     [ngStyle]=\"{ 'background-image': 'url('+source+')' }\">\n</div>\n", styles: [".component{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduMapPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-map-preview', template: "<div class=\"component\"\n     [ngStyle]=\"{ 'background-image': 'url('+source+')' }\">\n</div>\n", styles: [".component{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}\n"] }]
+        }], propDecorators: { lat: [{
+                type: Input
+            }], lng: [{
+                type: Input
+            }], apiKey: [{
+                type: Input
+            }] } });
+
+class ZenduSpinner {
+}
+ZenduSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduSpinner, selector: "zen-spinner", ngImport: i0, template: "<div class=\"component\">\n</div>\n", styles: [".component{width:64px;height:64px;border:6px solid var(--color-primary, #2188d9);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation_spinner 1s linear infinite}@keyframes rotation_spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduSpinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-spinner', template: "<div class=\"component\">\n</div>\n", styles: [".component{width:64px;height:64px;border:6px solid var(--color-primary, #2188d9);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation_spinner 1s linear infinite}@keyframes rotation_spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
+class LocalLock {
+    constructor() {
+        this._acquired = false;
+        this._waitingResolvers = [];
+    }
+    lock() {
+        return new Promise(resolve => {
+            if (!this._acquired) {
+                this._acquired = true;
+                resolve();
+                return;
+            }
+            this._waitingResolvers.push(resolve);
+        });
+    }
+    release() {
+        if (!this._acquired) {
+            // Trying to release an unacquired lock
+            return;
+        }
+        if (this._waitingResolvers.length > 0) {
+            const resolve = this._waitingResolvers.shift();
+            resolve();
+        }
+        else {
+            this._acquired = false;
+        }
+    }
+    isLock() {
+        return this._acquired;
+    }
+}
+
+class OpenCVService {
+    /**
+     * extract paper from the image
+     * @returns
+     */
+    async extractPaper(options) {
+        // load open cv
+        await this.loadOpenCv();
+        const htmlImage = await this.loadImage(options.src);
+        console.log("image is ready");
+        const scanner = new window["jscanify"];
+        return scanner.extractPaper(htmlImage, options.height, options.width, options.corners);
+    }
+    /**
+     * Get the paper corners from the specific image
+     * @param src
+     * @returns
+     */
+    async getPaperCorners(src, height, width) {
+        // load opencv
+        await this.loadOpenCv();
+        const cv = this.getCVInternal();
+        const htmlImage = await this.loadImage(src);
+        console.log("image is ready", htmlImage);
+        const scanner = new window["jscanify"];
+        const img = cv.imread(htmlImage);
+        const maxContour = scanner.findPaperContour(img);
+        if (!maxContour) {
+            return null;
+        }
+        const res = scanner.getCornerPoints(maxContour, img);
+        return res;
+    }
+    loadImage(src) {
+        return new Promise((resolve) => {
+            const image = new Image();
+            image.src = src;
+            image.onload = function () {
+                resolve(image);
+            };
+        });
+    }
+    async loadOpenCv() {
+        try {
+            await OpenCVService._lock.lock();
+            if (OpenCVService._isOpenCVLoaded) {
+                return;
+            }
+            console.log("load opencv...");
+            // Storage bucket available here:
+            // https://console.cloud.google.com/storage/browser/ng-zenduit/scripts?project=zendu-one
+            // load open cv script
+            this.loadScript("https://storage.googleapis.com/ng-zenduit/scripts/opencv_4.7.0.js");
+            await this.waitInitalization("cv");
+            // load jscanify script
+            this.loadScript("https://storage.googleapis.com/ng-zenduit/scripts/jscanify_1.2.0.js");
+            await this.waitInitalization("jscanify");
+            console.log("OpenCV is ready");
+            OpenCVService._isOpenCVLoaded = true;
+        }
+        finally {
+            OpenCVService._lock.release();
+        }
+    }
+    loadScript(src) {
+        const script = document.createElement('script');
+        script.setAttribute('type', 'text/javascript');
+        script.src = src;
+        // insert script to document
+        const node = document.getElementsByTagName('script')[0];
+        if (node) {
+            node.parentNode.insertBefore(script, node);
+        }
+        else {
+            document.head.appendChild(script);
+        }
+    }
+    async waitInitalization(globalVarName) {
+        const timeout = Date.now() + 60000;
+        // wait cv first
+        while (true) {
+            if (window[globalVarName]) {
+                break;
+            }
+            await Util.sleep(1000);
+            if (Date.now() > timeout) {
+                throw `Failed initalize OpenCV. Reason: timeout`;
+            }
+        }
+    }
+    getCVInternal() {
+        return window["cv"];
+    }
+}
+OpenCVService._isOpenCVLoaded = false;
+OpenCVService._lock = new LocalLock();
+OpenCVService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: OpenCVService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OpenCVService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: OpenCVService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: OpenCVService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ZenduDocScanner {
+    constructor(_opencv) {
+        this._opencv = _opencv;
+        this.src = '';
+        this.width = 0;
+        this.height = 0;
+        this.isScanStart = false;
+        this.canAddText = false;
+        this.canDoodle = false;
+        this.currentStateIndex = -1;
+        this.canvasStates = [];
+        this.isResize = false;
+        this.isRedoing = false;
+        this.isUndoing = false;
+        this.extracted = new EventEmitter();
+        this.cornersChanged = new EventEmitter();
+        this.canAddTextOrDoole = new EventEmitter();
+        this.canRedoOrUndo = new EventEmitter();
+        this.screenPoints = [];
+        this._scaleFactor = 1;
+        this._controls = [];
+        this.selectedColor = '#121212';
+        this.isScaned = false;
+        this.textAdded = false;
+        this.icons = {
+            cross: new Image(),
+            rotate: new Image(),
+            expand: new Image(),
+        };
+        this.Image = {
+            height: 0,
+            width: 0,
+        };
+        this.borderWidth = 5;
+        this.colors = [
+            { hexCode: '#FFFFFF', selected: false },
+            { hexCode: '#121212', selected: false },
+            { hexCode: '#2188D9', selected: false },
+            { hexCode: '#DC3E33', selected: false },
+            { hexCode: '#219653', selected: false },
+            { hexCode: '#F1B10B', selected: false },
+            { hexCode: '#00F0FF', selected: false },
+        ];
+    }
+    set done(completed) {
+        console.log('mark as completed', completed);
+        if (completed) {
+            this.completeScan(completed);
+        }
+    }
+    ngAfterViewInit() {
+        this.icons.cross.src = 'assets/ng-zenduit/icons/cross.svg';
+        this.icons.rotate.src = 'assets/ng-zenduit/icons/rotate.svg';
+        this.icons.expand.src = 'assets/ng-zenduit/icons/expand.svg';
+        setTimeout(async () => {
+            await this.init();
+            // Add an event listener for canvas edits
+        }, 1);
+    }
+    onCanvasEdit() {
+        let objects = this._canvas.getObjects();
+        if (objects && objects.length)
+            this._canvas._activeObject = objects[objects.length - 1];
+        if (!this.isScanStart && !this.isRedoing && !this.isUndoing) {
+            this.canRedoOrUndo.emit({
+                canUndo: this.currentStateIndex >= 0 ? true : false,
+                canRedo: this.currentStateIndex < this.canvasStates.length - 1 ? true : false,
+            });
+            this.saveCanvasState();
+        }
+    }
+    ngOnChanges(changes) {
+        // When src changes
+        if (changes['src'] && this._canvas) {
+            this.build();
+        }
+        //When user start scan
+        if (changes['isScanStart'] && changes['isScanStart'].currentValue) {
+            if (this.src && this._canvas && this.isScanStart) {
+                this.addPointsTodoc();
+                this.canDoodle = false;
+                this._canvas.isDrawingMode = false;
+                this.isScaned = true;
+                this._canvas.selection = false;
+                this.textAdded = false;
+            }
+        }
+        // When user wants to draw
+        if (changes['canDoodle'] &&
+            changes['canDoodle'].currentValue &&
+            this._canvas) {
+            if (this.canDoodle) {
+                this._canvas.isDrawingMode = this.canDoodle;
+                this._canvas.freeDrawingBrush = this.canDoodle
+                    ? new fabric.PencilBrush(this._canvas)
+                    : null;
+                this._canvas.freeDrawingBrush.width = 10;
+                this._canvas.freeDrawingBrush.color = this.selectedColor;
+                this._canvas.selection = false;
+                this.isScanStart = false;
+                this.textAdded = false;
+                this._canvas.renderAll();
+            }
+        }
+        // When user wants to add text
+        if (changes['canAddText'] &&
+            changes['canAddText'].currentValue &&
+            this.canAddText) {
+            this.canDoodle = false;
+            this._canvas.isDrawingMode = false;
+            this.isScanStart = false;
+        }
+        if (changes['isUndoing'] && changes['isUndoing'].currentValue)
+            this.undo();
+        if (changes['isRedoing'] && changes['isRedoing'].currentValue)
+            this.redo();
+    }
+    // To change the color of brush or text
+    chngClrTextOrBrush(color, changeFor) {
+        this.selectedColor = color;
+        this.colors.map((clr, index) => {
+            this.colors[index] = { ...this.colors[index], selected: false };
+            if (this.colors[index].hexCode === color) {
+                this.colors[index] = { ...this.colors[index], selected: true };
+            }
+        });
+        if (changeFor === 'text') {
+            const activeObject = this._canvas.getActiveObject();
+            if (activeObject && activeObject.type === 'i-text') {
+                // Check if an active text object is selected
+                activeObject.set('fill', this.selectedColor); // Update the fill color
+                this._canvas.renderAll(); // Render the canvas to see the changes
+            }
+            this._canvas.renderAll();
+            // this.onCanvasEdit();
+        }
+        else {
+            this._canvas.freeDrawingBrush.color = color;
+        }
+        this.selectedColor = color;
+    }
+    async addPointsTodoc() {
+        const corners = await this._opencv.getPaperCorners(this._canvas.toDataURL({
+            format: 'jpeg',
+            quality: 1,
+        }), this.Image.height, this.Image.width);
+        if (corners) {
+            this.screenPoints = [
+                corners.topLeftCorner,
+                corners.topRightCorner,
+                corners.bottomRightCorner,
+                corners.bottomLeftCorner,
+            ];
+        }
+        else {
+            console.error(`can't detect document corners`);
+            const width = this._canvas.getWidth() / this._scaleFactor;
+            const height = this._canvas.getHeight() / this._scaleFactor;
+            const offset = 20;
+            this.screenPoints = [
+                { x: offset, y: 0 },
+                { x: width - offset, y: 0 },
+                { x: width - offset, y: height - offset },
+                { x: offset, y: height - offset },
+            ];
+        }
+        // add polygon
+        //
+        this._cornersPg = new fabric.Polygon(this.screenPoints, {
+            stroke: '#2188d9',
+            strokeWidth: 10,
+            selectable: false,
+            fill: 'rgba(33, 136, 217, 0.1)',
+            hasBorders: true,
+            objectCaching: false,
+        });
+        this._canvas.add(this._cornersPg);
+        this.createControls(this._cornersPg);
+    }
+    async init(src) {
+        // Create canvas with new changed src
+        if (src) {
+            this.createCanvas();
+        }
+        else {
+            try {
+                if (!this._canvasElement || !this._canvasElement.nativeElement) {
+                    // canvas is not ready
+                    return;
+                }
+                if (this._canvas) {
+                    // canvas already initalized
+                    return;
+                }
+                this.createCanvas();
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+    }
+    async createCanvas() {
+        // documentation: http://fabricjs.com/docs/fabric.Canvas.html
+        let canvas = this._canvasElement.nativeElement;
+        this._canvas = new fabric.Canvas(canvas, {
+            backgroundColor: 'white',
+            selection: false,
+        });
+        const { width, height } = this.getCanvasSize();
+        this._canvas.setWidth(width);
+        this._canvas.setHeight(height);
+        this._canvas.on('object:added', this.onCanvasEdit.bind(this));
+        this._canvas.on('object:modified', this.onCanvasEdit.bind(this));
+        this._canvas.on('mouse:down', this.addTextOnClick.bind(this));
+        this._canvas.on('mouse:move', this.resizeText.bind(this));
+        this._canvas.on('mouse:up', this.stopResizeText.bind(this));
+        if (this.src) {
+            await this.build();
+        }
+    }
+    renderIcon(ctx, left, top, styleOverride, fabricObject, iconName) {
+        var size = 42;
+        var iconBackgroundSize = 50; // Adjust the size as needed
+        ctx.save();
+        // Draw a background circle behind the icon
+        ctx.fillStyle = 'white'; // Set the background color
+        ctx.beginPath();
+        ctx.arc(left, top - 10, iconBackgroundSize / 2, 0, 2 * Math.PI);
+        ctx.fill();
+        var img = this.icons[iconName];
+        img.onload = function () { };
+        ctx.translate(left, top - 10);
+        ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+        ctx.drawImage(img, -size / 2, -size / 2, size, size);
+        ctx.restore();
+    }
+    stopResizeText(event) {
+        if (this.isResize) {
+            this.saveCanvasState();
+            this.isResize = false;
+        }
+    }
+    resizeText(event) {
+        if (this.isResize) {
+            const target = event.target;
+            const deltaY = event.e.clientY - this.initialMouseY;
+            // Limit the scaling factor to prevent excessive resizing
+            const scalingFactor = Math.min(2, Math.max(0.5, 1 + deltaY / 100));
+            // Calculate the new font size based on the original size and scaling factor
+            const newFontSize = this.originalFontSize * scalingFactor;
+            // Set the font size of the text object
+            target.fontSize = newFontSize;
+            // Re-render the canvas to see the live change
+            event.target.canvas.renderAll();
+        }
+    }
+    addTextOnClick(event) {
+        let _text = new fabric.IText('Type your text here', {
+            left: event.pointer.x,
+            top: event.pointer.y,
+            fill: this.selectedColor,
+            fontSize: 50,
+            fontFamily: 'Roboto',
+            selectable: true,
+            fontWeight: 400,
+            borderScaleFactor: 3,
+            borderColor: 'white',
+            backgroundColor: 'transparent',
+            cornerColor: 'white',
+            padding: 42,
+            width: 200, // Set the initial width of the text box
+        });
+        //Custom controls for add text box
+        let customControls = {
+            removeControl: new fabric.Control({
+                x: -0.5,
+                y: -0.5,
+                offsetY: 16,
+                cursorStyle: 'pointer',
+                render: (ctx, left, top, styleOverride, fabricObject) => {
+                    return this.renderIcon(ctx, left, top, styleOverride, fabricObject, 'cross');
+                },
+                mouseUpHandler: (eventData, transform) => {
+                    var target = transform.target;
+                    var canvas = target.canvas;
+                    canvas.remove(target);
+                    canvas.requestRenderAll();
+                    this.saveCanvasState();
+                    return true;
+                },
+            }),
+            rotateControl: new fabric.Control({
+                x: 0.5,
+                y: -0.5,
+                offsetY: 16,
+                cursorStyle: 'pointer',
+                render: (ctx, left, top, styleOverride, fabricObject) => {
+                    return this.renderIcon(ctx, left, top, styleOverride, fabricObject, 'rotate');
+                },
+                mouseUpHandler: (eventData, transform) => {
+                    let fabricObject = transform.target;
+                    const rotationIncrement = 30; // Rotation increment in degrees
+                    fabricObject.set('angle', (fabricObject.angle + rotationIncrement) % 360);
+                    fabricObject.setCoords(); // Update object's coordinates
+                    this.saveCanvasState();
+                    return true;
+                },
+            }),
+            expantControl: new fabric.Control({
+                x: 0.5,
+                y: 0.5,
+                offsetY: 16,
+                cursorStyle: 'grab',
+                render: (ctx, left, top, styleOverride, fabricObject) => {
+                    return this.renderIcon(ctx, left, top, styleOverride, fabricObject, 'expand');
+                },
+            }),
+        };
+        if (event.transform && event.transform.action === 'scale') {
+            this.isResize = true;
+            this.initialMouseY = event.e.clientY;
+            this.originalFontSize = event.target.fontSize;
+        }
+        if (!this.textAdded &&
+            !this.canDoodle &&
+            !this.isScanStart &&
+            this.canAddText) {
+            _text.controls = customControls;
+            this._canvas.add(_text);
+            this._canvas.renderAll();
+            this.textAdded = true;
+        }
+    }
+    // Function to save the canvas state
+    saveCanvasState() {
+        const state = JSON.stringify(this._canvas.toJSON());
+        // const state = this._canvas.getObjects()[this._canvas.getObjects.length - 1]
+        if (this.currentStateIndex < this.canvasStates.length - 1) {
+            this.canvasStates.length = this.currentStateIndex + 1; // Remove future states
+        }
+        let activeObj = this._canvas.getActiveObject();
+        if (activeObj && activeObj.type === 'path') {
+            // set remove border and controls for drawing
+            activeObj.set({
+                hasControls: false,
+                selectable: false,
+                hasBorders: false,
+            });
+        }
+        const customControl = activeObj && activeObj.controls ? activeObj.controls : null;
+        this.canvasStates.push({ state, customControl });
+        this.currentStateIndex++;
+    }
+    redo() {
+        this.isRedoing = true;
+        if (this.currentStateIndex < this.canvasStates.length - 1) {
+            this.currentStateIndex++;
+            const nextState = this.canvasStates[this.currentStateIndex];
+            this.canRedoOrUndo.emit({
+                canUndo: this.currentStateIndex > 0 ? true : false,
+                canRedo: this.currentStateIndex < this.canvasStates.length - 1 ? true : false,
+            });
+            this._canvas.loadFromJSON(nextState.state, () => {
+                let activeObject = this._canvas.getActiveObject();
+                this._canvas.getObjects().forEach((obj) => {
+                    if (obj !== activeObject) {
+                        obj.evented = false;
+                    }
+                });
+                if (activeObject && activeObject.type !== 'path') {
+                    activeObject.controls =
+                        nextState && nextState.customControl
+                            ? nextState.customControl
+                            : null;
+                    activeObject.set({
+                        padding: 42,
+                        borderScaleFactor: 3,
+                        borderColor: 'white',
+                    });
+                    this.textAdded = true;
+                    this.canAddTextOrDoole.emit({ key: 'doodle', value: false });
+                    this.canAddTextOrDoole.emit({ key: 'text', value: true });
+                }
+                else {
+                    activeObject.set({
+                        hasControls: false,
+                        selectable: false,
+                        hasBorders: false,
+                    });
+                    this.canAddTextOrDoole.emit({ key: 'text', value: false });
+                    this.canAddTextOrDoole.emit({ key: 'doodle', value: true });
+                    this._canvas.selection = false;
+                }
+                this._canvas.renderAll();
+            });
+        }
+    }
+    undo() {
+        this.isUndoing = true;
+        if (this.currentStateIndex > 0) {
+            this.currentStateIndex--;
+            const previousState = this.canvasStates[this.currentStateIndex];
+            this.canRedoOrUndo.emit({
+                canUndo: this.currentStateIndex > 0 ? true : false,
+                canRedo: this.currentStateIndex < this.canvasStates.length - 1 ? true : false,
+            });
+            this._canvas.loadFromJSON(previousState.state, () => {
+                let activeObject = this._canvas.getActiveObject();
+                if (activeObject) {
+                    if (activeObject.type !== 'path') {
+                        activeObject.set({
+                            padding: 42,
+                            borderScaleFactor: 3,
+                            borderColor: 'white',
+                        });
+                        this._canvas.isDrawingMode = false;
+                        this._canvas.freeDrawingBrush = null;
+                        this.textAdded = true;
+                        this.canAddTextOrDoole.emit({ key: 'doodle', value: false });
+                        this.canAddTextOrDoole.emit({ key: 'text', value: true });
+                    }
+                    else {
+                        activeObject.set({
+                            hasControls: false,
+                            hasBorders: false,
+                        });
+                        this._canvas.selection = false;
+                        this.canAddTextOrDoole.emit({ key: 'text', value: false });
+                        this.canAddTextOrDoole.emit({ key: 'doodle', value: true });
+                    }
+                    this._canvas.getActiveObject().controls =
+                        previousState && previousState.customControl
+                            ? previousState.customControl
+                            : null;
+                }
+                this._canvas.getObjects().forEach((obj) => {
+                    if (obj !== activeObject) {
+                        obj.evented = false;
+                    }
+                });
+                this._canvas.renderAll();
+            });
+        }
+    }
+    getCanvasSize() {
+        const img = new Image();
+        img.src = this.src;
+        const box = this._component.nativeElement.getBoundingClientRect();
+        const width = this.width || box.width || 1;
+        const height = this.height || box.height || 1;
+        return { width, height };
+    }
+    /**
+     * recognize paper corners
+     */
+    async build() {
+        if (!this.src || !this._canvas) {
+            return;
+        }
+        const bg = await this.loadBackgroundImage(this.src);
+        // Remove all the existing objects before add the new image to background
+        this._canvas.clear();
+        const imgSize = bg.getOriginalSize();
+        this.Image = {
+            height: imgSize.height * this._scaleFactor,
+            width: imgSize.width * this._scaleFactor,
+        };
+        const scaleX = this._canvas.width / imgSize.width;
+        const scaleY = this._canvas.height / imgSize.height;
+        this._scaleFactor = Math.min(scaleY, scaleX);
+        this._canvas.setDimensions({
+            width: imgSize.width,
+            height: imgSize.height,
+        }, {
+            backstoreOnly: true,
+        });
+        this._canvas.setBackgroundImage(bg, () => {
+            this._canvas.renderAll();
+        });
+        this.saveCanvasState();
+        this._canvas.renderAll();
+    }
+    createControls(polygon) {
+        // remove previous controls
+        if (this._controls.length) {
+            this._canvas.remove(...this._controls);
+            this._controls = [];
+        }
+        if (polygon) {
+            for (const [index, point] of polygon.points.entries()) {
+                const circle = this.createControl(index, polygon);
+                this._controls.push(circle);
+                this._canvas.add(circle);
+            }
+        }
+    }
+    createControl(index, polygon) {
+        const point = polygon.points[index];
+        const circle = new fabric.Circle({
+            left: point.x,
+            top: point.y,
+            originX: 'center',
+            originY: 'center',
+            fill: '#2188d9',
+            radius: 20,
+            hasRotatingPoint: false,
+            hasBorders: false,
+            hasControls: false,
+            objectCaching: false,
+        });
+        circle.on('moving', (evt) => {
+            if (evt.pointer) {
+                polygon.points[index] = new fabric.Point(evt.pointer.x, evt.pointer.y);
+                polygon.dirty = true;
+            }
+        });
+        circle.on('mouseup', (evt) => {
+            this.cornersChanged.emit();
+            this.screenPoints[index] = polygon.points[index];
+        });
+        return circle;
+    }
+    loadBackgroundImage(src) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                let fabImage = new fabric.Image(img);
+                resolve(fabImage);
+            };
+            img.src = src;
+        });
+    }
+    async completeScan(completed) {
+        if (!completed) {
+            return;
+        }
+        console.log(`complete scan & extract paper`);
+        if (!this._cornersPg) {
+            console.error(`Corner line is not available`);
+        }
+        if (this._cornersPg) {
+            this._canvas.remove(this._cornersPg);
+            this._canvas.remove(...this._controls);
+            this._canvas.renderAll();
+        }
+        let output;
+        if (this.isScaned) {
+            output = await this._opencv.extractPaper({
+                src: this._canvas.toDataURL({ quality: 1 }),
+                corners: {
+                    topLeftCorner: this.screenPoints[0],
+                    topRightCorner: this.screenPoints[1],
+                    bottomRightCorner: this.screenPoints[2],
+                    bottomLeftCorner: this.screenPoints[3],
+                },
+                height: this._canvas.height,
+                width: this._canvas.width,
+            });
+            this._canvas.remove(...this._canvas.getObjects());
+            this.isScaned = false;
+        }
+        else {
+            output = this._canvas.toCanvasElement();
+        }
+        this.currentStateIndex = null;
+        this.canvasStates = [];
+        this.canRedoOrUndo.emit({
+            canUndo: this.currentStateIndex > 0 ? true : false,
+            canRedo: this.currentStateIndex < this.canvasStates.length - 1 ? true : false,
+        });
+        this.extracted.emit(output);
+        this.cleanupCanvas();
+    }
+    cleanupCanvas() {
+        this._canvas.getObjects().forEach((obj) => (obj.evented = false));
+        this._canvas.selection = false;
+        this._canvas.isDrawingMode = false;
+        this.canDoodle = false;
+        this.isScanStart = false;
+        this.canAddText = false;
+        this.textAdded = false;
+        this._canvas.renderAll();
+    }
+}
+ZenduDocScanner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduDocScanner, deps: [{ token: OpenCVService }], target: i0.ɵɵFactoryTarget.Component });
+ZenduDocScanner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduDocScanner, selector: "zen-doc-scanner", inputs: { src: "src", width: "width", height: "height", isScanStart: "isScanStart", canAddText: "canAddText", canDoodle: "canDoodle", isRedoing: "isRedoing", isUndoing: "isUndoing", done: "done" }, outputs: { extracted: "extracted", cornersChanged: "cornersChanged", canAddTextOrDoole: "canAddTextOrDoole", canRedoOrUndo: "canRedoOrUndo" }, viewQueries: [{ propertyName: "_canvasElement", first: true, predicate: ["drawCanas"], descendants: true }, { propertyName: "_component", first: true, predicate: ["componentWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #componentWrapper\n     class=\"component\">\n    <canvas #drawCanas></canvas>\n  <div class=\"colors-container\" *ngIf=\"canDoodle || canAddText\">\n    <div class=\"colors\" *ngFor=\"let color of colors\" [ngStyle]=\"{'background': color.hexCode, 'border':color.selected ? '1.6px solid white' : 'none'}\" (click)=\"chngClrTextOrBrush(color.hexCode, canAddText ? 'text': 'doodle')\"></div>\n  </div>\n</div>\n", styles: [".component{width:100%;height:100%}.colors-container{display:flex;height:20px;gap:16px;padding:8px 62px;justify-content:space-between;background:#262626}.colors-container .colors{width:20px;height:20px;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduDocScanner, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-doc-scanner', template: "<div #componentWrapper\n     class=\"component\">\n    <canvas #drawCanas></canvas>\n  <div class=\"colors-container\" *ngIf=\"canDoodle || canAddText\">\n    <div class=\"colors\" *ngFor=\"let color of colors\" [ngStyle]=\"{'background': color.hexCode, 'border':color.selected ? '1.6px solid white' : 'none'}\" (click)=\"chngClrTextOrBrush(color.hexCode, canAddText ? 'text': 'doodle')\"></div>\n  </div>\n</div>\n", styles: [".component{width:100%;height:100%}.colors-container{display:flex;height:20px;gap:16px;padding:8px 62px;justify-content:space-between;background:#262626}.colors-container .colors{width:20px;height:20px;border-radius:50%}\n"] }]
+        }], ctorParameters: function () { return [{ type: OpenCVService }]; }, propDecorators: { _canvasElement: [{
+                type: ViewChild,
+                args: ['drawCanas']
+            }], _component: [{
+                type: ViewChild,
+                args: ['componentWrapper']
+            }], src: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], isScanStart: [{
+                type: Input
+            }], canAddText: [{
+                type: Input
+            }], canDoodle: [{
+                type: Input
+            }], isRedoing: [{
+                type: Input
+            }], isUndoing: [{
+                type: Input
+            }], done: [{
+                type: Input
+            }], extracted: [{
+                type: Output
+            }], cornersChanged: [{
+                type: Output
+            }], canAddTextOrDoole: [{
+                type: Output
+            }], canRedoOrUndo: [{
+                type: Output
+            }] } });
+
+class ZenduBreadcrumbs {
+    constructor() {
+        this.steps = [];
+        /**
+         * Enable manual activation. In this case active trips will managed by app
+         */
+        this.manualNavigation = false;
+        this.onActivate = new EventEmitter();
+    }
+    onStepClick(step) {
+        if (this.manualNavigation) {
+            return;
+        }
+        const activeIdx = this.steps.indexOf(step);
+        // update states
+        for (let [idx, step] of this.steps.entries()) {
+            step.active = idx <= activeIdx;
+        }
+        this.onActivate.emit(step);
+    }
+}
+ZenduBreadcrumbs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduBreadcrumbs.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduBreadcrumbs, selector: "zen-breadcrumbs", inputs: { steps: "steps", manualNavigation: "manualNavigation" }, outputs: { onActivate: "onActivate" }, ngImport: i0, template: "<div class=\"component\">\n    <ng-container *ngFor=\"let step of steps; let isLast = last;\">\n        <div class=\"line\"\n             [ngClass]=\"{\n                'active': step.active,\n                'width': steps.length !== 1\n             }\"></div>\n        <div class=\"step\"\n             [ngClass]=\"{\n                'active': step.active,\n                'mannual-navigation': manualNavigation,\n                'text-nowrap': steps.length === 1\n             }\"\n             (click)=\"onStepClick(step)\">\n            {{step.text}}\n        </div>\n        <!-- last line -->\n        <div *ngIf=\"isLast\"\n             class=\"line\"\n             [ngClass]=\"{\n                'active': step.active,\n                'width': steps.length !== 1\n             }\"></div>\n    </ng-container>\n\n</div>", styles: [".component{display:flex;align-items:center;position:relative;width:100%}.component .line{flex:1;background-color:var(--color-white-tint-2, #ececed);height:8px;width:100%}.component .line.active{background-color:var(--color-primary, #2188d9)}.component .line.width{width:12px}.component :first-child.line{flex:unset;border-top-left-radius:4px;border-bottom-left-radius:4px}.component :last-child.line{flex:unset;border-top-right-radius:4px;border-bottom-right-radius:4px}.component .step{background:white;position:relative;display:flex;padding:8px 24px;justify-content:center;align-items:center;margin:0 -2px;border-radius:50px;border:2px solid var(--color-primary, #2188d9);color:var(--color-primary, #2188d9);font-size:16px;font-style:normal;font-weight:400;cursor:pointer}.component .step.active{background-color:var(--color-primary, #2188d9);color:var(--color-white-primary, #ffffff)}.component .step.mannual-navigation{cursor:default}.component .step.text-nowrap{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduBreadcrumbs, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-breadcrumbs', template: "<div class=\"component\">\n    <ng-container *ngFor=\"let step of steps; let isLast = last;\">\n        <div class=\"line\"\n             [ngClass]=\"{\n                'active': step.active,\n                'width': steps.length !== 1\n             }\"></div>\n        <div class=\"step\"\n             [ngClass]=\"{\n                'active': step.active,\n                'mannual-navigation': manualNavigation,\n                'text-nowrap': steps.length === 1\n             }\"\n             (click)=\"onStepClick(step)\">\n            {{step.text}}\n        </div>\n        <!-- last line -->\n        <div *ngIf=\"isLast\"\n             class=\"line\"\n             [ngClass]=\"{\n                'active': step.active,\n                'width': steps.length !== 1\n             }\"></div>\n    </ng-container>\n\n</div>", styles: [".component{display:flex;align-items:center;position:relative;width:100%}.component .line{flex:1;background-color:var(--color-white-tint-2, #ececed);height:8px;width:100%}.component .line.active{background-color:var(--color-primary, #2188d9)}.component .line.width{width:12px}.component :first-child.line{flex:unset;border-top-left-radius:4px;border-bottom-left-radius:4px}.component :last-child.line{flex:unset;border-top-right-radius:4px;border-bottom-right-radius:4px}.component .step{background:white;position:relative;display:flex;padding:8px 24px;justify-content:center;align-items:center;margin:0 -2px;border-radius:50px;border:2px solid var(--color-primary, #2188d9);color:var(--color-primary, #2188d9);font-size:16px;font-style:normal;font-weight:400;cursor:pointer}.component .step.active{background-color:var(--color-primary, #2188d9);color:var(--color-white-primary, #ffffff)}.component .step.mannual-navigation{cursor:default}.component .step.text-nowrap{white-space:nowrap}\n"] }]
+        }], propDecorators: { steps: [{
+                type: Input
+            }], manualNavigation: [{
+                type: Input
+            }], onActivate: [{
+                type: Output
+            }] } });
+
+class MapService {
+    createDeviceMarker(device, minZoom) {
+        const contentHtml = this.getDeviceContent(device);
+        const lat = Math.max(Math.min(device.latitude, 180), -180);
+        const lng = Math.max(Math.min(device.longitude, 180), -180);
+        const deviceMarker = new H.map.DomMarker(new H.geo.Point(lat, lng), {
+            zIndex: 10,
+            icon: new H.map.DomIcon(contentHtml),
+            data: device,
+            min: minZoom ? minZoom : 0
+        });
+        return deviceMarker;
+    }
+    getDeviceContent(device) {
+        let devIcon = "";
+        if (device.icon) {
+            devIcon = device.icon;
+        }
+        else {
+            // Default icon
+            devIcon = "https://storage.googleapis.com/ng-zenduit/icon/car.svg";
+        }
+        let isDriving = device.isDriving || false;
+        let driveClass = "";
+        if (isDriving) {
+            driveClass = "driving-marker";
+        }
+        let directionSvg = 'https://storage.googleapis.com/ng-zenduit/icon/device_direction.svg';
+        let displayDirection = isDriving ? "block" : "none";
+        let classList = isDriving ? "moving" : "stopped";
+        const lblContent = `<div class='gotrax-label ${classList}'>` +
+            `  <span>${device.name}</span>` +
+            `  <div class='gotrax-speed-label'></div>` +
+            `</div>`;
+        const bearing = device.bearing || 0;
+        let contentHtml = `<div>` +
+            `<div class='g-marker-vehilce-wrapper'>` +
+            `<div class='g-marker-vehilce'>` +
+            `<div class='${driveClass} gotrax-img'>
+            ${lblContent}
+            <div class='g-marker-icon ${classList}'><img class="g-marker-img svg-color white" src=${devIcon} />
+            <div class="direction-arrow" style="display: ${displayDirection};transform: rotate(${bearing}deg); background-image: url('${directionSvg}');"></div>
+            </div></div>` +
+            `</div>` + // close g-marker-vehilce
+            `</div>` + // close g-marker-vehilce-wrapper
+            `</div>`;
+        return contentHtml;
+    }
+    zoomToBounds(map, bounds) {
+        if (!bounds || bounds.isEmpty()) {
+            return;
+        }
+        if (isNaN(bounds.getCenter().lat) ||
+            isNaN(bounds.getCenter().lng)) {
+            return;
+        }
+        this.zoomToLatLngs(map, [bounds.getTopLeft(), bounds.getBottomRight()]);
+    }
+    zoomToLatLngs(map, pnts, zoom = 15) {
+        if (!pnts || pnts.length == 0) {
+            return;
+        }
+        if (pnts.length == 1) {
+            map.setZoom(zoom);
+            map.setCenter(new H.geo.Point(pnts[0].lat, pnts[0].lng));
+            return;
+        }
+        const latLngs = [];
+        pnts.forEach(p => latLngs.push(p.lat, p.lng, 0));
+        const bounds = H.geo.Rect.coverLatLngAlts(latLngs);
+        const minSize = 0.001;
+        if (bounds.getWidth() < minSize &&
+            bounds.getHeight() < minSize) {
+            map.setCenter(bounds.getCenter());
+            map.setZoom(17);
+        }
+        else {
+            const p1 = bounds.getBottomRight();
+            const p2 = bounds.getTopLeft();
+            const width = Math.max(bounds.getWidth(), minSize);
+            const height = Math.max(bounds.getHeight(), minSize);
+            // add offset for zooming
+            const targetBox = H.geo.Rect.coverLatLngAlts([
+                p1.lat - (height * 0.15),
+                p2.lng - (width * 0.15),
+                0,
+                p2.lat + (height * 0.15),
+                p1.lng + (width * 0.15),
+                0
+            ]);
+            map.getViewPort().resize();
+            map.getViewModel().setLookAtData({ bounds: targetBox });
+        }
+    }
+    /**
+     * Create polylines for given trip and date range.
+     * Method create separte polylines for logs outside the date range.
+     */
+    createTripPolyline(trip, map, theme) {
+        let result = {};
+        let coords = new Array();
+        trip.logs.forEach(log => {
+            let latLng = new H.geo.Point(log.latitude, log.longitude);
+            coords.push(latLng.lat, latLng.lng);
+        });
+        if (coords.length < 2) {
+            // Skip the empty path
+            return result;
+        }
+        if (theme == "black") {
+            const pl = this.createPl(coords, "#000000", 2);
+            pl.setZIndex(1);
+            result.polyline = pl;
+            map.addObject(pl);
+        }
+        else {
+            const pl = this.createPl(coords, "#9510e6", 5);
+            pl.setZIndex(1);
+            result.polyline = pl;
+            let arrow = this.createArrow(coords);
+            result.arrows = arrow;
+            map.addObjects([pl, arrow]);
+            // store additional information about polyline
+            pl.setData({ type: "trip", trip: trip });
+            arrow.setData({ type: "trip", trip: trip });
+        }
+        return result;
+    }
+    createPl(coords, color, strokeWeight) {
+        const pl = new H.map.Polyline(H.geo.LineString.fromLatLngArray(coords), {
+            style: {
+                strokeColor: color,
+                lineWidth: strokeWeight
+            },
+            arrows: {
+                fillColor: "#ffffff"
+            },
+            zIndex: 0
+        });
+        return pl;
+    }
+    createArrow(coords) {
+        return new H.map.Polyline(H.geo.LineString.fromLatLngArray(coords), {
+            style: {
+                lineWidth: 5,
+                fillColor: 'white',
+                strokeColor: 'rgba(255, 255, 255, 1)',
+                lineDash: [0, 5],
+                lineTailCap: 'arrow-tail',
+                lineHeadCap: 'arrow-head'
+            },
+            zIndex: 1
+        });
+    }
+    createStopMarker(map, log, stopIdx, tag, theme) {
+        let icon;
+        if (theme == "black") {
+            const src = "https://storage.googleapis.com/ng-zenduit/icon/stop-icon-black.svg";
+            icon = new H.map.DomIcon(`<div class="g-stop-img"><img src="${src}"/></div>`);
+        }
+        else {
+            // deafault
+            icon = new H.map.DomIcon(`<div class="g-stop"><label>${stopIdx}</label></div>`);
+        }
+        let stop = new H.map.DomMarker(new H.geo.Point(log.latitude, log.longitude), {
+            icon: icon,
+            zIndex: 2
+        });
+        map.addObject(stop);
+        stop.setData(tag);
+        return stop;
+    }
+}
+MapService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MapService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MapService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MapService, decorators: [{
+            type: Injectable
+        }] });
+
+class ZenduMapComponent {
+    constructor() {
+        this.trips = [];
+        this.devices = [];
+        this.theme = 'default';
+        this._objects = [];
+        this._mapService = new MapService();
+    }
+    ngOnChanges(changes) {
+        if (this.apiKey && !this._platform) {
+            this.init();
+        }
+        if (changes["trips"] || changes["devices"]) {
+            this.updateEntities();
+        }
+    }
+    init() {
+        this._platform = new H.service.Platform({
+            apikey: this.apiKey
+        });
+        setTimeout(() => {
+            this.initMap();
+            this.updateEntities();
+        }, 1000);
+    }
+    initMap() {
+        // Obtain the default map types from the platform object
+        const defaultLayers = this._platform.createDefaultLayers();
+        this._map = new H.Map(this._mapElement.nativeElement, defaultLayers.vector.normal.map, {
+            zoom: 3,
+            center: { lat: 34.366, lng: -89.519 }
+        });
+        // Create the default UI
+        const ui = H.ui.UI.createDefault(this._map, defaultLayers);
+        const mapSettings = ui.getControl('mapsettings');
+        mapSettings.setAlignment(H.ui.LayoutAlignment.RIGHT_TOP);
+        mapSettings.setVisibility(false);
+        const scalebar = ui.getControl('scalebar');
+        scalebar.setAlignment(H.ui.LayoutAlignment.RIGHT_BOTTOM);
+        const zoom = ui.getControl('zoom');
+        zoom.setAlignment(H.ui.LayoutAlignment.RIGHT_BOTTOM);
+        this._map.getBaseLayer().setMin(3);
+        // MapEvents enables the event system
+        // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
+        const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this._map));
+    }
+    updateEntities() {
+        if (!this._map) {
+            // map is not ready
+            return;
+        }
+        this.clearEntities();
+        this.createTrips();
+        this.createDevices();
+    }
+    createTrips() {
+        if (!this.trips || !this.trips.length) {
+            return;
+        }
+        let box = null;
+        for (const trip of this.trips) {
+            const res = this._mapService.createTripPolyline(trip, this._map, this.theme);
+            if (res.polyline) {
+                this._objects.push(res.polyline);
+                if (box) {
+                    box = box.mergeRect(res.polyline.getBoundingBox());
+                }
+                else {
+                    box = res.polyline.getBoundingBox();
+                }
+            }
+            if (res.arrows) {
+                this._objects.push(res.arrows);
+            }
+        }
+        // create stop points
+        //
+        for (const [stopIdx, trip] of this.trips.entries()) {
+            let stopLog = trip.logs[trip.logs.length - 1];
+            this._objects.push(this._mapService.createStopMarker(this._map, stopLog, stopIdx + 1, trip, this.theme));
+        }
+        if (this.theme == "black") {
+            // create a marker for first stop as well
+            let stopLog = this.trips[0].logs[0];
+            this._objects.push(this._mapService.createStopMarker(this._map, stopLog, 0, this.trips[0], this.theme));
+        }
+        if (box) {
+            this._mapService.zoomToBounds(this._map, box);
+        }
+    }
+    createDevices() {
+        if (!this.devices || !this.devices.length) {
+            return;
+        }
+        for (const device of this.devices) {
+            const marker = this._mapService.createDeviceMarker(device);
+            this._map.addObject(marker);
+            this._objects.push(marker);
+        }
+    }
+    clearEntities() {
+        if (!this._map) {
+            return;
+        }
+        this._map.removeObjects(this._objects);
+        this._objects = [];
+    }
+}
+ZenduMapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduMapComponent, selector: "zen-map", inputs: { apiKey: "apiKey", trips: "trips", devices: "devices", theme: "theme" }, viewQueries: [{ propertyName: "_mapElement", first: true, predicate: ["map"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"component\">\n    <div #map\n         class=\"zen-map\"></div>\n</div>\n", styles: [".component{width:100%;height:100%}.component .zen-map{width:100%;height:100%;min-width:100px;min-height:100px}::ng-deep .component .zen-map .g-stop{display:flex;align-items:center;justify-content:center;padding:0 5px;min-width:16px;height:24px;background:#2188d9;border:1px solid black;border-radius:1px}::ng-deep .component .zen-map .g-stop label{color:#fff;display:block;text-align:center;margin:0!important}::ng-deep .component .zen-map .g-stop-img{position:relative}::ng-deep .component .zen-map .g-stop-img img{height:50px;position:relative;top:-49px;left:-20px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper{position:absolute;bottom:0;width:54px;display:flex;flex-direction:column;align-items:center;left:-27px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img{display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .g-marker-vehilce{position:relative;cursor:pointer}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label-wrapper{position:absolute;bottom:42px;width:400px;left:-200px;display:flex}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label{font-weight:400;font-size:14px;border-radius:2px;text-align:center;white-space:nowrap;max-width:400px;text-overflow:ellipsis;overflow-x:hidden;color:#fff;position:absolute;top:-28px;padding:0 12px;line-height:18px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon{width:30px;height:30px;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .direction-arrow{height:72px;width:72px;background-repeat:no-repeat;background-size:15px;background-position:top;position:absolute}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label.moving{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label.stopped{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon.moving{border-radius:50%;background-color:#2188d9;width:36px;height:36px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon.stopped{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .svg-color.white{filter:invert(100%) sepia(4%) saturate(1%) hue-rotate(347deg) brightness(105%) contrast(100%)}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .g-marker-img{display:block;margin:auto;height:15px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduMapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-map', template: "<div class=\"component\">\n    <div #map\n         class=\"zen-map\"></div>\n</div>\n", styles: [".component{width:100%;height:100%}.component .zen-map{width:100%;height:100%;min-width:100px;min-height:100px}::ng-deep .component .zen-map .g-stop{display:flex;align-items:center;justify-content:center;padding:0 5px;min-width:16px;height:24px;background:#2188d9;border:1px solid black;border-radius:1px}::ng-deep .component .zen-map .g-stop label{color:#fff;display:block;text-align:center;margin:0!important}::ng-deep .component .zen-map .g-stop-img{position:relative}::ng-deep .component .zen-map .g-stop-img img{height:50px;position:relative;top:-49px;left:-20px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper{position:absolute;bottom:0;width:54px;display:flex;flex-direction:column;align-items:center;left:-27px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img{display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .g-marker-vehilce{position:relative;cursor:pointer}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label-wrapper{position:absolute;bottom:42px;width:400px;left:-200px;display:flex}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label{font-weight:400;font-size:14px;border-radius:2px;text-align:center;white-space:nowrap;max-width:400px;text-overflow:ellipsis;overflow-x:hidden;color:#fff;position:absolute;top:-28px;padding:0 12px;line-height:18px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon{width:30px;height:30px;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .direction-arrow{height:72px;width:72px;background-repeat:no-repeat;background-size:15px;background-position:top;position:absolute}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label.moving{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label.stopped{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon.moving{border-radius:50%;background-color:#2188d9;width:36px;height:36px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon.stopped{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .svg-color.white{filter:invert(100%) sepia(4%) saturate(1%) hue-rotate(347deg) brightness(105%) contrast(100%)}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .g-marker-img{display:block;margin:auto;height:15px}\n"] }]
+        }], propDecorators: { _mapElement: [{
+                type: ViewChild,
+                args: ["map"]
+            }], apiKey: [{
+                type: Input
+            }], trips: [{
+                type: Input
+            }], devices: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }] } });
+
+class ZenduFileUpload {
+    constructor() {
+        this.fileTypes = `image/*`;
+        this.uploadState = "";
+        /**
+         * fire when user clicked on "Upload now"
+         */
+        this.uploadFile = new EventEmitter();
+        /**
+         * fired when user click "Cancel"
+         */
+        this.uploadCancelled = new EventEmitter();
+        this.isFileSelected = false;
+        this.isFileDragover = false;
+        this.filename = "";
+        this._selectedFiles = [];
+    }
+    // Dragover listener
+    onDragOver(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.isFileDragover = true;
+    }
+    // Dragleave listener
+    onDragLeave(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.isFileDragover = false;
+    }
+    // Drop listener
+    ondrop(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.isFileDragover = false;
+        let target = evt.dataTransfer;
+        if (target && target.files?.length) {
+            this.handleFiles(target.files);
+        }
+        console.log('File Dropped');
+    }
+    async onFileInput(evt) {
+        const target = evt.target;
+        if (target && target.files) {
+            await this.handleFiles(target.files);
+        }
+    }
+    async handleFiles(files) {
+        console.log(`handle files`, files);
+        if (!files.length) {
+            return;
+        }
+        this.filename = files.item(0).name;
+        this._selectedFiles = [];
+        for (let idx = 0; idx < files.length; idx++) {
+            this._selectedFiles.push(files[idx]);
+        }
+        this.isFileSelected = true;
+        this.uploadState = '';
+    }
+    uploadNow() {
+        if (!this._selectedFiles.length) {
+            console.error(`no files for uploading`);
+            return;
+        }
+        this.uploadFile.emit(this._selectedFiles);
+    }
+    clear() {
+        this.isFileSelected = false;
+        this.isFileDragover = false;
+        this.filename = "";
+        this._selectedFiles = [];
+        this.uploadState = "";
+    }
+    cancelUploading() {
+        this.uploadCancelled.emit();
+        this.clear();
+    }
+}
+ZenduFileUpload.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduFileUpload.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduFileUpload, selector: "zen-file-upload", inputs: { fileTypes: "fileTypes", uploadState: "uploadState" }, outputs: { uploadFile: "uploadFile", uploadCancelled: "uploadCancelled" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" } }, ngImport: i0, template: "<div class=\"component\">\n    <div class=\"title\">\n        <span *ngIf=\"uploadState != 'done'\">Upload File</span>\n        <span *ngIf=\"uploadState == 'done'\">Uploaded File</span>\n    </div>\n    <div class=\"drop-area\"\n         [class.dragover]=\"isFileDragover\"\n         *ngIf=\"uploadState != 'done'\">\n\n        <div class=\"box\"\n             *ngIf=\"!isFileSelected\">\n            <div>\n                <zen-icon class=\"doc-icon\"\n                          src=\"https://storage.googleapis.com/ng-zenduit/icon/document.svg\"></zen-icon>\n            </div>\n            <div>\n                <div>Drag and Drop Here</div>\n                <div>or</div>\n                <span class=\"browse\"\n                      (click)=\"fileIp.click()\">Browse</span>\n\n                <form><input type=\"file\"\n                           [accept]=\"fileTypes\"\n                           #fileIp\n                           (change)=\"onFileInput($event)\" /></form>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"isFileSelected\">\n            <!-- File selected state -->\n            <ng-container *ngIf=\"uploadState == ''\">\n                <div class=\"box-selected-file\">\n                    <div class=\"close-wrapper\">\n                        <zen-icon (click)=\"clear()\"\n                                  class=\"close-icon\"\n                                  src=\"https://storage.googleapis.com/ng-zenduit/icon/cross.svg\"></zen-icon>\n                    </div>\n                    <div>\n                        <zen-icon class=\"img-icon\"\n                                  src=\"https://storage.googleapis.com/ng-zenduit/icon/image.svg\"></zen-icon>\n                    </div>\n                    <div class=\"filename\">\n                        {{filename}}\n                    </div>\n                </div>\n            </ng-container>\n\n            <!-- Uploading state -->\n            <ng-container *ngIf=\"uploadState == 'uploading'\">\n                <div class=\"box-file-uploading\">\n                    <div class=\"file-description\">\n                        <zen-icon class=\"img-icon-sm\"\n                                  src=\"https://storage.googleapis.com/ng-zenduit/icon/image-sm.svg\"></zen-icon>\n                        <div>{{filename}}</div>\n                    </div>\n                    <div class=\"progress\">\n                        <div class=\"progress-bar-value\"></div>\n                    </div>\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n\n\n    <!-- Uploading done -->\n    <div *ngIf=\"uploadState == 'done'\"\n         class=\"box-upload-done\">\n        <div class=\"file-description\">\n            <zen-icon class=\"img-icon\"\n                      src=\"https://storage.googleapis.com/ng-zenduit/icon/image.svg\"></zen-icon>\n            <div class=\"filename\">{{filename}}</div>\n            <div class=\"close-btn\">\n                <zen-icon (click)=\"clear()\"\n                          class=\"close-icon\"\n                          src=\"https://storage.googleapis.com/ng-zenduit/icon/cross.svg\"></zen-icon>\n            </div>\n\n        </div>\n    </div>\n\n    <div class=\"btn-upload-wrapper\">\n\n        <button *ngIf=\"uploadState == ''\"\n                (click)=\"uploadNow()\"\n                class=\"button-flat full-width\"\n                [disabled]=\"!isFileSelected\">\n            Upload Now\n        </button>\n\n        <button *ngIf=\"uploadState == 'uploading'\"\n                (click)=\"cancelUploading()\"\n                class=\"button-alert full-width\"\n                [disabled]=\"!isFileSelected\">\n            Cancel\n        </button>\n    </div>\n\n</div>\n", styles: [".component{border-radius:4px;border:1px solid var(--color-white-tint-3, #e0e0e0);padding:24px;box-sizing:border-box;font-family:Roboto;width:100%;height:100%}.component .title{font-size:16px;font-style:normal;font-weight:500;margin-bottom:16px}.component .drop-area{border-radius:4px;border:1px dashed var(--color-white-tint-3, #e0e0e0);min-width:100px;margin-bottom:16px}.component .drop-area input[type=file]{display:none}.component .drop-area .box{padding:26px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400}.component .drop-area .box .browse{color:var(--color-primary, #2188d9);font-style:normal;font-weight:500;line-height:130%;letter-spacing:.28px;text-decoration:underline;cursor:pointer}.component .drop-area .doc-icon{width:28px;height:28px;background-color:var(--color-grey-primary, #4f4f4f)}.component .drop-area.dragover{border:1px dashed var(--color-primary, #2188d9)}.component .drop-area.dragover .doc-icon{background-color:var(--color-primary, #2188d9)}.component .drop-area .box-selected-file{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;margin:8px}.component .drop-area .box-selected-file .img-icon{background-color:var(--color-grey-primary, #4f4f4f);width:52px;height:52px}.component .drop-area .box-selected-file .close-wrapper{width:100%;display:flex;justify-content:end;margin-bottom:8px}.component .drop-area .box-selected-file .close-wrapper .close-icon{background-color:var(--color-error-primary, #dc3e33);cursor:pointer}.component .drop-area .box-selected-file .filename{color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400;margin-bottom:30px}.component .drop-area .box-file-uploading{padding:56px 28px;box-sizing:border-box}.component .drop-area .box-file-uploading .file-description{display:flex;align-items:center;gap:8px;font-size:14px;font-style:normal;font-weight:400;margin-bottom:5px}.component .drop-area .box-file-uploading .file-description .img-icon-sm{background-color:var(--color-grey-primary, #4f4f4f);width:28px;height:28px}.component .drop-area .box-file-uploading .progress{border-radius:4px;background-color:var(--color-white-tint-3, #e0e0e0);width:100%;height:5px;overflow:hidden}.component .drop-area .box-file-uploading .progress .progress-bar-value{width:100%;height:100%;background-color:var(--color-primary, #2188d9);animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%}.component .box-upload-done .file-description{display:flex;align-items:center;gap:4px;font-size:14px;font-style:normal;font-weight:400}.component .box-upload-done .file-description .filename{flex:1}.component .box-upload-done .file-description .close-icon{background-color:var(--color-error-primary, #dc3e33);cursor:pointer}.component .box-upload-done .file-description .img-icon{background-color:var(--color-grey-primary, #4f4f4f);width:52px;height:52px}.component .btn-upload-wrapper button{width:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-file-upload', template: "<div class=\"component\">\n    <div class=\"title\">\n        <span *ngIf=\"uploadState != 'done'\">Upload File</span>\n        <span *ngIf=\"uploadState == 'done'\">Uploaded File</span>\n    </div>\n    <div class=\"drop-area\"\n         [class.dragover]=\"isFileDragover\"\n         *ngIf=\"uploadState != 'done'\">\n\n        <div class=\"box\"\n             *ngIf=\"!isFileSelected\">\n            <div>\n                <zen-icon class=\"doc-icon\"\n                          src=\"https://storage.googleapis.com/ng-zenduit/icon/document.svg\"></zen-icon>\n            </div>\n            <div>\n                <div>Drag and Drop Here</div>\n                <div>or</div>\n                <span class=\"browse\"\n                      (click)=\"fileIp.click()\">Browse</span>\n\n                <form><input type=\"file\"\n                           [accept]=\"fileTypes\"\n                           #fileIp\n                           (change)=\"onFileInput($event)\" /></form>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"isFileSelected\">\n            <!-- File selected state -->\n            <ng-container *ngIf=\"uploadState == ''\">\n                <div class=\"box-selected-file\">\n                    <div class=\"close-wrapper\">\n                        <zen-icon (click)=\"clear()\"\n                                  class=\"close-icon\"\n                                  src=\"https://storage.googleapis.com/ng-zenduit/icon/cross.svg\"></zen-icon>\n                    </div>\n                    <div>\n                        <zen-icon class=\"img-icon\"\n                                  src=\"https://storage.googleapis.com/ng-zenduit/icon/image.svg\"></zen-icon>\n                    </div>\n                    <div class=\"filename\">\n                        {{filename}}\n                    </div>\n                </div>\n            </ng-container>\n\n            <!-- Uploading state -->\n            <ng-container *ngIf=\"uploadState == 'uploading'\">\n                <div class=\"box-file-uploading\">\n                    <div class=\"file-description\">\n                        <zen-icon class=\"img-icon-sm\"\n                                  src=\"https://storage.googleapis.com/ng-zenduit/icon/image-sm.svg\"></zen-icon>\n                        <div>{{filename}}</div>\n                    </div>\n                    <div class=\"progress\">\n                        <div class=\"progress-bar-value\"></div>\n                    </div>\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n\n\n    <!-- Uploading done -->\n    <div *ngIf=\"uploadState == 'done'\"\n         class=\"box-upload-done\">\n        <div class=\"file-description\">\n            <zen-icon class=\"img-icon\"\n                      src=\"https://storage.googleapis.com/ng-zenduit/icon/image.svg\"></zen-icon>\n            <div class=\"filename\">{{filename}}</div>\n            <div class=\"close-btn\">\n                <zen-icon (click)=\"clear()\"\n                          class=\"close-icon\"\n                          src=\"https://storage.googleapis.com/ng-zenduit/icon/cross.svg\"></zen-icon>\n            </div>\n\n        </div>\n    </div>\n\n    <div class=\"btn-upload-wrapper\">\n\n        <button *ngIf=\"uploadState == ''\"\n                (click)=\"uploadNow()\"\n                class=\"button-flat full-width\"\n                [disabled]=\"!isFileSelected\">\n            Upload Now\n        </button>\n\n        <button *ngIf=\"uploadState == 'uploading'\"\n                (click)=\"cancelUploading()\"\n                class=\"button-alert full-width\"\n                [disabled]=\"!isFileSelected\">\n            Cancel\n        </button>\n    </div>\n\n</div>\n", styles: [".component{border-radius:4px;border:1px solid var(--color-white-tint-3, #e0e0e0);padding:24px;box-sizing:border-box;font-family:Roboto;width:100%;height:100%}.component .title{font-size:16px;font-style:normal;font-weight:500;margin-bottom:16px}.component .drop-area{border-radius:4px;border:1px dashed var(--color-white-tint-3, #e0e0e0);min-width:100px;margin-bottom:16px}.component .drop-area input[type=file]{display:none}.component .drop-area .box{padding:26px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400}.component .drop-area .box .browse{color:var(--color-primary, #2188d9);font-style:normal;font-weight:500;line-height:130%;letter-spacing:.28px;text-decoration:underline;cursor:pointer}.component .drop-area .doc-icon{width:28px;height:28px;background-color:var(--color-grey-primary, #4f4f4f)}.component .drop-area.dragover{border:1px dashed var(--color-primary, #2188d9)}.component .drop-area.dragover .doc-icon{background-color:var(--color-primary, #2188d9)}.component .drop-area .box-selected-file{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;margin:8px}.component .drop-area .box-selected-file .img-icon{background-color:var(--color-grey-primary, #4f4f4f);width:52px;height:52px}.component .drop-area .box-selected-file .close-wrapper{width:100%;display:flex;justify-content:end;margin-bottom:8px}.component .drop-area .box-selected-file .close-wrapper .close-icon{background-color:var(--color-error-primary, #dc3e33);cursor:pointer}.component .drop-area .box-selected-file .filename{color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400;margin-bottom:30px}.component .drop-area .box-file-uploading{padding:56px 28px;box-sizing:border-box}.component .drop-area .box-file-uploading .file-description{display:flex;align-items:center;gap:8px;font-size:14px;font-style:normal;font-weight:400;margin-bottom:5px}.component .drop-area .box-file-uploading .file-description .img-icon-sm{background-color:var(--color-grey-primary, #4f4f4f);width:28px;height:28px}.component .drop-area .box-file-uploading .progress{border-radius:4px;background-color:var(--color-white-tint-3, #e0e0e0);width:100%;height:5px;overflow:hidden}.component .drop-area .box-file-uploading .progress .progress-bar-value{width:100%;height:100%;background-color:var(--color-primary, #2188d9);animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%}.component .box-upload-done .file-description{display:flex;align-items:center;gap:4px;font-size:14px;font-style:normal;font-weight:400}.component .box-upload-done .file-description .filename{flex:1}.component .box-upload-done .file-description .close-icon{background-color:var(--color-error-primary, #dc3e33);cursor:pointer}.component .box-upload-done .file-description .img-icon{background-color:var(--color-grey-primary, #4f4f4f);width:52px;height:52px}.component .btn-upload-wrapper button{width:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}\n"] }]
+        }], propDecorators: { fileTypes: [{
+                type: Input
+            }], uploadState: [{
+                type: Input
+            }], uploadFile: [{
+                type: Output
+            }], uploadCancelled: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], ondrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class ZenduProgress {
+    constructor() {
+        this.type = "bar";
+        /**
+         * progress value [0, 100]
+         */
+        this.value = 20;
+        /**
+         * progress text
+         */
+        this.text = "";
+    }
+}
+ZenduProgress.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduProgress.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduProgress, selector: "zen-progress", inputs: { type: "type", value: "value", text: "text" }, ngImport: i0, template: "<div class=\"component\">\n    <!-- Progres bar -->\n    <div *ngIf=\"type == 'bar'\">\n        <div class=\"progress-bar\">\n            <div class=\"progress-bar-val\"\n                 [ngStyle]=\"{ 'width': value + '%' }\">\n                <span class=\"value-text\">{{value}}%</span>\n            </div>\n        </div>\n        <div class=\"progress-text\">\n            {{text}}\n        </div>\n    </div>\n\n    <!-- Circle progress -->\n    <div *ngIf=\"type == 'circle'\"\n         class=\"progress-circle-wrapper\">\n\n\n        <div class=\"progress-circle\"\n             [class.show-full-right-side]=\"value>=50\">\n\n            <div class=\"center-pipe\"></div>\n\n            <div class=\"circle-clipper\">\n                <div class=\"right-full-bar progress-val-50\"></div>\n                <div class=\"progress-bar-val progress-val-{{value}}\"></div>\n            </div>\n            <div class=\"text-wrapper\">\n                <div class=\"text\"> {{value}}%</div>\n                <div class=\"progress-text\">{{text}}</div>\n            </div>\n        </div>\n    </div>\n\n    <!-- Half-Circle progress -->\n    <div *ngIf=\"type == 'half-circle'\"\n         class=\"progress-half-circle-wrapper\">\n\n        <div class=\"progress-circle\">\n            <div class=\"center-pipe\"></div>\n\n            <div class=\"circle-clipper\">\n                <div class=\"right-full-bar progress-val-50\"></div>\n                <div class=\"progress-bar-val progress-val-{{value}}\"></div>\n            </div>\n            <div class=\"text-wrapper\">\n                <div class=\"text\"> {{value}}%</div>\n                <div class=\"progress-text\">{{text}}</div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".component{font-family:Roboto}.component .progress-bar{min-width:100px;width:100%;height:24px;border-radius:4px;background-color:var(--color-white-tint-2, #ececed);overflow:hidden;position:relative}.component .progress-bar .progress-bar-val{height:100%;display:block;width:0;background-color:var(--color-primary, #2188d9);line-height:24px;position:absolute;text-align:end;padding-right:5px;transition:width 1s}.component .progress-bar .progress-bar-val .value-text{color:var(--color-white-primary, #ffffff);font-size:14px;font-style:normal;font-weight:500}.component .progress-text{color:var(--color-white-tint-4, #d6d6d8);overflow:hidden;font-size:14px;font-style:normal;font-weight:400;margin-top:8px}.component .progress-circle-wrapper .progress-circle{position:relative;width:188px;height:188px;background-color:var(--color-white-tint-2, #ececed);border-radius:50%}.component .progress-circle-wrapper .progress-circle .center-pipe{position:absolute;top:15px;left:15px;border-radius:50%;width:160px;height:160px;background-color:#fff}.component .progress-circle-wrapper .progress-circle .circle-clipper{border-radius:50%;width:188px;height:188px;position:absolute;clip:rect(0,188px,188px,94px)}.component .progress-circle-wrapper .progress-circle .progress-bar-val{position:absolute;clip:rect(0,94px,188px,0);width:188px;height:188px;border-radius:50%;border:15px solid var(--color-primary, #2188d9);box-sizing:border-box}.component .progress-circle-wrapper .progress-circle .progress-val-0{transform:rotate(0)}.component .progress-circle-wrapper .progress-circle .progress-val-1{transform:rotate(3.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-2{transform:rotate(7.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-3{transform:rotate(10.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-4{transform:rotate(14.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-5{transform:rotate(18deg)}.component .progress-circle-wrapper .progress-circle .progress-val-6{transform:rotate(21.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-7{transform:rotate(25.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-8{transform:rotate(28.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-9{transform:rotate(32.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-10{transform:rotate(36deg)}.component .progress-circle-wrapper .progress-circle .progress-val-11{transform:rotate(39.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-12{transform:rotate(43.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-13{transform:rotate(46.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-14{transform:rotate(50.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-15{transform:rotate(54deg)}.component .progress-circle-wrapper .progress-circle .progress-val-16{transform:rotate(57.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-17{transform:rotate(61.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-18{transform:rotate(64.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-19{transform:rotate(68.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-20{transform:rotate(72deg)}.component .progress-circle-wrapper .progress-circle .progress-val-21{transform:rotate(75.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-22{transform:rotate(79.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-23{transform:rotate(82.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-24{transform:rotate(86.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-25{transform:rotate(90deg)}.component .progress-circle-wrapper .progress-circle .progress-val-26{transform:rotate(93.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-27{transform:rotate(97.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-28{transform:rotate(100.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-29{transform:rotate(104.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-30{transform:rotate(108deg)}.component .progress-circle-wrapper .progress-circle .progress-val-31{transform:rotate(111.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-32{transform:rotate(115.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-33{transform:rotate(118.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-34{transform:rotate(122.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-35{transform:rotate(126deg)}.component .progress-circle-wrapper .progress-circle .progress-val-36{transform:rotate(129.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-37{transform:rotate(133.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-38{transform:rotate(136.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-39{transform:rotate(140.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-40{transform:rotate(144deg)}.component .progress-circle-wrapper .progress-circle .progress-val-41{transform:rotate(147.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-42{transform:rotate(151.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-43{transform:rotate(154.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-44{transform:rotate(158.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-45{transform:rotate(162deg)}.component .progress-circle-wrapper .progress-circle .progress-val-46{transform:rotate(165.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-47{transform:rotate(169.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-48{transform:rotate(172.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-49{transform:rotate(176.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-50{transform:rotate(180deg)}.component .progress-circle-wrapper .progress-circle .progress-val-51{transform:rotate(183.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-52{transform:rotate(187.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-53{transform:rotate(190.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-54{transform:rotate(194.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-55{transform:rotate(198deg)}.component .progress-circle-wrapper .progress-circle .progress-val-56{transform:rotate(201.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-57{transform:rotate(205.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-58{transform:rotate(208.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-59{transform:rotate(212.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-60{transform:rotate(216deg)}.component .progress-circle-wrapper .progress-circle .progress-val-61{transform:rotate(219.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-62{transform:rotate(223.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-63{transform:rotate(226.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-64{transform:rotate(230.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-65{transform:rotate(234deg)}.component .progress-circle-wrapper .progress-circle .progress-val-66{transform:rotate(237.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-67{transform:rotate(241.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-68{transform:rotate(244.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-69{transform:rotate(248.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-70{transform:rotate(252deg)}.component .progress-circle-wrapper .progress-circle .progress-val-71{transform:rotate(255.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-72{transform:rotate(259.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-73{transform:rotate(262.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-74{transform:rotate(266.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-75{transform:rotate(270deg)}.component .progress-circle-wrapper .progress-circle .progress-val-76{transform:rotate(273.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-77{transform:rotate(277.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-78{transform:rotate(280.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-79{transform:rotate(284.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-80{transform:rotate(288deg)}.component .progress-circle-wrapper .progress-circle .progress-val-81{transform:rotate(291.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-82{transform:rotate(295.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-83{transform:rotate(298.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-84{transform:rotate(302.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-85{transform:rotate(306deg)}.component .progress-circle-wrapper .progress-circle .progress-val-86{transform:rotate(309.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-87{transform:rotate(313.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-88{transform:rotate(316.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-89{transform:rotate(320.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-90{transform:rotate(324deg)}.component .progress-circle-wrapper .progress-circle .progress-val-91{transform:rotate(327.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-92{transform:rotate(331.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-93{transform:rotate(334.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-94{transform:rotate(338.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-95{transform:rotate(342deg)}.component .progress-circle-wrapper .progress-circle .progress-val-96{transform:rotate(345.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-97{transform:rotate(349.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-98{transform:rotate(352.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-99{transform:rotate(356.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-100{transform:rotate(360deg)}.component .progress-circle-wrapper .progress-circle .right-full-bar{display:none}.component .progress-circle-wrapper .progress-circle.show-full-right-side .circle-clipper{clip:rect(auto,auto,auto,auto)}.component .progress-circle-wrapper .progress-circle.show-full-right-side .right-full-bar{position:absolute;display:block;clip:rect(0,94px,188px,0);width:188px;height:188px;border-radius:50%;border:15px solid var(--color-primary, #2188d9);box-sizing:border-box;transform:rotate(180deg)}.component .progress-circle-wrapper .text-wrapper{position:absolute;width:188px;height:188px;justify-content:center;z-index:10;display:flex;flex-direction:column;align-items:center}.component .progress-circle-wrapper .text-wrapper .text{font-size:32px;font-style:normal;font-weight:500;color:var(--color-primary, #2188d9)}.component .progress-circle-wrapper .text-wrapper .progress-text{color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400}.component .progress-half-circle-wrapper{height:94px;overflow:hidden}.component .progress-half-circle-wrapper .progress-circle{position:relative;width:188px;height:188px;background-color:var(--color-white-tint-2, #ececed);border-radius:50%}.component .progress-half-circle-wrapper .progress-circle .center-pipe{position:absolute;top:15px;left:15px;border-radius:50%;width:160px;height:160px;background-color:#fff}.component .progress-half-circle-wrapper .progress-circle .circle-clipper{border-radius:50%;width:188px;height:188px;position:absolute}.component .progress-half-circle-wrapper .progress-circle .progress-bar-val{position:absolute;clip:rect(0,94px,188px,0);width:188px;height:188px;border-radius:50%;border:15px solid var(--color-primary, #2188d9);box-sizing:border-box}.component .progress-half-circle-wrapper .progress-circle .progress-val-0{transform:rotate(-90deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-1{transform:rotate(-88.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-2{transform:rotate(-86.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-3{transform:rotate(-84.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-4{transform:rotate(-82.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-5{transform:rotate(-81deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-6{transform:rotate(-79.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-7{transform:rotate(-77.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-8{transform:rotate(-75.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-9{transform:rotate(-73.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-10{transform:rotate(-72deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-11{transform:rotate(-70.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-12{transform:rotate(-68.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-13{transform:rotate(-66.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-14{transform:rotate(-64.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-15{transform:rotate(-63deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-16{transform:rotate(-61.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-17{transform:rotate(-59.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-18{transform:rotate(-57.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-19{transform:rotate(-55.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-20{transform:rotate(-54deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-21{transform:rotate(-52.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-22{transform:rotate(-50.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-23{transform:rotate(-48.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-24{transform:rotate(-46.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-25{transform:rotate(-45deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-26{transform:rotate(-43.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-27{transform:rotate(-41.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-28{transform:rotate(-39.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-29{transform:rotate(-37.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-30{transform:rotate(-36deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-31{transform:rotate(-34.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-32{transform:rotate(-32.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-33{transform:rotate(-30.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-34{transform:rotate(-28.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-35{transform:rotate(-27deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-36{transform:rotate(-25.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-37{transform:rotate(-23.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-38{transform:rotate(-21.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-39{transform:rotate(-19.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-40{transform:rotate(-18deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-41{transform:rotate(-16.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-42{transform:rotate(-14.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-43{transform:rotate(-12.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-44{transform:rotate(-10.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-45{transform:rotate(-9deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-46{transform:rotate(-7.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-47{transform:rotate(-5.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-48{transform:rotate(-3.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-49{transform:rotate(-1.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-50{transform:rotate(0)}.component .progress-half-circle-wrapper .progress-circle .progress-val-51{transform:rotate(1.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-52{transform:rotate(3.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-53{transform:rotate(5.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-54{transform:rotate(7.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-55{transform:rotate(9deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-56{transform:rotate(10.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-57{transform:rotate(12.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-58{transform:rotate(14.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-59{transform:rotate(16.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-60{transform:rotate(18deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-61{transform:rotate(19.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-62{transform:rotate(21.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-63{transform:rotate(23.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-64{transform:rotate(25.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-65{transform:rotate(27deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-66{transform:rotate(28.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-67{transform:rotate(30.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-68{transform:rotate(32.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-69{transform:rotate(34.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-70{transform:rotate(36deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-71{transform:rotate(37.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-72{transform:rotate(39.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-73{transform:rotate(41.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-74{transform:rotate(43.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-75{transform:rotate(45deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-76{transform:rotate(46.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-77{transform:rotate(48.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-78{transform:rotate(50.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-79{transform:rotate(52.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-80{transform:rotate(54deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-81{transform:rotate(55.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-82{transform:rotate(57.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-83{transform:rotate(59.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-84{transform:rotate(61.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-85{transform:rotate(63deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-86{transform:rotate(64.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-87{transform:rotate(66.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-88{transform:rotate(68.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-89{transform:rotate(70.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-90{transform:rotate(72deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-91{transform:rotate(73.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-92{transform:rotate(75.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-93{transform:rotate(77.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-94{transform:rotate(79.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-95{transform:rotate(81deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-96{transform:rotate(82.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-97{transform:rotate(84.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-98{transform:rotate(86.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-99{transform:rotate(88.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-100{transform:rotate(90deg)}.component .progress-half-circle-wrapper .text-wrapper{position:absolute;width:188px;height:94px;justify-content:center;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:end}.component .progress-half-circle-wrapper .text-wrapper .text{font-size:20px;font-style:normal;font-weight:500;color:var(--color-primary, #2188d9)}.component .progress-half-circle-wrapper .text-wrapper .progress-text{color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduProgress, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-progress', template: "<div class=\"component\">\n    <!-- Progres bar -->\n    <div *ngIf=\"type == 'bar'\">\n        <div class=\"progress-bar\">\n            <div class=\"progress-bar-val\"\n                 [ngStyle]=\"{ 'width': value + '%' }\">\n                <span class=\"value-text\">{{value}}%</span>\n            </div>\n        </div>\n        <div class=\"progress-text\">\n            {{text}}\n        </div>\n    </div>\n\n    <!-- Circle progress -->\n    <div *ngIf=\"type == 'circle'\"\n         class=\"progress-circle-wrapper\">\n\n\n        <div class=\"progress-circle\"\n             [class.show-full-right-side]=\"value>=50\">\n\n            <div class=\"center-pipe\"></div>\n\n            <div class=\"circle-clipper\">\n                <div class=\"right-full-bar progress-val-50\"></div>\n                <div class=\"progress-bar-val progress-val-{{value}}\"></div>\n            </div>\n            <div class=\"text-wrapper\">\n                <div class=\"text\"> {{value}}%</div>\n                <div class=\"progress-text\">{{text}}</div>\n            </div>\n        </div>\n    </div>\n\n    <!-- Half-Circle progress -->\n    <div *ngIf=\"type == 'half-circle'\"\n         class=\"progress-half-circle-wrapper\">\n\n        <div class=\"progress-circle\">\n            <div class=\"center-pipe\"></div>\n\n            <div class=\"circle-clipper\">\n                <div class=\"right-full-bar progress-val-50\"></div>\n                <div class=\"progress-bar-val progress-val-{{value}}\"></div>\n            </div>\n            <div class=\"text-wrapper\">\n                <div class=\"text\"> {{value}}%</div>\n                <div class=\"progress-text\">{{text}}</div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".component{font-family:Roboto}.component .progress-bar{min-width:100px;width:100%;height:24px;border-radius:4px;background-color:var(--color-white-tint-2, #ececed);overflow:hidden;position:relative}.component .progress-bar .progress-bar-val{height:100%;display:block;width:0;background-color:var(--color-primary, #2188d9);line-height:24px;position:absolute;text-align:end;padding-right:5px;transition:width 1s}.component .progress-bar .progress-bar-val .value-text{color:var(--color-white-primary, #ffffff);font-size:14px;font-style:normal;font-weight:500}.component .progress-text{color:var(--color-white-tint-4, #d6d6d8);overflow:hidden;font-size:14px;font-style:normal;font-weight:400;margin-top:8px}.component .progress-circle-wrapper .progress-circle{position:relative;width:188px;height:188px;background-color:var(--color-white-tint-2, #ececed);border-radius:50%}.component .progress-circle-wrapper .progress-circle .center-pipe{position:absolute;top:15px;left:15px;border-radius:50%;width:160px;height:160px;background-color:#fff}.component .progress-circle-wrapper .progress-circle .circle-clipper{border-radius:50%;width:188px;height:188px;position:absolute;clip:rect(0,188px,188px,94px)}.component .progress-circle-wrapper .progress-circle .progress-bar-val{position:absolute;clip:rect(0,94px,188px,0);width:188px;height:188px;border-radius:50%;border:15px solid var(--color-primary, #2188d9);box-sizing:border-box}.component .progress-circle-wrapper .progress-circle .progress-val-0{transform:rotate(0)}.component .progress-circle-wrapper .progress-circle .progress-val-1{transform:rotate(3.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-2{transform:rotate(7.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-3{transform:rotate(10.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-4{transform:rotate(14.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-5{transform:rotate(18deg)}.component .progress-circle-wrapper .progress-circle .progress-val-6{transform:rotate(21.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-7{transform:rotate(25.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-8{transform:rotate(28.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-9{transform:rotate(32.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-10{transform:rotate(36deg)}.component .progress-circle-wrapper .progress-circle .progress-val-11{transform:rotate(39.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-12{transform:rotate(43.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-13{transform:rotate(46.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-14{transform:rotate(50.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-15{transform:rotate(54deg)}.component .progress-circle-wrapper .progress-circle .progress-val-16{transform:rotate(57.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-17{transform:rotate(61.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-18{transform:rotate(64.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-19{transform:rotate(68.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-20{transform:rotate(72deg)}.component .progress-circle-wrapper .progress-circle .progress-val-21{transform:rotate(75.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-22{transform:rotate(79.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-23{transform:rotate(82.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-24{transform:rotate(86.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-25{transform:rotate(90deg)}.component .progress-circle-wrapper .progress-circle .progress-val-26{transform:rotate(93.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-27{transform:rotate(97.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-28{transform:rotate(100.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-29{transform:rotate(104.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-30{transform:rotate(108deg)}.component .progress-circle-wrapper .progress-circle .progress-val-31{transform:rotate(111.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-32{transform:rotate(115.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-33{transform:rotate(118.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-34{transform:rotate(122.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-35{transform:rotate(126deg)}.component .progress-circle-wrapper .progress-circle .progress-val-36{transform:rotate(129.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-37{transform:rotate(133.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-38{transform:rotate(136.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-39{transform:rotate(140.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-40{transform:rotate(144deg)}.component .progress-circle-wrapper .progress-circle .progress-val-41{transform:rotate(147.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-42{transform:rotate(151.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-43{transform:rotate(154.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-44{transform:rotate(158.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-45{transform:rotate(162deg)}.component .progress-circle-wrapper .progress-circle .progress-val-46{transform:rotate(165.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-47{transform:rotate(169.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-48{transform:rotate(172.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-49{transform:rotate(176.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-50{transform:rotate(180deg)}.component .progress-circle-wrapper .progress-circle .progress-val-51{transform:rotate(183.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-52{transform:rotate(187.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-53{transform:rotate(190.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-54{transform:rotate(194.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-55{transform:rotate(198deg)}.component .progress-circle-wrapper .progress-circle .progress-val-56{transform:rotate(201.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-57{transform:rotate(205.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-58{transform:rotate(208.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-59{transform:rotate(212.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-60{transform:rotate(216deg)}.component .progress-circle-wrapper .progress-circle .progress-val-61{transform:rotate(219.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-62{transform:rotate(223.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-63{transform:rotate(226.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-64{transform:rotate(230.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-65{transform:rotate(234deg)}.component .progress-circle-wrapper .progress-circle .progress-val-66{transform:rotate(237.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-67{transform:rotate(241.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-68{transform:rotate(244.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-69{transform:rotate(248.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-70{transform:rotate(252deg)}.component .progress-circle-wrapper .progress-circle .progress-val-71{transform:rotate(255.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-72{transform:rotate(259.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-73{transform:rotate(262.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-74{transform:rotate(266.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-75{transform:rotate(270deg)}.component .progress-circle-wrapper .progress-circle .progress-val-76{transform:rotate(273.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-77{transform:rotate(277.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-78{transform:rotate(280.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-79{transform:rotate(284.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-80{transform:rotate(288deg)}.component .progress-circle-wrapper .progress-circle .progress-val-81{transform:rotate(291.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-82{transform:rotate(295.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-83{transform:rotate(298.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-84{transform:rotate(302.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-85{transform:rotate(306deg)}.component .progress-circle-wrapper .progress-circle .progress-val-86{transform:rotate(309.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-87{transform:rotate(313.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-88{transform:rotate(316.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-89{transform:rotate(320.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-90{transform:rotate(324deg)}.component .progress-circle-wrapper .progress-circle .progress-val-91{transform:rotate(327.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-92{transform:rotate(331.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-93{transform:rotate(334.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-94{transform:rotate(338.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-95{transform:rotate(342deg)}.component .progress-circle-wrapper .progress-circle .progress-val-96{transform:rotate(345.6deg)}.component .progress-circle-wrapper .progress-circle .progress-val-97{transform:rotate(349.2deg)}.component .progress-circle-wrapper .progress-circle .progress-val-98{transform:rotate(352.8deg)}.component .progress-circle-wrapper .progress-circle .progress-val-99{transform:rotate(356.4deg)}.component .progress-circle-wrapper .progress-circle .progress-val-100{transform:rotate(360deg)}.component .progress-circle-wrapper .progress-circle .right-full-bar{display:none}.component .progress-circle-wrapper .progress-circle.show-full-right-side .circle-clipper{clip:rect(auto,auto,auto,auto)}.component .progress-circle-wrapper .progress-circle.show-full-right-side .right-full-bar{position:absolute;display:block;clip:rect(0,94px,188px,0);width:188px;height:188px;border-radius:50%;border:15px solid var(--color-primary, #2188d9);box-sizing:border-box;transform:rotate(180deg)}.component .progress-circle-wrapper .text-wrapper{position:absolute;width:188px;height:188px;justify-content:center;z-index:10;display:flex;flex-direction:column;align-items:center}.component .progress-circle-wrapper .text-wrapper .text{font-size:32px;font-style:normal;font-weight:500;color:var(--color-primary, #2188d9)}.component .progress-circle-wrapper .text-wrapper .progress-text{color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400}.component .progress-half-circle-wrapper{height:94px;overflow:hidden}.component .progress-half-circle-wrapper .progress-circle{position:relative;width:188px;height:188px;background-color:var(--color-white-tint-2, #ececed);border-radius:50%}.component .progress-half-circle-wrapper .progress-circle .center-pipe{position:absolute;top:15px;left:15px;border-radius:50%;width:160px;height:160px;background-color:#fff}.component .progress-half-circle-wrapper .progress-circle .circle-clipper{border-radius:50%;width:188px;height:188px;position:absolute}.component .progress-half-circle-wrapper .progress-circle .progress-bar-val{position:absolute;clip:rect(0,94px,188px,0);width:188px;height:188px;border-radius:50%;border:15px solid var(--color-primary, #2188d9);box-sizing:border-box}.component .progress-half-circle-wrapper .progress-circle .progress-val-0{transform:rotate(-90deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-1{transform:rotate(-88.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-2{transform:rotate(-86.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-3{transform:rotate(-84.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-4{transform:rotate(-82.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-5{transform:rotate(-81deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-6{transform:rotate(-79.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-7{transform:rotate(-77.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-8{transform:rotate(-75.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-9{transform:rotate(-73.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-10{transform:rotate(-72deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-11{transform:rotate(-70.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-12{transform:rotate(-68.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-13{transform:rotate(-66.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-14{transform:rotate(-64.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-15{transform:rotate(-63deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-16{transform:rotate(-61.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-17{transform:rotate(-59.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-18{transform:rotate(-57.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-19{transform:rotate(-55.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-20{transform:rotate(-54deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-21{transform:rotate(-52.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-22{transform:rotate(-50.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-23{transform:rotate(-48.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-24{transform:rotate(-46.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-25{transform:rotate(-45deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-26{transform:rotate(-43.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-27{transform:rotate(-41.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-28{transform:rotate(-39.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-29{transform:rotate(-37.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-30{transform:rotate(-36deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-31{transform:rotate(-34.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-32{transform:rotate(-32.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-33{transform:rotate(-30.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-34{transform:rotate(-28.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-35{transform:rotate(-27deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-36{transform:rotate(-25.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-37{transform:rotate(-23.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-38{transform:rotate(-21.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-39{transform:rotate(-19.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-40{transform:rotate(-18deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-41{transform:rotate(-16.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-42{transform:rotate(-14.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-43{transform:rotate(-12.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-44{transform:rotate(-10.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-45{transform:rotate(-9deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-46{transform:rotate(-7.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-47{transform:rotate(-5.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-48{transform:rotate(-3.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-49{transform:rotate(-1.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-50{transform:rotate(0)}.component .progress-half-circle-wrapper .progress-circle .progress-val-51{transform:rotate(1.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-52{transform:rotate(3.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-53{transform:rotate(5.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-54{transform:rotate(7.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-55{transform:rotate(9deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-56{transform:rotate(10.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-57{transform:rotate(12.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-58{transform:rotate(14.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-59{transform:rotate(16.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-60{transform:rotate(18deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-61{transform:rotate(19.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-62{transform:rotate(21.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-63{transform:rotate(23.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-64{transform:rotate(25.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-65{transform:rotate(27deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-66{transform:rotate(28.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-67{transform:rotate(30.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-68{transform:rotate(32.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-69{transform:rotate(34.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-70{transform:rotate(36deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-71{transform:rotate(37.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-72{transform:rotate(39.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-73{transform:rotate(41.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-74{transform:rotate(43.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-75{transform:rotate(45deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-76{transform:rotate(46.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-77{transform:rotate(48.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-78{transform:rotate(50.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-79{transform:rotate(52.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-80{transform:rotate(54deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-81{transform:rotate(55.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-82{transform:rotate(57.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-83{transform:rotate(59.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-84{transform:rotate(61.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-85{transform:rotate(63deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-86{transform:rotate(64.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-87{transform:rotate(66.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-88{transform:rotate(68.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-89{transform:rotate(70.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-90{transform:rotate(72deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-91{transform:rotate(73.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-92{transform:rotate(75.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-93{transform:rotate(77.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-94{transform:rotate(79.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-95{transform:rotate(81deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-96{transform:rotate(82.8deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-97{transform:rotate(84.6deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-98{transform:rotate(86.4deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-99{transform:rotate(88.2deg)}.component .progress-half-circle-wrapper .progress-circle .progress-val-100{transform:rotate(90deg)}.component .progress-half-circle-wrapper .text-wrapper{position:absolute;width:188px;height:94px;justify-content:center;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:end}.component .progress-half-circle-wrapper .text-wrapper .text{font-size:20px;font-style:normal;font-weight:500;color:var(--color-primary, #2188d9)}.component .progress-half-circle-wrapper .text-wrapper .progress-text{color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }] } });
+
+class GeocodingService {
+    setAPIKey(apiKey) {
+        this._platform = new H.service.Platform({
+            apikey: apiKey
+        });
+    }
+    async geocode(searchText) {
+        return new Promise((resolve, reject) => {
+            if (!this._platform) {
+                reject("API KEY NOT SET");
+                return;
+            }
+            const geocoder = this._platform.getGeocodingService();
+            geocoder.geocode({ searchText: searchText }, (res) => {
+                let locations = res.Response.View[0] ? res.Response.View[0].Result : [];
+                let outItems = new Array();
+                let boxOffset = 0.001;
+                for (let location of locations) {
+                    let lat = location.Location.DisplayPosition.Latitude;
+                    let lng = location.Location.DisplayPosition.Longitude;
+                    let p1 = new H.geo.Point(lat - boxOffset, lng - boxOffset);
+                    let p2 = new H.geo.Point(lat + boxOffset, lng + boxOffset);
+                    let bounds = H.geo.Rect.coverPoints([p1, p2]);
+                    let street = location.Location.Address.Street;
+                    if (location.Location.Address.HouseNumber) {
+                        street += " " + location.Location.Address.HouseNumber;
+                    }
+                    outItems.push({
+                        name: location.Location.Address.Label,
+                        city: location.Location.Address.City,
+                        country: location.Location.Address.Country,
+                        postalCode: location.Location.Address.PostalCode,
+                        state: location.Location.Address.State,
+                        street: street,
+                        bounds: {
+                            xmin: bounds.getLeft(),
+                            xmax: bounds.getRight(),
+                            ymin: Math.min(bounds.getBottom(), bounds.getTop()),
+                            ymax: Math.max(bounds.getBottom(), bounds.getTop())
+                        }
+                    });
+                }
+                resolve(outItems);
+            }, (e) => {
+                console.warn(e);
+                resolve([]);
+            });
+        });
+    }
+}
+GeocodingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: GeocodingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GeocodingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: GeocodingService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: GeocodingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ZenduLocationSearch {
+    constructor(_geocoding, _cdRef) {
+        this._geocoding = _geocoding;
+        this._cdRef = _cdRef;
+        this.displaySearchIcon = true;
+        this.addressChange = new EventEmitter();
+        this.materialStyle = true;
+        this.placeholder = "Search address";
+        this.disabled = false;
+        this.onSelect = new EventEmitter;
+        // it will apply to input element text and icon color:
+        // ie. input like { color: blue}
+        this.customStyles = {};
+        this.addressSearchChanged = new Subject();
+        this.isSearching = false;
+        this.ignoreFirstLoad = false;
+        this.addressList = [];
+        this.addressSearchChanged
+            .pipe(debounceTime(200), distinctUntilChanged())
+            .subscribe((addressSearch) => {
+            this.address = addressSearch;
+            this.isSearching = true;
+            if (this._cancelation) {
+                // cancel previous
+                this._cancelation.cancelled = true;
+            }
+            this._cancelation = { cancelled: false };
+            this.makeSearch(this._cancelation);
+        });
+    }
+    /**
+     * HERE MAPS API Key
+     */
+    set apiKey(apiKey) {
+        this._geocoding.setAPIKey(apiKey);
+    }
+    async ngOnChanges(changes) {
+        if (changes['address'] && this.address) {
+            this._cancelation = { cancelled: false };
+            await this.makeSearch(this._cancelation);
+            const address = this.addressList.find(addr => addr.name === this.address);
+            if (address) {
+                this.selectAddress(address);
+            }
+        }
+    }
+    addressChanged(text) {
+        this.isSearching = true;
+        this.addressChange.emit(text);
+        this.addressSearchChanged.next(text);
+        this._cdRef.detectChanges();
+    }
+    async makeSearch(cancellation) {
+        try {
+            if (!this.ignoreFirstLoad) {
+                this.ignoreFirstLoad = true;
+                return;
+            }
+            this.addressList = [];
+            if (!this.address) {
+                this.isSearching = false;
+                return;
+            }
+            this.addressList = [];
+            let locations = await this._geocoding.geocode(this.address);
+            if (this._cancelation.cancelled) {
+                // request cancelled
+                return;
+            }
+            for (let location of locations) {
+                this.addressList.push({
+                    name: location.name,
+                    bounds: location.bounds
+                });
+            }
+            this.addressList = [...new Map(this.addressList.map((item) => [item.name, item])).values()];
+            if (this.addressList.length > 20) {
+                this.addressList = this.addressList.slice(0, 20);
+            }
+            this.isSearching = false;
+        }
+        catch (err) {
+            console.error(err);
+        }
+        finally {
+            this._cdRef.detectChanges();
+        }
+    }
+    selectAddress(address) {
+        this.address = address.name;
+        if (this.onSelect) {
+            this.addressList = [];
+            this.onSelect.emit(address);
+        }
+    }
+}
+ZenduLocationSearch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduLocationSearch, deps: [{ token: GeocodingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ZenduLocationSearch.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduLocationSearch, selector: "zen-location-search", inputs: { apiKey: "apiKey", address: "address", displaySearchIcon: "displaySearchIcon", materialStyle: "materialStyle", placeholder: "placeholder", disabled: "disabled", customStyles: "customStyles" }, outputs: { addressChange: "addressChange", onSelect: "onSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"component\">\n\n    <div class=\"search-input-wrapper\"\n         [class.boundaries]=\"!materialStyle\">\n        <zen-icon src=\"https://storage.googleapis.com/ng-zenduit/icon/search.svg\"\n                  class=\"search-icon\"\n                  *ngIf=\"displaySearchIcon\"\n                  [style]=\"{'background-color': customStyles.color}\"></zen-icon>\n\n        <input type=\"text\"\n               class=\"material-input\"\n               [style]=\"customStyles\"\n               [placeholder]=\"placeholder\"\n               [disabled]=\"disabled\"\n               [(ngModel)]=\"address\"\n               [ngClass]=\"{'no-icon': !displaySearchIcon}\"\n               (ngModelChange)='addressChanged($event)'>\n    </div>\n\n    <div class=\"search-list\"\n         [class.boundaries]=\"!materialStyle\"\n         *ngIf=\"address\"\n         appClickOutside\n         (clickOutside)=\"addressList = [];\">\n        <ul class=\"search-item-list\"\n            *ngIf=\"addressList.length || isSearching\">\n            <li *ngIf=\"isSearching\">Searching</li>\n            <div *ngIf=\"!isSearching\">\n                <li *ngFor=\"let address of addressList\"\n                    (click)=\"selectAddress(address)\">\n                    {{address.name}}\n                </li>\n            </div>\n        </ul>\n    </div>\n</div>\n", styles: [".component,.component .search-input-wrapper{position:relative}.component .search-input-wrapper .search-icon{position:absolute;left:4px;background-color:var(--color-white-tint-6, #bebebe)}.component .search-input-wrapper .material-input{padding-left:38px}.component .search-input-wrapper .material-input.no-icon{padding-left:8px}.component .search-input-wrapper .material-input.no-icon::placeholder{font-size:14px}.component .search-input-wrapper.boundaries .material-input{border:1px solid var(--color-white-tint-4, #d6d6d8);padding-top:8px;border-radius:4px;height:40px;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.component .search-input-wrapper.boundaries .material-input:hover{border-color:#b8b9bc}.component .search-input-wrapper.boundaries .material-input:focus-within{box-shadow:0 0 2px 2px #2188d94d}.component .search-input-wrapper.boundaries .search-icon{top:8px;left:8px}.component .search-list{position:absolute;top:40px;left:16px;z-index:1;min-width:278px;max-width:420px;box-shadow:0 4px 10px #060c1b26;background:white}.component .search-list.boundaries{top:45px}.component .search-list ul.search-item-list{list-style-type:none;max-width:420px;max-height:30vh;overflow-y:scroll;overflow-x:inherit;margin:0;padding:5px 10px}.component .search-list ul.search-item-list li{background-color:#fff;padding:5px 10px;align-items:flex-start;color:#828282;cursor:pointer;width:100%;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px}.component .search-list ul.search-item-list li:hover{text-decoration:none;background-color:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduLocationSearch, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-location-search', template: "<div class=\"component\">\n\n    <div class=\"search-input-wrapper\"\n         [class.boundaries]=\"!materialStyle\">\n        <zen-icon src=\"https://storage.googleapis.com/ng-zenduit/icon/search.svg\"\n                  class=\"search-icon\"\n                  *ngIf=\"displaySearchIcon\"\n                  [style]=\"{'background-color': customStyles.color}\"></zen-icon>\n\n        <input type=\"text\"\n               class=\"material-input\"\n               [style]=\"customStyles\"\n               [placeholder]=\"placeholder\"\n               [disabled]=\"disabled\"\n               [(ngModel)]=\"address\"\n               [ngClass]=\"{'no-icon': !displaySearchIcon}\"\n               (ngModelChange)='addressChanged($event)'>\n    </div>\n\n    <div class=\"search-list\"\n         [class.boundaries]=\"!materialStyle\"\n         *ngIf=\"address\"\n         appClickOutside\n         (clickOutside)=\"addressList = [];\">\n        <ul class=\"search-item-list\"\n            *ngIf=\"addressList.length || isSearching\">\n            <li *ngIf=\"isSearching\">Searching</li>\n            <div *ngIf=\"!isSearching\">\n                <li *ngFor=\"let address of addressList\"\n                    (click)=\"selectAddress(address)\">\n                    {{address.name}}\n                </li>\n            </div>\n        </ul>\n    </div>\n</div>\n", styles: [".component,.component .search-input-wrapper{position:relative}.component .search-input-wrapper .search-icon{position:absolute;left:4px;background-color:var(--color-white-tint-6, #bebebe)}.component .search-input-wrapper .material-input{padding-left:38px}.component .search-input-wrapper .material-input.no-icon{padding-left:8px}.component .search-input-wrapper .material-input.no-icon::placeholder{font-size:14px}.component .search-input-wrapper.boundaries .material-input{border:1px solid var(--color-white-tint-4, #d6d6d8);padding-top:8px;border-radius:4px;height:40px;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.component .search-input-wrapper.boundaries .material-input:hover{border-color:#b8b9bc}.component .search-input-wrapper.boundaries .material-input:focus-within{box-shadow:0 0 2px 2px #2188d94d}.component .search-input-wrapper.boundaries .search-icon{top:8px;left:8px}.component .search-list{position:absolute;top:40px;left:16px;z-index:1;min-width:278px;max-width:420px;box-shadow:0 4px 10px #060c1b26;background:white}.component .search-list.boundaries{top:45px}.component .search-list ul.search-item-list{list-style-type:none;max-width:420px;max-height:30vh;overflow-y:scroll;overflow-x:inherit;margin:0;padding:5px 10px}.component .search-list ul.search-item-list li{background-color:#fff;padding:5px 10px;align-items:flex-start;color:#828282;cursor:pointer;width:100%;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px}.component .search-list ul.search-item-list li:hover{text-decoration:none;background-color:#f5f5f5}\n"] }]
+        }], ctorParameters: function () { return [{ type: GeocodingService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { apiKey: [{
+                type: Input
+            }], address: [{
+                type: Input
+            }], displaySearchIcon: [{
+                type: Input
+            }], addressChange: [{
+                type: Output
+            }], materialStyle: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onSelect: [{
+                type: Output
+            }], customStyles: [{
+                type: Input
+            }] } });
+
+class NgZenduitModule {
+}
+NgZenduitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NgZenduitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgZenduitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: NgZenduitModule, declarations: [ZenduCheckboxComponent,
+        ZenduToggleComponent,
+        ZenduToggleSlideComponent,
+        ZenduSearchBoxComponent,
+        ZenduSelectComponent,
+        ZenduSelectOptionDirective,
+        ZenduSelectValueDirective,
+        ZenduDatepickerComponent,
+        ZenduFilterComponent,
+        ZenduPaginationBarComponent,
+        ZenduColumnConfigurationComponent,
+        ZenduSortHeaderComponent,
+        ZenduPhoneInputComponent,
+        ZenduColorPickerComponent,
+        ZenduRadioButtonComponent,
+        ZenduIconComponent,
+        ZenduCardBlockComponent,
+        ZenduMapPreviewComponent,
+        ZenduSpinner,
+        ZenduDocScanner,
+        ZenduBreadcrumbs,
+        ZenduMapComponent,
+        ZenduFileUpload,
+        ZenduProgress,
+        ZenduLocationSearch], imports: [CommonModule,
+        FormsModule,
+        DragDropModule], exports: [ZenduCheckboxComponent,
+        ZenduToggleComponent,
+        ZenduToggleSlideComponent,
+        ZenduSearchBoxComponent,
+        ZenduSelectComponent,
+        ZenduSelectOptionDirective,
+        ZenduSelectValueDirective,
+        ZenduDatepickerComponent,
+        ZenduFilterComponent,
+        ZenduPaginationBarComponent,
+        ZenduColumnConfigurationComponent,
+        ZenduSortHeaderComponent,
+        ZenduPhoneInputComponent,
+        ZenduColorPickerComponent,
+        ZenduRadioButtonComponent,
+        ZenduIconComponent,
+        ZenduCardBlockComponent,
+        ZenduMapPreviewComponent,
+        ZenduSpinner,
+        ZenduDocScanner,
+        ZenduBreadcrumbs,
+        ZenduMapComponent,
+        ZenduFileUpload,
+        ZenduProgress,
+        ZenduLocationSearch] });
+NgZenduitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NgZenduitModule, providers: [
+        OpenCVService
+    ], imports: [CommonModule,
+        FormsModule,
+        DragDropModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NgZenduitModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ZenduCheckboxComponent,
+                        ZenduToggleComponent,
+                        ZenduToggleSlideComponent,
+                        ZenduSearchBoxComponent,
+                        ZenduSelectComponent,
+                        ZenduSelectOptionDirective,
+                        ZenduSelectValueDirective,
+                        ZenduDatepickerComponent,
+                        ZenduFilterComponent,
+                        ZenduPaginationBarComponent,
+                        ZenduColumnConfigurationComponent,
+                        ZenduSortHeaderComponent,
+                        ZenduPhoneInputComponent,
+                        ZenduColorPickerComponent,
+                        ZenduRadioButtonComponent,
+                        ZenduIconComponent,
+                        ZenduCardBlockComponent,
+                        ZenduMapPreviewComponent,
+                        ZenduSpinner,
+                        ZenduDocScanner,
+                        ZenduBreadcrumbs,
+                        ZenduMapComponent,
+                        ZenduFileUpload,
+                        ZenduProgress,
+                        ZenduLocationSearch
+                    ],
+                    providers: [
+                        OpenCVService
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        DragDropModule
+                    ],
+                    exports: [
+                        ZenduCheckboxComponent,
+                        ZenduToggleComponent,
+                        ZenduToggleSlideComponent,
+                        ZenduSearchBoxComponent,
+                        ZenduSelectComponent,
+                        ZenduSelectOptionDirective,
+                        ZenduSelectValueDirective,
+                        ZenduDatepickerComponent,
+                        ZenduFilterComponent,
+                        ZenduPaginationBarComponent,
+                        ZenduColumnConfigurationComponent,
+                        ZenduSortHeaderComponent,
+                        ZenduPhoneInputComponent,
+                        ZenduColorPickerComponent,
+                        ZenduRadioButtonComponent,
+                        ZenduIconComponent,
+                        ZenduCardBlockComponent,
+                        ZenduMapPreviewComponent,
+                        ZenduSpinner,
+                        ZenduDocScanner,
+                        ZenduBreadcrumbs,
+                        ZenduMapComponent,
+                        ZenduFileUpload,
+                        ZenduProgress,
+                        ZenduLocationSearch
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API of ng-zenduit
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATEPICKER_POSITION, NgZenduitModule, ZenNotifyService, ZenduBreadcrumbs, ZenduCardBlockComponent, ZenduCheckboxComponent, ZenduColorPickerComponent, ZenduColumnConfigurationComponent, ZenduDatepickerComponent, ZenduDocScanner, ZenduFileUpload, ZenduFilterComponent, ZenduIconComponent, ZenduLocationSearch, ZenduMapComponent, ZenduMapPreviewComponent, ZenduPaginationBarComponent, ZenduPhoneInputComponent, ZenduProgress, ZenduRadioButtonComponent, ZenduSearchBoxComponent, ZenduSelectComponent, ZenduSelectOptionDirective, ZenduSelectValueDirective, ZenduSortHeaderComponent, ZenduSpinner, ZenduToggleComponent, ZenduToggleSlideComponent };
+//# sourceMappingURL=ng-zenduit.mjs.map