@amwaljs/checkout-button 0.2.9 → 0.3.0

package/dist/components/p-hoAPVm-t.js

@@ -1,354 +0,0 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './p-abe_AkUW.js';
-import { T as TranslationUtils } from './p-C03M5ZSM.js';
-
-const amwalInstallmentsTimelineCss = () => `:root{--color-primary:#54535C;--color-primary-light:rgba(84, 83, 92, 0.2);--color-primary-medium:#54535c91;--color-border:#e0e0e0;--color-surface:#ffffff;--breakpoint-xs:320px;--breakpoint-sm:480px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1200px;--spacing-xs:clamp(2px, 0.5vw, 4px);--spacing-sm:clamp(4px, 1vw, 8px);--spacing-md:clamp(8px, 1.5vw, 12px);--spacing-lg:clamp(12px, 2vw, 16px);--spacing-xl:clamp(0px, 2.5vw, 0px);--spacing-2xl:clamp(20px, 3vw, 24px);--font-size-xs:clamp(10px, 2vw, 12px);--font-size-sm:clamp(11px, 2.2vw, 14px);--font-size-md:clamp(12px, 2.5vw, 12px);--font-size-lg:clamp(14px, 2.8vw, 18px);--font-size-xl:clamp(16px, 3vw, 20px);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--connector-size:clamp(20px, 5vw, 80px);--circle-size:clamp(24px, 6vw, 50px);--dot-size:clamp(10px, 3vw, 10px);--touch-target-min:44px;--touch-target-small:0px;--timeline-line-height:clamp(2px, 0.3vw, 2px);--timeline-line-color:#7c7c7cab;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md:0 2px 4px rgba(0, 0, 0, 0.08);--shadow-lg:0 4px 6px rgba(0, 0, 0, 0.1);--shadow-xl:0 8px 25px rgba(0, 0, 0, 0.15);--border-radius-sm:clamp(2px, 0.5vw, 4px);--border-radius:clamp(4px, 1vw, 8px);--border-radius-lg:clamp(8px, 1.5vw, 12px);--border-radius-xl:clamp(12px, 2vw, 16px);--transition-fast:150ms cubic-bezier(0.4, 0, 0.2, 1);--transition-normal:250ms cubic-bezier(0.4, 0, 0.2, 1);--transition-slow:400ms cubic-bezier(0.4, 0, 0.2, 1)}.installments.payment-progress{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:min(700px, 95vw);padding:var(--spacing-lg);font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;line-height:1.5;transition:all var(--transition-normal);margin:0 auto}.installments.payment-progress.bordered{border:1px solid var(--color-border);border-radius:var(--border-radius);box-shadow:var(--shadow-md);padding:var(--spacing-xl);background-color:var(--color-surface)}.installments.payment-progress.date-timeline{flex-direction:column;background-color:var(--color-surface);gap:var(--spacing-lg);align-items:stretch;position:relative}.installments.payment-progress.date-timeline.bordered{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg)}.date-timeline-container{display:flex;justify-content:space-between;align-items:flex-start;width:100%;position:relative;gap:var(--spacing-md);min-height:60px;z-index:0}.modern-timeline-dot{width:var(--dot-size);height:var(--dot-size);background-color:var(--color-primary);border-radius:50%;position:relative;margin-bottom:var(--spacing-sm);z-index:10;transition:all var(--transition-normal);min-width:var(--dot-size);min-height:var(--dot-size);border:2px solid var(--color-primary)}.modern-timeline-dot:hover{transform:scale(1.1)}.modern-timeline-dot.empty,.modern-timeline-dot.small,.modern-timeline-dot.medium,.modern-timeline-dot.full{background-color:var(--color-primary);border:2px solid var(--color-primary)}.date-timeline-container::before{content:'';position:absolute;top:calc(var(--dot-size) / 1.5 - var(--timeline-line-height) / 2);left:12.5%;right:12.5%;height:var(--timeline-line-height);background-color:var(--color-primary);z-index:1;transition:all var(--transition-normal)}.date-timeline-container::after{display:none}.date-timeline.has-hidden-installments .date-timeline-container::before{display:none}.date-timeline.has-hidden-installments .date-timeline-container::after{content:'';display:block;position:absolute;top:calc(var(--dot-size) / 1 - var(--timeline-line-height) / 2);left:12.5%;right:12.5%;height:var(--timeline-line-height);z-index:1;transition:all var(--transition-normal);background:linear-gradient(to right, var(--color-primary), var(--color-primary)) 0% 0% / 66.66% 100% no-repeat,
-            repeating-linear-gradient(
-                    to right,
-                    var(--timeline-line-color) 0%,
-                    var(--timeline-line-color) 4px,
-                    transparent 4px,
-                    transparent 8px
-            ) 66.66% 0% / 100% 100% no-repeat}[dir="rtl"] .date-timeline-container::before{left:12.5%;right:12.5%;background-color:var(--color-primary)}[dir="rtl"] .date-timeline-container::after{display:none}[dir="rtl"] .date-timeline.has-hidden-installments .date-timeline-container::before{display:none}[dir="rtl"] .date-timeline.has-hidden-installments .date-timeline-container::after,.date-timeline-container-rtl::after{display:block !important;content:'' !important;position:absolute !important;top:calc(var(--dot-size) / 1 - var(--timeline-line-height) / 2) !important;left:12.5% !important;right:12.5% !important;height:var(--timeline-line-height) !important;z-index:1 !important;transition:all var(--transition-normal) !important;background:repeating-linear-gradient(
-                    to right,
-                    var(--timeline-line-color) 0%,
-                    var(--timeline-line-color) 3px,
-                    transparent 3px,
-                    transparent 6px
-            ) 0% 0% / 32.67% 100% no-repeat,
-            linear-gradient(to right, var(--color-primary), var(--color-primary)) 100% 0% / 66.66% 100% no-repeat !important}[dir="rtl"] .date-timeline-container{direction:rtl}[dir="rtl"] .date-timeline-content{text-align:center;direction:rtl}[dir="rtl"] .date-timeline-footer{text-align:right;direction:rtl;border-left:none;border-right:3px solid var(--color-accent)}[dir="rtl"] .currency-symbol{margin-right:0;margin-left:2px}[dir="rtl"] .sar-symbol{margin-right:0;margin-left:3px}.date-timeline-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;min-width:0;transition:transform var(--transition-fast);min-height:var(--touch-target-min);padding:var(--spacing-xs)}.date-timeline-content{text-align:center;display:flex;flex-direction:column;gap:var(--spacing-xs);min-height:clamp(40px, 10vw, 70px);justify-content:flex-start;width:100%;overflow-wrap:break-word}.date-timeline-date,.date-timeline-label{font-size:var(--font-size-sm);color:var(--color-primary);font-weight:var(--font-weight-medium);line-height:1.3;transition:color var(--transition-fast);overflow-wrap:break-word}.date-timeline-amount{font-size:var(--font-size-md);color:var(--color-primary);font-weight:var(--font-weight-semibold);transition:color var(--transition-fast);white-space:nowrap}.date-timeline-hold-label{font-size:var(--font-size-xs);color:var(--color-primary);font-weight:var(--font-weight-medium);opacity:0.7;margin-top:var(--spacing-xs);text-transform:uppercase;letter-spacing:0.5px;background:linear-gradient(135deg, var(--color-primary-light), transparent);padding:2px 6px;border-radius:var(--border-radius-sm);transition:all var(--transition-fast)}.date-timeline-footer{text-align:left;font-size:var(--font-size-sm);color:var(--color-primary);padding:var(--spacing-md);background:linear-gradient(135deg, rgba(243, 244, 246, 0.8), rgba(249, 250, 251, 0.4));border-radius:var(--border-radius);border-left:3px solid var(--color-accent);font-style:italic;line-height:1.4;overflow-wrap:break-word;backdrop-filter:blur(10px)}.installments-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:0 0 auto;transition:transform var(--transition-fast);min-height:var(--touch-target-min);padding:var(--spacing-sm)}.installments-step:hover{transform:translateY(-2px)}.installments-amount{display:flex;flex-direction:column;align-items:center;margin-bottom:var(--spacing-md);text-align:center}.amount-container{display:flex;align-items:center;gap:var(--spacing-xs);flex-direction:row;justify-content:center;flex-wrap:wrap}.installments-label{font-size:var(--font-size-md);color:var(--color-primary);font-weight:var(--font-weight-normal);text-align:center;margin-top:var(--spacing-sm);transition:color var(--transition-fast);overflow-wrap:break-word}.installments-amount-value{font-weight:var(--font-weight-bold);color:var(--color-primary);font-size:var(--font-size-lg);transition:color var(--transition-fast);white-space:nowrap}.currency-symbol{margin-right:2px}.sar-symbol{width:clamp(14px, 3vw, 16px);height:clamp(14px, 3vw, 16px);display:inline-block;fill:var(--color-primary);margin-right:3px;vertical-align:middle;transition:fill var(--transition-fast)}.installments-circle-container{position:relative;width:var(--circle-size);height:var(--circle-size);margin-bottom:var(--spacing-md);transition:transform var(--transition-normal);min-width:var(--circle-size);min-height:var(--circle-size)}.installments-circle-container:hover{transform:scale(1.05)}.installments-circle-outline,.installments-circle-filled,.installments-circle-filled-first,.installments-circle-segment{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;transition:all var(--transition-normal)}.installments-circle-outline{background-color:var(--color-primary-light);border:2px solid var(--color-border)}.installments-circle-filled-first{background-color:var(--color-primary-medium);border:2px solid var(--color-primary);box-shadow:var(--shadow-sm)}.installments-circle-filled{background-color:var(--color-primary);border:2px solid var(--color-primary);box-shadow:var(--shadow-md);position:relative}.installments-circle-filled::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:white;font-size:clamp(12px, 3vw, 18px);font-weight:var(--font-weight-bold)}.installments-circle-segment-small{clip-path:polygon(50% 50%, 50% 0%, 25% 0%, 15% 15%, 50% 50%);background-color:var(--color-primary);transition:clip-path var(--transition-normal)}.installments-circle-segment-medium{clip-path:polygon(50% 50%, 50% 0%, 0% 0%, 0% 50%, 50% 50%);background-color:var(--color-primary);transition:clip-path var(--transition-normal)}.installments-connector-container{flex-grow:1;display:flex;align-items:center;position:relative;margin:0 var(--spacing-sm);max-width:var(--connector-size);transition:opacity var(--transition-fast);min-width:20px}.installments-connector-container:hover{opacity:0.8}.installments-simple-connector,.installments-dotted-connector{display:flex;align-items:center;width:100%}.installments-connector-dot{width:clamp(6px, 1.5vw, 8px);height:clamp(6px, 1.5vw, 8px);background-color:var(--color-primary);border-radius:50%;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);min-width:6px;min-height:6px}.installments-connector-dot:hover{transform:scale(1.2);box-shadow:var(--shadow-md)}.installments-connector-line{flex-grow:1;height:2px;background-color:var(--color-primary);margin:0 2px;transition:background-color var(--transition-fast);min-width:10px}.installments-dots-container{flex-grow:1;display:flex;justify-content:space-evenly;align-items:center;gap:2px;min-width:20px}.installments-dot{width:clamp(4px, 1vw, 6px);height:clamp(4px, 1vw, 6px);background-color:var(--color-primary);border-radius:50%;margin:0 1px;transition:all var(--transition-fast);animation:pulse 2s infinite;min-width:4px;min-height:4px}.installments-dot:nth-child(2){animation-delay:0.2s}.installments-dot:nth-child(3){animation-delay:0.4s}.installments-dot:nth-child(4){animation-delay:0.6s}.installments-dot:nth-child(5){animation-delay:0.8s}@keyframes pulse{0%,100%{opacity:0.4;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}@media (max-width: 479px){.date-timeline.has-hidden-installments .date-timeline-container::after{background:linear-gradient(to right, var(--color-primary), var(--color-primary)) 0% 0% / 66.66% 100% no-repeat,
-                repeating-linear-gradient(
-                        to right,
-                        var(--timeline-line-color) 0%,
-                        var(--timeline-line-color) 2px,
-                        transparent 2px,
-                        transparent 4px
-                ) 66.66% 0% / 100% 100% no-repeat}div[dir="rtl"] .installments.payment-progress.date-timeline.has-hidden-installments .date-timeline-container::after{background:repeating-linear-gradient(
-                        to right,
-                        var(--timeline-line-color) 0%,
-                        var(--timeline-line-color) 2px,
-                        transparent 2px,
-                        transparent 4px
-                ) 0% 0% / 33.34% 100% no-repeat,
-                linear-gradient(to right, var(--color-primary), var(--color-primary)) 33.34% 0% / 66.66% 100% no-repeat !important}}@media (min-width: 480px) and (max-width: 767px){.date-timeline.has-hidden-installments .date-timeline-container::after{background:linear-gradient(to right, var(--color-primary), var(--color-primary)) 0% 0% / 66.66% 100% no-repeat,
-                repeating-linear-gradient(
-                        to right,
-                        var(--timeline-line-color) 0%,
-                        var(--timeline-line-color) 3px,
-                        transparent 3px,
-                        transparent 6px
-                ) 66.66% 0% / 100% 100% no-repeat}div[dir="rtl"] .installments.payment-progress.date-timeline.has-hidden-installments .date-timeline-container::after{background:repeating-linear-gradient(
-                        to right,
-                        var(--timeline-line-color) 0%,
-                        var(--timeline-line-color) 3px,
-                        transparent 3px,
-                        transparent 6px
-                ) 0% 0% / 33.34% 100% no-repeat,
-                linear-gradient(to right, var(--color-primary), var(--color-primary)) 33.34% 0% / 66.66% 100% no-repeat !important}}@keyframes dotted-flow{0%{background-position:0% 0%, 66.66% 0%}100%{background-position:0% 0%, 68% 0%}}.date-timeline.has-hidden-installments .date-timeline-container::after{animation:dotted-flow 3s ease-in-out infinite alternate}@media (max-width: 479px){:root{--circle-size:clamp(18px, 8vw, 25px);--connector-size:clamp(8px, 4vw, 15px);--dot-size:clamp(10px, 4vw, 10px);--timeline-line-height:2px}.installments.payment-progress{padding:var(--spacing-sm);max-width:100%}.installments.payment-progress:not(.date-timeline){flex-direction:row;overflow-x:auto;justify-content:flex-start;padding:var(--spacing-sm) var(--spacing-xs);gap:var(--spacing-xs);scrollbar-width:thin;scrollbar-color:var(--color-primary-light) transparent;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.date-timeline-container{gap:var(--spacing-xs);min-height:45px}.date-timeline-step{min-width:clamp(35px, 8vw, 50px);padding:var(--spacing-xs)}.date-timeline-content{min-height:clamp(30px, 8vw, 40px);gap:2px}.date-timeline-date{font-size:var(--font-size-xs);line-height:1.2;font-size:0;line-height:0}.date-timeline-date::before{content:attr(data-short);font-size:var(--font-size-xs);line-height:1.2;color:var(--color-primary);font-weight:var(--font-weight-medium)}.date-timeline-amount{font-size:var(--font-size-xs);line-height:1.2}}@media (min-width: 480px) and (max-width: 767px){:root{--circle-size:clamp(30px, 6vw, 40px);--connector-size:clamp(20px, 4vw, 35px);--dot-size:clamp(10px, 4vw, 10px)}.date-timeline-container{gap:var(--spacing-sm);min-height:50px}.date-timeline-step{min-width:clamp(60px, 10vw, 80px)}.date-timeline-date{font-size:0;line-height:0}.date-timeline-date::before{content:attr(data-short);font-size:var(--font-size-sm);line-height:1.3;color:var(--color-primary);font-weight:var(--font-weight-medium)}}@media (min-width: 768px) and (max-width: 1023px){:root{--circle-size:clamp(40px, 6vw, 55px);--connector-size:clamp(50px, 8vw, 70px);--dot-size:clamp(10px, 4vw, 10px)}.date-timeline-container{gap:var(--spacing-md);min-height:60px}}@media (min-width: 1024px){:root{--circle-size:clamp(50px, 5vw, 70px);--connector-size:clamp(70px, 8vw, 120px);--dot-size:clamp(10px, 3vw, 10px)}.installments.payment-progress{max-width:800px;padding:var(--spacing-xl)}.date-timeline-container{gap:var(--spacing-lg);min-height:70px}}.installments-step:focus-visible,.date-timeline-step:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;border-radius:var(--border-radius)}.modern-timeline-dot:focus-visible{outline:3px solid var(--color-primary);outline-offset:3px;border-radius:var(--border-radius)}@media (pointer: coarse){.installments-step,.date-timeline-step{min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-sm)}.modern-timeline-dot{min-width:var(--touch-target-small);min-height:var(--touch-target-small);display:flex;align-items:center;justify-content:center}.date-timeline-container::before{top:calc(var(--dot-size) / 1.2 - var(--timeline-line-height) / 2)}.date-timeline.has-hidden-installments .date-timeline-container::after{top:calc(var(--dot-size) / 1.2 - var(--timeline-line-height) / 2)}}@media (prefers-reduced-motion: reduce){.date-timeline.has-hidden-installments .date-timeline-container::after{animation:none}}@media (prefers-contrast: high){:root{--color-primary:#000000;--color-border:#000000;--shadow-sm:none;--shadow-md:none;--shadow-lg:none}.installments.payment-progress.bordered,.installments.payment-progress.date-timeline.bordered{border:2px solid #000000;box-shadow:none}}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}.installments-step:hover,.date-timeline-step:hover{transform:none}}@media print{.installments.payment-progress{box-shadow:none;border:1px solid #000;background:white !important;color:black !important;max-width:100%;padding:1cm}.modern-timeline-dot,.installments-circle-container{box-shadow:none;border:2px solid black}}`;
-
-const AmwalInstallmentsTimeline = /*@__PURE__*/ proxyCustomElement(class AmwalInstallmentsTimeline extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * 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
-    }
-    /**
-     * Lifecycle method that is called once when the component is first created
-     */
-    async componentWillLoad() {
-        try {
-            this.t = await TranslationUtils.useTranslation(this.locale);
-        }
-        catch (e) {
-            console.error('Failed to initialize translation:', e);
-        }
-    }
-    /**
-     * 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;
-        }
-    }
-    /**
-     * 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();
-        }
-        catch (e) {
-            console.error('Invalid installment data format', e);
-            return this.generateInstallments();
-        }
-    }
-    /**
-     * 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;
-    }
-    /**
-     * 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);
-        }
-        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))));
-    }
-    /**
-     * 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)
-        ])));
-    }
-    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();
-        }
-    }
-    static get watchers() { return {
-        "locale": ["updateLocale"]
-    }; }
-    static get style() { return amwalInstallmentsTimelineCss(); }
-}, [256, "amwal-installments-timeline", {
-        "amount": [2],
-        "installmentsCount": [2, "installments-count"],
-        "installmentData": [1, "installment-data"],
-        "enableInstallments": [4, "enable-installments"],
-        "maxVisibleInstallments": [2, "max-visible-installments"],
-        "locale": [1],
-        "border": [4],
-        "timelineStyle": [1, "timeline-style"],
-        "footerMessage": [1, "footer-message"],
-        "debug": [4],
-        "decimalPlaces": [2, "decimal-places"],
-        "labelFormat": [1, "label-format"],
-        "startDate": [1, "start-date"],
-        "intervalMonths": [2, "interval-months"]
-    }, undefined, {
-        "locale": ["updateLocale"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["amwal-installments-timeline"];
-    components.forEach(tagName => { switch (tagName) {
-        case "amwal-installments-timeline":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), AmwalInstallmentsTimeline);
-            }
-            break;
-    } });
-}
-
-export { AmwalInstallmentsTimeline as A, defineCustomElement as d };
-//# sourceMappingURL=p-hoAPVm-t.js.map
-
-//# sourceMappingURL=p-hoAPVm-t.js.map

package/dist/components/p-hoAPVm-t.js.map

@@ -1 +0,0 @@
-{"file":"p-hoAPVm-t.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/amwal-installments-timeline/amwal-installments-timeline.css?tag=amwal-installments-timeline","src/components/amwal-installments-timeline/amwal-installments-timeline.tsx"],"sourcesContent":["/* ===== CSS CUSTOM PROPERTIES ===== */\n:root {\n    /* Color System */\n    --color-primary: #54535C;\n    --color-primary-light: rgba(84, 83, 92, 0.2);\n    --color-primary-medium: #54535c91;\n    --color-border: #e0e0e0;\n    --color-surface: #ffffff;\n\n    /* Responsive Breakpoints */\n    --breakpoint-xs: 320px;\n    --breakpoint-sm: 480px;\n    --breakpoint-md: 768px;\n    --breakpoint-lg: 1024px;\n    --breakpoint-xl: 1200px;\n\n    /* Fluid Spacing System */\n    --spacing-xs: clamp(2px, 0.5vw, 4px);\n    --spacing-sm: clamp(4px, 1vw, 8px);\n    --spacing-md: clamp(8px, 1.5vw, 12px);\n    --spacing-lg: clamp(12px, 2vw, 16px);\n    --spacing-xl: clamp(0px, 2.5vw, 0px);\n    --spacing-2xl: clamp(20px, 3vw, 24px);\n\n    /* Typography Scale */\n    --font-size-xs: clamp(10px, 2vw, 12px);\n    --font-size-sm: clamp(11px, 2.2vw, 14px);\n    --font-size-md: clamp(12px, 2.5vw, 12px);\n    --font-size-lg: clamp(14px, 2.8vw, 18px);\n    --font-size-xl: clamp(16px, 3vw, 20px);\n    --font-weight-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n\n    /* Component Sizes */\n    --connector-size: clamp(20px, 5vw, 80px);\n    --circle-size: clamp(24px, 6vw, 50px);\n    --dot-size: clamp(10px, 3vw, 10px);\n    --touch-target-min: 44px;\n    --touch-target-small: 0px;\n\n    /* Timeline Variables */\n    --timeline-line-height: clamp(2px, 0.3vw, 2px);\n    --timeline-line-color: #7c7c7cab;\n\n    /* Shadows & Effects */\n    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);\n    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);\n    --shadow-xl: 0 8px 25px rgba(0, 0, 0, 0.15);\n\n    /* Border Radius */\n    --border-radius-sm: clamp(2px, 0.5vw, 4px);\n    --border-radius: clamp(4px, 1vw, 8px);\n    --border-radius-lg: clamp(8px, 1.5vw, 12px);\n    --border-radius-xl: clamp(12px, 2vw, 16px);\n\n    /* Transitions */\n    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);\n    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ===== MAIN CONTAINER ===== */\n.installments.payment-progress {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    max-width: min(700px, 95vw);\n    padding: var(--spacing-lg);\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    line-height: 1.5;\n    transition: all var(--transition-normal);\n    margin: 0 auto;\n}\n\n.installments.payment-progress.bordered {\n    border: 1px solid var(--color-border);\n    border-radius: var(--border-radius);\n    box-shadow: var(--shadow-md);\n    padding: var(--spacing-xl);\n    background-color: var(--color-surface);\n}\n\n/* ===== SIMPLE TIMELINE LAYOUT ===== */\n.installments.payment-progress.date-timeline {\n    flex-direction: column;\n    background-color: var(--color-surface);\n    gap: var(--spacing-lg);\n    align-items: stretch;\n    position: relative;\n}\n\n.installments.payment-progress.date-timeline.bordered {\n    border: 1px solid var(--color-border);\n    border-radius: var(--border-radius-lg);\n    box-shadow: var(--shadow-lg);\n}\n\n.date-timeline-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    width: 100%;\n    position: relative;\n    gap: var(--spacing-md);\n    min-height: 60px;\n    z-index: 0;\n}\n\n/* ===== SIMPLE DOT STYLE ===== */\n.modern-timeline-dot {\n    width: var(--dot-size);\n    height: var(--dot-size);\n    background-color: var(--color-primary);\n    border-radius: 50%;\n    position: relative;\n    margin-bottom: var(--spacing-sm);\n    z-index: 10;\n    transition: all var(--transition-normal);\n    min-width: var(--dot-size);\n    min-height: var(--dot-size);\n    border: 2px solid var(--color-primary);\n}\n\n.modern-timeline-dot:hover {\n    transform: scale(1.1);\n}\n\n/* All states use the same simple circular design */\n.modern-timeline-dot.empty,\n.modern-timeline-dot.small,\n.modern-timeline-dot.medium,\n.modern-timeline-dot.full {\n    background-color: var(--color-primary);\n    border: 2px solid var(--color-primary);\n}\n\n/* ===== SIMPLE TIMELINE CONNECTING LINES ===== */\n/* Default solid line for simple timeline (when no hidden installments) */\n.date-timeline-container::before {\n    content: '';\n    position: absolute;\n    top: calc(var(--dot-size) / 1.5 - var(--timeline-line-height) / 2);\n    left: 12.5%;\n    right: 12.5%;\n    height: var(--timeline-line-height);\n    background-color: var(--color-primary);\n    z-index: 1;\n    transition: all var(--transition-normal);\n}\n\n/* Default: hide the after pseudo-element */\n.date-timeline-container::after {\n    display: none;\n}\n\n/* When there are hidden installments, replace with segmented line */\n.date-timeline.has-hidden-installments .date-timeline-container::before {\n    display: none;\n}\n\n.date-timeline.has-hidden-installments .date-timeline-container::after {\n    content: '';\n    display: block;\n    position: absolute;\n    top: calc(var(--dot-size) / 1 - var(--timeline-line-height) / 2);\n    left: 12.5%;\n    right: 12.5%;\n    height: var(--timeline-line-height);\n    z-index: 1;\n    transition: all var(--transition-normal);\n    background:\n            linear-gradient(to right, var(--color-primary), var(--color-primary)) 0% 0% / 66.66% 100% no-repeat,\n            repeating-linear-gradient(\n                    to right,\n                    var(--timeline-line-color) 0%,\n                    var(--timeline-line-color) 4px,\n                    transparent 4px,\n                    transparent 8px\n            ) 66.66% 0% / 100% 100% no-repeat;\n}\n\n[dir=\"rtl\"] .date-timeline-container::before {\n    left: 12.5%;\n    right: 12.5%;\n    background-color: var(--color-primary);\n}\n\n[dir=\"rtl\"] .date-timeline-container::after {\n    display: none;\n}\n\n[dir=\"rtl\"] .date-timeline.has-hidden-installments .date-timeline-container::before {\n    display: none;\n}\n\n[dir=\"rtl\"] .date-timeline.has-hidden-installments .date-timeline-container::after, .date-timeline-container-rtl::after{\n    display: block !important;\n    content: '' !important;\n    position: absolute !important;\n    top: calc(var(--dot-size) / 1 - var(--timeline-line-height) / 2) !important;\n    left: 12.5% !important;\n    right: 12.5% !important;\n    height: var(--timeline-line-height) !important;\n    z-index: 1 !important;\n    transition: all var(--transition-normal) !important;\n    background:\n            repeating-linear-gradient(\n                    to right,\n                    var(--timeline-line-color) 0%,\n                    var(--timeline-line-color) 3px,\n                    transparent 3px,\n                    transparent 6px\n            ) 0% 0% / 32.67% 100% no-repeat,\n            linear-gradient(to right, var(--color-primary), var(--color-primary)) 100% 0% / 66.66% 100% no-repeat !important;\n}\n\n[dir=\"rtl\"] .date-timeline-container {\n    direction: rtl;\n}\n\n[dir=\"rtl\"] .date-timeline-content {\n    text-align: center;\n    direction: rtl;\n}\n\n[dir=\"rtl\"] .date-timeline-footer {\n    text-align: right;\n    direction: rtl;\n    border-left: none;\n    border-right: 3px solid var(--color-accent);\n}\n\n[dir=\"rtl\"] .currency-symbol {\n    margin-right: 0;\n    margin-left: 2px;\n}\n\n[dir=\"rtl\"] .sar-symbol {\n    margin-right: 0;\n    margin-left: 3px;\n}\n\n/* ===== TIMELINE STEPS ===== */\n.date-timeline-step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex: 1;\n    min-width: 0;\n    transition: transform var(--transition-fast);\n    min-height: var(--touch-target-min);\n    padding: var(--spacing-xs);\n}\n\n/* ===== TIMELINE CONTENT ===== */\n.date-timeline-content {\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-xs);\n    min-height: clamp(40px, 10vw, 70px);\n    justify-content: flex-start;\n    width: 100%;\n    overflow-wrap: break-word;\n}\n\n.date-timeline-date,\n.date-timeline-label {\n    font-size: var(--font-size-sm);\n    color: var(--color-primary);\n    font-weight: var(--font-weight-medium);\n    line-height: 1.3;\n    transition: color var(--transition-fast);\n    overflow-wrap: break-word;\n}\n\n.date-timeline-amount {\n    font-size: var(--font-size-md);\n    color: var(--color-primary);\n    font-weight: var(--font-weight-semibold);\n    transition: color var(--transition-fast);\n    white-space: nowrap;\n}\n\n.date-timeline-hold-label {\n    font-size: var(--font-size-xs);\n    color: var(--color-primary);\n    font-weight: var(--font-weight-medium);\n    opacity: 0.7;\n    margin-top: var(--spacing-xs);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: linear-gradient(135deg, var(--color-primary-light), transparent);\n    padding: 2px 6px;\n    border-radius: var(--border-radius-sm);\n    transition: all var(--transition-fast);\n}\n\n.date-timeline-footer {\n    text-align: left;\n    font-size: var(--font-size-sm);\n    color: var(--color-primary);\n    padding: var(--spacing-md);\n    background: linear-gradient(135deg, rgba(243, 244, 246, 0.8), rgba(249, 250, 251, 0.4));\n    border-radius: var(--border-radius);\n    border-left: 3px solid var(--color-accent);\n    font-style: italic;\n    line-height: 1.4;\n    overflow-wrap: break-word;\n    backdrop-filter: blur(10px);\n}\n\n/* ===== DEFAULT TIMELINE STYLES (CIRCULAR PROGRESS) ===== */\n.installments-step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex: 0 0 auto;\n    transition: transform var(--transition-fast);\n    min-height: var(--touch-target-min);\n    padding: var(--spacing-sm);\n}\n\n.installments-step:hover {\n    transform: translateY(-2px);\n}\n\n.installments-amount {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-bottom: var(--spacing-md);\n    text-align: center;\n}\n\n.amount-container {\n    display: flex;\n    align-items: center;\n    gap: var(--spacing-xs);\n    flex-direction: row;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n\n.installments-label {\n    font-size: var(--font-size-md);\n    color: var(--color-primary);\n    font-weight: var(--font-weight-normal);\n    text-align: center;\n    margin-top: var(--spacing-sm);\n    transition: color var(--transition-fast);\n    overflow-wrap: break-word;\n}\n\n.installments-amount-value {\n    font-weight: var(--font-weight-bold);\n    color: var(--color-primary);\n    font-size: var(--font-size-lg);\n    transition: color var(--transition-fast);\n    white-space: nowrap;\n}\n\n.currency-symbol {\n    margin-right: 2px;\n}\n\n.sar-symbol {\n    width: clamp(14px, 3vw, 16px);\n    height: clamp(14px, 3vw, 16px);\n    display: inline-block;\n    fill: var(--color-primary);\n    margin-right: 3px;\n    vertical-align: middle;\n    transition: fill var(--transition-fast);\n}\n\n/* ===== CIRCLE PROGRESS STYLES ===== */\n.installments-circle-container {\n    position: relative;\n    width: var(--circle-size);\n    height: var(--circle-size);\n    margin-bottom: var(--spacing-md);\n    transition: transform var(--transition-normal);\n    min-width: var(--circle-size);\n    min-height: var(--circle-size);\n}\n\n.installments-circle-container:hover {\n    transform: scale(1.05);\n}\n\n.installments-circle-outline,\n.installments-circle-filled,\n.installments-circle-filled-first,\n.installments-circle-segment {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    transition: all var(--transition-normal);\n}\n\n.installments-circle-outline {\n    background-color: var(--color-primary-light);\n    border: 2px solid var(--color-border);\n}\n\n.installments-circle-filled-first {\n    background-color: var(--color-primary-medium);\n    border: 2px solid var(--color-primary);\n    box-shadow: var(--shadow-sm);\n}\n\n.installments-circle-filled {\n    background-color: var(--color-primary);\n    border: 2px solid var(--color-primary);\n    box-shadow: var(--shadow-md);\n    position: relative;\n}\n\n.installments-circle-filled::after {\n    content: '✓';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: clamp(12px, 3vw, 18px);\n    font-weight: var(--font-weight-bold);\n}\n\n.installments-circle-segment-small {\n    clip-path: polygon(50% 50%, 50% 0%, 25% 0%, 15% 15%, 50% 50%);\n    background-color: var(--color-primary);\n    transition: clip-path var(--transition-normal);\n}\n\n.installments-circle-segment-medium {\n    clip-path: polygon(50% 50%, 50% 0%, 0% 0%, 0% 50%, 50% 50%);\n    background-color: var(--color-primary);\n    transition: clip-path var(--transition-normal);\n}\n\n/* ===== CONNECTOR STYLES ===== */\n.installments-connector-container {\n    flex-grow: 1;\n    display: flex;\n    align-items: center;\n    position: relative;\n    margin: 0 var(--spacing-sm);\n    max-width: var(--connector-size);\n    transition: opacity var(--transition-fast);\n    min-width: 20px;\n}\n\n.installments-connector-container:hover {\n    opacity: 0.8;\n}\n\n.installments-simple-connector,\n.installments-dotted-connector {\n    display: flex;\n    align-items: center;\n    width: 100%;\n}\n\n.installments-connector-dot {\n    width: clamp(6px, 1.5vw, 8px);\n    height: clamp(6px, 1.5vw, 8px);\n    background-color: var(--color-primary);\n    border-radius: 50%;\n    transition: all var(--transition-fast);\n    box-shadow: var(--shadow-sm);\n    min-width: 6px;\n    min-height: 6px;\n}\n\n.installments-connector-dot:hover {\n    transform: scale(1.2);\n    box-shadow: var(--shadow-md);\n}\n\n.installments-connector-line {\n    flex-grow: 1;\n    height: 2px;\n    background-color: var(--color-primary);\n    margin: 0 2px;\n    transition: background-color var(--transition-fast);\n    min-width: 10px;\n}\n\n.installments-dots-container {\n    flex-grow: 1;\n    display: flex;\n    justify-content: space-evenly;\n    align-items: center;\n    gap: 2px;\n    min-width: 20px;\n}\n\n.installments-dot {\n    width: clamp(4px, 1vw, 6px);\n    height: clamp(4px, 1vw, 6px);\n    background-color: var(--color-primary);\n    border-radius: 50%;\n    margin: 0 1px;\n    transition: all var(--transition-fast);\n    animation: pulse 2s infinite;\n    min-width: 4px;\n    min-height: 4px;\n}\n\n.installments-dot:nth-child(2) { animation-delay: 0.2s; }\n.installments-dot:nth-child(3) { animation-delay: 0.4s; }\n.installments-dot:nth-child(4) { animation-delay: 0.6s; }\n.installments-dot:nth-child(5) { animation-delay: 0.8s; }\n\n@keyframes pulse {\n    0%, 100% { opacity: 0.4; transform: scale(1); }\n    50% { opacity: 1; transform: scale(1.1); }\n}\n\n/* ===== MOBILE OPTIMIZATION FOR DOTTED LINES ===== */\n/* Mobile optimization for dotted lines - LTR */\n@media (max-width: 479px) {\n    .date-timeline.has-hidden-installments .date-timeline-container::after {\n        background:\n                linear-gradient(to right, var(--color-primary), var(--color-primary)) 0% 0% / 66.66% 100% no-repeat,\n                repeating-linear-gradient(\n                        to right,\n                        var(--timeline-line-color) 0%,\n                        var(--timeline-line-color) 2px,\n                        transparent 2px,\n                        transparent 4px\n                ) 66.66% 0% / 100% 100% no-repeat;\n    }\n\n    /* Mobile optimization for dotted lines - RTL - HIGH SPECIFICITY */\n    div[dir=\"rtl\"] .installments.payment-progress.date-timeline.has-hidden-installments .date-timeline-container::after {\n        background:\n                repeating-linear-gradient(\n                        to right,\n                        var(--timeline-line-color) 0%,\n                        var(--timeline-line-color) 2px,\n                        transparent 2px,\n                        transparent 4px\n                ) 0% 0% / 33.34% 100% no-repeat,\n                linear-gradient(to right, var(--color-primary), var(--color-primary)) 33.34% 0% / 66.66% 100% no-repeat !important;\n    }\n}\n\n@media (min-width: 480px) and (max-width: 767px) {\n    .date-timeline.has-hidden-installments .date-timeline-container::after {\n        background:\n                linear-gradient(to right, var(--color-primary), var(--color-primary)) 0% 0% / 66.66% 100% no-repeat,\n                repeating-linear-gradient(\n                        to right,\n                        var(--timeline-line-color) 0%,\n                        var(--timeline-line-color) 3px,\n                        transparent 3px,\n                        transparent 6px\n                ) 66.66% 0% / 100% 100% no-repeat;\n    }\n\n    /* Tablet optimization for dotted lines - RTL - HIGH SPECIFICITY */\n    div[dir=\"rtl\"] .installments.payment-progress.date-timeline.has-hidden-installments .date-timeline-container::after {\n        background:\n                repeating-linear-gradient(\n                        to right,\n                        var(--timeline-line-color) 0%,\n                        var(--timeline-line-color) 3px,\n                        transparent 3px,\n                        transparent 6px\n                ) 0% 0% / 33.34% 100% no-repeat,\n                linear-gradient(to right, var(--color-primary), var(--color-primary)) 33.34% 0% / 66.66% 100% no-repeat !important;\n    }\n}\n\n/* Subtle animation for the dotted section (optional enhancement) */\n@keyframes dotted-flow {\n    0% {\n        background-position: 0% 0%, 66.66% 0%;\n    }\n    100% {\n        background-position: 0% 0%, 68% 0%;\n    }\n}\n\n.date-timeline.has-hidden-installments .date-timeline-container::after {\n    animation: dotted-flow 3s ease-in-out infinite alternate;\n}\n\n/* ===== RESPONSIVE DESIGN ===== */\n\n/* Extra Small Mobile (320px - 479px) */\n@media (max-width: 479px) {\n    :root {\n        --circle-size: clamp(18px, 8vw, 25px);\n        --connector-size: clamp(8px, 4vw, 15px);\n        --dot-size: clamp(10px, 4vw, 10px);\n        --timeline-line-height: 2px;\n    }\n\n    .installments.payment-progress {\n        padding: var(--spacing-sm);\n        max-width: 100%;\n    }\n\n    .installments.payment-progress:not(.date-timeline) {\n        flex-direction: row;\n        overflow-x: auto;\n        justify-content: flex-start;\n        padding: var(--spacing-sm) var(--spacing-xs);\n        gap: var(--spacing-xs);\n        scrollbar-width: thin;\n        scrollbar-color: var(--color-primary-light) transparent;\n        -webkit-overflow-scrolling: touch;\n        scroll-behavior: smooth;\n    }\n\n    .date-timeline-container {\n        gap: var(--spacing-xs);\n        min-height: 45px;\n    }\n\n    .date-timeline-step {\n        min-width: clamp(35px, 8vw, 50px);\n        padding: var(--spacing-xs);\n    }\n\n    .date-timeline-content {\n        min-height: clamp(30px, 8vw, 40px);\n        gap: 2px;\n    }\n\n    .date-timeline-date {\n        font-size: var(--font-size-xs);\n        line-height: 1.2;\n        /* Hide original text content on mobile */\n        font-size: 0;\n        line-height: 0;\n    }\n\n    .date-timeline-date::before {\n        /* Show data-short attribute value instead */\n        content: attr(data-short);\n        font-size: var(--font-size-xs);\n        line-height: 1.2;\n        color: var(--color-primary);\n        font-weight: var(--font-weight-medium);\n    }\n\n    .date-timeline-amount {\n        font-size: var(--font-size-xs);\n        line-height: 1.2;\n    }\n}\n\n/* Small Mobile (480px - 767px) */\n@media (min-width: 480px) and (max-width: 767px) {\n    :root {\n        --circle-size: clamp(30px, 6vw, 40px);\n        --connector-size: clamp(20px, 4vw, 35px);\n        --dot-size: clamp(10px, 4vw, 10px);\n    }\n\n    .date-timeline-container {\n        gap: var(--spacing-sm);\n        min-height: 50px;\n    }\n\n    .date-timeline-step {\n        min-width: clamp(60px, 10vw, 80px);\n    }\n\n    .date-timeline-date {\n        /* Hide original text content on small mobile */\n        font-size: 0;\n        line-height: 0;\n    }\n\n    .date-timeline-date::before {\n        /* Show data-short attribute value instead */\n        content: attr(data-short);\n        font-size: var(--font-size-sm);\n        line-height: 1.3;\n        color: var(--color-primary);\n        font-weight: var(--font-weight-medium);\n    }\n}\n\n/* Tablet (768px - 1023px) */\n@media (min-width: 768px) and (max-width: 1023px) {\n    :root {\n        --circle-size: clamp(40px, 6vw, 55px);\n        --connector-size: clamp(50px, 8vw, 70px);\n        --dot-size: clamp(10px, 4vw, 10px);\n    }\n\n    .date-timeline-container {\n        gap: var(--spacing-md);\n        min-height: 60px;\n    }\n}\n\n/* Desktop (1024px and up) */\n@media (min-width: 1024px) {\n    :root {\n        --circle-size: clamp(50px, 5vw, 70px);\n        --connector-size: clamp(70px, 8vw, 120px);\n        --dot-size: clamp(10px, 3vw, 10px);\n    }\n\n    .installments.payment-progress {\n        max-width: 800px;\n        padding: var(--spacing-xl);\n    }\n\n    .date-timeline-container {\n        gap: var(--spacing-lg);\n        min-height: 70px;\n    }\n}\n\n/* ===== ACCESSIBILITY & FOCUS STATES ===== */\n.installments-step:focus-visible,\n.date-timeline-step:focus-visible {\n    outline: 3px solid var(--color-primary);\n    outline-offset: 2px;\n    border-radius: var(--border-radius);\n}\n\n.modern-timeline-dot:focus-visible {\n    outline: 3px solid var(--color-primary);\n    outline-offset: 3px;\n    border-radius: var(--border-radius);\n}\n\n@media (pointer: coarse) {\n    .installments-step,\n    .date-timeline-step {\n        min-height: var(--touch-target-min);\n        min-width: var(--touch-target-min);\n        padding: var(--spacing-sm);\n    }\n\n    .modern-timeline-dot {\n        min-width: var(--touch-target-small);\n        min-height: var(--touch-target-small);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .date-timeline-container::before {\n        top: calc(var(--dot-size) / 1.2 - var(--timeline-line-height) / 2);\n    }\n\n    .date-timeline.has-hidden-installments .date-timeline-container::after {\n        top: calc(var(--dot-size) / 1.2 - var(--timeline-line-height) / 2);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .date-timeline.has-hidden-installments .date-timeline-container::after {\n        animation: none;\n    }\n}\n\n/* ===== THEME SUPPORT ===== */\n\n/* High Contrast Mode */\n@media (prefers-contrast: high) {\n    :root {\n        --color-primary: #000000;\n        --color-border: #000000;\n        --shadow-sm: none;\n        --shadow-md: none;\n        --shadow-lg: none;\n    }\n\n    .installments.payment-progress.bordered,\n    .installments.payment-progress.date-timeline.bordered {\n        border: 2px solid #000000;\n        box-shadow: none;\n    }\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n    *,\n    *::before,\n    *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n\n    .installments-step:hover,\n    .date-timeline-step:hover {\n        transform: none;\n    }\n}\n\n/* Print Styles */\n@media print {\n    .installments.payment-progress {\n        box-shadow: none;\n        border: 1px solid #000;\n        background: white !important;\n        color: black !important;\n        max-width: 100%;\n        padding: 1cm;\n    }\n\n    .modern-timeline-dot,\n    .installments-circle-container {\n        box-shadow: none;\n        border: 2px solid black;\n    }\n}","import { TranslationUtils } from '../../lang/i18n';\nimport {Component, h, Prop, Watch} from '@stencil/core';\n\n/**\n * Interface for installment data\n */\nexport interface Installment {\n    amount: string;\n    isCompleted?: boolean;\n    progressType?: 'empty' | 'small' | 'medium' | 'full';\n    label?: string;\n}\n\n/**\n * Timeline display style options\n */\nexport type TimelineStyle = 'default' | 'simple';\n\n/**\n * Label format options (deprecated - kept for backward compatibility)\n */\nexport type LabelFormat = 'date' | 'simple';\n\n@Component({\n    tag: 'amwal-installments-timeline',\n    styleUrl: 'amwal-installments-timeline.css',\n    shadow: false,\n})\nexport class AmwalInstallmentsTimeline {\n\n    /**\n     * The total amount to be paid in installments\n     */\n    @Prop() amount: number = 0;\n\n    /**\n     * Number of installments\n     */\n    @Prop() installmentsCount: number = 6;\n\n    /**\n     * The installment payments (optional - will be calculated if not provided)\n     */\n    @Prop() installmentData: string = '[]';\n\n    /**\n     * Enable or disable installments feature\n     */\n    @Prop() enableInstallments: boolean = false;\n\n    /**\n     * Maximum number of installments to display (for UI clarity)\n     */\n    @Prop() maxVisibleInstallments: number = 3;\n\n    /**\n     * the language of the plugin. supported languages are Arabic (\"ar\") and English (\"en\")\n     */\n    @Prop() locale?: string = \"en\";\n\n    /**\n     * Enable or disable border around the timeline\n     */\n    @Prop() border: boolean = false;\n\n    /**\n     * Timeline display style: 'default' for circular timeline, 'simple' for modern dots with lines\n     */\n    @Prop() timelineStyle: TimelineStyle = 'default';\n\n    /**\n     * Footer message for simple timeline style\n     */\n    @Prop() footerMessage?: string;\n\n    /**\n     * Enable debug mode for additional console logs\n     * @default false\n     */\n    @Prop() debug: boolean = false;\n\n    /**\n     * Number of decimal places for amount formatting\n     * @default 2\n     * @minimum 0\n     * @maximum 6\n     */\n    @Prop() decimalPlaces: number = 2;\n\n    // Deprecated props - kept for backward compatibility\n    @Prop() labelFormat: LabelFormat = 'simple';\n    @Prop() startDate?: string;\n    @Prop() intervalMonths: number = 1;\n\n    /**\n     * Translation function to handle localization\n     * @private\n     */\n    private t: (val: string) => string = (val) => val; // Initialize with fallback\n\n    /**\n     * Lifecycle method that is called once when the component is first created\n     */\n    async componentWillLoad() {\n        try {\n            this.t = await TranslationUtils.useTranslation(this.locale);\n        } catch (e) {\n            console.error('Failed to initialize translation:', e);\n        }\n    }\n\n    /**\n     * Lifecycle method to update translations when locale changes\n     */\n    @Watch('locale')\n    async updateLocale(newValue: string) {\n        this.locale = newValue;\n        try {\n            this.t = await TranslationUtils.useTranslation(this.locale);\n        } catch (e) {\n            console.error('Failed to update translation:', e);\n            this.t = (val) => val;\n        }\n    }\n\n    /**\n     * Generate simple label for installment (1-based indexing)\n     */\n    private generateSimpleLabel(index: number): string {\n        return this.t('Installment') + ' ' + (index + 1);\n    }\n\n    /**\n     * Get installment data as parsed object or generate it dynamically\n     */\n    private get installments(): Installment[] {\n        try {\n            const providedData = JSON.parse(this.installmentData);\n            if (providedData.length > 0) {\n                return providedData;\n            }\n            return this.generateInstallments();\n        } catch (e) {\n            console.error('Invalid installment data format', e);\n            return this.generateInstallments();\n        }\n    }\n\n    /**\n     * Generate installment data based on amount and installmentsCount\n     */\n    private generateInstallments(): Installment[] {\n        const installments: Installment[] = [];\n        if (this.amount <= 0 || this.installmentsCount <= 0) {\n            return installments;\n        }\n\n        // Calculate the base installment amount\n        const baseAmount = +(this.amount / this.installmentsCount).toFixed(this.decimalPlaces);\n        const remainder = +(this.amount - (baseAmount * this.installmentsCount)).toFixed(this.decimalPlaces);\n\n        // Create installment objects\n        for (let i = 0; i < this.installmentsCount; i++) {\n            // Add remainder to the last installment if needed\n            const amount = i === this.installmentsCount - 1 && remainder !== 0\n                ? (baseAmount + remainder).toFixed(this.decimalPlaces)\n                : baseAmount.toFixed(this.decimalPlaces);\n\n            // Assign progressive status based on position\n            let progressType: 'empty' | 'small' | 'medium' | 'full' = 'empty';\n            if (i === 0) {\n                progressType = 'small';\n            } else if (i === 1 || (i > 1 && i < this.installmentsCount - 1)) {\n                progressType = 'medium';\n            } else if (i === this.installmentsCount - 1) {\n                progressType = 'full';\n            }\n\n            const installment: Installment = {\n                amount: `${amount}`,\n                progressType,\n                label: this.generateSimpleLabel(i)\n            };\n\n            installments.push(installment);\n        }\n\n        return installments;\n    }\n\n    /**\n     * Format amount to display\n     */\n    private formatAmount(amount: string, label?: string): any {\n        const amountParts = amount.split(' ');\n        const numericValue = parseFloat(amountParts[0]).toFixed(this.decimalPlaces);\n\n        return (\n            <div class=\"installments-amount\">\n                <div class=\"amount-container\">\n                    {label && <span class=\"installments-label\">{label}</span>}\n                    <span class=\"installments-amount-value\">{numericValue}</span>\n                </div>\n            </div>\n        );\n    }\n\n    /**\n     * Render an installment step (default circular style)\n     */\n    private renderInstallmentStep(\n        amount: string,\n        label: string,\n        isFirst: boolean = false,\n        isLast: boolean = false,\n        progressType: 'empty' | 'small' | 'medium' | 'full' = 'empty'\n    ) {\n        return (\n            <div class=\"installments-step\">\n                {isFirst\n                    ? this.formatAmount(amount, this.t('Hold'))\n                    : this.formatAmount(amount)\n                }\n                <div class=\"installments-circle-container\">\n                    {isFirst ? (\n                        <div class=\"installments-circle-filled-first\"></div>\n                    ) : isLast || progressType === 'full' ? (\n                        <div class=\"installments-circle-filled\"></div>\n                    ) : (\n                        [\n                            <div class=\"installments-circle-outline\"></div>,\n                            progressType === 'small' && (\n                                <div class=\"installments-circle-segment installments-circle-segment-small\"></div>\n                            ),\n                            progressType === 'medium' && (\n                                <div class=\"installments-circle-segment installments-circle-segment-medium\"></div>\n                            )\n                        ]\n                    )}\n                </div>\n                <div class=\"installments-label\">{label}</div>\n            </div>\n        );\n    }\n\n    /**\n     * Render a modern timeline step with new dot style and connecting lines\n     */\n    private renderModernTimelineStep(installment: Installment, isHold: boolean = false) {\n        const progressClass = installment.progressType || 'empty';\n        // Generate short version for mobile displays\n        const shortLabel = installment.label?.replace('Installment', 'Inst') || installment.label;\n\n        return (\n            <div class=\"date-timeline-step\">\n                <div class={`modern-timeline-dot ${progressClass}`}></div>\n                <div class=\"date-timeline-content\">\n                    <div class=\"date-timeline-date\" data-short={shortLabel}>{installment.label}</div>\n                    <div class=\"date-timeline-amount\">\n                        {isHold && (\n                            <span class=\"date-timeline-hold-label\">{this.t('Hold')}</span>\n                        )}\n                        {installment.amount}\n                    </div>\n                </div>\n            </div>\n        );\n    }\n\n    /**\n     * Render a connector between steps (default style)\n     */\n    private renderConnector(isDotted: boolean = false) {\n        return (\n            <div class=\"installments-connector-container\">\n                {isDotted ? (\n                    <div class=\"installments-dotted-connector\">\n                        <div class=\"installments-connector-dot\"></div>\n                        <div class=\"installments-dots-container\">\n                            <div class=\"installments-dot\"></div>\n                            <div class=\"installments-dot\"></div>\n                            <div class=\"installments-dot\"></div>\n                            <div class=\"installments-dot\"></div>\n                            <div class=\"installments-dot\"></div>\n                        </div>\n                        <div class=\"installments-connector-dot\"></div>\n                    </div>\n                ) : (\n                    <div class=\"installments-simple-connector\">\n                        <div class=\"installments-connector-dot\"></div>\n                        <div class=\"installments-connector-line\"></div>\n                        <div class=\"installments-connector-dot\"></div>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    /**\n     * Render the modern timeline style with new dots and connecting lines\n     * Updated to show dotted line when there are hidden installments\n     */\n    private renderModernTimeline() {\n        const allInstallments = this.installments;\n        const installmentsToDisplay = [];\n        const hasHiddenInstallments = allInstallments.length > this.maxVisibleInstallments;\n\n        // Handle visibility logic for many installments\n        if (allInstallments.length <= this.maxVisibleInstallments) {\n            installmentsToDisplay.push(...allInstallments);\n        } else {\n            // Show first, then second, then last\n            installmentsToDisplay.push(\n                allInstallments[0],\n                allInstallments[1]\n            );\n            installmentsToDisplay.push(\n                allInstallments[allInstallments.length - 1]\n            );\n        }\n\n        const timelineItems = [];\n\n        // Add full amount as first item (hold)\n        const holdItem: Installment = {\n            amount: this.amount.toFixed(this.decimalPlaces),\n            progressType: 'small',\n            label: this.t('Today')\n        };\n        timelineItems.push(holdItem);\n\n        // Add the filtered installments\n        timelineItems.push(...installmentsToDisplay);\n\n        return (\n            <div id=\"paymentProgress\"\n                 dir={this.locale === 'ar' ? 'rtl' : 'ltr'}\n                 class={{\n                     'installments': true,\n                     'payment-progress': true,\n                     'date-timeline': true,\n                     'bordered': this.border,\n                     'has-hidden-installments': hasHiddenInstallments\n                 }}>\n                <div class={`date-timeline-container date-timeline-container-${this.locale === 'ar' ? 'rtl' : 'ltr'}`}>\n                    {timelineItems.map((installment, index) => {\n                        // Adjust label for ellipsis case (same logic as default timeline)\n                        const isLastInstallment = index === timelineItems.length - 1 && index > 2;\n                        const adjustedInstallment = isLastInstallment && allInstallments.length > 3 ? {\n                            ...installment,\n                            label: this.t('Installment') + ' ' + allInstallments.length\n                        } : installment;\n\n                        return this.renderModernTimelineStep(adjustedInstallment, index === 0);\n                    })}\n                </div>\n                {this.footerMessage && (\n                    <div class=\"date-timeline-footer\">\n                        {this.footerMessage}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    /**\n     * Render the default timeline style with circles and connectors\n     */\n    private renderDefaultTimeline() {\n        const allInstallments = this.installments;\n        const installmentsToDisplay = [];\n\n        // Handle visibility logic for many installments\n        if (allInstallments.length <= this.maxVisibleInstallments) {\n            installmentsToDisplay.push(...allInstallments);\n        } else {\n            // Show first, then ellipsis, then last\n            installmentsToDisplay.push(\n                allInstallments[0],\n                allInstallments[1]\n            );\n            installmentsToDisplay.push(\n                allInstallments[allInstallments.length - 1]\n            );\n        }\n\n        return (\n            <div id=\"paymentProgress\"\n                 style={this.locale === 'ar' ? { direction: 'rtl' } : {}}\n                 class={{\n                     'installments': true,\n                     'payment-progress': true,\n                     'bordered': this.border\n                 }}>\n                {/* Today / Initial Payment */}\n                {this.renderInstallmentStep(\n                    `${this.amount}`,\n                    this.t('Today'),\n                    true,\n                    false,\n                    'empty'\n                )}\n\n                {/* Connector between Initial Payment and First Installment */}\n                {this.renderConnector()}\n\n                {/* Display the installments */}\n                {installmentsToDisplay.map((installment, index) => [\n                    this.renderInstallmentStep(\n                        installment.amount,\n                        this.t('Installment') + ' ' + (index === 2 && allInstallments.length > 3 ? allInstallments.length : index + 1),\n                        false,\n                        index === installmentsToDisplay.length - 1,\n                        installment.progressType\n                    ),\n                    index < installmentsToDisplay.length - 1 &&\n                    this.renderConnector(index === 1 && allInstallments.length > 3)\n                ])}\n            </div>\n        );\n    }\n\n    render() {\n        // If installments are not enabled, don't render anything\n        if (!this.enableInstallments) {\n            return null;\n        }\n\n        if (this.debug) {\n            console.log('[AmwalInstallmentsTimeline] Debug Mode Enabled');\n            console.log('[AmwalInstallmentsTimeline] Timeline Style:', this.timelineStyle);\n            console.log('[AmwalInstallmentsTimeline] Installments:', this.installments);\n            console.log('[AmwalInstallmentsTimeline] Installments Count:', this.installmentsCount);\n            console.log('[AmwalInstallmentsTimeline] Amount:', this.amount);\n            console.log('[AmwalInstallmentsTimeline] Max Visible Installments:', this.maxVisibleInstallments);\n            console.log('[AmwalInstallmentsTimeline] Has Hidden Installments:', this.installments.length > this.maxVisibleInstallments);\n            console.log('[AmwalInstallmentsTimeline] Locale:', this.locale);\n            console.log('[AmwalInstallmentsTimeline] Enable Border:', this.border);\n        }\n\n        // Render based on timeline style\n        if (this.timelineStyle === 'simple') {\n            return this.renderModernTimeline();\n        } else {\n            return this.renderDefaultTimeline();\n        }\n    }\n}"],"version":3}

package/dist/components/p-idUkgr5D.js

@@ -1,81 +0,0 @@
-import { k as clamp } from './p-CBE-1aIM.js';
-import { i as isRTL } from './p-C53feagD.js';
-import { createGesture } from './p-CH3Eg9_f.js';
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {
-    const win = el.ownerDocument.defaultView;
-    let rtl = isRTL(el);
-    /**
-     * Determine if a gesture is near the edge
-     * of the screen. If true, then the swipe
-     * to go back gesture should proceed.
-     */
-    const isAtEdge = (detail) => {
-        const threshold = 50;
-        const { startX } = detail;
-        if (rtl) {
-            return startX >= win.innerWidth - threshold;
-        }
-        return startX <= threshold;
-    };
-    const getDeltaX = (detail) => {
-        return rtl ? -detail.deltaX : detail.deltaX;
-    };
-    const getVelocityX = (detail) => {
-        return rtl ? -detail.velocityX : detail.velocityX;
-    };
-    const canStart = (detail) => {
-        /**
-         * The user's locale can change mid-session,
-         * so we need to check text direction at
-         * the beginning of every gesture.
-         */
-        rtl = isRTL(el);
-        return isAtEdge(detail) && canStartHandler();
-    };
-    const onMove = (detail) => {
-        // set the transition animation's progress
-        const delta = getDeltaX(detail);
-        const stepValue = delta / win.innerWidth;
-        onMoveHandler(stepValue);
-    };
-    const onEnd = (detail) => {
-        // the swipe back gesture has ended
-        const delta = getDeltaX(detail);
-        const width = win.innerWidth;
-        const stepValue = delta / width;
-        const velocity = getVelocityX(detail);
-        const z = width / 2.0;
-        const shouldComplete = velocity >= 0 && (velocity > 0.2 || delta > z);
-        const missing = shouldComplete ? 1 - stepValue : stepValue;
-        const missingDistance = missing * width;
-        let realDur = 0;
-        if (missingDistance > 5) {
-            const dur = missingDistance / Math.abs(velocity);
-            realDur = Math.min(dur, 540);
-        }
-        onEndHandler(shouldComplete, stepValue <= 0 ? 0.01 : clamp(0, stepValue, 0.9999), realDur);
-    };
-    return createGesture({
-        el,
-        gestureName: 'goback-swipe',
-        /**
-         * Swipe to go back should have priority over other horizontal swipe
-         * gestures. These gestures have a priority of 100 which is why 101 was chosen here.
-         */
-        gesturePriority: 101,
-        threshold: 10,
-        canStart,
-        onStart: onStartHandler,
-        onMove,
-        onEnd,
-    });
-};
-
-export { createSwipeBackGesture };
-//# sourceMappingURL=p-idUkgr5D.js.map
-
-//# sourceMappingURL=p-idUkgr5D.js.map

package/dist/components/p-idUkgr5D.js.map

@@ -1 +0,0 @@
-{"file":"p-idUkgr5D.js","mappings":"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","names":[],"sources":["node_modules/@ionic/core/dist/collection/utils/gesture/swipe-back.js"],"sourcesContent":["/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { clamp } from \"../helpers\";\nimport { isRTL } from \"../rtl\";\nimport { createGesture } from \"./index\";\nexport const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {\n    const win = el.ownerDocument.defaultView;\n    let rtl = isRTL(el);\n    /**\n     * Determine if a gesture is near the edge\n     * of the screen. If true, then the swipe\n     * to go back gesture should proceed.\n     */\n    const isAtEdge = (detail) => {\n        const threshold = 50;\n        const { startX } = detail;\n        if (rtl) {\n            return startX >= win.innerWidth - threshold;\n        }\n        return startX <= threshold;\n    };\n    const getDeltaX = (detail) => {\n        return rtl ? -detail.deltaX : detail.deltaX;\n    };\n    const getVelocityX = (detail) => {\n        return rtl ? -detail.velocityX : detail.velocityX;\n    };\n    const canStart = (detail) => {\n        /**\n         * The user's locale can change mid-session,\n         * so we need to check text direction at\n         * the beginning of every gesture.\n         */\n        rtl = isRTL(el);\n        return isAtEdge(detail) && canStartHandler();\n    };\n    const onMove = (detail) => {\n        // set the transition animation's progress\n        const delta = getDeltaX(detail);\n        const stepValue = delta / win.innerWidth;\n        onMoveHandler(stepValue);\n    };\n    const onEnd = (detail) => {\n        // the swipe back gesture has ended\n        const delta = getDeltaX(detail);\n        const width = win.innerWidth;\n        const stepValue = delta / width;\n        const velocity = getVelocityX(detail);\n        const z = width / 2.0;\n        const shouldComplete = velocity >= 0 && (velocity > 0.2 || delta > z);\n        const missing = shouldComplete ? 1 - stepValue : stepValue;\n        const missingDistance = missing * width;\n        let realDur = 0;\n        if (missingDistance > 5) {\n            const dur = missingDistance / Math.abs(velocity);\n            realDur = Math.min(dur, 540);\n        }\n        onEndHandler(shouldComplete, stepValue <= 0 ? 0.01 : clamp(0, stepValue, 0.9999), realDur);\n    };\n    return createGesture({\n        el,\n        gestureName: 'goback-swipe',\n        /**\n         * Swipe to go back should have priority over other horizontal swipe\n         * gestures. These gestures have a priority of 100 which is why 101 was chosen here.\n         */\n        gesturePriority: 101,\n        threshold: 10,\n        canStart,\n        onStart: onStartHandler,\n        onMove,\n        onEnd,\n    });\n};\n"],"version":3}