ng-zenduit 1.0.0

package/esm2020/lib/pagination-bar/zendu-pagination-bar.component.mjs

@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../select/zendu-select.component";
+export 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: i1.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
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiemVuZHUtcGFnaW5hdGlvbi1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctemVuZHVpdC9zcmMvbGliL3BhZ2luYXRpb24tYmFyL3plbmR1LXBhZ2luYXRpb24tYmFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLXplbmR1aXQvc3JjL2xpYi9wYWdpbmF0aW9uLWJhci96ZW5kdS1wYWdpbmF0aW9uLWJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQWEsTUFBTSxFQUFpQixNQUFNLGVBQWUsQ0FBQzs7O0FBU2pHLE1BQU0sT0FBTywyQkFBMkI7SUFnQ3RDO1FBaEJVLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRXhDLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQVE5QyxpQkFBWSxHQUFHLENBQUMsQ0FBQztRQUVqQix1QkFBa0IsR0FBRyxDQUFDLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUsvQyxJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQztRQUNkLElBQUksQ0FBQyxPQUFPLEdBQUcsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFFTSxXQUFXLENBQUMsT0FBc0I7UUFDdkMsSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUU7WUFDcEIsSUFBSSxDQUFDLG9CQUFvQixFQUFFLENBQUM7U0FDN0I7SUFDSCxDQUFDO0lBRU0sUUFBUTtRQUNiLElBQUksSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNuQyxPQUFPO1NBQ1I7UUFFRCxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFFWixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbEMsQ0FBQztJQUVNLFFBQVE7UUFDYixJQUFJLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUN0QixPQUFPO1NBQ1I7UUFFRCxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFFWixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbEMsQ0FBQztJQUVNLGNBQWM7UUFDbkIsSUFBSSxDQUFDLG9CQUFvQixFQUFFLENBQUM7UUFDNUIsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUM7UUFFZCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDaEMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFFTSxVQUFVO1FBQ2YsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDO1FBRXBDLElBQUksRUFBRSxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDcEIsT0FBTyxFQUFFLENBQUM7U0FDWDthQUFNO1lBQ0wsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO1NBQ25CO0lBQ0gsQ0FBQztJQUVNLG9CQUFvQjtRQUN6QixJQUFJLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUM7UUFFdEMsSUFBSSxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxPQUFPLEtBQUssQ0FBQyxFQUFFO1lBQ25DLEtBQUssRUFBRSxDQUFDO1NBQ1Q7UUFFRCxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztJQUMxQixDQUFDOzt5SEF6RlUsMkJBQTJCOzZHQUEzQiwyQkFBMkIsb05DVHhDLDIwQkFxQkE7NEZEWmEsMkJBQTJCO2tCQUx2QyxTQUFTOytCQUNFLG9CQUFvQjswRUFRckIsSUFBSTtzQkFBWixLQUFLO2dCQUtHLE9BQU87c0JBQWYsS0FBSztnQkFLRyxLQUFLO3NCQUFiLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTTtnQkFFRyxhQUFhO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUGFnZUl0ZW0gfSBmcm9tICcuL3BhZ2VJdGVtJztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd6ZW4tcGFnaW5hdGlvbi1iYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vemVuZHUtcGFnaW5hdGlvbi1iYXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi96ZW5kdS1wYWdpbmF0aW9uLWJhci5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFplbmR1UGFnaW5hdGlvbkJhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIC8qXG5cdCAqIDItV2F5IGNvbXBvbmVudCBwcm9wZXJ0eSBmb3IgY3VycmVudCBwYWdlIG51bWJlci5cblx0ICovXG4gIEBJbnB1dCgpIHBhZ2U6IG51bWJlcjtcblxuICAvKlxuICAgKiBwcm9wZXJ0eSBmb3IgcGFnZSBzaXplLlxuICAgKi9cbiAgQElucHV0KCkgcGVyUGFnZTogbnVtYmVyO1xuXG4gIC8qXG4gICAqIENvbXBvbmVudCBwcm9wZXJ0eSBmb3IgdG90YWwgcmVjb3Jkc1xuICAgKi9cbiAgQElucHV0KCkgY291bnQ6IG51bWJlcjtcblxuICBAT3V0cHV0KCkgcGFnZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xuXG4gIEBPdXRwdXQoKSBwZXJQYWdlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgcHVibGljIEN1cnJlbnRQYWdlSXRlbXNDb3VudDogbnVtYmVyO1xuXG4gIHB1YmxpYyBwYWdlc0NvdW50OiBudW1iZXI7XG5cbiAgcHVibGljIHBhZ2VzOiBQYWdlSXRlbVtdO1xuXG4gIHB1YmxpYyBwYWdlc0luR3JvdXAgPSA3O1xuXG4gIHB1YmxpYyBhdmFpbGFibGVQYWdlc1NpemUgPSBbMTAsIDIwLCAzMCwgNDAsIDUwXTtcblxuICBwdWJsaWMgdG90YWxQYWdlczogbnVtYmVyO1xuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcigpIHtcbiAgICB0aGlzLnBhZ2UgPSAxO1xuICAgIHRoaXMucGVyUGFnZSA9IDEwO1xuICB9XG5cbiAgcHVibGljIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlc1tcImNvdW50XCJdKSB7XG4gICAgICB0aGlzLnJlQ2FsY3VsYXRlUGFnZUNvdW50KCk7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIG5leHRQYWdlKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnBhZ2UgKyAxID4gdGhpcy50b3RhbFBhZ2VzKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5wYWdlKys7XG5cbiAgICB0aGlzLnBhZ2VDaGFuZ2UuZW1pdCh0aGlzLnBhZ2UpO1xuICB9XG5cbiAgcHVibGljIHByZXZQYWdlKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnBhZ2UgLSAxIDw9IDApIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICB0aGlzLnBhZ2UtLTtcblxuICAgIHRoaXMucGFnZUNoYW5nZS5lbWl0KHRoaXMucGFnZSk7XG4gIH1cblxuICBwdWJsaWMgdXBkYXRlUGFnZVNpemUoKTogdm9pZCB7XG4gICAgdGhpcy5yZUNhbGN1bGF0ZVBhZ2VDb3VudCgpO1xuICAgIHRoaXMucGFnZSA9IDE7XG5cbiAgICB0aGlzLnBhZ2VDaGFuZ2UuZW1pdCh0aGlzLnBhZ2UpO1xuICAgIHRoaXMucGVyUGFnZUNoYW5nZS5lbWl0KHRoaXMucGVyUGFnZSk7XG4gIH1cblxuICBwdWJsaWMgZW5kUm93U2l6ZSgpOiBudW1iZXIge1xuICAgIGNvbnN0IHRvID0gdGhpcy5wYWdlICogdGhpcy5wZXJQYWdlO1xuXG4gICAgaWYgKHRvIDw9IHRoaXMuY291bnQpIHtcbiAgICAgIHJldHVybiB0bztcbiAgICB9IGVsc2Uge1xuICAgICAgcmV0dXJuIHRoaXMuY291bnQ7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIHJlQ2FsY3VsYXRlUGFnZUNvdW50KCkge1xuICAgIGxldCBwYWdlcyA9IHRoaXMuY291bnQgLyB0aGlzLnBlclBhZ2U7XG5cbiAgICBpZiAodGhpcy5jb3VudCAlIHRoaXMucGVyUGFnZSAhPT0gMCkge1xuICAgICAgcGFnZXMrKztcbiAgICB9XG5cbiAgICB0aGlzLnRvdGFsUGFnZXMgPSBwYWdlcztcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInBhZ2luYXRpb24tY29tcG9uZW50XCI+XG4gICA8ZGl2IGNsYXNzPVwic2VsZWN0LWRyb3Bkb3duXCI+XG4gICAgICA8bGFiZWw+Um93cyBwZXIgcGFnZTo8L2xhYmVsPlxuICAgICAgPHplbi1zZWxlY3QgWyhzZWxlY3RNb2RlbCldPVwicGVyUGFnZVwiXG4gICAgICAgICAgICAgICAgW29wdGlvbnNdPVwiYXZhaWxhYmxlUGFnZXNTaXplXCJcbiAgICAgICAgICAgICAgICAoc2VsZWN0TW9kZWxDaGFuZ2UpPVwidXBkYXRlUGFnZVNpemUoKVwiPjwvemVuLXNlbGVjdD5cbiAgIDwvZGl2PlxuICAgPGRpdiBjbGFzcz1cInBhZ2VzXCI+XG4gICAgICA8YnV0dG9uIGNsYXNzPVwicGFnaW5hdGlvbi1idXR0b25cIlxuICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwicGFnZSAtIDEgPD0gMFwiXG4gICAgICAgICAgICAgIChjbGljayk9XCJwcmV2UGFnZSgpXCI+XG4gICAgICAgICA8aSBjbGFzcz1cIm1hdGVyaWFsLWljb25zXCI+a2V5Ym9hcmRfYXJyb3dfbGVmdDwvaT5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPGxhYmVsPnt7KChwYWdlIC0gMSkgKiBwZXJQYWdlKSArIDEgfX0gLSB7e2VuZFJvd1NpemUoKX19IG9mIHt7Y291bnR9fTwvbGFiZWw+XG4gICAgICA8YnV0dG9uIGNsYXNzPVwicGFnaW5hdGlvbi1idXR0b25cIlxuICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwicGFnZSArIDEgPiB0b3RhbFBhZ2VzXCJcbiAgICAgICAgICAgICAgKGNsaWNrKT1cIm5leHRQYWdlKClcIj5cbiAgICAgICAgIDxpIGNsYXNzPVwibWF0ZXJpYWwtaWNvbnNcIj5rZXlib2FyZF9hcnJvd19yaWdodDwvaT5cbiAgICAgIDwvYnV0dG9uPlxuICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==

package/esm2020/lib/phone-input/zendu-phone-input.component.mjs

@@ -0,0 +1,141 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { PhoneNumberUtil } from 'google-libphonenumber';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+export 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
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiemVuZHUtcGhvbmUtaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctemVuZHVpdC9zcmMvbGliL3Bob25lLWlucHV0L3plbmR1LXBob25lLWlucHV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLXplbmR1aXQvc3JjL2xpYi9waG9uZS1pbnB1dC96ZW5kdS1waG9uZS1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQXFCLE1BQU0sRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFDekcsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHVCQUF1QixDQUFDOzs7O0FBT3hELE1BQU0sT0FBTyx3QkFBd0I7SUE4Q25DO1FBMUNTLGNBQVMsR0FBVyxFQUFFLENBQUM7UUFFdEIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRXpDLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUUzQyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRW5CLGNBQVMsR0FBRyxFQUFFLENBQUM7UUFFZixnQkFBVyxHQUE2RjtZQUM3RztnQkFDRSxXQUFXLEVBQUUsSUFBSTtnQkFDakIsV0FBVyxFQUFFLFNBQVM7Z0JBQ3RCLGtCQUFrQixFQUFFLElBQUk7Z0JBQ3hCLElBQUksRUFBRSw0REFBNEQ7YUFDbkU7WUFDRDtnQkFDRSxXQUFXLEVBQUUsSUFBSTtnQkFDakIsV0FBVyxFQUFFLFFBQVE7Z0JBQ3JCLGtCQUFrQixFQUFFLElBQUk7Z0JBQ3hCLElBQUksRUFBRSwrREFBK0Q7YUFDdEU7WUFDRDtnQkFDRSxXQUFXLEVBQUUsSUFBSTtnQkFDakIsV0FBVyxFQUFFLFFBQVE7Z0JBQ3JCLGtCQUFrQixFQUFFLEtBQUs7Z0JBQ3pCLElBQUksRUFBRSwrREFBK0Q7YUFDdEU7U0FDRixDQUFDO1FBRUssa0JBQWEsR0FBRztZQUNyQixXQUFXLEVBQUUsRUFBRTtZQUNmLFdBQVcsRUFBRSxRQUFRO1lBQ3JCLGtCQUFrQixFQUFFLEVBQUU7WUFDdEIsSUFBSSxFQUFFLCtEQUErRDtTQUN0RSxDQUFDO1FBSUssZUFBVSxHQUFHLEtBQUssQ0FBQztRQUd4QixJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDN0MsQ0FBQztJQUVNLFFBQVE7UUFDYixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVNLFdBQVcsQ0FBQyxPQUFzQjtRQUN2QyxJQUFJLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLGVBQWUsSUFBSSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsV0FBVyxDQUFDLEVBQUU7WUFDcEYsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1NBQ3BCO0lBQ0gsQ0FBQztJQUVNLFdBQVc7UUFDaEIsSUFBSTtZQUNGLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUU1QixJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7Z0JBQ2QsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsa0JBQWtCLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLGtCQUFrQixDQUFDLENBQUMsQ0FBQztnQkFDdkssSUFBSSxlQUFlLEVBQUU7b0JBQ25CLElBQUksQ0FBQyxlQUFlLEdBQUcsZUFBZSxJQUFJLElBQUksQ0FBQyxhQUFhLENBQUM7b0JBQzdELE1BQU0sZUFBZSxHQUFHLGVBQWUsQ0FBQyxXQUFXLEVBQUUsQ0FBQztvQkFDdEQsTUFBTSxXQUFXLEdBQUcsZUFBZSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLEVBQUUsRUFBRSxJQUFJLENBQUMsQ0FBQztvQkFDbEUsVUFBVSxDQUFDLEdBQUcsRUFBRTt3QkFDZCxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxFQUFFOzRCQUNsQyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLElBQUksV0FBVyxDQUFDLGNBQWMsRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUM7eUJBQ2pGOzZCQUFNLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsV0FBVyxDQUFDLGNBQWMsRUFBRSxDQUFDLEVBQUU7NEJBQ2xFLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDLGNBQWMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDO3lCQUMzRTt3QkFDRCxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7b0JBQ3RCLENBQUMsQ0FBQyxDQUFDO2lCQUNKO3FCQUFNO29CQUNMLElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQztpQkFDM0M7YUFDRjtpQkFBTTtnQkFDTCxJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7YUFDM0M7U0FDRjtRQUFDLE9BQU8sR0FBRyxFQUFFO1lBQ1osT0FBTyxDQUFDLElBQUksQ0FBQyxzQkFBc0IsSUFBSSxDQUFDLEtBQUssRUFBRSxFQUFFLEdBQUcsQ0FBQyxDQUFDO1lBQ3RELElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQztTQUMzQztJQUNILENBQUM7SUFFTSxjQUFjLENBQUMsT0FBTztRQUMzQixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztRQUN4QixJQUFJLENBQUMsZUFBZSxHQUFHLE9BQU8sQ0FBQztRQUMvQixJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVNLFlBQVksQ0FBQyxLQUF3QjtRQUUxQyw0QkFBNEI7UUFDNUIsSUFBSSxNQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ25CLElBQUksSUFBSSxDQUFDLGVBQWUsS0FBSyxJQUFJLENBQUMsYUFBYSxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQy9FLE1BQU0sR0FBRyxJQUFJLENBQUM7U0FDZjtRQUVELE1BQU0sU0FBUyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsSUFBSSxFQUFFLENBQUMsQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQzVELElBQUksQ0FBQyxTQUFTLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLFNBQVMsRUFBRSxDQUFBLENBQUMsQ0FBQyxTQUFTLENBQUE7UUFDcEQsSUFBSSxLQUFLLElBQUksS0FBSyxDQUFDLEtBQUssS0FBSyxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQzNDLEtBQUssQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQztTQUM5QjtRQUNELE1BQU0sVUFBVSxHQUFHLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxrQkFBa0IsR0FBRyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDakYsSUFBSSxJQUFJLENBQUMsS0FBSyxLQUFLLFVBQVUsRUFBRTtZQUM3QixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztTQUNuQztRQUNELE1BQU0sZUFBZSxHQUFHLGVBQWUsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUN0RCxJQUFJLElBQUksQ0FBQyxlQUFlLEtBQUssSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUMvQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUM3QjthQUFNO1lBQ0wsSUFBSTtnQkFDRixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxvQkFBb0IsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUM7YUFDeEc7WUFBQyxNQUFNO2dCQUNOLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO2FBQzlCO1NBQ0Y7SUFDSCxDQUFDO0lBRU0sWUFBWTtRQUNqQixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztJQUMxQixDQUFDO0lBRU0sTUFBTTtRQUNYLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixPQUFPO1NBQ1I7UUFDRCxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUNyQyxDQUFDOztzSEF0SVUsd0JBQXdCOzBHQUF4Qix3QkFBd0IsMk5DUnJDLGsxREErQ0E7NEZEdkNhLHdCQUF3QjtrQkFMcEMsU0FBUzsrQkFDRSxpQkFBaUI7MEVBTWxCLEtBQUs7c0JBQWIsS0FBSztnQkFFRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVJLFdBQVc7c0JBQXBCLE1BQU07Z0JBRUcsV0FBVztzQkFBcEIsTUFBTTtnQkFFRSxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE9uSW5pdCwgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQaG9uZU51bWJlclV0aWwgfSBmcm9tICdnb29nbGUtbGlicGhvbmVudW1iZXInO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd6ZW4tcGhvbmUtaW5wdXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vemVuZHUtcGhvbmUtaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi96ZW5kdS1waG9uZS1pbnB1dC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFplbmR1UGhvbmVJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcblxuICBASW5wdXQoKSBwaG9uZTogc3RyaW5nO1xuXG4gIEBJbnB1dCgpIG1heExlbmd0aDogbnVtYmVyID0gMTI7XG5cbiAgQE91dHB1dCgpIHBob25lQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgQE91dHB1dCgpIHZhbGlkQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgcHVibGljIHBob25lVGV4dCA9IFwiXCI7XG5cbiAgcHVibGljIGNvdW50cnlMaXN0OiB7IGNvdW50cnlDb2RlOiBzdHJpbmcsIGNvdW50cnlOYW1lOiBzdHJpbmcsIGNvdW50cnlDYWxsaW5nQ29kZTogc3RyaW5nLCBmbGFnOiBzdHJpbmcgfVtdID0gW1xuICAgIHtcbiAgICAgIGNvdW50cnlDb2RlOiBcIlVTXCIsXG4gICAgICBjb3VudHJ5TmFtZTogXCJBbWVyaWNhXCIsXG4gICAgICBjb3VudHJ5Q2FsbGluZ0NvZGU6IFwiKzFcIixcbiAgICAgIGZsYWc6IFwiaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbmR1aXQtaWNvbnMvRmxhZ3MvVVNBLnN2Z1wiXG4gICAgfSxcbiAgICB7XG4gICAgICBjb3VudHJ5Q29kZTogXCJDQVwiLFxuICAgICAgY291bnRyeU5hbWU6IFwiQ2FuYWRhXCIsXG4gICAgICBjb3VudHJ5Q2FsbGluZ0NvZGU6IFwiKzFcIixcbiAgICAgIGZsYWc6IFwiaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbmR1aXQtaWNvbnMvRmxhZ3MvQ2FuYWRhLnN2Z1wiXG4gICAgfSxcbiAgICB7XG4gICAgICBjb3VudHJ5Q29kZTogXCJNWFwiLFxuICAgICAgY291bnRyeU5hbWU6IFwiTWV4aWNvXCIsXG4gICAgICBjb3VudHJ5Q2FsbGluZ0NvZGU6IFwiKzUyXCIsXG4gICAgICBmbGFnOiBcImh0dHBzOi8vc3RvcmFnZS5nb29nbGVhcGlzLmNvbS96ZW5kdWl0LWljb25zL0ZsYWdzL01leGljby5zdmdcIlxuICAgIH1cbiAgXTtcblxuICBwdWJsaWMgY3VzdG9tQ291bnRyeSA9IHtcbiAgICBjb3VudHJ5Q29kZTogXCJcIixcbiAgICBjb3VudHJ5TmFtZTogXCJDdXN0b21cIixcbiAgICBjb3VudHJ5Q2FsbGluZ0NvZGU6IFwiXCIsXG4gICAgZmxhZzogXCJodHRwczovL3N0b3JhZ2UuZ29vZ2xlYXBpcy5jb20vemVuZHVpdC1pY29ucy9GbGFncy9DdXN0b20uc3ZnXCJcbiAgfTtcblxuICBwdWJsaWMgc2VsZWN0ZWRDb3VudHJ5OiB7IGNvdW50cnlDb2RlOiBzdHJpbmcsIGNvdW50cnlOYW1lOiBzdHJpbmcsIGNvdW50cnlDYWxsaW5nQ29kZTogc3RyaW5nLCBmbGFnOiBzdHJpbmcgfTtcblxuICBwdWJsaWMgaXNFeHBhbmRlZCA9IGZhbHNlO1xuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcigpIHtcbiAgICB0aGlzLnNlbGVjdGVkQ291bnRyeSA9IHRoaXMuY291bnRyeUxpc3RbMV07XG4gIH1cblxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5wYXJzZU51bWJlcigpO1xuICB9XG5cbiAgcHVibGljIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlc1tcInBob25lXCJdICYmICghdGhpcy5zZWxlY3RlZENvdW50cnkgfHwgIXRoaXMuc2VsZWN0ZWRDb3VudHJ5LmNvdW50cnlDb2RlKSkge1xuICAgICAgdGhpcy5wYXJzZU51bWJlcigpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBwYXJzZU51bWJlcigpOiB2b2lkIHtcbiAgICB0cnkge1xuICAgICAgdGhpcy5waG9uZVRleHQgPSB0aGlzLnBob25lO1xuXG4gICAgICBpZiAodGhpcy5waG9uZSkge1xuICAgICAgICBjb25zdCBjb3VudHJ5RnJvbUxpc3QgPSB0aGlzLmNvdW50cnlMaXN0LmZpbmQoY291bnRyeSA9PiB0aGlzLnBob25lLnN0YXJ0c1dpdGgoY291bnRyeS5jb3VudHJ5Q2FsbGluZ0NvZGUpIHx8IGArJHt0aGlzLnBob25lfWAuc3RhcnRzV2l0aChjb3VudHJ5LmNvdW50cnlDYWxsaW5nQ29kZSkpO1xuICAgICAgICBpZiAoY291bnRyeUZyb21MaXN0KSB7XG4gICAgICAgICAgdGhpcy5zZWxlY3RlZENvdW50cnkgPSBjb3VudHJ5RnJvbUxpc3QgfHwgdGhpcy5jdXN0b21Db3VudHJ5O1xuICAgICAgICAgIGNvbnN0IHBob25lTnVtYmVyVXRpbCA9IFBob25lTnVtYmVyVXRpbC5nZXRJbnN0YW5jZSgpO1xuICAgICAgICAgIGNvbnN0IHBhcnNlZFBob25lID0gcGhvbmVOdW1iZXJVdGlsLnBhcnNlKHRoaXMucGhvbmUgfHwgXCJcIiwgJ1VTJyk7XG4gICAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICBpZiAodGhpcy5waG9uZVRleHQuc3RhcnRzV2l0aCgnKycpKSB7XG4gICAgICAgICAgICAgIHRoaXMucGhvbmVUZXh0ID0gdGhpcy5waG9uZVRleHQucmVwbGFjZShgKyR7cGFyc2VkUGhvbmUuZ2V0Q291bnRyeUNvZGUoKX1gLCBcIlwiKTtcbiAgICAgICAgICAgIH0gZWxzZSBpZiAodGhpcy5waG9uZVRleHQuc3RhcnRzV2l0aChwYXJzZWRQaG9uZS5nZXRDb3VudHJ5Q29kZSgpKSkge1xuICAgICAgICAgICAgICB0aGlzLnBob25lVGV4dCA9IHRoaXMucGhvbmVUZXh0LnJlcGxhY2UocGFyc2VkUGhvbmUuZ2V0Q291bnRyeUNvZGUoKSwgXCJcIik7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICB0aGlzLnBob25lQ2hhbmdlZCgpO1xuICAgICAgICAgIH0pO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIHRoaXMuc2VsZWN0ZWRDb3VudHJ5ID0gdGhpcy5jdXN0b21Db3VudHJ5OyAgXG4gICAgICAgIH1cbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWRDb3VudHJ5ID0gdGhpcy5jdXN0b21Db3VudHJ5O1xuICAgICAgfVxuICAgIH0gY2F0Y2ggKGVycikge1xuICAgICAgY29uc29sZS53YXJuKGBDYW4ndCBwYXJzZSBwaG9uZTogJHt0aGlzLnBob25lfWAsIGVycik7XG4gICAgICB0aGlzLnNlbGVjdGVkQ291bnRyeSA9IHRoaXMuY3VzdG9tQ291bnRyeTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgY291bnRyeUNoYW5nZWQoY291bnRyeSk6IHZvaWQge1xuICAgIHRoaXMuaXNFeHBhbmRlZCA9IGZhbHNlO1xuICAgIHRoaXMuc2VsZWN0ZWRDb3VudHJ5ID0gY291bnRyeTtcbiAgICB0aGlzLnBob25lQ2hhbmdlZCgpO1xuICB9XG5cbiAgcHVibGljIHBob25lQ2hhbmdlZChpbnB1dD86IEhUTUxJbnB1dEVsZW1lbnQpOiB2b2lkIHtcbiAgICBcbiAgICAvLyBhbGxvdyArIGluIGN1c3RvbSBjb3VudHJ5XG4gICAgbGV0IGN1c3RvbSA9IGZhbHNlO1xuICAgIGlmICh0aGlzLnNlbGVjdGVkQ291bnRyeSA9PT0gdGhpcy5jdXN0b21Db3VudHJ5ICYmIHRoaXMucGhvbmVUZXh0LmluY2x1ZGVzKCcrJykpIHtcbiAgICAgIGN1c3RvbSA9IHRydWU7XG4gICAgfVxuICAgIFxuICAgIGNvbnN0IHBob25lVGV4dCA9ICh0aGlzLnBob25lVGV4dCB8fCAnJykucmVwbGFjZSgvXFxEL2csICcnKTtcbiAgICB0aGlzLnBob25lVGV4dCA9IGN1c3RvbSA/IGArJHtwaG9uZVRleHR9YDogcGhvbmVUZXh0XG4gICAgaWYgKGlucHV0ICYmIGlucHV0LnZhbHVlICE9PSB0aGlzLnBob25lVGV4dCkge1xuICAgICAgaW5wdXQudmFsdWUgPSB0aGlzLnBob25lVGV4dDtcbiAgICB9XG4gICAgY29uc3QgZnVsbE51bWJlciA9IGAke3RoaXMuc2VsZWN0ZWRDb3VudHJ5LmNvdW50cnlDYWxsaW5nQ29kZX0ke3RoaXMucGhvbmVUZXh0fWA7XG4gICAgaWYgKHRoaXMucGhvbmUgIT09IGZ1bGxOdW1iZXIpIHtcbiAgICAgIHRoaXMucGhvbmVDaGFuZ2UuZW1pdChmdWxsTnVtYmVyKTtcbiAgICB9XG4gICAgY29uc3QgcGhvbmVOdW1iZXJVdGlsID0gUGhvbmVOdW1iZXJVdGlsLmdldEluc3RhbmNlKCk7XG4gICAgaWYgKHRoaXMuc2VsZWN0ZWRDb3VudHJ5ID09PSB0aGlzLmN1c3RvbUNvdW50cnkpIHtcbiAgICAgIHRoaXMudmFsaWRDaGFuZ2UuZW1pdCh0cnVlKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdHJ5IHtcbiAgICAgICAgdGhpcy52YWxpZENoYW5nZS5lbWl0KHBob25lTnVtYmVyVXRpbC5pc1ZhbGlkTnVtYmVyKHBob25lTnVtYmVyVXRpbC5wYXJzZUFuZEtlZXBSYXdJbnB1dChmdWxsTnVtYmVyKSkpO1xuICAgICAgfSBjYXRjaCB7XG4gICAgICAgIHRoaXMudmFsaWRDaGFuZ2UuZW1pdChmYWxzZSk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgcHVibGljIGhpZGVEcm9wRG93bigpOiB2b2lkIHtcbiAgICB0aGlzLmlzRXhwYW5kZWQgPSBmYWxzZTtcbiAgfVxuXG4gIHB1YmxpYyB0b2dnbGUoKSB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5pc0V4cGFuZGVkID0gIXRoaXMuaXNFeHBhbmRlZDtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInBob25lLWlucHV0LWNvbXBvbmVudFwiPlxuICAgPGRpdiBjbGFzcz1cIm1hdGVyaWFsLWlucHV0XCI+XG4gICAgICA8YSBjbGFzcz1cImNvdW50cnktc2VsZWN0XCJcbiAgICAgICAgIChjbGljayk9XCJ0b2dnbGUoKVwiPlxuICAgICAgICAgPGltZyBjbGFzcz1cImNvdW50cnktZmxhZ1wiXG4gICAgICAgICAgICAgIFtzcmNdPVwic2VsZWN0ZWRDb3VudHJ5LmZsYWdcIj5cbiAgICAgICAgIDxpIGNsYXNzPVwibWF0ZXJpYWwtaWNvbnMgZXhwYW5kLWljb25cIlxuICAgICAgICAgICAgW25nQ2xhc3NdPVwieydhY3RpdmUnOiBpc0V4cGFuZGVkfVwiPmV4cGFuZF9tb3JlPC9pPlxuICAgICAgICAgPGRpdiBjbGFzcz1cImNvZGVcIj57eyBzZWxlY3RlZENvdW50cnkuY291bnRyeUNhbGxpbmdDb2RlIH19PC9kaXY+XG4gICAgICA8L2E+XG4gICAgICA8aW5wdXQgY2xhc3M9XCJwaG9uZS1pbnB1dFwiXG4gICAgICAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICAgICAgIFsobmdNb2RlbCldPVwicGhvbmVUZXh0XCJcbiAgICAgICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJwaG9uZUNoYW5nZWQoaW5wdXQpXCJcbiAgICAgICAgICAgICAoY2xpY2spPVwiaXNFeHBhbmRlZCA9IGZhbHNlXCJcbiAgICAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAgICAgIGNvdW50cnktY29kZT1cInNlbGVjdGVkQ291bnRyeS5jb3VudHJ5Q29kZVwiXG4gICAgICAgICAgICAgW21heGxlbmd0aF09XCJtYXhMZW5ndGhcIlxuICAgICAgICAgICAgICNpbnB1dD5cbiAgIDwvZGl2PlxuXG4gICA8ZGl2IGNsYXNzPVwiYWN0aW9uLW1lbnUgY291bnRyeS1kcm9wZG93bi1saXN0XCJcbiAgICAgICAgKm5nSWY9XCJpc0V4cGFuZGVkXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiYWN0aW9uLW1lbnUtYm9keVwiPlxuICAgICAgICAgPCEtLUNvdW50cnkncyBMaXN0LS0+XG4gICAgICAgICA8YSBjbGFzcz1cImFjdGlvbi1pdGVtXCJcbiAgICAgICAgICAgICpuZ0Zvcj1cImxldCBjb3VudHJ5IG9mIGNvdW50cnlMaXN0XCJcbiAgICAgICAgICAgIFtuZ0NsYXNzXT1cInsnYWN0aXZlJzogc2VsZWN0ZWRDb3VudHJ5LmNvdW50cnlOYW1lID09PSBjb3VudHJ5LmNvdW50cnlOYW1lfVwiXG4gICAgICAgICAgICAoY2xpY2spPVwiY291bnRyeUNoYW5nZWQoY291bnRyeSlcIj5cbiAgICAgICAgICAgIDxpbWcgY2xhc3M9XCJjb3VudHJ5LWZsYWdcIlxuICAgICAgICAgICAgICAgICBbc3JjXT1cImNvdW50cnkuZmxhZ1wiPlxuICAgICAgICAgICAgPGRpdj57eyBjb3VudHJ5LmNvdW50cnlOYW1lIH19PC9kaXY+XG4gICAgICAgICAgICA8ZGl2Pnt7IGNvdW50cnkuY291bnRyeUNhbGxpbmdDb2RlIH19PC9kaXY+XG4gICAgICAgICA8L2E+XG5cbiAgICAgICAgIDwhLS1DdXN0b20gQ291bnRyeS0tPlxuICAgICAgICAgPGEgY2xhc3M9XCJhY3Rpb24taXRlbVwiXG4gICAgICAgICAgICBbbmdDbGFzc109XCJ7J2FjdGl2ZSc6IHNlbGVjdGVkQ291bnRyeS5jb3VudHJ5TmFtZSA9PT0gY3VzdG9tQ291bnRyeS5jb3VudHJ5TmFtZX1cIlxuICAgICAgICAgICAgKGNsaWNrKT1cImNvdW50cnlDaGFuZ2VkKGN1c3RvbUNvdW50cnkpXCI+XG4gICAgICAgICAgICA8aW1nIGNsYXNzPVwiY291bnRyeS1mbGFnXCJcbiAgICAgICAgICAgICAgICAgW3NyY109XCJjdXN0b21Db3VudHJ5LmZsYWdcIj5cbiAgICAgICAgICAgIDxkaXY+e3sgY3VzdG9tQ291bnRyeS5jb3VudHJ5TmFtZSB9fTwvZGl2PlxuICAgICAgICAgICAgPGRpdj57eyBjdXN0b21Db3VudHJ5LmNvdW50cnlDYWxsaW5nQ29kZSB9fTwvZGl2PlxuICAgICAgICAgPC9hPlxuICAgICAgPC9kaXY+XG4gICA8L2Rpdj5cbjwvZGl2PlxuIl19

package/esm2020/lib/progress/zendu-progress.component.mjs

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export 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
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiemVuZHUtcHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctemVuZHVpdC9zcmMvbGliL3Byb2dyZXNzL3plbmR1LXByb2dyZXNzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLXplbmR1aXQvc3JjL2xpYi9wcm9ncmVzcy96ZW5kdS1wcm9ncmVzcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBT2pELE1BQU0sT0FBTyxhQUFhO0lBTDFCO1FBT2EsU0FBSSxHQUFxQyxLQUFLLENBQUM7UUFFeEQ7O1dBRUc7UUFDTSxVQUFLLEdBQUcsRUFBRSxDQUFDO1FBRXBCOztXQUVHO1FBQ00sU0FBSSxHQUFHLEVBQUUsQ0FBQztLQUN0Qjs7MkdBYlksYUFBYTsrRkFBYixhQUFhLDRHQ1AxQix3dERBcURBOzRGRDlDYSxhQUFhO2tCQUx6QixTQUFTOytCQUNJLGNBQWM7OEJBTWYsSUFBSTtzQkFBWixLQUFLO2dCQUtHLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnemVuLXByb2dyZXNzJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vemVuZHUtcHJvZ3Jlc3MuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3plbmR1LXByb2dyZXNzLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgWmVuZHVQcm9ncmVzcyB7XG5cbiAgICBASW5wdXQoKSB0eXBlOiBcImJhclwiIHwgXCJjaXJjbGVcIiB8IFwiaGFsZi1jaXJjbGVcIiA9IFwiYmFyXCI7XG5cbiAgICAvKipcbiAgICAgKiBwcm9ncmVzcyB2YWx1ZSBbMCwgMTAwXVxuICAgICAqL1xuICAgIEBJbnB1dCgpIHZhbHVlID0gMjA7XG5cbiAgICAvKipcbiAgICAgKiBwcm9ncmVzcyB0ZXh0XG4gICAgICovXG4gICAgQElucHV0KCkgdGV4dCA9IFwiXCI7XG59XG4iLCI8ZGl2IGNsYXNzPVwiY29tcG9uZW50XCI+XG4gICAgPCEtLSBQcm9ncmVzIGJhciAtLT5cbiAgICA8ZGl2ICpuZ0lmPVwidHlwZSA9PSAnYmFyJ1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwicHJvZ3Jlc3MtYmFyXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicHJvZ3Jlc3MtYmFyLXZhbFwiXG4gICAgICAgICAgICAgICAgIFtuZ1N0eWxlXT1cInsgJ3dpZHRoJzogdmFsdWUgKyAnJScgfVwiPlxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidmFsdWUtdGV4dFwiPnt7dmFsdWV9fSU8L3NwYW4+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy10ZXh0XCI+XG4gICAgICAgICAgICB7e3RleHR9fVxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cblxuICAgIDwhLS0gQ2lyY2xlIHByb2dyZXNzIC0tPlxuICAgIDxkaXYgKm5nSWY9XCJ0eXBlID09ICdjaXJjbGUnXCJcbiAgICAgICAgIGNsYXNzPVwicHJvZ3Jlc3MtY2lyY2xlLXdyYXBwZXJcIj5cblxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy1jaXJjbGVcIlxuICAgICAgICAgICAgIFtjbGFzcy5zaG93LWZ1bGwtcmlnaHQtc2lkZV09XCJ2YWx1ZT49NTBcIj5cblxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNlbnRlci1waXBlXCI+PC9kaXY+XG5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjaXJjbGUtY2xpcHBlclwiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJyaWdodC1mdWxsLWJhciBwcm9ncmVzcy12YWwtNTBcIj48L2Rpdj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwicHJvZ3Jlc3MtYmFyLXZhbCBwcm9ncmVzcy12YWwte3t2YWx1ZX19XCI+PC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0LXdyYXBwZXJcIj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwidGV4dFwiPiB7e3ZhbHVlfX0lPC9kaXY+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInByb2dyZXNzLXRleHRcIj57e3RleHR9fTwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuXG4gICAgPCEtLSBIYWxmLUNpcmNsZSBwcm9ncmVzcyAtLT5cbiAgICA8ZGl2ICpuZ0lmPVwidHlwZSA9PSAnaGFsZi1jaXJjbGUnXCJcbiAgICAgICAgIGNsYXNzPVwicHJvZ3Jlc3MtaGFsZi1jaXJjbGUtd3JhcHBlclwiPlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy1jaXJjbGVcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjZW50ZXItcGlwZVwiPjwvZGl2PlxuXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2lyY2xlLWNsaXBwZXJcIj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwicmlnaHQtZnVsbC1iYXIgcHJvZ3Jlc3MtdmFsLTUwXCI+PC9kaXY+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInByb2dyZXNzLWJhci12YWwgcHJvZ3Jlc3MtdmFsLXt7dmFsdWV9fVwiPjwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwidGV4dC13cmFwcGVyXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRleHRcIj4ge3t2YWx1ZX19JTwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy10ZXh0XCI+e3t0ZXh0fX08L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19

package/esm2020/lib/radio-button/radio-button.component.mjs

@@ -0,0 +1,48 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export 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
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8tYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLXplbmR1aXQvc3JjL2xpYi9yYWRpby1idXR0b24vcmFkaW8tYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLXplbmR1aXQvc3JjL2xpYi9yYWRpby1idXR0b24vcmFkaW8tYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDOzs7QUFPOUYsTUFBTSxPQUFPLHlCQUF5QjtJQWtCcEM7UUFkVSxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFRMUMsYUFBUSxHQUFHLEtBQUssQ0FBQztJQU1WLENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7SUFFTSxXQUFXLENBQUMsT0FBc0I7UUFDdkMsSUFBSSxPQUFPLENBQUMsVUFBVSxDQUFDLEVBQUU7WUFDdkIsSUFBSSxPQUFPLENBQUMsVUFBVSxDQUFDLENBQUMsWUFBWSxFQUFFO2dCQUNwQyxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7YUFDakM7aUJBQ0k7Z0JBQ0gsSUFBSSxDQUFDLGFBQWEsR0FBRyxFQUFFLENBQUM7YUFDekI7U0FDRjtJQUNILENBQUM7SUFFTSxVQUFVLENBQUMsS0FBVTtRQUMxQixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDakIsT0FBTztTQUNSO1FBQ0QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1QyxDQUFDOzt1SEF2Q1UseUJBQXlCOzJHQUF6Qix5QkFBeUIsMk9DUHRDLG9vQkFrQk07NEZEWE8seUJBQXlCO2tCQUxyQyxTQUFTOytCQUNFLFdBQVc7MEVBTVosUUFBUTtzQkFBaEIsS0FBSztnQkFFSSxXQUFXO3NCQUFwQixNQUFNO2dCQUVFLEtBQUs7c0JBQWIsS0FBSztnQkFFRyxLQUFLO3NCQUFiLEtBQUs7Z0JBRUcsSUFBSTtzQkFBWixLQUFLO2dCQUVHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnemVuLXJhZGlvJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3JhZGlvLWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3JhZGlvLWJ1dHRvbi5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFplbmR1UmFkaW9CdXR0b25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIEBJbnB1dCgpIHNlbGVjdGVkOiBib29sZWFuO1xuXG4gIEBPdXRwdXQoKSByYWRpb0NoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XG5cbiAgQElucHV0KCkgdmFsdWU6IHN0cmluZztcblxuICBASW5wdXQoKSBuYW1lOiBzdHJpbmc7XG5cbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKSBpbWFnZVVybDogc3RyaW5nO1xuXG4gIHB1YmxpYyBzZWxlY3RlZFJhZGlvOiBzdHJpbmc7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgfVxuXG4gIHB1YmxpYyBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKGNoYW5nZXNbXCJzZWxlY3RlZFwiXSkge1xuICAgICAgaWYgKGNoYW5nZXNbXCJzZWxlY3RlZFwiXS5jdXJyZW50VmFsdWUpIHtcbiAgICAgICAgdGhpcy5zZWxlY3RlZFJhZGlvID0gdGhpcy52YWx1ZTtcbiAgICAgIH1cbiAgICAgIGVsc2Uge1xuICAgICAgICB0aGlzLnNlbGVjdGVkUmFkaW8gPSBcIlwiO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBlbWl0Q2hhbmdlKGV2ZW50OiBhbnkpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5kaXNhYmxlZCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLnJhZGlvQ2hhbmdlLmVtaXQoZXZlbnQudGFyZ2V0LnZhbHVlKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInJhZGlvLWNvbXBvbmVudFwiXG4gICAgIFtuZ0NsYXNzXT1cInsnZGlzYWJsZWQtcmFkaW8nOiBkaXNhYmxlZH1cIj5cbiAgICAgICA8aW5wdXQgdHlwZT1cInJhZGlvXCJcbiAgICAgICAgICAgICAgY2xhc3M9XCJyYWRpby1pbnB1dFwiXG4gICAgICAgICAgICAgIG5hbWU9XCJ7e25hbWV9fVwiXG4gICAgICAgICAgICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgICAgICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICAgICAgICAgIGlkPVwie3t2YWx1ZX19XCJcbiAgICAgICAgICAgICAgW2NoZWNrZWRdPVwic2VsZWN0ZWRSYWRpbyA9PT0gdmFsdWVcIlxuICAgICAgICAgICAgICAoY2hhbmdlKT1cImVtaXRDaGFuZ2UoJGV2ZW50KVwiIC8+XG5cbiAgICAgICA8bGFiZWwgY2xhc3M9XCJhcHAtcmFkaW8tYnV0dG9uLWxhYmVsXCJcbiAgICAgICAgICAgICAgZm9yPVwie3t2YWx1ZX19XCI+XG4gICAgICAgICAgICAgIDxpbWcgY2xhc3M9XCJyYWRpby1pbWFnZVwiXG4gICAgICAgICAgICAgICAgICAgW3NyY109XCJpbWFnZVVybFwiXG4gICAgICAgICAgICAgICAgICAgKm5nSWY9XCJpbWFnZVVybFwiPlxuICAgICAgICAgICAgICB7e2xhYmVsfX1cbiAgICAgICA8L2xhYmVsPlxuPC9kaXY+Il19