@magic-spells/cart-progress-bar 0.1.0

package/dist/cart-progress-bar.js

@@ -0,0 +1,355 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+	typeof define === 'function' && define.amd ? define(['exports'], factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CartProgressBar = {}));
+})(this, (function (exports) { 'use strict';
+
+	/**
+	 * ProgressBar helper class for the visual progress bar element
+	 */
+	class ProgressBar extends HTMLElement {
+		constructor() {
+			super();
+			this.#setupProgressBar();
+		}
+
+		#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);
+		}
+	}
+
+	// Define ProgressBar custom element immediately so it's available for CartProgressBar
+	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
+		 */
+		static get observedAttributes() {
+			return ['threshold', 'current', 'message-above', 'message-below'];
+		}
+
+		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') || '';
+		}
+
+		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');
+			}
+
+			this.#render();
+			this.#updateProgress();
+			this.#attachListeners();
+		}
+
+		attributeChangedCallback(name, oldValue, newValue) {
+			if (oldValue === newValue) return;
+
+			switch (name) {
+				case 'threshold':
+					this.#minAmount = parseFloat(newValue) || 0;
+					this.#updateProgress();
+					break;
+				case 'current':
+					this.#currentAmount = parseFloat(newValue) || 0;
+					this.#updateProgress();
+					break;
+				case 'message-above':
+					this.#originalAboveMessage = newValue || '';
+					this.#updateMessages();
+					break;
+				case 'message-below':
+					this.#originalBelowMessage = newValue || '';
+					this.#updateMessages();
+					break;
+			}
+		}
+
+		#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);
+			}
+
+			// 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
+						}
+					});
+				}
+			}
+		}
+
+		#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();
+		}
+
+		#attachListeners() {
+			// Find the nearest cart-panel component
+			const cartPanel = this.closest('cart-panel');
+
+			if (cartPanel) {
+				// Listen for cart data changes
+				cartPanel.addEventListener('cart-dialog:data-changed', (event) => {
+					this.#handleCartDataChange(event);
+				});
+			}
+		}
+
+		#handleCartDataChange(event) {
+			const updatedCart = event.detail;
+
+			if (updatedCart && typeof updatedCart.total_price !== 'undefined') {
+				// Convert from cents to dollars if needed (Shopify typically returns cents)
+				const currentAmount = updatedCart.total_price / 100;
+				this.setCurrentAmount(currentAmount);
+			}
+		}
+
+		#updateMessages() {
+			const isComplete = this.#currentAmount >= this.#minAmount;
+			const remainingAmount = Math.max(0, this.#minAmount - this.#currentAmount);
+
+			// Format remaining amount as currency (assuming USD for now)
+			const formattedAmount = this.#formatCurrency(remainingAmount);
+
+			// 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) {
+					const message = messageTemplate.replace(/\$\{left\}/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';
+				}
+			}
+		}
+
+		#updateComponentState() {
+			const isComplete = this.#currentAmount >= this.#minAmount;
+
+			if (isComplete) {
+				this.setAttribute('data-complete', 'true');
+				this.removeAttribute('data-incomplete');
+			} else {
+				this.setAttribute('data-incomplete', 'true');
+				this.removeAttribute('data-complete');
+			}
+
+			// Set progress level classes for styling
+			this.classList.remove('progress-low', 'progress-medium', 'progress-high', 'progress-complete');
+
+			if (isComplete) {
+				this.classList.add('progress-complete');
+			} else if (this.#progressPercent >= 75) {
+				this.classList.add('progress-high');
+			} else if (this.#progressPercent >= 50) {
+				this.classList.add('progress-medium');
+			} else {
+				this.classList.add('progress-low');
+			}
+		}
+
+		#formatCurrency(amount) {
+			// Basic currency formatting - could be enhanced with locale/currency options
+			return new Intl.NumberFormat('en-US', {
+				style: 'currency',
+				currency: 'USD',
+				minimumFractionDigits: 2,
+				maximumFractionDigits: 2,
+			}).format(amount);
+		}
+
+		/**
+		 * 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();
+		}
+
+		/**
+		 * 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);
+		}
+
+		/**
+		 * Public API: Get current progress information
+		 */
+		getProgress() {
+			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,
+			};
+		}
+
+		/**
+		 * 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);
+			}
+
+			if (belowMessage !== null) {
+				this.#originalBelowMessage = belowMessage;
+				this.setAttribute('message-below', belowMessage);
+			}
+
+			this.#updateMessages();
+		}
+
+		// Getters
+		get currentAmount() {
+			return this.#currentAmount;
+		}
+		get thresholdAmount() {
+			return this.#minAmount;
+		}
+		get minAmount() {
+			return this.#minAmount;
+		} // backwards compatibility
+		get percent() {
+			return this.#progressPercent;
+		}
+		get isComplete() {
+			return this.#currentAmount >= this.#minAmount;
+		}
+	}
+
+	// Define CartProgressBar custom element
+	customElements.define('cart-progress-bar', CartProgressBar);
+
+	exports.CartProgressBar = CartProgressBar;
+	exports.ProgressBar = ProgressBar;
+
+}));
+//# sourceMappingURL=cart-progress-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cart-progress-bar.js","sources":["../src/cart-progress-bar.js"],"sourcesContent":["import './cart-progress-bar.scss';\n\n/**\n * ProgressBar helper class for the visual progress bar element\n */\nclass ProgressBar extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.#setupProgressBar();\n\t}\n\n\t#setupProgressBar() {\n\t\tthis.setAttribute('role', 'progressbar');\n\t\tthis.setAttribute('aria-valuemin', '0');\n\t\tthis.setAttribute('aria-valuemax', '100');\n\t\tthis.setAttribute('aria-valuenow', '0');\n\n\t\t// Create the visual progress bar\n\t\tthis.innerHTML = '<div class=\"progress-bar-fill\"></div>';\n\t}\n\n\tsetPercent(percent) {\n\t\tconst clampedPercent = Math.max(0, Math.min(100, percent));\n\t\tthis.style.setProperty('--cart-progress-percent', `${clampedPercent}%`);\n\t\tthis.setAttribute('aria-valuenow', clampedPercent);\n\t}\n}\n\n// Define ProgressBar custom element immediately so it's available for CartProgressBar\ncustomElements.define('progress-bar', ProgressBar);\n\n/**\n * CartProgressBar main component\n */\nclass CartProgressBar extends HTMLElement {\n\t// Private fields\n\t#minAmount = 0;\n\t#currentAmount = 0;\n\t#progressPercent = 0;\n\t#originalAboveMessage = '';\n\t#originalBelowMessage = '';\n\t#progressBar = null;\n\t#messageElement = null;\n\n\t/**\n\t * Define which attributes should be observed for changes\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['threshold', 'current', 'message-above', 'message-below'];\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.#init();\n\t}\n\n\t#init() {\n\t\t// Read initial attributes\n\t\tthis.#minAmount = parseFloat(this.getAttribute('threshold')) || 0;\n\t\tthis.#currentAmount = parseFloat(this.getAttribute('current')) || 0;\n\n\t\t// Store original message templates\n\t\tthis.#originalAboveMessage = this.getAttribute('message-above') || '';\n\t\tthis.#originalBelowMessage = this.getAttribute('message-below') || '';\n\t}\n\n\tasync connectedCallback() {\n\t\t// ensure the child custom element has been registered\n\t\tawait customElements.whenDefined('progress-bar');\n\n\t\tif (!customElements.get('progress-bar')) {\n\t\t\tthrow new Error('<progress-bar> must be registered before <cart-progress-bar> runs');\n\t\t}\n\n\t\tthis.#render();\n\t\tthis.#updateProgress();\n\t\tthis.#attachListeners();\n\t}\n\n\tattributeChangedCallback(name, oldValue, newValue) {\n\t\tif (oldValue === newValue) return;\n\n\t\tswitch (name) {\n\t\t\tcase 'threshold':\n\t\t\t\tthis.#minAmount = parseFloat(newValue) || 0;\n\t\t\t\tthis.#updateProgress();\n\t\t\t\tbreak;\n\t\t\tcase 'current':\n\t\t\t\tthis.#currentAmount = parseFloat(newValue) || 0;\n\t\t\t\tthis.#updateProgress();\n\t\t\t\tbreak;\n\t\t\tcase 'message-above':\n\t\t\t\tthis.#originalAboveMessage = newValue || '';\n\t\t\t\tthis.#updateMessages();\n\t\t\t\tbreak;\n\t\t\tcase 'message-below':\n\t\t\t\tthis.#originalBelowMessage = newValue || '';\n\t\t\t\tthis.#updateMessages();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t#render() {\n\t\t// Find or create the message element\n\t\tthis.#messageElement =\n\t\t\tthis.querySelector('[data-content-cart-progress-message]') ||\n\t\t\tthis.querySelector('p[data-content-cart-progress-message]');\n\n\t\t// Find existing progress bar (user can add their own)\n\t\tthis.#progressBar = this.querySelector('progress-bar');\n\n\t\t// Create message element if it doesn't exist but we have message templates\n\t\tif (!this.#messageElement && (this.#originalAboveMessage || this.#originalBelowMessage)) {\n\t\t\tthis.#messageElement = document.createElement('p');\n\t\t\tthis.#messageElement.setAttribute('data-content-cart-progress-message', '');\n\t\t\tthis.appendChild(this.#messageElement);\n\t\t}\n\n\t\t// Create progress bar if it doesn't exist - add it at the end (below text message)\n\t\tif (!this.#progressBar) {\n\t\t\t// Ensure progress-bar is defined before creating\n\t\t\tif (customElements.get('progress-bar')) {\n\t\t\t\tthis.#progressBar = document.createElement('progress-bar');\n\t\t\t\tthis.appendChild(this.#progressBar);\n\t\t\t} else {\n\t\t\t\t// Fallback: wait for definition\n\t\t\t\tcustomElements.whenDefined('progress-bar').then(() => {\n\t\t\t\t\tif (!this.#progressBar) {\n\t\t\t\t\t\tthis.#progressBar = document.createElement('progress-bar');\n\t\t\t\t\t\tthis.appendChild(this.#progressBar);\n\t\t\t\t\t\tthis.#updateProgress(); // Update progress after creating\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\t#updateProgress() {\n\t\tif (this.#minAmount === 0) {\n\t\t\tthis.#progressPercent = 100;\n\t\t} else {\n\t\t\tthis.#progressPercent = Math.min(100, (this.#currentAmount / this.#minAmount) * 100);\n\t\t}\n\n\t\t// Update progress bar\n\t\tif (this.#progressBar) {\n\t\t\tthis.#progressBar.setPercent(this.#progressPercent);\n\t\t}\n\n\t\t// Update messages\n\t\tthis.#updateMessages();\n\n\t\t// Update component state\n\t\tthis.#updateComponentState();\n\t}\n\n\t#attachListeners() {\n\t\t// Find the nearest cart-panel component\n\t\tconst cartPanel = this.closest('cart-panel');\n\n\t\tif (cartPanel) {\n\t\t\t// Listen for cart data changes\n\t\t\tcartPanel.addEventListener('cart-dialog:data-changed', (event) => {\n\t\t\t\tthis.#handleCartDataChange(event);\n\t\t\t});\n\t\t}\n\t}\n\n\t#handleCartDataChange(event) {\n\t\tconst updatedCart = event.detail;\n\n\t\tif (updatedCart && typeof updatedCart.total_price !== 'undefined') {\n\t\t\t// Convert from cents to dollars if needed (Shopify typically returns cents)\n\t\t\tconst currentAmount = updatedCart.total_price / 100;\n\t\t\tthis.setCurrentAmount(currentAmount);\n\t\t}\n\t}\n\n\t#updateMessages() {\n\t\tconst isComplete = this.#currentAmount >= this.#minAmount;\n\t\tconst remainingAmount = Math.max(0, this.#minAmount - this.#currentAmount);\n\n\t\t// Format remaining amount as currency (assuming USD for now)\n\t\tconst formattedAmount = this.#formatCurrency(remainingAmount);\n\n\t\t// Update the single message element\n\t\tif (this.#messageElement) {\n\t\t\tlet messageTemplate;\n\n\t\t\tif (isComplete && this.#originalAboveMessage) {\n\t\t\t\t// Show success message when complete\n\t\t\t\tmessageTemplate = this.#originalAboveMessage;\n\t\t\t} else if (!isComplete) {\n\t\t\t\t// Show progress message when incomplete\n\t\t\t\tmessageTemplate = this.#originalBelowMessage || this.#originalAboveMessage;\n\t\t\t}\n\n\t\t\tif (messageTemplate) {\n\t\t\t\tconst message = messageTemplate.replace(/\\$\\{left\\}/g, formattedAmount);\n\t\t\t\tthis.#messageElement.textContent = message;\n\t\t\t\tthis.#messageElement.style.display = 'block';\n\t\t\t} else {\n\t\t\t\t// Hide message if no template available for current state\n\t\t\t\tthis.#messageElement.style.display = 'none';\n\t\t\t}\n\t\t}\n\t}\n\n\t#updateComponentState() {\n\t\tconst isComplete = this.#currentAmount >= this.#minAmount;\n\n\t\tif (isComplete) {\n\t\t\tthis.setAttribute('data-complete', 'true');\n\t\t\tthis.removeAttribute('data-incomplete');\n\t\t} else {\n\t\t\tthis.setAttribute('data-incomplete', 'true');\n\t\t\tthis.removeAttribute('data-complete');\n\t\t}\n\n\t\t// Set progress level classes for styling\n\t\tthis.classList.remove('progress-low', 'progress-medium', 'progress-high', 'progress-complete');\n\n\t\tif (isComplete) {\n\t\t\tthis.classList.add('progress-complete');\n\t\t} else if (this.#progressPercent >= 75) {\n\t\t\tthis.classList.add('progress-high');\n\t\t} else if (this.#progressPercent >= 50) {\n\t\t\tthis.classList.add('progress-medium');\n\t\t} else {\n\t\t\tthis.classList.add('progress-low');\n\t\t}\n\t}\n\n\t#formatCurrency(amount) {\n\t\t// Basic currency formatting - could be enhanced with locale/currency options\n\t\treturn new Intl.NumberFormat('en-US', {\n\t\t\tstyle: 'currency',\n\t\t\tcurrency: 'USD',\n\t\t\tminimumFractionDigits: 2,\n\t\t\tmaximumFractionDigits: 2,\n\t\t}).format(amount);\n\t}\n\n\t/**\n\t * Public API: Set the progress percentage directly\n\t * @param {number} percent - Progress percentage (0-100)\n\t */\n\tsetPercent(percent) {\n\t\tconst clampedPercent = Math.max(0, Math.min(100, percent));\n\t\tthis.#progressPercent = clampedPercent;\n\n\t\tif (this.#progressBar) {\n\t\t\tthis.#progressBar.setPercent(clampedPercent);\n\t\t}\n\n\t\t// Calculate current amount based on percentage\n\t\tthis.#currentAmount = (clampedPercent / 100) * this.#minAmount;\n\t\tthis.setAttribute('current', this.#currentAmount.toString());\n\n\t\tthis.#updateMessages();\n\t\tthis.#updateComponentState();\n\t}\n\n\t/**\n\t * Public API: Set the current cart amount\n\t * @param {number} amount - Current cart amount\n\t */\n\tsetCurrentAmount(amount) {\n\t\tthis.#currentAmount = parseFloat(amount) || 0;\n\t\tthis.setAttribute('current', this.#currentAmount.toString());\n\t\tthis.#updateProgress();\n\t}\n\n\t/**\n\t * Public API: Set the threshold amount for free shipping\n\t * @param {number} amount - Threshold amount for free shipping\n\t */\n\tsetThresholdAmount(amount) {\n\t\tthis.#minAmount = parseFloat(amount) || 0;\n\t\tthis.setAttribute('threshold', this.#minAmount.toString());\n\t\tthis.#updateProgress();\n\t}\n\n\t/**\n\t * Public API: Set the minimum amount for free shipping (deprecated - use setThresholdAmount)\n\t * @param {number} amount - Minimum amount threshold\n\t * @deprecated Use setThresholdAmount instead\n\t */\n\tsetMinAmount(amount) {\n\t\tthis.setThresholdAmount(amount);\n\t}\n\n\t/**\n\t * Public API: Get current progress information\n\t */\n\tgetProgress() {\n\t\treturn {\n\t\t\tcurrentAmount: this.#currentAmount,\n\t\t\tthresholdAmount: this.#minAmount,\n\t\t\tminAmount: this.#minAmount, // backwards compatibility\n\t\t\tremainingAmount: Math.max(0, this.#minAmount - this.#currentAmount),\n\t\t\tpercent: this.#progressPercent,\n\t\t\tisComplete: this.#currentAmount >= this.#minAmount,\n\t\t};\n\t}\n\n\t/**\n\t * Public API: Update message templates\n\t * @param {string} aboveMessage - Message template for above the bar\n\t * @param {string} belowMessage - Message template for below the bar\n\t */\n\tsetMessages(aboveMessage = null, belowMessage = null) {\n\t\tif (aboveMessage !== null) {\n\t\t\tthis.#originalAboveMessage = aboveMessage;\n\t\t\tthis.setAttribute('message-above', aboveMessage);\n\t\t}\n\n\t\tif (belowMessage !== null) {\n\t\t\tthis.#originalBelowMessage = belowMessage;\n\t\t\tthis.setAttribute('message-below', belowMessage);\n\t\t}\n\n\t\tthis.#updateMessages();\n\t}\n\n\t// Getters\n\tget currentAmount() {\n\t\treturn this.#currentAmount;\n\t}\n\tget thresholdAmount() {\n\t\treturn this.#minAmount;\n\t}\n\tget minAmount() {\n\t\treturn this.#minAmount;\n\t} // backwards compatibility\n\tget percent() {\n\t\treturn this.#progressPercent;\n\t}\n\tget isComplete() {\n\t\treturn this.#currentAmount >= this.#minAmount;\n\t}\n}\n\n// Define CartProgressBar custom element\ncustomElements.define('cart-progress-bar', CartProgressBar);\n\n// Export components for external use\nexport { CartProgressBar, ProgressBar };\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+cart-progress-bar{--cart-progress-bar-height:12px;--cart-progress-bar-border-radius:6px;--cart-progress-bar-bg:#e9ecef;--cart-progress-bar-fill-bg:#28a745;--cart-progress-bar-complete-bg:#007bff;--cart-progress-bar-shadow:inset 0 1px 2px rgba(0,0,0,.1);--cart-progress-bar-transition-duration:0.3s;--cart-progress-message-font-size:0.875rem;--cart-progress-message-line-height:1.4;--cart-progress-message-color:#495057;--cart-progress-message-complete-color:#155724;--cart-progress-message-margin:0.5rem;--cart-progress-percent:0%;display:block;max-width:100%;width:100%}cart-progress-bar p[data-content-cart-progress-message]{color:var(--cart-progress-message-color);font-size:var(--cart-progress-message-font-size);line-height:var(--cart-progress-message-line-height);margin:var(--cart-progress-message-margin) 0;text-align:center;transition:color var(--cart-progress-bar-transition-duration) ease}@media (max-width:768px){cart-progress-bar p[data-content-cart-progress-message]{font-size:calc(var(--cart-progress-message-font-size)*.9);margin:calc(var(--cart-progress-message-margin)*.75) 0}}cart-progress-bar[data-complete=true] p[data-content-cart-progress-message]{color:var(--cart-progress-message-complete-color);font-weight:600}cart-progress-bar.progress-low{--cart-progress-bar-fill-bg:#dc3545}cart-progress-bar.progress-medium{--cart-progress-bar-fill-bg:#ffc107}cart-progress-bar.progress-high{--cart-progress-bar-fill-bg:#fd7e14}cart-progress-bar.progress-complete{--cart-progress-bar-fill-bg:var(--cart-progress-bar-complete-bg)}cart-progress-bar.progress-complete p[data-content-cart-progress-message]{color:var(--cart-progress-message-complete-color)}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-bg);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.progress-complete progress-bar .progress-bar-fill:after,cart-progress-bar[data-complete=true] progress-bar .progress-bar-fill:after{left:100%}progress-bar:focus-visible{outline:2px solid #007bff;outline-offset:2px}@media (prefers-contrast:high){progress-bar{--cart-progress-bar-bg:#000;--cart-progress-bar-fill-bg:#fff;border:1px solid #fff}}@media (prefers-reduced-motion:reduce){progress-bar .progress-bar-fill,progress-bar .progress-bar-fill:after{transition:none}}@media (max-width:768px){cart-progress-bar{--cart-progress-bar-height:10px;--cart-progress-message-margin:0.375rem}}@media (prefers-color-scheme:dark){cart-progress-bar{--cart-progress-bar-bg:#343a40;--cart-progress-message-color:#e9ecef;--cart-progress-message-complete-color:#28a745}}@media print{cart-progress-bar .above-message,cart-progress-bar .below-message{color:#000!important}cart-progress-bar progress-bar{border:1px solid #000}cart-progress-bar progress-bar .progress-bar-fill{background-color:#000!important;background-image:none!important}}

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

@@ -0,0 +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.#m(),this.#g()}attributeChangedCallback(e,t,s){if(t!==s)switch(e){case"threshold":this.#t=parseFloat(s)||0,this.#m();break;case"current":this.#s=parseFloat(s)||0,this.#m();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.#m())}))}#m(){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()}#g(){const e=this.closest("cart-panel");e&&e.addEventListener("cart-dialog:data-changed",e=>{this.#p(e)})}#p(e){const t=e.detail;if(t&&void 0!==t.total_price){const e=t.total_price/100;this.setCurrentAmount(e)}}#l(){const e=this.#s>=this.#t,t=Math.max(0,this.#t-this.#s),s=this.#d(t);if(this.#o){let t;if(e&&this.#i?t=this.#i:e||(t=this.#n||this.#i),t){const e=t.replace(/\$\{left\}/g,s);this.#o.textContent=e,this.#o.style.display="block"}else this.#o.style.display="none"}}#c(){const e=this.#s>=this.#t;e?(this.setAttribute("data-complete","true"),this.removeAttribute("data-incomplete")):(this.setAttribute("data-incomplete","true"),this.removeAttribute("data-complete")),this.classList.remove("progress-low","progress-medium","progress-high","progress-complete"),e?this.classList.add("progress-complete"):this.#r>=75?this.classList.add("progress-high"):this.#r>=50?this.classList.add("progress-medium"):this.classList.add("progress-low")}#d(e){return new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",minimumFractionDigits:2,maximumFractionDigits:2}).format(e)}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.#m()}setThresholdAmount(e){this.#t=parseFloat(e)||0,this.setAttribute("threshold",this.#t.toString()),this.#m()}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});

package/dist/cart-progress-bar.scss

@@ -0,0 +1,202 @@
+// SCSS Variables (can be overridden before import)
+$cart-progress-bar-height: 12px !default;
+$cart-progress-bar-border-radius: 6px !default;
+$cart-progress-bar-bg: #e9ecef !default;
+$cart-progress-bar-fill-bg: #28a745 !default;
+$cart-progress-bar-complete-bg: #007bff !default;
+$cart-progress-bar-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !default;
+$cart-progress-bar-transition-duration: 0.3s !default;
+
+// Message styling
+$cart-progress-message-font-size: 0.875rem !default;
+$cart-progress-message-line-height: 1.4 !default;
+$cart-progress-message-color: #495057 !default;
+$cart-progress-message-complete-color: #155724 !default;
+$cart-progress-message-margin: 0.5rem !default;
+
+// Responsive breakpoints
+$cart-progress-mobile-breakpoint: 768px !default;
+
+// Cart progress bar component styles
+cart-progress-bar {
+	// CSS Custom Properties for customization (mapped from SCSS variables)
+	--cart-progress-bar-height: #{$cart-progress-bar-height};
+	--cart-progress-bar-border-radius: #{$cart-progress-bar-border-radius};
+	--cart-progress-bar-bg: #{$cart-progress-bar-bg};
+	--cart-progress-bar-fill-bg: #{$cart-progress-bar-fill-bg};
+	--cart-progress-bar-complete-bg: #{$cart-progress-bar-complete-bg};
+	--cart-progress-bar-shadow: #{$cart-progress-bar-shadow};
+	--cart-progress-bar-transition-duration: #{$cart-progress-bar-transition-duration};
+	--cart-progress-message-font-size: #{$cart-progress-message-font-size};
+	--cart-progress-message-line-height: #{$cart-progress-message-line-height};
+	--cart-progress-message-color: #{$cart-progress-message-color};
+	--cart-progress-message-complete-color: #{$cart-progress-message-complete-color};
+	--cart-progress-message-margin: #{$cart-progress-message-margin};
+
+	// Dynamic progress percentage (set by JavaScript)
+	--cart-progress-percent: 0%;
+
+	display: block;
+	width: 100%;
+	max-width: 100%;
+
+	// Message styling
+	p[data-content-cart-progress-message] {
+		font-size: var(--cart-progress-message-font-size);
+		line-height: var(--cart-progress-message-line-height);
+		color: var(--cart-progress-message-color);
+		margin: var(--cart-progress-message-margin) 0;
+		text-align: center;
+		transition: color var(--cart-progress-bar-transition-duration) ease;
+
+		@media (max-width: $cart-progress-mobile-breakpoint) {
+			font-size: calc(var(--cart-progress-message-font-size) * 0.9);
+			margin: calc(var(--cart-progress-message-margin) * 0.75) 0;
+		}
+	}
+
+	// State-based styling
+	&[data-complete='true'] {
+		p[data-content-cart-progress-message] {
+			color: var(--cart-progress-message-complete-color);
+			font-weight: 600;
+		}
+	}
+
+	// Progress level classes for additional styling hooks
+	&.progress-low {
+		--cart-progress-bar-fill-bg: #dc3545; // red for low progress
+	}
+
+	&.progress-medium {
+		--cart-progress-bar-fill-bg: #ffc107; // yellow for medium progress
+	}
+
+	&.progress-high {
+		--cart-progress-bar-fill-bg: #fd7e14; // orange for high progress
+	}
+
+	&.progress-complete {
+		--cart-progress-bar-fill-bg: var(--cart-progress-bar-complete-bg);
+
+		p[data-content-cart-progress-message] {
+			color: var(--cart-progress-message-complete-color);
+		}
+	}
+}
+
+// Progress bar component styles
+progress-bar {
+	display: block;
+	width: 100%;
+	height: var(--cart-progress-bar-height);
+	background-color: var(--cart-progress-bar-bg);
+	border-radius: var(--cart-progress-bar-border-radius);
+	box-shadow: var(--cart-progress-bar-shadow);
+	overflow: hidden;
+	position: relative;
+
+	.progress-bar-fill {
+		height: 100%;
+		width: var(--cart-progress-percent);
+		background-color: var(--cart-progress-bar-fill-bg);
+		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;
+		position: relative;
+
+		// Subtle gradient effect
+		background-image: linear-gradient(
+			45deg,
+			rgba(255, 255, 255, 0.1) 25%,
+			transparent 25%,
+			transparent 50%,
+			rgba(255, 255, 255, 0.1) 50%,
+			rgba(255, 255, 255, 0.1) 75%,
+			transparent 75%,
+			transparent
+		);
+		background-size: 12px 12px;
+
+		// Shine effect for completed state
+		&::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: -100%;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+			transition: left 0.5s ease;
+		}
+	}
+
+	// Animate shine effect when complete
+	cart-progress-bar[data-complete='true'] &,
+	cart-progress-bar.progress-complete & {
+		.progress-bar-fill::after {
+			left: 100%;
+		}
+	}
+
+	// Accessibility improvements
+	&:focus-visible {
+		outline: 2px solid #007bff;
+		outline-offset: 2px;
+	}
+
+	// High contrast mode support
+	@media (prefers-contrast: high) {
+		--cart-progress-bar-bg: #000000;
+		--cart-progress-bar-fill-bg: #ffffff;
+		border: 1px solid #ffffff;
+	}
+
+	// Reduced motion support
+	@media (prefers-reduced-motion: reduce) {
+		.progress-bar-fill {
+			transition: none;
+		}
+
+		.progress-bar-fill::after {
+			transition: none;
+		}
+	}
+}
+
+// Responsive adjustments
+@media (max-width: $cart-progress-mobile-breakpoint) {
+	cart-progress-bar {
+		--cart-progress-bar-height: 10px;
+		--cart-progress-message-margin: 0.375rem;
+	}
+}
+
+// Dark mode support
+@media (prefers-color-scheme: dark) {
+	cart-progress-bar {
+		--cart-progress-bar-bg: #343a40;
+		--cart-progress-message-color: #e9ecef;
+		--cart-progress-message-complete-color: #28a745;
+	}
+}
+
+// Print styles
+@media print {
+	cart-progress-bar {
+		.above-message,
+		.below-message {
+			color: #000000 !important;
+		}
+
+		progress-bar {
+			border: 1px solid #000000;
+
+			.progress-bar-fill {
+				background-color: #000000 !important;
+				background-image: none !important;
+			}
+		}
+	}
+}