ng-zenduit 2.2.3 → 2.2.4

package/fesm2022/ng-zenduit.mjs

@@ -3119,224 +3119,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                 args: ['window:keydown', ['$event']]
             }] } });
 
-class ZenduPaginationBarComponent {
-    constructor() {
-        this.page = 1;
-        this.perPage = 10;
-        this.count = 0;
-        this.pageChange = new EventEmitter();
-        this.totalPages = 1;
-        this.pages = [];
-    }
-    ngOnChanges(changes) {
-        if (changes['count'] || changes['perPage'] || changes['page']) {
-            this.recalculate();
-        }
-    }
-    goToPage(target) {
-        const clamped = Math.min(Math.max(1, target), this.totalPages);
-        if (clamped === this.page) {
-            return;
-        }
-        this.page = clamped;
-        this.recalculate();
-        this.pageChange.emit(this.page);
-    }
-    recalculate() {
-        this.totalPages = Math.max(1, Math.ceil((this.count || 0) / (this.perPage || 1)));
-        this.pages = this.buildPages(this.page, this.totalPages);
-    }
-    buildPages(current, total) {
-        const result = [];
-        const push = (p) => result.push({ kind: 'page', page: p, active: p === current });
-        if (total <= 7) {
-            for (let i = 1; i <= total; i++) {
-                push(i);
-            }
-            return result;
-        }
-        const window = new Set([1, total, current - 1, current, current + 1]);
-        if (current <= 3) {
-            window.add(2).add(3);
-        }
-        if (current >= total - 2) {
-            window.add(total - 1).add(total - 2);
-        }
-        const sorted = Array.from(window)
-            .filter((p) => p >= 1 && p <= total)
-            .sort((a, b) => a - b);
-        let prev = 0;
-        for (const p of sorted) {
-            if (p - prev > 1) {
-                result.push({ kind: 'ellipsis' });
-            }
-            push(p);
-            prev = p;
-        }
-        return result;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPaginationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPaginationBarComponent, isStandalone: false, selector: "zen-pagination-bar", inputs: { page: "page", perPage: "perPage", count: "count" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-component\">\n  <button type=\"button\"\n    class=\"nav-btn\"\n    [disabled]=\"page <= 1\"\n    (click)=\"goToPage(page - 1)\">\n    <zen-icon class=\"nav-icon\" src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n    <span>{{ \"Previous\" | translate }}</span>\n  </button>\n\n  <div class=\"pages\">\n    @for (item of pages; track item; let i = $index) {\n      @if (item.kind === 'page') {\n        <button\n          type=\"button\"\n          class=\"page-btn\"\n          [class.is-active]=\"item.active\"\n          (click)=\"goToPage(item.page)\">\n          {{ item.page }}\n        </button>\n      }\n      @if (item.kind === 'ellipsis') {\n        <span class=\"page-ellipsis\">\u2026</span>\n      }\n    }\n  </div>\n\n  <button type=\"button\"\n    class=\"nav-btn\"\n    [disabled]=\"page >= totalPages\"\n    (click)=\"goToPage(page + 1)\">\n    <span>{{ \"Next\" | translate }}</span>\n    <zen-icon class=\"nav-icon\" src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n  </button>\n</div>\n", styles: [".pagination-component{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid #EAECF0;padding:11px 24px 16px;font-family:Inter,sans-serif}.pagination-component .nav-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:pointer;transition:background-color .1s}.pagination-component .nav-btn:hover:not(:disabled){background:#f9fafb}.pagination-component .nav-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-component .nav-btn .nav-icon{width:20px;height:20px;background-color:#344054}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:2px}.pagination-component .page-btn,.pagination-component .page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;color:#667085;background:transparent;border:0;padding:0;box-sizing:border-box}.pagination-component .page-btn{cursor:pointer;transition:background-color .1s,color .1s}.pagination-component .page-btn:hover:not(.is-active){background:#f9fafb}.pagination-component .page-btn.is-active{background:#f1f7fe;color:#136ab6;cursor:default}.pagination-component .page-ellipsis{cursor:default}\n"], dependencies: [{ kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPaginationBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'zen-pagination-bar', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"pagination-component\">\n  <button type=\"button\"\n    class=\"nav-btn\"\n    [disabled]=\"page <= 1\"\n    (click)=\"goToPage(page - 1)\">\n    <zen-icon class=\"nav-icon\" src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n    <span>{{ \"Previous\" | translate }}</span>\n  </button>\n\n  <div class=\"pages\">\n    @for (item of pages; track item; let i = $index) {\n      @if (item.kind === 'page') {\n        <button\n          type=\"button\"\n          class=\"page-btn\"\n          [class.is-active]=\"item.active\"\n          (click)=\"goToPage(item.page)\">\n          {{ item.page }}\n        </button>\n      }\n      @if (item.kind === 'ellipsis') {\n        <span class=\"page-ellipsis\">\u2026</span>\n      }\n    }\n  </div>\n\n  <button type=\"button\"\n    class=\"nav-btn\"\n    [disabled]=\"page >= totalPages\"\n    (click)=\"goToPage(page + 1)\">\n    <span>{{ \"Next\" | translate }}</span>\n    <zen-icon class=\"nav-icon\" src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n  </button>\n</div>\n", styles: [".pagination-component{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid #EAECF0;padding:11px 24px 16px;font-family:Inter,sans-serif}.pagination-component .nav-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:pointer;transition:background-color .1s}.pagination-component .nav-btn:hover:not(:disabled){background:#f9fafb}.pagination-component .nav-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-component .nav-btn .nav-icon{width:20px;height:20px;background-color:#344054}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:2px}.pagination-component .page-btn,.pagination-component .page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;color:#667085;background:transparent;border:0;padding:0;box-sizing:border-box}.pagination-component .page-btn{cursor:pointer;transition:background-color .1s,color .1s}.pagination-component .page-btn:hover:not(.is-active){background:#f9fafb}.pagination-component .page-btn.is-active{background:#f1f7fe;color:#136ab6;cursor:default}.pagination-component .page-ellipsis{cursor:default}\n"] }]
-        }], propDecorators: { page: [{
-                type: Input
-            }], perPage: [{
-                type: Input
-            }], count: [{
-                type: Input
-            }], pageChange: [{
-                type: Output
-            }] } });
-
-class ZenduPhoneInputComponent {
-    constructor() {
-        this.maxLength = 12;
-        this.phoneChange = new EventEmitter();
-        this.validChange = new EventEmitter();
-        this.disabled = false;
-        this.phoneText = "";
-        this.countryList = [
-            {
-                countryCode: "US",
-                countryName: "America",
-                countryCallingCode: "+1",
-                flag: "https://storage.googleapis.com/zenduit-icons/Flags/USA.svg"
-            },
-            {
-                countryCode: "CA",
-                countryName: "Canada",
-                countryCallingCode: "+1",
-                flag: "https://storage.googleapis.com/zenduit-icons/Flags/Canada.svg"
-            },
-            {
-                countryCode: "MX",
-                countryName: "Mexico",
-                countryCallingCode: "+52",
-                flag: "https://storage.googleapis.com/zenduit-icons/Flags/Mexico.svg"
-            }
-        ];
-        this.customCountry = {
-            countryCode: "",
-            countryName: "Custom",
-            countryCallingCode: "",
-            flag: "https://storage.googleapis.com/zenduit-icons/Flags/Custom.svg"
-        };
-        this.isExpanded = false;
-        this.selectedCountry = this.countryList[1];
-    }
-    ngOnInit() {
-        this.parseNumber();
-    }
-    ngOnChanges(changes) {
-        if (changes["phone"] && (!this.selectedCountry || !this.selectedCountry.countryCode)) {
-            this.parseNumber();
-        }
-    }
-    parseNumber() {
-        try {
-            this.phoneText = this.phone || '';
-            if (this.phone) {
-                const countryFromList = this.countryList.find(country => this.phone.startsWith(country.countryCallingCode) || `+${this.phone}`.startsWith(country.countryCallingCode));
-                if (countryFromList) {
-                    this.selectedCountry = countryFromList || this.customCountry;
-                    const phoneNumberUtil = PhoneNumberUtil.getInstance();
-                    const parsedPhone = phoneNumberUtil.parse(this.phone || "", 'US');
-                    setTimeout(() => {
-                        if (this.phoneText.startsWith('+')) {
-                            this.phoneText = this.phoneText.replace(`+${parsedPhone.getCountryCode()}`, "");
-                        }
-                        else if (this.phoneText.startsWith(parsedPhone.getCountryCode())) {
-                            this.phoneText = this.phoneText.replace(parsedPhone.getCountryCode(), "");
-                        }
-                        this.phoneChanged();
-                    });
-                }
-                else {
-                    this.selectedCountry = this.customCountry;
-                }
-            }
-            else {
-                this.selectedCountry = this.customCountry;
-            }
-        }
-        catch (err) {
-            console.warn(`Can't parse phone: ${this.phone}`, err);
-            this.selectedCountry = this.customCountry;
-        }
-    }
-    countryChanged(country) {
-        this.isExpanded = false;
-        this.selectedCountry = country;
-        this.phoneChanged();
-    }
-    phoneChanged(input) {
-        // allow + in custom country
-        let custom = false;
-        if (this.selectedCountry === this.customCountry && this.phoneText.includes('+')) {
-            custom = true;
-        }
-        const phoneText = (this.phoneText || '').replace(/\D/g, '');
-        this.phoneText = custom ? `+${phoneText}` : phoneText;
-        if (input && input.value !== this.phoneText) {
-            input.value = this.phoneText;
-        }
-        const fullNumber = `${this.selectedCountry.countryCallingCode}${this.phoneText}`;
-        if (this.phone !== fullNumber) {
-            this.phoneChange.emit(fullNumber);
-        }
-        const phoneNumberUtil = PhoneNumberUtil.getInstance();
-        if (this.selectedCountry === this.customCountry) {
-            this.validChange.emit(true);
-        }
-        else {
-            try {
-                this.validChange.emit(phoneNumberUtil.isValidNumber(phoneNumberUtil.parseAndKeepRawInput(fullNumber)));
-            }
-            catch {
-                this.validChange.emit(false);
-            }
-        }
-    }
-    hideDropDown() {
-        this.isExpanded = false;
-    }
-    toggle() {
-        if (this.disabled) {
-            return;
-        }
-        this.isExpanded = !this.isExpanded;
-    }
-    focusInput() {
-        if (this.inputElement) {
-            this.inputElement.nativeElement.focus();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPhoneInputComponent, isStandalone: false, selector: "zen-phone-input", inputs: { phone: "phone", maxLength: "maxLength", disabled: "disabled", width: "width" }, outputs: { phoneChange: "phoneChange", validChange: "validChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n  <!-- Input wrapper -->\n  <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n    <!-- Leading dropdown: Country selector -->\n    <div class=\"zen-input-leading-dropdown\">\n      <button type=\"button\"\n        class=\"zen-dropdown-trigger\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle(); $event.stopPropagation()\">\n        <img class=\"zen-phone-country-flag\"\n          [src]=\"selectedCountry.flag\"\n          [alt]=\"selectedCountry.countryName\">\n        <span class=\"dropdown-label\">{{ selectedCountry.countryCallingCode }}</span>\n        <i class=\"material-icons dropdown-icon\"\n        [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n      </button>\n    </div>\n\n    <!-- Phone input field -->\n    <input #input\n      class=\"zen-input-field text text-md text-weight-regular\"\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  </div>\n\n  <!-- Country dropdown menu -->\n  @if (isExpanded) {\n    <div class=\"zen-dropdown-menu\"\n      [ngClass]=\"{'open': isExpanded}\">\n      <!-- Countries List -->\n      @for (country of countryList; track country) {\n        <button type=\"button\"\n          class=\"zen-dropdown-option\"\n          [ngClass]=\"{'selected': selectedCountry.countryName === country.countryName}\"\n          (click)=\"countryChanged(country)\">\n          <img class=\"zen-phone-country-flag\"\n            [src]=\"country.flag\"\n            [alt]=\"country.countryName\">\n          <span class=\"zen-phone-country-name\">{{ country.countryName }}</span>\n          <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n        </button>\n      }\n      <!-- Custom Country -->\n      <button type=\"button\"\n        class=\"zen-dropdown-option\"\n        [ngClass]=\"{'selected': selectedCountry.countryName === customCountry.countryName}\"\n        (click)=\"countryChanged(customCountry)\">\n        <img class=\"zen-phone-country-flag\"\n          [src]=\"customCountry.flag\"\n          [alt]=\"customCountry.countryName\">\n        <span class=\"zen-phone-country-name\">{{ customCountry.countryName }}</span>\n        <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n      </button>\n    </div>\n  }\n</div>\n\n<!-- Click outside handler for dropdown -->\n@if (isExpanded) {\n  <div\n    class=\"zen-dropdown-backdrop\"\n  (click)=\"hideDropDown()\"></div>\n}\n", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover{border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper:focus-within{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-label{font-weight:500;font-size:14px;min-width:max-content}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon.active{transform:rotate(180deg)}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100;padding:4px;width:100%;box-sizing:border-box}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-name{flex:1;min-width:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .zen-phone-country-code{color:#136ab6}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'zen-phone-input', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n  <!-- Input wrapper -->\n  <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n    <!-- Leading dropdown: Country selector -->\n    <div class=\"zen-input-leading-dropdown\">\n      <button type=\"button\"\n        class=\"zen-dropdown-trigger\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle(); $event.stopPropagation()\">\n        <img class=\"zen-phone-country-flag\"\n          [src]=\"selectedCountry.flag\"\n          [alt]=\"selectedCountry.countryName\">\n        <span class=\"dropdown-label\">{{ selectedCountry.countryCallingCode }}</span>\n        <i class=\"material-icons dropdown-icon\"\n        [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n      </button>\n    </div>\n\n    <!-- Phone input field -->\n    <input #input\n      class=\"zen-input-field text text-md text-weight-regular\"\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  </div>\n\n  <!-- Country dropdown menu -->\n  @if (isExpanded) {\n    <div class=\"zen-dropdown-menu\"\n      [ngClass]=\"{'open': isExpanded}\">\n      <!-- Countries List -->\n      @for (country of countryList; track country) {\n        <button type=\"button\"\n          class=\"zen-dropdown-option\"\n          [ngClass]=\"{'selected': selectedCountry.countryName === country.countryName}\"\n          (click)=\"countryChanged(country)\">\n          <img class=\"zen-phone-country-flag\"\n            [src]=\"country.flag\"\n            [alt]=\"country.countryName\">\n          <span class=\"zen-phone-country-name\">{{ country.countryName }}</span>\n          <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n        </button>\n      }\n      <!-- Custom Country -->\n      <button type=\"button\"\n        class=\"zen-dropdown-option\"\n        [ngClass]=\"{'selected': selectedCountry.countryName === customCountry.countryName}\"\n        (click)=\"countryChanged(customCountry)\">\n        <img class=\"zen-phone-country-flag\"\n          [src]=\"customCountry.flag\"\n          [alt]=\"customCountry.countryName\">\n        <span class=\"zen-phone-country-name\">{{ customCountry.countryName }}</span>\n        <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n      </button>\n    </div>\n  }\n</div>\n\n<!-- Click outside handler for dropdown -->\n@if (isExpanded) {\n  <div\n    class=\"zen-dropdown-backdrop\"\n  (click)=\"hideDropDown()\"></div>\n}\n", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover{border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper:focus-within{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-label{font-weight:500;font-size:14px;min-width:max-content}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon.active{transform:rotate(180deg)}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100;padding:4px;width:100%;box-sizing:border-box}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-name{flex:1;min-width:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .zen-phone-country-code{color:#136ab6}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputElement: [{
-                type: ViewChild,
-                args: ['input']
-            }], phone: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }], phoneChange: [{
-                type: Output
-            }], validChange: [{
-                type: Output
-            }], disabled: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }] } });
-
 class ZenduSelectOptionDirective {
     constructor(template) {
         this.template = template;
@@ -4076,6 +3858,8 @@ class ZenduSelectComponent {
      */
     getStateClasses() {
         const classes = ['app-select-container'];
+        if (this.size)
+            classes.push(`size-${this.size}`);
         if (this.isOpen)
             classes.push('open');
         if (this.disabled)
@@ -4268,6 +4052,241 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
+class ZenduPaginationBarComponent {
+    constructor() {
+        this.page = 1;
+        this.perPage = 10;
+        this.count = 0;
+        this.perPageOptions = [10, 20, 30, 40, 50];
+        this.pageChange = new EventEmitter();
+        this.perPageChange = new EventEmitter();
+        this.totalPages = 1;
+        this.pages = [];
+        this.rangeStart = 0;
+        this.rangeEnd = 0;
+    }
+    ngOnChanges(changes) {
+        if (changes['count'] || changes['perPage'] || changes['page']) {
+            this.recalculate();
+        }
+    }
+    goToPage(target) {
+        const clamped = Math.min(Math.max(1, target), this.totalPages);
+        if (clamped === this.page) {
+            return;
+        }
+        this.page = clamped;
+        this.recalculate();
+        this.pageChange.emit(this.page);
+    }
+    onPerPageChange(value) {
+        this.perPage = value;
+        this.page = 1;
+        this.recalculate();
+        this.perPageChange.emit(this.perPage);
+        this.pageChange.emit(this.page);
+    }
+    recalculate() {
+        this.totalPages = Math.max(1, Math.ceil((this.count || 0) / (this.perPage || 1)));
+        this.pages = this.buildPages(this.page, this.totalPages);
+        this.rangeStart = this.count === 0 ? 0 : (this.page - 1) * this.perPage + 1;
+        this.rangeEnd = Math.min(this.page * this.perPage, this.count);
+    }
+    buildPages(current, total) {
+        const result = [];
+        const push = (p) => result.push({ kind: 'page', page: p, active: p === current });
+        if (total <= 7) {
+            for (let i = 1; i <= total; i++) {
+                push(i);
+            }
+            return result;
+        }
+        const window = new Set([1, total, current - 1, current, current + 1]);
+        if (current <= 3) {
+            window.add(2).add(3);
+        }
+        if (current >= total - 2) {
+            window.add(total - 1).add(total - 2);
+        }
+        const sorted = Array.from(window)
+            .filter((p) => p >= 1 && p <= total)
+            .sort((a, b) => a - b);
+        let prev = 0;
+        for (const p of sorted) {
+            if (p - prev > 1) {
+                result.push({ kind: 'ellipsis' });
+            }
+            push(p);
+            prev = p;
+        }
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPaginationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPaginationBarComponent, isStandalone: false, selector: "zen-pagination-bar", inputs: { page: "page", perPage: "perPage", count: "count", perPageOptions: "perPageOptions" }, outputs: { pageChange: "pageChange", perPageChange: "perPageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-component\">\n  <p class=\"results-text\">\n    {{ \"Showing\" | translate }} {{ rangeStart }} - {{ rangeEnd }}\n    {{ \"of\" | translate }} {{ count }} {{ \"results\" | translate }}\n  </p>\n\n  <div class=\"page-navigation\">\n    <zen-button\n      buttonType=\"button-icon-only\"\n      variant=\"tertiary-gray\"\n      size=\"md\"\n      icon=\"chevron-left\"\n      [disabled]=\"page <= 1\"\n      (click)=\"goToPage(page - 1)\">\n    </zen-button>\n\n    <div class=\"pages\">\n      @for (item of pages; track item; let i = $index) {\n        @if (item.kind === 'page') {\n          <button\n            type=\"button\"\n            class=\"page-btn\"\n            [class.is-active]=\"item.active\"\n            (click)=\"goToPage(item.page)\">\n            {{ item.page }}\n          </button>\n        }\n        @if (item.kind === 'ellipsis') {\n          <span class=\"page-ellipsis\">\u2026</span>\n        }\n      }\n    </div>\n\n    <zen-button\n      buttonType=\"button-icon-only\"\n      variant=\"tertiary-gray\"\n      size=\"md\"\n      icon=\"chevron-right\"\n      [disabled]=\"page >= totalPages\"\n      (click)=\"goToPage(page + 1)\">\n    </zen-button>\n  </div>\n\n  <div class=\"rows-per-page\">\n    <span class=\"rows-label\">{{ \"Rows per page\" | translate }}</span>\n    <zen-select\n      size=\"sm\"\n      [options]=\"perPageOptions\"\n      [(selectModel)]=\"perPage\"\n      (selectModelChange)=\"onPerPageChange($event)\"\n      preferredOpenDirection=\"up\">\n    </zen-select>\n  </div>\n</div>\n", styles: [".pagination-component{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid #EAECF0;padding:11px 24px 16px;font-family:Inter,sans-serif}.pagination-component .results-text{justify-self:start;margin:0;font-size:14px;line-height:20px;color:#667085;white-space:nowrap}.pagination-component .page-navigation{justify-self:center;display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .rows-per-page{justify-self:end;display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .rows-per-page .rows-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:2px}.pagination-component .page-btn,.pagination-component .page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;color:#667085;background:transparent;border:0;padding:0;box-sizing:border-box}.pagination-component .page-btn{cursor:pointer;transition:background-color .1s,color .1s}.pagination-component .page-btn:hover:not(.is-active){background:#f9fafb}.pagination-component .page-btn.is-active{background:#f1f7fe;color:#136ab6;cursor:default}.pagination-component .page-ellipsis{cursor:default}\n"], dependencies: [{ kind: "component", type: ZenduSelectComponent, selector: "zen-select", inputs: ["selectModel", "options", "label", "supportingText", "hintText", "placeholder", "leadingType", "leadingIcon", "leadingAvatar", "leadingDotColor", "displayProp", "idProp", "hasSearch", "isMultiselect", "multiselect", "hideSelectAll", "hideTreeSearch", "required", "disabled", "error", "errorMessage", "destructive", "size", "returnOption", "isTruncate", "enableAddNewOption", "showDefaultAddOption", "newOptionText", "enableRemoveOption", "removeOptionText", "isLazyLoading", "lazyLoader", "preferredOpenDirection"], outputs: ["selectModelChange", "addNewOption", "removeOption", "closed"] }, { kind: "component", type: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "iconRotated", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPaginationBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-pagination-bar', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"pagination-component\">\n  <p class=\"results-text\">\n    {{ \"Showing\" | translate }} {{ rangeStart }} - {{ rangeEnd }}\n    {{ \"of\" | translate }} {{ count }} {{ \"results\" | translate }}\n  </p>\n\n  <div class=\"page-navigation\">\n    <zen-button\n      buttonType=\"button-icon-only\"\n      variant=\"tertiary-gray\"\n      size=\"md\"\n      icon=\"chevron-left\"\n      [disabled]=\"page <= 1\"\n      (click)=\"goToPage(page - 1)\">\n    </zen-button>\n\n    <div class=\"pages\">\n      @for (item of pages; track item; let i = $index) {\n        @if (item.kind === 'page') {\n          <button\n            type=\"button\"\n            class=\"page-btn\"\n            [class.is-active]=\"item.active\"\n            (click)=\"goToPage(item.page)\">\n            {{ item.page }}\n          </button>\n        }\n        @if (item.kind === 'ellipsis') {\n          <span class=\"page-ellipsis\">\u2026</span>\n        }\n      }\n    </div>\n\n    <zen-button\n      buttonType=\"button-icon-only\"\n      variant=\"tertiary-gray\"\n      size=\"md\"\n      icon=\"chevron-right\"\n      [disabled]=\"page >= totalPages\"\n      (click)=\"goToPage(page + 1)\">\n    </zen-button>\n  </div>\n\n  <div class=\"rows-per-page\">\n    <span class=\"rows-label\">{{ \"Rows per page\" | translate }}</span>\n    <zen-select\n      size=\"sm\"\n      [options]=\"perPageOptions\"\n      [(selectModel)]=\"perPage\"\n      (selectModelChange)=\"onPerPageChange($event)\"\n      preferredOpenDirection=\"up\">\n    </zen-select>\n  </div>\n</div>\n", styles: [".pagination-component{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid #EAECF0;padding:11px 24px 16px;font-family:Inter,sans-serif}.pagination-component .results-text{justify-self:start;margin:0;font-size:14px;line-height:20px;color:#667085;white-space:nowrap}.pagination-component .page-navigation{justify-self:center;display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .rows-per-page{justify-self:end;display:flex;flex-direction:row;align-items:center;gap:8px}.pagination-component .rows-per-page .rows-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:2px}.pagination-component .page-btn,.pagination-component .page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;color:#667085;background:transparent;border:0;padding:0;box-sizing:border-box}.pagination-component .page-btn{cursor:pointer;transition:background-color .1s,color .1s}.pagination-component .page-btn:hover:not(.is-active){background:#f9fafb}.pagination-component .page-btn.is-active{background:#f1f7fe;color:#136ab6;cursor:default}.pagination-component .page-ellipsis{cursor:default}\n"] }]
+        }], propDecorators: { page: [{
+                type: Input
+            }], perPage: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }], perPageOptions: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], perPageChange: [{
+                type: Output
+            }] } });
+
+class ZenduPhoneInputComponent {
+    constructor() {
+        this.maxLength = 12;
+        this.phoneChange = new EventEmitter();
+        this.validChange = new EventEmitter();
+        this.disabled = false;
+        this.phoneText = "";
+        this.countryList = [
+            {
+                countryCode: "US",
+                countryName: "America",
+                countryCallingCode: "+1",
+                flag: "https://storage.googleapis.com/zenduit-icons/Flags/USA.svg"
+            },
+            {
+                countryCode: "CA",
+                countryName: "Canada",
+                countryCallingCode: "+1",
+                flag: "https://storage.googleapis.com/zenduit-icons/Flags/Canada.svg"
+            },
+            {
+                countryCode: "MX",
+                countryName: "Mexico",
+                countryCallingCode: "+52",
+                flag: "https://storage.googleapis.com/zenduit-icons/Flags/Mexico.svg"
+            }
+        ];
+        this.customCountry = {
+            countryCode: "",
+            countryName: "Custom",
+            countryCallingCode: "",
+            flag: "https://storage.googleapis.com/zenduit-icons/Flags/Custom.svg"
+        };
+        this.isExpanded = false;
+        this.selectedCountry = this.countryList[1];
+    }
+    ngOnInit() {
+        this.parseNumber();
+    }
+    ngOnChanges(changes) {
+        if (changes["phone"] && (!this.selectedCountry || !this.selectedCountry.countryCode)) {
+            this.parseNumber();
+        }
+    }
+    parseNumber() {
+        try {
+            this.phoneText = this.phone || '';
+            if (this.phone) {
+                const countryFromList = this.countryList.find(country => this.phone.startsWith(country.countryCallingCode) || `+${this.phone}`.startsWith(country.countryCallingCode));
+                if (countryFromList) {
+                    this.selectedCountry = countryFromList || this.customCountry;
+                    const phoneNumberUtil = PhoneNumberUtil.getInstance();
+                    const parsedPhone = phoneNumberUtil.parse(this.phone || "", 'US');
+                    setTimeout(() => {
+                        if (this.phoneText.startsWith('+')) {
+                            this.phoneText = this.phoneText.replace(`+${parsedPhone.getCountryCode()}`, "");
+                        }
+                        else if (this.phoneText.startsWith(parsedPhone.getCountryCode())) {
+                            this.phoneText = this.phoneText.replace(parsedPhone.getCountryCode(), "");
+                        }
+                        this.phoneChanged();
+                    });
+                }
+                else {
+                    this.selectedCountry = this.customCountry;
+                }
+            }
+            else {
+                this.selectedCountry = this.customCountry;
+            }
+        }
+        catch (err) {
+            console.warn(`Can't parse phone: ${this.phone}`, err);
+            this.selectedCountry = this.customCountry;
+        }
+    }
+    countryChanged(country) {
+        this.isExpanded = false;
+        this.selectedCountry = country;
+        this.phoneChanged();
+    }
+    phoneChanged(input) {
+        // allow + in custom country
+        let custom = false;
+        if (this.selectedCountry === this.customCountry && this.phoneText.includes('+')) {
+            custom = true;
+        }
+        const phoneText = (this.phoneText || '').replace(/\D/g, '');
+        this.phoneText = custom ? `+${phoneText}` : phoneText;
+        if (input && input.value !== this.phoneText) {
+            input.value = this.phoneText;
+        }
+        const fullNumber = `${this.selectedCountry.countryCallingCode}${this.phoneText}`;
+        if (this.phone !== fullNumber) {
+            this.phoneChange.emit(fullNumber);
+        }
+        const phoneNumberUtil = PhoneNumberUtil.getInstance();
+        if (this.selectedCountry === this.customCountry) {
+            this.validChange.emit(true);
+        }
+        else {
+            try {
+                this.validChange.emit(phoneNumberUtil.isValidNumber(phoneNumberUtil.parseAndKeepRawInput(fullNumber)));
+            }
+            catch {
+                this.validChange.emit(false);
+            }
+        }
+    }
+    hideDropDown() {
+        this.isExpanded = false;
+    }
+    toggle() {
+        if (this.disabled) {
+            return;
+        }
+        this.isExpanded = !this.isExpanded;
+    }
+    focusInput() {
+        if (this.inputElement) {
+            this.inputElement.nativeElement.focus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPhoneInputComponent, isStandalone: false, selector: "zen-phone-input", inputs: { phone: "phone", maxLength: "maxLength", disabled: "disabled", width: "width" }, outputs: { phoneChange: "phoneChange", validChange: "validChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n  <!-- Input wrapper -->\n  <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n    <!-- Leading dropdown: Country selector -->\n    <div class=\"zen-input-leading-dropdown\">\n      <button type=\"button\"\n        class=\"zen-dropdown-trigger\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle(); $event.stopPropagation()\">\n        <img class=\"zen-phone-country-flag\"\n          [src]=\"selectedCountry.flag\"\n          [alt]=\"selectedCountry.countryName\">\n        <span class=\"dropdown-label\">{{ selectedCountry.countryCallingCode }}</span>\n        <i class=\"material-icons dropdown-icon\"\n        [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n      </button>\n    </div>\n\n    <!-- Phone input field -->\n    <input #input\n      class=\"zen-input-field text text-md text-weight-regular\"\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  </div>\n\n  <!-- Country dropdown menu -->\n  @if (isExpanded) {\n    <div class=\"zen-dropdown-menu\"\n      [ngClass]=\"{'open': isExpanded}\">\n      <!-- Countries List -->\n      @for (country of countryList; track country) {\n        <button type=\"button\"\n          class=\"zen-dropdown-option\"\n          [ngClass]=\"{'selected': selectedCountry.countryName === country.countryName}\"\n          (click)=\"countryChanged(country)\">\n          <img class=\"zen-phone-country-flag\"\n            [src]=\"country.flag\"\n            [alt]=\"country.countryName\">\n          <span class=\"zen-phone-country-name\">{{ country.countryName }}</span>\n          <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n        </button>\n      }\n      <!-- Custom Country -->\n      <button type=\"button\"\n        class=\"zen-dropdown-option\"\n        [ngClass]=\"{'selected': selectedCountry.countryName === customCountry.countryName}\"\n        (click)=\"countryChanged(customCountry)\">\n        <img class=\"zen-phone-country-flag\"\n          [src]=\"customCountry.flag\"\n          [alt]=\"customCountry.countryName\">\n        <span class=\"zen-phone-country-name\">{{ customCountry.countryName }}</span>\n        <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n      </button>\n    </div>\n  }\n</div>\n\n<!-- Click outside handler for dropdown -->\n@if (isExpanded) {\n  <div\n    class=\"zen-dropdown-backdrop\"\n  (click)=\"hideDropDown()\"></div>\n}\n", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover{border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper:focus-within{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-label{font-weight:500;font-size:14px;min-width:max-content}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon.active{transform:rotate(180deg)}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100;padding:4px;width:100%;box-sizing:border-box}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-name{flex:1;min-width:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .zen-phone-country-code{color:#136ab6}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-phone-input', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n  <!-- Input wrapper -->\n  <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n    <!-- Leading dropdown: Country selector -->\n    <div class=\"zen-input-leading-dropdown\">\n      <button type=\"button\"\n        class=\"zen-dropdown-trigger\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle(); $event.stopPropagation()\">\n        <img class=\"zen-phone-country-flag\"\n          [src]=\"selectedCountry.flag\"\n          [alt]=\"selectedCountry.countryName\">\n        <span class=\"dropdown-label\">{{ selectedCountry.countryCallingCode }}</span>\n        <i class=\"material-icons dropdown-icon\"\n        [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n      </button>\n    </div>\n\n    <!-- Phone input field -->\n    <input #input\n      class=\"zen-input-field text text-md text-weight-regular\"\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  </div>\n\n  <!-- Country dropdown menu -->\n  @if (isExpanded) {\n    <div class=\"zen-dropdown-menu\"\n      [ngClass]=\"{'open': isExpanded}\">\n      <!-- Countries List -->\n      @for (country of countryList; track country) {\n        <button type=\"button\"\n          class=\"zen-dropdown-option\"\n          [ngClass]=\"{'selected': selectedCountry.countryName === country.countryName}\"\n          (click)=\"countryChanged(country)\">\n          <img class=\"zen-phone-country-flag\"\n            [src]=\"country.flag\"\n            [alt]=\"country.countryName\">\n          <span class=\"zen-phone-country-name\">{{ country.countryName }}</span>\n          <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n        </button>\n      }\n      <!-- Custom Country -->\n      <button type=\"button\"\n        class=\"zen-dropdown-option\"\n        [ngClass]=\"{'selected': selectedCountry.countryName === customCountry.countryName}\"\n        (click)=\"countryChanged(customCountry)\">\n        <img class=\"zen-phone-country-flag\"\n          [src]=\"customCountry.flag\"\n          [alt]=\"customCountry.countryName\">\n        <span class=\"zen-phone-country-name\">{{ customCountry.countryName }}</span>\n        <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n      </button>\n    </div>\n  }\n</div>\n\n<!-- Click outside handler for dropdown -->\n@if (isExpanded) {\n  <div\n    class=\"zen-dropdown-backdrop\"\n  (click)=\"hideDropDown()\"></div>\n}\n", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover{border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper:focus-within{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-label{font-weight:500;font-size:14px;min-width:max-content}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon.active{transform:rotate(180deg)}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100;padding:4px;width:100%;box-sizing:border-box}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-name{flex:1;min-width:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .zen-phone-country-code{color:#136ab6}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputElement: [{
+                type: ViewChild,
+                args: ['input']
+            }], phone: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], phoneChange: [{
+                type: Output
+            }], validChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }] } });
+
 class ZenduSortHeaderComponent {
     constructor() {
         this.sortChange = new EventEmitter();