@amwaljs/checkout-button 0.3.1 → 0.3.2

package/dist/collection/components/amwal-installments-timeline/amwal-installments-timeline.js

@@ -1,589 +1,526 @@
-import { TranslationUtils } from "../../lang/i18n";
-import { h } from "@stencil/core";
+import { TranslationUtils } from '../../lang/i18n';
+import { h } from '@stencil/core';
 export class AmwalInstallmentsTimeline {
-    constructor() {
-        /**
-         * The total amount to be paid in installments
-         */
-        this.amount = 0;
-        /**
-         * Number of installments
-         */
-        this.installmentsCount = 6;
-        /**
-         * The installment payments (optional - will be calculated if not provided)
-         */
-        this.installmentData = '[]';
-        /**
-         * Enable or disable installments feature
-         */
-        this.enableInstallments = false;
-        /**
-         * Maximum number of installments to display (for UI clarity)
-         */
-        this.maxVisibleInstallments = 3;
-        /**
-         * the language of the plugin. supported languages are Arabic ("ar") and English ("en")
-         */
-        this.locale = "en";
-        /**
-         * Enable or disable border around the timeline
-         */
-        this.border = false;
-        /**
-         * Timeline display style: 'default' for circular timeline, 'simple' for modern dots with lines
-         */
-        this.timelineStyle = 'default';
-        /**
-         * Enable debug mode for additional console logs
-         * @default false
-         */
-        this.debug = false;
-        /**
-         * Number of decimal places for amount formatting
-         * @default 2
-         * @minimum 0
-         * @maximum 6
-         */
-        this.decimalPlaces = 2;
-        // Deprecated props - kept for backward compatibility
-        this.labelFormat = 'simple';
-        this.intervalMonths = 1;
-        /**
-         * Translation function to handle localization
-         * @private
-         */
-        this.t = (val) => val; // Initialize with fallback
-    }
+  constructor() {
     /**
-     * Lifecycle method that is called once when the component is first created
+     * Translation function to handle localization
+     * @private
      */
-    async componentWillLoad() {
-        try {
-            this.t = await TranslationUtils.useTranslation(this.locale);
-        }
-        catch (e) {
-            console.error('Failed to initialize translation:', e);
-        }
+    this.t = (val) => val; // Initialize with fallback
+    this.amount = 0;
+    this.installmentsCount = 6;
+    this.installmentData = '[]';
+    this.enableInstallments = false;
+    this.maxVisibleInstallments = 3;
+    this.locale = "en";
+    this.border = false;
+    this.timelineStyle = 'default';
+    this.footerMessage = undefined;
+    this.debug = false;
+    this.decimalPlaces = 2;
+    this.labelFormat = 'simple';
+    this.startDate = undefined;
+    this.intervalMonths = 1;
+  }
+  /**
+   * Lifecycle method that is called once when the component is first created
+   */
+  async componentWillLoad() {
+    try {
+      this.t = await TranslationUtils.useTranslation(this.locale);
     }
-    /**
-     * Lifecycle method to update translations when locale changes
-     */
-    async updateLocale(newValue) {
-        this.locale = newValue;
-        try {
-            this.t = await TranslationUtils.useTranslation(this.locale);
-        }
-        catch (e) {
-            console.error('Failed to update translation:', e);
-            this.t = (val) => val;
-        }
+    catch (e) {
+      console.error('Failed to initialize translation:', e);
     }
-    /**
-     * Generate simple label for installment (1-based indexing)
-     */
-    generateSimpleLabel(index) {
-        return this.t('Installment') + ' ' + (index + 1);
+  }
+  /**
+   * Lifecycle method to update translations when locale changes
+   */
+  async updateLocale(newValue) {
+    this.locale = newValue;
+    try {
+      this.t = await TranslationUtils.useTranslation(this.locale);
     }
-    /**
-     * Get installment data as parsed object or generate it dynamically
-     */
-    get installments() {
-        try {
-            const providedData = JSON.parse(this.installmentData);
-            if (providedData.length > 0) {
-                return providedData;
-            }
-            return this.generateInstallments();
-        }
-        catch (e) {
-            console.error('Invalid installment data format', e);
-            return this.generateInstallments();
-        }
+    catch (e) {
+      console.error('Failed to update translation:', e);
+      this.t = (val) => val;
     }
-    /**
-     * Generate installment data based on amount and installmentsCount
-     */
-    generateInstallments() {
-        const installments = [];
-        if (this.amount <= 0 || this.installmentsCount <= 0) {
-            return installments;
-        }
-        // Calculate the base installment amount
-        const baseAmount = +(this.amount / this.installmentsCount).toFixed(this.decimalPlaces);
-        const remainder = +(this.amount - (baseAmount * this.installmentsCount)).toFixed(this.decimalPlaces);
-        // Create installment objects
-        for (let i = 0; i < this.installmentsCount; i++) {
-            // Add remainder to the last installment if needed
-            const amount = i === this.installmentsCount - 1 && remainder !== 0
-                ? (baseAmount + remainder).toFixed(this.decimalPlaces)
-                : baseAmount.toFixed(this.decimalPlaces);
-            // Assign progressive status based on position
-            let progressType = 'empty';
-            if (i === 0) {
-                progressType = 'small';
-            }
-            else if (i === 1 || (i > 1 && i < this.installmentsCount - 1)) {
-                progressType = 'medium';
-            }
-            else if (i === this.installmentsCount - 1) {
-                progressType = 'full';
-            }
-            const installment = {
-                amount: `${amount}`,
-                progressType,
-                label: this.generateSimpleLabel(i)
-            };
-            installments.push(installment);
-        }
-        return installments;
+  }
+  /**
+   * Generate simple label for installment (1-based indexing)
+   */
+  generateSimpleLabel(index) {
+    return this.t('Installment') + ' ' + (index + 1);
+  }
+  /**
+   * Get installment data as parsed object or generate it dynamically
+   */
+  get installments() {
+    try {
+      const providedData = JSON.parse(this.installmentData);
+      if (providedData.length > 0) {
+        return providedData;
+      }
+      return this.generateInstallments();
     }
-    /**
-     * Format amount to display
-     */
-    formatAmount(amount, label) {
-        const amountParts = amount.split(' ');
-        const numericValue = parseFloat(amountParts[0]).toFixed(this.decimalPlaces);
-        return (h("div", { class: "installments-amount" }, h("div", { class: "amount-container" }, label && h("span", { class: "installments-label" }, label), h("span", { class: "installments-amount-value" }, numericValue))));
+    catch (e) {
+      console.error('Invalid installment data format', e);
+      return this.generateInstallments();
     }
-    /**
-     * Render an installment step (default circular style)
-     */
-    renderInstallmentStep(amount, label, isFirst = false, isLast = false, progressType = 'empty') {
-        return (h("div", { class: "installments-step" }, isFirst
-            ? this.formatAmount(amount, this.t('Hold'))
-            : this.formatAmount(amount), h("div", { class: "installments-circle-container" }, isFirst ? (h("div", { class: "installments-circle-filled-first" })) : isLast || progressType === 'full' ? (h("div", { class: "installments-circle-filled" })) : ([
-            h("div", { class: "installments-circle-outline" }),
-            progressType === 'small' && (h("div", { class: "installments-circle-segment installments-circle-segment-small" })),
-            progressType === 'medium' && (h("div", { class: "installments-circle-segment installments-circle-segment-medium" }))
-        ])), h("div", { class: "installments-label" }, label)));
+  }
+  /**
+   * Generate installment data based on amount and installmentsCount
+   */
+  generateInstallments() {
+    const installments = [];
+    if (this.amount <= 0 || this.installmentsCount <= 0) {
+      return installments;
     }
-    /**
-     * Render a modern timeline step with new dot style and connecting lines
-     */
-    renderModernTimelineStep(installment, isHold = false) {
-        var _a;
-        const progressClass = installment.progressType || 'empty';
-        // Generate short version for mobile displays
-        const shortLabel = ((_a = installment.label) === null || _a === void 0 ? void 0 : _a.replace('Installment', 'Inst')) || installment.label;
-        return (h("div", { class: "date-timeline-step" }, h("div", { class: `modern-timeline-dot ${progressClass}` }), h("div", { class: "date-timeline-content" }, h("div", { class: "date-timeline-date", "data-short": shortLabel }, installment.label), h("div", { class: "date-timeline-amount" }, isHold && (h("span", { class: "date-timeline-hold-label" }, this.t('Hold'))), installment.amount))));
+    // Calculate the base installment amount
+    const baseAmount = +(this.amount / this.installmentsCount).toFixed(this.decimalPlaces);
+    const remainder = +(this.amount - (baseAmount * this.installmentsCount)).toFixed(this.decimalPlaces);
+    // Create installment objects
+    for (let i = 0; i < this.installmentsCount; i++) {
+      // Add remainder to the last installment if needed
+      const amount = i === this.installmentsCount - 1 && remainder !== 0
+        ? (baseAmount + remainder).toFixed(this.decimalPlaces)
+        : baseAmount.toFixed(this.decimalPlaces);
+      // Assign progressive status based on position
+      let progressType = 'empty';
+      if (i === 0) {
+        progressType = 'small';
+      }
+      else if (i === 1 || (i > 1 && i < this.installmentsCount - 1)) {
+        progressType = 'medium';
+      }
+      else if (i === this.installmentsCount - 1) {
+        progressType = 'full';
+      }
+      const installment = {
+        amount: `${amount}`,
+        progressType,
+        label: this.generateSimpleLabel(i)
+      };
+      installments.push(installment);
     }
-    /**
-     * Render a connector between steps (default style)
-     */
-    renderConnector(isDotted = false) {
-        return (h("div", { class: "installments-connector-container" }, isDotted ? (h("div", { class: "installments-dotted-connector" }, h("div", { class: "installments-connector-dot" }), h("div", { class: "installments-dots-container" }, h("div", { class: "installments-dot" }), h("div", { class: "installments-dot" }), h("div", { class: "installments-dot" }), h("div", { class: "installments-dot" }), h("div", { class: "installments-dot" })), h("div", { class: "installments-connector-dot" }))) : (h("div", { class: "installments-simple-connector" }, h("div", { class: "installments-connector-dot" }), h("div", { class: "installments-connector-line" }), h("div", { class: "installments-connector-dot" })))));
+    return installments;
+  }
+  /**
+   * Format amount to display
+   */
+  formatAmount(amount, label) {
+    const amountParts = amount.split(' ');
+    const numericValue = parseFloat(amountParts[0]).toFixed(this.decimalPlaces);
+    return (h("div", { class: "installments-amount" }, h("div", { class: "amount-container" }, label && h("span", { class: "installments-label" }, label), h("span", { class: "installments-amount-value" }, numericValue))));
+  }
+  /**
+   * Render an installment step (default circular style)
+   */
+  renderInstallmentStep(amount, label, isFirst = false, isLast = false, progressType = 'empty') {
+    return (h("div", { class: "installments-step" }, isFirst
+      ? this.formatAmount(amount, this.t('Hold'))
+      : this.formatAmount(amount), h("div", { class: "installments-circle-container" }, isFirst ? (h("div", { class: "installments-circle-filled-first" })) : isLast || progressType === 'full' ? (h("div", { class: "installments-circle-filled" })) : ([
+      h("div", { class: "installments-circle-outline" }),
+      progressType === 'small' && (h("div", { class: "installments-circle-segment installments-circle-segment-small" })),
+      progressType === 'medium' && (h("div", { class: "installments-circle-segment installments-circle-segment-medium" }))
+    ])), h("div", { class: "installments-label" }, label)));
+  }
+  /**
+   * Render a modern timeline step with new dot style and connecting lines
+   */
+  renderModernTimelineStep(installment, isHold = false) {
+    var _a;
+    const progressClass = installment.progressType || 'empty';
+    // Generate short version for mobile displays
+    const shortLabel = ((_a = installment.label) === null || _a === void 0 ? void 0 : _a.replace('Installment', 'Inst')) || installment.label;
+    return (h("div", { class: "date-timeline-step" }, h("div", { class: `modern-timeline-dot ${progressClass}` }), h("div", { class: "date-timeline-content" }, h("div", { class: "date-timeline-date", "data-short": shortLabel }, installment.label), h("div", { class: "date-timeline-amount" }, isHold && (h("span", { class: "date-timeline-hold-label" }, this.t('Hold'))), installment.amount))));
+  }
+  /**
+   * Render a connector between steps (default style)
+   */
+  renderConnector(isDotted = false) {
+    return (h("div", { class: "installments-connector-container" }, isDotted ? (h("div", { class: "installments-dotted-connector" }, h("div", { class: "installments-connector-dot" }), h("div", { class: "installments-dots-container" }, h("div", { class: "installments-dot" }), h("div", { class: "installments-dot" }), h("div", { class: "installments-dot" }), h("div", { class: "installments-dot" }), h("div", { class: "installments-dot" })), h("div", { class: "installments-connector-dot" }))) : (h("div", { class: "installments-simple-connector" }, h("div", { class: "installments-connector-dot" }), h("div", { class: "installments-connector-line" }), h("div", { class: "installments-connector-dot" })))));
+  }
+  /**
+   * Render the modern timeline style with new dots and connecting lines
+   * Updated to show dotted line when there are hidden installments
+   */
+  renderModernTimeline() {
+    const allInstallments = this.installments;
+    const installmentsToDisplay = [];
+    const hasHiddenInstallments = allInstallments.length > this.maxVisibleInstallments;
+    // Handle visibility logic for many installments
+    if (allInstallments.length <= this.maxVisibleInstallments) {
+      installmentsToDisplay.push(...allInstallments);
     }
-    /**
-     * Render the modern timeline style with new dots and connecting lines
-     * Updated to show dotted line when there are hidden installments
-     */
-    renderModernTimeline() {
-        const allInstallments = this.installments;
-        const installmentsToDisplay = [];
-        const hasHiddenInstallments = allInstallments.length > this.maxVisibleInstallments;
-        // Handle visibility logic for many installments
-        if (allInstallments.length <= this.maxVisibleInstallments) {
-            installmentsToDisplay.push(...allInstallments);
-        }
-        else {
-            // Show first, then second, then last
-            installmentsToDisplay.push(allInstallments[0], allInstallments[1]);
-            installmentsToDisplay.push(allInstallments[allInstallments.length - 1]);
-        }
-        const timelineItems = [];
-        // Add full amount as first item (hold)
-        const holdItem = {
-            amount: this.amount.toFixed(this.decimalPlaces),
-            progressType: 'small',
-            label: this.t('Today')
-        };
-        timelineItems.push(holdItem);
-        // Add the filtered installments
-        timelineItems.push(...installmentsToDisplay);
-        return (h("div", { id: "paymentProgress", dir: this.locale === 'ar' ? 'rtl' : 'ltr', class: {
-                'installments': true,
-                'payment-progress': true,
-                'date-timeline': true,
-                'bordered': this.border,
-                'has-hidden-installments': hasHiddenInstallments
-            } }, h("div", { class: `date-timeline-container date-timeline-container-${this.locale === 'ar' ? 'rtl' : 'ltr'}` }, timelineItems.map((installment, index) => {
-            // Adjust label for ellipsis case (same logic as default timeline)
-            const isLastInstallment = index === timelineItems.length - 1 && index > 2;
-            const adjustedInstallment = isLastInstallment && allInstallments.length > 3 ? Object.assign(Object.assign({}, installment), { label: this.t('Installment') + ' ' + allInstallments.length }) : installment;
-            return this.renderModernTimelineStep(adjustedInstallment, index === 0);
-        })), this.footerMessage && (h("div", { class: "date-timeline-footer" }, this.footerMessage))));
+    else {
+      // Show first, then second, then last
+      installmentsToDisplay.push(allInstallments[0], allInstallments[1]);
+      installmentsToDisplay.push(allInstallments[allInstallments.length - 1]);
     }
-    /**
-     * Render the default timeline style with circles and connectors
-     */
-    renderDefaultTimeline() {
-        const allInstallments = this.installments;
-        const installmentsToDisplay = [];
-        // Handle visibility logic for many installments
-        if (allInstallments.length <= this.maxVisibleInstallments) {
-            installmentsToDisplay.push(...allInstallments);
-        }
-        else {
-            // Show first, then ellipsis, then last
-            installmentsToDisplay.push(allInstallments[0], allInstallments[1]);
-            installmentsToDisplay.push(allInstallments[allInstallments.length - 1]);
-        }
-        return (h("div", { id: "paymentProgress", style: this.locale === 'ar' ? { direction: 'rtl' } : {}, class: {
-                'installments': true,
-                'payment-progress': true,
-                'bordered': this.border
-            } }, this.renderInstallmentStep(`${this.amount}`, this.t('Today'), true, false, 'empty'), this.renderConnector(), installmentsToDisplay.map((installment, index) => [
-            this.renderInstallmentStep(installment.amount, this.t('Installment') + ' ' + (index === 2 && allInstallments.length > 3 ? allInstallments.length : index + 1), false, index === installmentsToDisplay.length - 1, installment.progressType),
-            index < installmentsToDisplay.length - 1 &&
-                this.renderConnector(index === 1 && allInstallments.length > 3)
-        ])));
+    const timelineItems = [];
+    // Add full amount as first item (hold)
+    const holdItem = {
+      amount: this.amount.toFixed(this.decimalPlaces),
+      progressType: 'small',
+      label: this.t('Today')
+    };
+    timelineItems.push(holdItem);
+    // Add the filtered installments
+    timelineItems.push(...installmentsToDisplay);
+    return (h("div", { id: "paymentProgress", dir: this.locale === 'ar' ? 'rtl' : 'ltr', class: {
+        'installments': true,
+        'payment-progress': true,
+        'date-timeline': true,
+        'bordered': this.border,
+        'has-hidden-installments': hasHiddenInstallments
+      } }, h("div", { class: `date-timeline-container date-timeline-container-${this.locale === 'ar' ? 'rtl' : 'ltr'}` }, timelineItems.map((installment, index) => {
+      // Adjust label for ellipsis case (same logic as default timeline)
+      const isLastInstallment = index === timelineItems.length - 1 && index > 2;
+      const adjustedInstallment = isLastInstallment && allInstallments.length > 3 ? Object.assign(Object.assign({}, installment), { label: this.t('Installment') + ' ' + allInstallments.length }) : installment;
+      return this.renderModernTimelineStep(adjustedInstallment, index === 0);
+    })), this.footerMessage && (h("div", { class: "date-timeline-footer" }, this.footerMessage))));
+  }
+  /**
+   * Render the default timeline style with circles and connectors
+   */
+  renderDefaultTimeline() {
+    const allInstallments = this.installments;
+    const installmentsToDisplay = [];
+    // Handle visibility logic for many installments
+    if (allInstallments.length <= this.maxVisibleInstallments) {
+      installmentsToDisplay.push(...allInstallments);
     }
-    render() {
-        // If installments are not enabled, don't render anything
-        if (!this.enableInstallments) {
-            return null;
-        }
-        if (this.debug) {
-            console.log('[AmwalInstallmentsTimeline] Debug Mode Enabled');
-            console.log('[AmwalInstallmentsTimeline] Timeline Style:', this.timelineStyle);
-            console.log('[AmwalInstallmentsTimeline] Installments:', this.installments);
-            console.log('[AmwalInstallmentsTimeline] Installments Count:', this.installmentsCount);
-            console.log('[AmwalInstallmentsTimeline] Amount:', this.amount);
-            console.log('[AmwalInstallmentsTimeline] Max Visible Installments:', this.maxVisibleInstallments);
-            console.log('[AmwalInstallmentsTimeline] Has Hidden Installments:', this.installments.length > this.maxVisibleInstallments);
-            console.log('[AmwalInstallmentsTimeline] Locale:', this.locale);
-            console.log('[AmwalInstallmentsTimeline] Enable Border:', this.border);
-        }
-        // Render based on timeline style
-        if (this.timelineStyle === 'simple') {
-            return this.renderModernTimeline();
-        }
-        else {
-            return this.renderDefaultTimeline();
-        }
+    else {
+      // Show first, then ellipsis, then last
+      installmentsToDisplay.push(allInstallments[0], allInstallments[1]);
+      installmentsToDisplay.push(allInstallments[allInstallments.length - 1]);
     }
-    static get is() { return "amwal-installments-timeline"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["amwal-installments-timeline.css"]
-        };
+    return (h("div", { id: "paymentProgress", style: this.locale === 'ar' ? { direction: 'rtl' } : {}, class: {
+        'installments': true,
+        'payment-progress': true,
+        'bordered': this.border
+      } }, this.renderInstallmentStep(`${this.amount}`, this.t('Today'), true, false, 'empty'), this.renderConnector(), installmentsToDisplay.map((installment, index) => [
+      this.renderInstallmentStep(installment.amount, this.t('Installment') + ' ' + (index === 2 && allInstallments.length > 3 ? allInstallments.length : index + 1), false, index === installmentsToDisplay.length - 1, installment.progressType),
+      index < installmentsToDisplay.length - 1 &&
+        this.renderConnector(index === 1 && allInstallments.length > 3)
+    ])));
+  }
+  render() {
+    // If installments are not enabled, don't render anything
+    if (!this.enableInstallments) {
+      return null;
     }
-    static get styleUrls() {
-        return {
-            "$": ["amwal-installments-timeline.css"]
-        };
+    if (this.debug) {
+      console.log('[AmwalInstallmentsTimeline] Debug Mode Enabled');
+      console.log('[AmwalInstallmentsTimeline] Timeline Style:', this.timelineStyle);
+      console.log('[AmwalInstallmentsTimeline] Installments:', this.installments);
+      console.log('[AmwalInstallmentsTimeline] Installments Count:', this.installmentsCount);
+      console.log('[AmwalInstallmentsTimeline] Amount:', this.amount);
+      console.log('[AmwalInstallmentsTimeline] Max Visible Installments:', this.maxVisibleInstallments);
+      console.log('[AmwalInstallmentsTimeline] Has Hidden Installments:', this.installments.length > this.maxVisibleInstallments);
+      console.log('[AmwalInstallmentsTimeline] Locale:', this.locale);
+      console.log('[AmwalInstallmentsTimeline] Enable Border:', this.border);
     }
-    static get properties() {
-        return {
-            "amount": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The total amount to be paid in installments"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "amount",
-                "defaultValue": "0"
-            },
-            "installmentsCount": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Number of installments"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "installments-count",
-                "defaultValue": "6"
-            },
-            "installmentData": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The installment payments (optional - will be calculated if not provided)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "installment-data",
-                "defaultValue": "'[]'"
-            },
-            "enableInstallments": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Enable or disable installments feature"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "enable-installments",
-                "defaultValue": "false"
-            },
-            "maxVisibleInstallments": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Maximum number of installments to display (for UI clarity)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-visible-installments",
-                "defaultValue": "3"
-            },
-            "locale": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "the language of the plugin. supported languages are Arabic (\"ar\") and English (\"en\")"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "locale",
-                "defaultValue": "\"en\""
-            },
-            "border": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Enable or disable border around the timeline"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "border",
-                "defaultValue": "false"
-            },
-            "timelineStyle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "TimelineStyle",
-                    "resolved": "\"default\" | \"simple\"",
-                    "references": {
-                        "TimelineStyle": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-installments-timeline/amwal-installments-timeline.tsx",
-                            "id": "src/components/amwal-installments-timeline/amwal-installments-timeline.tsx::TimelineStyle"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Timeline display style: 'default' for circular timeline, 'simple' for modern dots with lines"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "timeline-style",
-                "defaultValue": "'default'"
-            },
-            "footerMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Footer message for simple timeline style"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "footer-message"
-            },
-            "debug": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Enable debug mode for additional console logs"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "debug",
-                "defaultValue": "false"
-            },
-            "decimalPlaces": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "2"
-                        }, {
-                            "name": "minimum",
-                            "text": "0"
-                        }, {
-                            "name": "maximum",
-                            "text": "6"
-                        }],
-                    "text": "Number of decimal places for amount formatting"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "decimal-places",
-                "defaultValue": "2"
-            },
-            "labelFormat": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "LabelFormat",
-                    "resolved": "\"date\" | \"simple\"",
-                    "references": {
-                        "LabelFormat": {
-                            "location": "local",
-                            "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-installments-timeline/amwal-installments-timeline.tsx",
-                            "id": "src/components/amwal-installments-timeline/amwal-installments-timeline.tsx::LabelFormat"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label-format",
-                "defaultValue": "'simple'"
-            },
-            "startDate": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "start-date"
-            },
-            "intervalMonths": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "interval-months",
-                "defaultValue": "1"
-            }
-        };
+    // Render based on timeline style
+    if (this.timelineStyle === 'simple') {
+      return this.renderModernTimeline();
     }
-    static get watchers() {
-        return [{
-                "propName": "locale",
-                "methodName": "updateLocale"
-            }];
+    else {
+      return this.renderDefaultTimeline();
     }
+  }
+  static get is() { return "amwal-installments-timeline"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["amwal-installments-timeline.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["amwal-installments-timeline.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "amount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The total amount to be paid in installments"
+        },
+        "attribute": "amount",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "installmentsCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Number of installments"
+        },
+        "attribute": "installments-count",
+        "reflect": false,
+        "defaultValue": "6"
+      },
+      "installmentData": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The installment payments (optional - will be calculated if not provided)"
+        },
+        "attribute": "installment-data",
+        "reflect": false,
+        "defaultValue": "'[]'"
+      },
+      "enableInstallments": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable or disable installments feature"
+        },
+        "attribute": "enable-installments",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "maxVisibleInstallments": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum number of installments to display (for UI clarity)"
+        },
+        "attribute": "max-visible-installments",
+        "reflect": false,
+        "defaultValue": "3"
+      },
+      "locale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "the language of the plugin. supported languages are Arabic (\"ar\") and English (\"en\")"
+        },
+        "attribute": "locale",
+        "reflect": false,
+        "defaultValue": "\"en\""
+      },
+      "border": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable or disable border around the timeline"
+        },
+        "attribute": "border",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "timelineStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TimelineStyle",
+          "resolved": "\"default\" | \"simple\"",
+          "references": {
+            "TimelineStyle": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-installments-timeline/amwal-installments-timeline.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Timeline display style: 'default' for circular timeline, 'simple' for modern dots with lines"
+        },
+        "attribute": "timeline-style",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "footerMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Footer message for simple timeline style"
+        },
+        "attribute": "footer-message",
+        "reflect": false
+      },
+      "debug": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Enable debug mode for additional console logs"
+        },
+        "attribute": "debug",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "decimalPlaces": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "2"
+            }, {
+              "name": "minimum",
+              "text": "0"
+            }, {
+              "name": "maximum",
+              "text": "6"
+            }],
+          "text": "Number of decimal places for amount formatting"
+        },
+        "attribute": "decimal-places",
+        "reflect": false,
+        "defaultValue": "2"
+      },
+      "labelFormat": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LabelFormat",
+          "resolved": "\"date\" | \"simple\"",
+          "references": {
+            "LabelFormat": {
+              "location": "local",
+              "path": "/Users/fr3on/Downloads/amwal-checkout-qa/stencil-library/src/components/amwal-installments-timeline/amwal-installments-timeline.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-format",
+        "reflect": false,
+        "defaultValue": "'simple'"
+      },
+      "startDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "start-date",
+        "reflect": false
+      },
+      "intervalMonths": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "interval-months",
+        "reflect": false,
+        "defaultValue": "1"
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "locale",
+        "methodName": "updateLocale"
+      }];
+  }
 }