@magic-spells/cart-progress-bar 0.2.1 → 2.0.0

package/dist/cart-progress-bar.esm.js

@@ -1,330 +1,254 @@
+//#region src/cart-progress-bar.js
 /**
- * ProgressBar helper class for the visual progress bar element
- */
-class ProgressBar extends HTMLElement {
+* ProgressBar helper class for the visual progress bar element
+*/
+var ProgressBar = class extends HTMLElement {
 	constructor() {
 		super();
-		this.#setupProgressBar();
+		const _ = this;
+		_.setAttribute("role", "progressbar");
+		_.setAttribute("aria-valuemin", "0");
+		_.setAttribute("aria-valuemax", "100");
+		_.setAttribute("aria-valuenow", "0");
+		_.innerHTML = "<div class=\"progress-bar-fill\"></div>";
 	}
-
-	#setupProgressBar() {
-		this.setAttribute('role', 'progressbar');
-		this.setAttribute('aria-valuemin', '0');
-		this.setAttribute('aria-valuemax', '100');
-		this.setAttribute('aria-valuenow', '0');
-
-		// Create the visual progress bar
-		this.innerHTML = '<div class="progress-bar-fill"></div>';
-	}
-
 	setPercent(percent) {
-		const clampedPercent = Math.max(0, Math.min(100, percent));
-		this.style.setProperty('--cart-progress-percent', `${clampedPercent}%`);
-		this.setAttribute('aria-valuenow', clampedPercent);
+		const p = Math.max(0, Math.min(100, percent));
+		this.style.setProperty("--cart-progress-percent", `${p}%`);
+		this.setAttribute("aria-valuenow", p);
 	}
-}
-
-// Define ProgressBar custom element immediately so it's available for CartProgressBar
-customElements.define('progress-bar', ProgressBar);
-
+};
+if (!customElements.get("progress-bar")) customElements.define("progress-bar", ProgressBar);
 /**
- * CartProgressBar main component
- */
-class CartProgressBar extends HTMLElement {
-	// Private fields
-	#minAmount = 0;
-	#currentAmount = 0;
-	#progressPercent = 0;
-	#originalAboveMessage = '';
-	#originalBelowMessage = '';
-	#progressBar = null;
-	#messageElement = null;
-
-	/**
-	 * Define which attributes should be observed for changes
-	 */
+* CartProgressBar main component
+*/
+var CartProgressBar = class extends HTMLElement {
+	#threshold = 0;
+	#current = 0;
+	#percent = 0;
+	#msgAbove = "";
+	#msgBelow = "";
+	#bar = null;
+	#msgEl = null;
+	#moneyFmt = null;
+	#debounce = null;
+	#listenSelector = "cart-panel";
+	#listenEvent = "cart-panel:data-changed";
+	#listenTarget = null;
+	#listenHandler = null;
 	static get observedAttributes() {
-		return ['threshold', 'current', 'message-above', 'message-below'];
+		return [
+			"threshold",
+			"current",
+			"message-above",
+			"message-below",
+			"money-format",
+			"listen-selector",
+			"listen-event"
+		];
 	}
-
 	constructor() {
 		super();
-		this.#init();
-	}
-
-	#init() {
-		// Read initial attributes
-		this.#minAmount = parseFloat(this.getAttribute('threshold')) || 0;
-		this.#currentAmount = parseFloat(this.getAttribute('current')) || 0;
-
-		// Store original message templates
-		this.#originalAboveMessage = this.getAttribute('message-above') || '';
-		this.#originalBelowMessage = this.getAttribute('message-below') || '';
+		const _ = this;
+		_.#threshold = parseFloat(_.getAttribute("threshold")) || 0;
+		_.#current = parseFloat(_.getAttribute("current")) || 0;
+		_.#msgAbove = _.getAttribute("message-above") || "";
+		_.#msgBelow = _.getAttribute("message-below") || "";
+		_.#moneyFmt = _.getAttribute("money-format");
+		_.#listenSelector = _.getAttribute("listen-selector") || "cart-panel";
+		_.#listenEvent = _.getAttribute("listen-event") || "cart-panel:data-changed";
 	}
-
 	async connectedCallback() {
-		// ensure the child custom element has been registered
-		await customElements.whenDefined('progress-bar');
-
-		if (!customElements.get('progress-bar')) {
-			throw new Error('<progress-bar> must be registered before <cart-progress-bar> runs');
-		}
-
+		await customElements.whenDefined("progress-bar");
 		this.#render();
 		this.#updateProgress();
 		this.#attachListeners();
 	}
-
-	attributeChangedCallback(name, oldValue, newValue) {
-		if (oldValue === newValue) return;
-
+	disconnectedCallback() {
+		if (this.#debounce) clearTimeout(this.#debounce);
+		this.#detachListeners();
+	}
+	attributeChangedCallback(name, oldVal, newVal) {
+		if (oldVal === newVal) return;
+		const _ = this;
 		switch (name) {
-			case 'threshold':
-				this.#minAmount = parseFloat(newValue) || 0;
-				this.#updateProgress();
+			case "threshold":
+				_.#threshold = parseFloat(newVal) || 0;
+				_.#updateProgress();
+				break;
+			case "current":
+				_.#current = parseFloat(newVal) || 0;
+				_.#updateProgress();
 				break;
-			case 'current':
-				this.#currentAmount = parseFloat(newValue) || 0;
-				this.#updateProgress();
+			case "message-above":
+				_.#msgAbove = newVal || "";
+				_.#updateMessages();
 				break;
-			case 'message-above':
-				this.#originalAboveMessage = newValue || '';
-				this.#updateMessages();
+			case "message-below":
+				_.#msgBelow = newVal || "";
+				_.#updateMessages();
 				break;
-			case 'message-below':
-				this.#originalBelowMessage = newValue || '';
-				this.#updateMessages();
+			case "money-format":
+				_.#moneyFmt = newVal;
+				_.#updateMessages();
 				break;
+			case "listen-selector":
+				_.#listenSelector = newVal || "cart-panel";
+				_.#detachListeners();
+				_.#attachListeners();
+				break;
+			case "listen-event":
+				_.#detachListeners();
+				_.#listenEvent = newVal || "cart-panel:data-changed";
+				_.#attachListeners();
 		}
 	}
-
 	#render() {
-		// Find or create the message element
-		this.#messageElement =
-			this.querySelector('[data-content-cart-progress-message]') ||
-			this.querySelector('p[data-content-cart-progress-message]');
-
-		// Find existing progress bar (user can add their own)
-		this.#progressBar = this.querySelector('progress-bar');
-
-		// Create message element if it doesn't exist but we have message templates
-		if (!this.#messageElement && (this.#originalAboveMessage || this.#originalBelowMessage)) {
-			this.#messageElement = document.createElement('p');
-			this.#messageElement.setAttribute('data-content-cart-progress-message', '');
-			this.appendChild(this.#messageElement);
+		const _ = this;
+		_.#msgEl = _.querySelector("[data-content-cart-progress-message]");
+		_.#bar = _.querySelector("progress-bar");
+		if (!_.#msgEl && (_.#msgAbove || _.#msgBelow)) {
+			_.#msgEl = document.createElement("p");
+			_.#msgEl.setAttribute("data-content-cart-progress-message", "");
+			_.appendChild(_.#msgEl);
 		}
-
-		// Create progress bar if it doesn't exist - add it at the end (below text message)
-		if (!this.#progressBar) {
-			// Ensure progress-bar is defined before creating
-			if (customElements.get('progress-bar')) {
-				this.#progressBar = document.createElement('progress-bar');
-				this.appendChild(this.#progressBar);
-			} else {
-				// Fallback: wait for definition
-				customElements.whenDefined('progress-bar').then(() => {
-					if (!this.#progressBar) {
-						this.#progressBar = document.createElement('progress-bar');
-						this.appendChild(this.#progressBar);
-						this.#updateProgress(); // Update progress after creating
-					}
-				});
-			}
+		if (!_.#bar) {
+			_.#bar = document.createElement("progress-bar");
+			_.appendChild(_.#bar);
 		}
 	}
-
 	#updateProgress() {
-		if (this.#minAmount === 0) {
-			this.#progressPercent = 100;
-		} else {
-			this.#progressPercent = Math.min(100, (this.#currentAmount / this.#minAmount) * 100);
-		}
-
-		// Update progress bar
-		if (this.#progressBar) {
-			this.#progressBar.setPercent(this.#progressPercent);
-		}
-
-		// Update messages
-		this.#updateMessages();
-
-		// Update component state
-		this.#updateComponentState();
+		const _ = this;
+		const converted = _.#converted();
+		_.#percent = converted === 0 ? 100 : Math.min(100, _.#current / converted * 100);
+		if (_.#bar) _.#bar.setPercent(_.#percent);
+		_.#updateState(converted);
 	}
-
 	#attachListeners() {
-		// Find the nearest cart-panel component
-		const cartDialog = this.closest('cart-dialog');
-
-		if (cartDialog) {
-			// Listen for cart data changes
-			cartDialog.addEventListener('cart-dialog:data-changed', (event) => {
-				this.#handleCartDataChange(event);
-			});
+		const _ = this;
+		const target = _.closest(_.#listenSelector);
+		if (target) {
+			_.#listenHandler = (e) => _.#onCartChange(e);
+			_.#listenTarget = target;
+			target.addEventListener(_.#listenEvent, _.#listenHandler);
 		}
 	}
-
-	#handleCartDataChange(event) {
-		const updatedCart = event.detail;
-
-		if (updatedCart) {
-			// Use calculated_subtotal if available (handles _ignore_price_in_subtotal logic)
-			// Otherwise fall back to total_price for backwards compatibility
-			let currentAmount = 0;
-
-			if (typeof updatedCart.calculated_subtotal !== 'undefined') {
-				// calculated_subtotal is already in dollars, no conversion needed
-				currentAmount = updatedCart.calculated_subtotal / 100;
-			} else if (typeof updatedCart.total_price !== 'undefined') {
-				// Convert from cents to dollars if needed (Shopify typically returns cents)
-				currentAmount = updatedCart.total_price / 100;
-			}
-
-			this.setCurrentAmount(currentAmount);
+	#detachListeners() {
+		const _ = this;
+		if (_.#listenTarget && _.#listenHandler) {
+			_.#listenTarget.removeEventListener(_.#listenEvent, _.#listenHandler);
+			_.#listenTarget = null;
+			_.#listenHandler = null;
 		}
 	}
-
-	#updateMessages() {
-		const isComplete = this.#currentAmount >= this.#minAmount;
-		const remainingAmount = Math.max(0, this.#minAmount - this.#currentAmount);
-
-		// Format amount with minimal formatting
-		const formattedAmount = remainingAmount.toFixed(2).replace('.00', '');
-
-		// Update the single message element
-		if (this.#messageElement) {
-			let messageTemplate;
-
-			if (isComplete && this.#originalAboveMessage) {
-				// Show success message when complete
-				messageTemplate = this.#originalAboveMessage;
-			} else if (!isComplete) {
-				// Show progress message when incomplete
-				messageTemplate = this.#originalBelowMessage || this.#originalAboveMessage;
-			}
-
-			if (messageTemplate) {
-				// Support multiple placeholder formats: {amount}, { amount }, [amount]
-				const message = messageTemplate
-					.replace(/\{\s*amount\s*\}/g, formattedAmount)
-					.replace(/\[\s*amount\s*\]/g, formattedAmount);
-				this.#messageElement.textContent = message;
-				this.#messageElement.style.display = 'block';
-			} else {
-				// Hide message if no template available for current state
-				this.#messageElement.style.display = 'none';
-			}
+	#onCartChange(event) {
+		const _ = this;
+		const cart = event.detail;
+		if (!cart) return;
+		if (_.#debounce) clearTimeout(_.#debounce);
+		_.#debounce = setTimeout(() => {
+			_.#debounce = null;
+			const amt = (cart.calculated_subtotal ?? cart.total_price ?? 0) / 100;
+			_.setCurrentAmount(amt);
+		}, 100);
+	}
+	#updateState(converted) {
+		const _ = this;
+		const complete = _.#current >= converted;
+		const remaining = Math.max(0, converted - _.#current);
+		const formatted = _.#fmtMoney(remaining);
+		if (_.#msgEl) {
+			let tpl = complete ? _.#msgAbove : _.#msgBelow || _.#msgAbove;
+			if (tpl) {
+				_.#msgEl.textContent = tpl.replace(/\[\s*amount\s*\]/g, formatted);
+				_.#msgEl.style.display = "block";
+			} else _.#msgEl.style.display = "none";
 		}
+		_.setAttribute("complete", complete.toString());
 	}
-
-	#updateComponentState() {
-		const isComplete = this.#currentAmount >= this.#minAmount;
-		this.setAttribute('complete', isComplete.toString());
+	#fmtMoney(amt) {
+		const fmt = this.#moneyFmt;
+		if (!fmt) return amt.toFixed(2).replace(/\.00$/, "");
+		const fixed = amt.toFixed(2);
+		const noDecimals = Math.round(amt).toString();
+		const withComma = fixed.replace(".", ",");
+		const noDecWithComma = noDecimals.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+		return fmt.replace(/\{\{\s*amount_no_decimals_with_comma_separator\s*\}\}/g, noDecWithComma).replace(/\{\{\s*amount_with_comma_separator\s*\}\}/g, withComma).replace(/\{\{\s*amount_no_decimals\s*\}\}/g, noDecimals).replace(/\{\{\s*amount\s*\}\}/g, fixed);
 	}
-
-
-	/**
-	 * Public API: Set the progress percentage directly
-	 * @param {number} percent - Progress percentage (0-100)
-	 */
-	setPercent(percent) {
-		const clampedPercent = Math.max(0, Math.min(100, percent));
-		this.#progressPercent = clampedPercent;
-
-		if (this.#progressBar) {
-			this.#progressBar.setPercent(clampedPercent);
-		}
-
-		// Calculate current amount based on percentage
-		this.#currentAmount = (clampedPercent / 100) * this.#minAmount;
-		this.setAttribute('current', this.#currentAmount.toString());
-
-		this.#updateMessages();
-		this.#updateComponentState();
-	}
-
-	/**
-	 * Public API: Set the current cart amount
-	 * @param {number} amount - Current cart amount
-	 */
-	setCurrentAmount(amount) {
-		this.#currentAmount = parseFloat(amount) || 0;
-		this.setAttribute('current', this.#currentAmount.toString());
-		this.#updateProgress();
+	#converted() {
+		const rate = parseFloat(window.Shopify?.currency?.rate) || 1;
+		return this.#threshold * rate;
 	}
-
-	/**
-	 * Public API: Set the threshold amount for free shipping
-	 * @param {number} amount - Threshold amount for free shipping
-	 */
-	setThresholdAmount(amount) {
-		this.#minAmount = parseFloat(amount) || 0;
-		this.setAttribute('threshold', this.#minAmount.toString());
-		this.#updateProgress();
-	}
-
-	/**
-	 * Public API: Set the minimum amount for free shipping (deprecated - use setThresholdAmount)
-	 * @param {number} amount - Minimum amount threshold
-	 * @deprecated Use setThresholdAmount instead
-	 */
-	setMinAmount(amount) {
-		this.setThresholdAmount(amount);
+	#updateMessages() {
+		this.#updateState(this.#converted());
+	}
+	setPercent(pct) {
+		const _ = this;
+		const p = Math.max(0, Math.min(100, pct));
+		_.#percent = p;
+		if (_.#bar) _.#bar.setPercent(p);
+		_.#current = p / 100 * _.#converted();
+		_.setAttribute("current", _.#current.toString());
+		_.#updateState(_.#converted());
+	}
+	setCurrentAmount(amt) {
+		const _ = this;
+		_.#current = parseFloat(amt) || 0;
+		_.setAttribute("current", _.#current.toString());
+		_.#updateProgress();
+	}
+	setThresholdAmount(amt) {
+		const _ = this;
+		_.#threshold = parseFloat(amt) || 0;
+		_.setAttribute("threshold", _.#threshold.toString());
+		_.#updateProgress();
+	}
+	/** @deprecated Use setThresholdAmount */
+	setMinAmount(amt) {
+		this.setThresholdAmount(amt);
 	}
-
-	/**
-	 * Public API: Get current progress information
-	 */
 	getProgress() {
+		const _ = this;
+		const converted = _.#converted();
 		return {
-			currentAmount: this.#currentAmount,
-			thresholdAmount: this.#minAmount,
-			minAmount: this.#minAmount, // backwards compatibility
-			remainingAmount: Math.max(0, this.#minAmount - this.#currentAmount),
-			percent: this.#progressPercent,
-			isComplete: this.#currentAmount >= this.#minAmount,
+			currentAmount: _.#current,
+			thresholdAmount: _.#threshold,
+			convertedThreshold: converted,
+			minAmount: _.#threshold,
+			remainingAmount: Math.max(0, converted - _.#current),
+			percent: _.#percent,
+			isComplete: _.#current >= converted,
+			currencyRate: parseFloat(window.Shopify?.currency?.rate) || 1
 		};
 	}
-
-	/**
-	 * Public API: Update message templates
-	 * @param {string} aboveMessage - Message template for above the bar
-	 * @param {string} belowMessage - Message template for below the bar
-	 */
-	setMessages(aboveMessage = null, belowMessage = null) {
-		if (aboveMessage !== null) {
-			this.#originalAboveMessage = aboveMessage;
-			this.setAttribute('message-above', aboveMessage);
+	setMessages(above = null, below = null) {
+		const _ = this;
+		if (above !== null) {
+			_.#msgAbove = above;
+			_.setAttribute("message-above", above);
 		}
-
-		if (belowMessage !== null) {
-			this.#originalBelowMessage = belowMessage;
-			this.setAttribute('message-below', belowMessage);
+		if (below !== null) {
+			_.#msgBelow = below;
+			_.setAttribute("message-below", below);
 		}
-
-		this.#updateMessages();
+		_.#updateMessages();
 	}
-
-	// Getters
 	get currentAmount() {
-		return this.#currentAmount;
+		return this.#current;
 	}
 	get thresholdAmount() {
-		return this.#minAmount;
+		return this.#threshold;
 	}
 	get minAmount() {
-		return this.#minAmount;
-	} // backwards compatibility
+		return this.#threshold;
+	}
 	get percent() {
-		return this.#progressPercent;
+		return this.#percent;
 	}
 	get isComplete() {
-		return this.#currentAmount >= this.#minAmount;
+		return this.#current >= this.#converted();
 	}
-}
-
-// Define CartProgressBar custom element
-customElements.define('cart-progress-bar', CartProgressBar);
-
+};
+if (!customElements.get("cart-progress-bar")) customElements.define("cart-progress-bar", CartProgressBar);
+//#endregion
 export { CartProgressBar, ProgressBar };
-//# sourceMappingURL=cart-progress-bar.esm.js.map

package/dist/cart-progress-bar.min.css

@@ -1 +1,2 @@
-cart-progress-bar{--cart-progress-bar-height:12px;--cart-progress-bar-border-radius:6px;--cart-progress-bar-shadow:inset 0 1px 2px rgba(0,0,0,.1);--cart-progress-bar-transition-duration:0.3s;--cart-progress-section-bg:transparent;--cart-progress-section-color:#495057;--cart-progress-bar-bg:#e9ecef;--cart-progress-bar-fill-before:#28a745;--cart-progress-bar-fill-after:#007bff;--cart-progress-percent:0%;--cart-progress-bar-fill-current:var(--cart-progress-bar-fill-before);background-color:var(--cart-progress-section-bg);color:var(--cart-progress-section-color);display:block;max-width:100%;width:100%}cart-progress-bar p[data-content-cart-progress-message]{color:inherit;transition:opacity var(--cart-progress-bar-transition-duration) ease}cart-progress-bar[complete=true] p[data-content-cart-progress-message]{font-weight:600}cart-progress-bar[complete=false]{--cart-progress-bar-fill-current:var(--cart-progress-bar-fill-before)}cart-progress-bar[complete=true]{--cart-progress-bar-fill-current:var(--cart-progress-bar-fill-after)}progress-bar{background-color:var(--cart-progress-bar-bg);box-shadow:var(--cart-progress-bar-shadow);display:block;height:var(--cart-progress-bar-height);overflow:hidden;width:100%}progress-bar,progress-bar .progress-bar-fill{border-radius:var(--cart-progress-bar-border-radius);position:relative}progress-bar .progress-bar-fill{background-color:var(--cart-progress-bar-fill-current);background-image:linear-gradient(45deg,hsla(0,0%,100%,.1) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.1) 0,hsla(0,0%,100%,.1) 75%,transparent 0,transparent);background-size:12px 12px;height:100%;transition:width var(--cart-progress-bar-transition-duration) ease,background-color var(--cart-progress-bar-transition-duration) ease;width:var(--cart-progress-percent)}progress-bar .progress-bar-fill:after{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}cart-progress-bar[complete=true] progress-bar .progress-bar-fill:after{left:100%}progress-bar:focus-visible{outline:2px solid #007bff;outline-offset:2px}
+cart-progress-bar{--cart-progress-bar-height:12px;--cart-progress-bar-border-radius:6px;--cart-progress-bar-transition-duration:.3s;--cart-progress-bar-bg:#e9ecef;--cart-progress-bar-fill-before:#28a745;--cart-progress-bar-fill-after:#007bff;--cart-progress-percent:0%;--cart-progress-bar-fill-current:var(--cart-progress-bar-fill-before);width:100%;display:block}cart-progress-bar p[data-content-cart-progress-message]{transition:opacity var(--cart-progress-bar-transition-duration) ease}cart-progress-bar[complete=true] p[data-content-cart-progress-message]{font-weight:600}cart-progress-bar[complete=false]{--cart-progress-bar-fill-current:var(--cart-progress-bar-fill-before)}cart-progress-bar[complete=true]{--cart-progress-bar-fill-current:var(--cart-progress-bar-fill-after)}progress-bar{width:100%;height:var(--cart-progress-bar-height);background-color:var(--cart-progress-bar-bg);border-radius:var(--cart-progress-bar-border-radius);display:block;position:relative;overflow:hidden}progress-bar .progress-bar-fill{height:100%;width:var(--cart-progress-percent);background-color:var(--cart-progress-bar-fill-current);border-radius:var(--cart-progress-bar-border-radius);transition:width var(--cart-progress-bar-transition-duration) ease, background-color var(--cart-progress-bar-transition-duration) ease}
+/*$vite$:1*/

package/dist/cart-progress-bar.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).CartProgressBar={})}(this,function(e){"use strict";class ProgressBar extends HTMLElement{constructor(){super(),this.#e()}#e(){this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax","100"),this.setAttribute("aria-valuenow","0"),this.innerHTML='<div class="progress-bar-fill"></div>'}setPercent(e){const t=Math.max(0,Math.min(100,e));this.style.setProperty("--cart-progress-percent",`${t}%`),this.setAttribute("aria-valuenow",t)}}customElements.define("progress-bar",ProgressBar);class CartProgressBar extends HTMLElement{#t=0;#s=0;#r=0;#i="";#n="";#a=null;#o=null;static get observedAttributes(){return["threshold","current","message-above","message-below"]}constructor(){super(),this.#h()}#h(){this.#t=parseFloat(this.getAttribute("threshold"))||0,this.#s=parseFloat(this.getAttribute("current"))||0,this.#i=this.getAttribute("message-above")||"",this.#n=this.getAttribute("message-below")||""}async connectedCallback(){if(await customElements.whenDefined("progress-bar"),!customElements.get("progress-bar"))throw new Error("<progress-bar> must be registered before <cart-progress-bar> runs");this.#u(),this.#g(),this.#m()}attributeChangedCallback(e,t,s){if(t!==s)switch(e){case"threshold":this.#t=parseFloat(s)||0,this.#g();break;case"current":this.#s=parseFloat(s)||0,this.#g();break;case"message-above":this.#i=s||"",this.#l();break;case"message-below":this.#n=s||"",this.#l()}}#u(){this.#o=this.querySelector("[data-content-cart-progress-message]")||this.querySelector("p[data-content-cart-progress-message]"),this.#a=this.querySelector("progress-bar"),this.#o||!this.#i&&!this.#n||(this.#o=document.createElement("p"),this.#o.setAttribute("data-content-cart-progress-message",""),this.appendChild(this.#o)),this.#a||(customElements.get("progress-bar")?(this.#a=document.createElement("progress-bar"),this.appendChild(this.#a)):customElements.whenDefined("progress-bar").then(()=>{this.#a||(this.#a=document.createElement("progress-bar"),this.appendChild(this.#a),this.#g())}))}#g(){0===this.#t?this.#r=100:this.#r=Math.min(100,this.#s/this.#t*100),this.#a&&this.#a.setPercent(this.#r),this.#l(),this.#c()}#m(){const e=this.closest("cart-dialog");e&&e.addEventListener("cart-dialog:data-changed",e=>{this.#p(e)})}#p(e){const t=e.detail;if(t){let e=0;void 0!==t.calculated_subtotal?e=t.calculated_subtotal/100:void 0!==t.total_price&&(e=t.total_price/100),this.setCurrentAmount(e)}}#l(){const e=this.#s>=this.#t,t=Math.max(0,this.#t-this.#s).toFixed(2).replace(".00","");if(this.#o){let s;if(e&&this.#i?s=this.#i:e||(s=this.#n||this.#i),s){const e=s.replace(/\{\s*amount\s*\}/g,t).replace(/\[\s*amount\s*\]/g,t);this.#o.textContent=e,this.#o.style.display="block"}else this.#o.style.display="none"}}#c(){const e=this.#s>=this.#t;this.setAttribute("complete",e.toString())}setPercent(e){const t=Math.max(0,Math.min(100,e));this.#r=t,this.#a&&this.#a.setPercent(t),this.#s=t/100*this.#t,this.setAttribute("current",this.#s.toString()),this.#l(),this.#c()}setCurrentAmount(e){this.#s=parseFloat(e)||0,this.setAttribute("current",this.#s.toString()),this.#g()}setThresholdAmount(e){this.#t=parseFloat(e)||0,this.setAttribute("threshold",this.#t.toString()),this.#g()}setMinAmount(e){this.setThresholdAmount(e)}getProgress(){return{currentAmount:this.#s,thresholdAmount:this.#t,minAmount:this.#t,remainingAmount:Math.max(0,this.#t-this.#s),percent:this.#r,isComplete:this.#s>=this.#t}}setMessages(e=null,t=null){null!==e&&(this.#i=e,this.setAttribute("message-above",e)),null!==t&&(this.#n=t,this.setAttribute("message-below",t)),this.#l()}get currentAmount(){return this.#s}get thresholdAmount(){return this.#t}get minAmount(){return this.#t}get percent(){return this.#r}get isComplete(){return this.#s>=this.#t}}customElements.define("cart-progress-bar",CartProgressBar),e.CartProgressBar=CartProgressBar,e.ProgressBar=ProgressBar});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).CartProgressBar={})}(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"});var ProgressBar=class extends HTMLElement{constructor(){super();const e=this;e.setAttribute("role","progressbar"),e.setAttribute("aria-valuemin","0"),e.setAttribute("aria-valuemax","100"),e.setAttribute("aria-valuenow","0"),e.innerHTML='<div class="progress-bar-fill"></div>'}setPercent(e){const t=Math.max(0,Math.min(100,e));this.style.setProperty("--cart-progress-percent",`${t}%`),this.setAttribute("aria-valuenow",t)}};customElements.get("progress-bar")||customElements.define("progress-bar",ProgressBar);var CartProgressBar=class extends HTMLElement{#e=0;#t=0;#s=0;#r="";#n="";#a=null;#o=null;#l=null;#c=null;#i="cart-panel";#u="cart-panel:data-changed";#d=null;#m=null;static get observedAttributes(){return["threshold","current","message-above","message-below","money-format","listen-selector","listen-event"]}constructor(){super();const e=this;e.#e=parseFloat(e.getAttribute("threshold"))||0,e.#t=parseFloat(e.getAttribute("current"))||0,e.#r=e.getAttribute("message-above")||"",e.#n=e.getAttribute("message-below")||"",e.#l=e.getAttribute("money-format"),e.#i=e.getAttribute("listen-selector")||"cart-panel",e.#u=e.getAttribute("listen-event")||"cart-panel:data-changed"}async connectedCallback(){await customElements.whenDefined("progress-bar"),this.#g(),this.#h(),this.#p()}disconnectedCallback(){this.#c&&clearTimeout(this.#c),this.#b()}attributeChangedCallback(e,t,s){if(t===s)return;const r=this;switch(e){case"threshold":r.#e=parseFloat(s)||0,r.#h();break;case"current":r.#t=parseFloat(s)||0,r.#h();break;case"message-above":r.#r=s||"",r.#v();break;case"message-below":r.#n=s||"",r.#v();break;case"money-format":r.#l=s,r.#v();break;case"listen-selector":r.#i=s||"cart-panel",r.#b(),r.#p();break;case"listen-event":r.#b(),r.#u=s||"cart-panel:data-changed",r.#p()}}#g(){const e=this;e.#o=e.querySelector("[data-content-cart-progress-message]"),e.#a=e.querySelector("progress-bar"),e.#o||!e.#r&&!e.#n||(e.#o=document.createElement("p"),e.#o.setAttribute("data-content-cart-progress-message",""),e.appendChild(e.#o)),e.#a||(e.#a=document.createElement("progress-bar"),e.appendChild(e.#a))}#h(){const e=this,t=e.#A();e.#s=0===t?100:Math.min(100,e.#t/t*100),e.#a&&e.#a.setPercent(e.#s),e.#y(t)}#p(){const e=this,t=e.closest(e.#i);t&&(e.#m=t=>e.#f(t),e.#d=t,t.addEventListener(e.#u,e.#m))}#b(){const e=this;e.#d&&e.#m&&(e.#d.removeEventListener(e.#u,e.#m),e.#d=null,e.#m=null)}#f(e){const t=this,s=e.detail;s&&(t.#c&&clearTimeout(t.#c),t.#c=setTimeout(()=>{t.#c=null;const e=(s.calculated_subtotal??s.total_price??0)/100;t.setCurrentAmount(e)},100))}#y(e){const t=this,s=t.#t>=e,r=Math.max(0,e-t.#t),n=t.#E(r);if(t.#o){let e=s?t.#r:t.#n||t.#r;e?(t.#o.textContent=e.replace(/\[\s*amount\s*\]/g,n),t.#o.style.display="block"):t.#o.style.display="none"}t.setAttribute("complete",s.toString())}#E(e){const t=this.#l;if(!t)return e.toFixed(2).replace(/\.00$/,"");const s=e.toFixed(2),r=Math.round(e).toString(),n=s.replace(".",","),a=r.replace(/\B(?=(\d{3})+(?!\d))/g,",");return t.replace(/\{\{\s*amount_no_decimals_with_comma_separator\s*\}\}/g,a).replace(/\{\{\s*amount_with_comma_separator\s*\}\}/g,n).replace(/\{\{\s*amount_no_decimals\s*\}\}/g,r).replace(/\{\{\s*amount\s*\}\}/g,s)}#A(){const e=parseFloat(window.Shopify?.currency?.rate)||1;return this.#e*e}#v(){this.#y(this.#A())}setPercent(e){const t=this,s=Math.max(0,Math.min(100,e));t.#s=s,t.#a&&t.#a.setPercent(s),t.#t=s/100*t.#A(),t.setAttribute("current",t.#t.toString()),t.#y(t.#A())}setCurrentAmount(e){const t=this;t.#t=parseFloat(e)||0,t.setAttribute("current",t.#t.toString()),t.#h()}setThresholdAmount(e){const t=this;t.#e=parseFloat(e)||0,t.setAttribute("threshold",t.#e.toString()),t.#h()}setMinAmount(e){this.setThresholdAmount(e)}getProgress(){const e=this,t=e.#A();return{currentAmount:e.#t,thresholdAmount:e.#e,convertedThreshold:t,minAmount:e.#e,remainingAmount:Math.max(0,t-e.#t),percent:e.#s,isComplete:e.#t>=t,currencyRate:parseFloat(window.Shopify?.currency?.rate)||1}}setMessages(e=null,t=null){const s=this;null!==e&&(s.#r=e,s.setAttribute("message-above",e)),null!==t&&(s.#n=t,s.setAttribute("message-below",t)),s.#v()}get currentAmount(){return this.#t}get thresholdAmount(){return this.#e}get minAmount(){return this.#e}get percent(){return this.#s}get isComplete(){return this.#t>=this.#A()}};customElements.get("cart-progress-bar")||customElements.define("cart-progress-bar",CartProgressBar),e.CartProgressBar=CartProgressBar,e.ProgressBar=ProgressBar});