@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-cart-item-offers.js

@@ -1,4 +1,146 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as e,h as i}from"@stencil/core/internal/client";import{S as c}from"./special-discount.js";import{l as r}from"./gift.js";import{A as a}from"./keyboard_arrow_down.js";const o=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.internalOffers=[],this.showAll=!1,this.freeLabel="",this.receivedOffer="",this.discountAmountLabel="",this.showMoreOffers="",this.icons={DiscountCouponIcon:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>discount-coupon</title>\n<path d="M27 28h-22c-0.552 0-1-0.448-1-1v0c0-1.657-1.343-3-3-3v0c-0.552 0-1-0.448-1-1v0-12c0-0.552 0.448-1 1-1v0c1.657 0 3-1.343 3-3v0c0-0.552 0.448-1 1-1v0h22c0.552 0 1 0.448 1 1v0c0 1.657 1.343 3 3 3v0c0.552 0 1 0.448 1 1v0 12c0 0.552-0.448 1-1 1v0c-1.657 0-3 1.343-3 3v0c0 0.552-0.448 1-1 1v0zM5.9 26h20.2c0.415-1.964 1.936-3.485 3.867-3.894l0.033-0.006v-10.2c-1.964-0.415-3.485-1.936-3.894-3.867l-0.006-0.033h-20.2c-0.415 1.964-1.936 3.485-3.867 3.894l-0.033 0.006v10.2c1.964 0.415 3.485 1.936 3.894 3.867l0.006 0.033zM20 7h2v3h-2v-3zM20 12h2v4h-2v-4zM20 18h2v4h-2v-4zM20 24h2v3h-2v-3zM9 16c-1.657 0-3-1.343-3-3s1.343-3 3-3c1.657 0 3 1.343 3 3v0c0 1.657-1.343 3-3 3v0zM9 12c-0.552 0-1 0.448-1 1s0.448 1 1 1c0.552 0 1-0.448 1-1v0c0-0.552-0.448-1-1-1v0zM15 24c-1.657 0-3-1.343-3-3s1.343-3 3-3c1.657 0 3 1.343 3 3v0c0 1.657-1.343 3-3 3v0zM15 20c-0.552 0-1 0.448-1 1s0.448 1 1 1c0.552 0 1-0.448 1-1v0c0-0.552-0.448-1-1-1v0zM7 24c-0.552-0-1-0.448-1-1 0-0.244 0.088-0.468 0.233-0.642l-0.001 0.002 10-12c0.185-0.221 0.461-0.36 0.769-0.36 0.553 0 1.001 0.448 1.001 1.001 0 0.245-0.088 0.469-0.233 0.643l0.001-0.002-10 12c-0.185 0.22-0.46 0.358-0.767 0.358-0.001 0-0.002 0-0.003 0h0z"></path>\n</svg>\n',GiftIcon:r,FireIcon:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>fire</title>\n<path d="M21.56 3.009c-0.052-0.047-0.116-0.065-0.173-0.103-0.073-0.048-0.143-0.1-0.223-0.132-0.083-0.033-0.165-0.047-0.252-0.063-0.081-0.016-0.16-0.035-0.243-0.035-0.089 0-0.172 0.020-0.26 0.037-0.080 0.016-0.159 0.028-0.236 0.059-0.084 0.035-0.157 0.088-0.235 0.14-0.053 0.036-0.115 0.053-0.165 0.097-0.049 0.044-0.988 0.895-2.288 2.255-2.364-2.839-4.476-4.815-4.576-4.908-0.056-0.052-0.127-0.075-0.188-0.115-0.075-0.049-0.143-0.105-0.224-0.137-0.080-0.032-0.163-0.041-0.245-0.057-0.085-0.016-0.167-0.040-0.252-0.040-0.084 0-0.163 0.023-0.245 0.039-0.087 0.016-0.172 0.025-0.253 0.059-0.080 0.032-0.147 0.087-0.22 0.135-0.063 0.041-0.133 0.064-0.189 0.116-0.453 0.423-11.092 10.408-11.092 18.095 0 7.977 4.935 13.549 12 13.549h8.667c6.673 0 11.333-5.115 11.333-12.439 0-7.052-10.013-16.167-10.44-16.552zM20.667 29.333h-7.777c-2.924 0-4.889-2.044-4.889-5.084 0-2.317 2.816-6.441 4.888-8.887 0.76 0.909 2.755 3.397 3.969 5.869 0.212 0.431 0.639 0.715 1.117 0.743 0.489 0.031 0.937-0.203 1.197-0.605 0.552-0.849 1.109-1.596 1.497-2.093 1.491 1.897 3.331 4.78 3.331 6.399 0 2.188-1.34 3.659-3.333 3.659zM26.537 27.052c0.081-0.44 0.129-0.899 0.129-1.377 0-3.269-3.713-7.847-4.46-8.735l-0.523-0.617c-0.507-0.599-1.528-0.599-2.035 0l-0.531 0.627c-0.147 0.175-0.495 0.599-0.936 1.187-1.595-2.597-3.495-4.776-3.595-4.889l-0.697-0.793c-0.507-0.577-1.499-0.577-2.004 0l-0.697 0.795c-0.6 0.684-5.856 6.803-5.856 11.001 0 0.881 0.127 1.712 0.356 2.484-1.896-1.933-3.023-4.821-3.023-8.283 0-4.915 6.073-11.997 9.329-15.255 1.001 1.008 2.692 2.789 4.368 4.927 0.243 0.309 0.609 0.496 1.001 0.509h0.048c0.376 0 0.735-0.159 0.988-0.439 0.889-0.981 1.693-1.795 2.269-2.359 3.051 2.965 8.663 9.323 8.663 13.727 0 3.171-1.031 5.769-2.796 7.491z"></path>\n</svg>\n',SpecialDiscountIcon:c,TagMoneyIcon:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>tag-money</title>\n<path d="M20.567 11.433c-0.521-0.521-1.364-0.521-1.885 0l-0.524 0.524c-1.28-0.819-3.091-0.681-4.191 0.419-0.631 0.631-0.976 1.468-0.976 2.359 0 0.889 0.347 1.727 0.976 2.357l0.943 0.943c0.171 0.171 0.195 0.368 0.195 0.472s-0.025 0.301-0.196 0.472c-0.169 0.169-0.367 0.195-0.471 0.195s-0.301-0.025-0.472-0.195l-2.357-2.357c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l0.944 0.941-0.472 0.472c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l0.519-0.519c0.54 0.359 1.173 0.553 1.837 0.553 0.892 0 1.729-0.348 2.357-0.976 0.631-0.631 0.976-1.467 0.976-2.357s-0.347-1.727-0.976-2.357l-0.943-0.943c-0.26-0.26-0.26-0.684 0-0.944 0.259-0.259 0.683-0.261 0.944 0l1.885 1.887c0.521 0.521 1.364 0.521 1.885 0 0.521-0.52 0.521-1.364 0-1.885l-0.472-0.472 0.472-0.472c0.521-0.521 0.521-1.365 0.001-1.887zM28 0h-9.344c-1.059 0-2.056 0.411-2.809 1.153l-14.673 14.456c-1.56 1.56-1.561 4.097-0.001 5.657l9.56 9.56c0.755 0.755 1.76 1.172 2.828 1.173h0.003c1.068 0 2.072-0.416 2.833-1.179l14.451-14.668c0.743-0.753 1.153-1.751 1.153-2.809v-9.344c0-2.205-1.795-4-4-4zM29.333 13.344c0 0.353-0.137 0.685-0.385 0.937l-14.444 14.661c-0.252 0.252-0.587 0.391-0.941 0.391-0.001 0-0.001 0-0.001 0-0.356-0.001-0.691-0.139-0.943-0.392l-9.561-9.56c-0.52-0.52-0.52-1.365-0.005-1.88l14.667-14.449c0.253-0.248 0.585-0.385 0.937-0.385h9.344c0.736 0 1.333 0.597 1.333 1.333zM24 6.673c-0.737 0-1.333 0.604-1.333 1.341s0.596 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.015c0-0.737-0.596-1.327-1.333-1.327z"></path>\n</svg>\n'},this.visibleOffersCount=3,this.handleCartItemUpdated=s=>{const t=s.data.cart.items.find((s=>s.id===this.itemId));t?.id===this.itemId&&(this.internalQuantity=t.quantity,this.internalOffers=t.detailed_offers||[],this.internalProductPrice=t.product_price)},this.toggleShowAll=()=>{this.showAll=!this.showAll}}async componentWillLoad(){await Salla.onReady(),await salla.lang.onLoaded((()=>{this.freeLabel=salla.lang.get("common.elements.freeExclam"),this.receivedOffer=salla.lang.get("pages.cart.received_offer"),this.discountAmountLabel=salla.lang.get("pages.cart.discount_amount"),this.showMoreOffers=salla.lang.get("pages.cart.show_more_offers")})),this.internalQuantity=this.quantity,this.internalOffers=this.parseOffers(this.offers),this.internalProductPrice=this.productPrice}componentDidLoad(){salla.event.on("cart::item.updated",(s=>this.handleCartItemUpdated(s)))}parseOffers(s){try{return"string"!=typeof s?(console.warn("Offers is not a string. Returning as-is.",s),Array.isArray(s)?s:[]):JSON.parse(s||"[]")}catch(s){return console.error("Failed to parse offers",s),[]}}get visibleOffers(){return this.internalOffers.slice(0,this.visibleOffersCount)}get hiddenOffers(){return this.internalOffers.slice(this.visibleOffersCount)}getPaidQty(s,t){return s-t.free_quantity}renderOffer(s,t){const e=this.getPaidQty(s,t);return i("div",{class:"s-cart-item-offers-box"},t.free_quantity>0&&e>0&&i("div",{class:"s-cart-item-offers-paid-free"},i("div",{class:"s-cart-item-offers-line"},salla.helpers.number(e)," × ",i("span",{innerHTML:salla.money(this.internalProductPrice)})),i("div",{class:"s-cart-item-offers-line"},salla.helpers.number(t.free_quantity)," ×",i("span",{class:"s-cart-item-offers-regular-price",innerHTML:salla.money(this.internalProductPrice)}),i("span",{class:"s-cart-item-offers-free-label"},this.freeLabel))),i("div",{class:"s-cart-item-offers-details"},i("span",{class:"s-cart-item-offers-icon",innerHTML:this.icons[t.discount_icon]||""}),i("div",null,i("p",{class:"s-cart-item-offers-title"},this.receivedOffer.replace(":offer",t.offer_name)),i("p",{class:"s-cart-item-offers-discount"},i("span",{innerHTML:this.discountAmountLabel.replace(":amount",salla.money(t.discount_amount.toFixed(2)))})))))}render(){return this.internalOffers?.length?i("div",{class:"s-cart-item-offers-container",id:"offers_list_"+this.itemId},this.visibleOffers.map((s=>this.renderOffer(this.internalQuantity,s))),this.internalOffers?.length>this.visibleOffersCount&&i("div",{class:"s-cart-item-offers-show-more"},i("button",{class:"s-cart-item-offers-show-more-btn",onClick:this.toggleShowAll,type:"button"},i("span",{class:"s-cart-item-offers-show-more-label"},"+",this.hiddenOffers.length," ",this.showMoreOffers,i("span",{innerHTML:a,class:{"s-cart-item-offers-arrow-icon":!0,"s-cart-item-offers-arrow-open":this.showAll}})))),this.showAll&&i("div",{class:"s-cart-item-offers-collapsed",id:"offers_"+this.itemId},this.hiddenOffers.map((s=>this.renderOffer(this.internalQuantity,s))))):null}static get style(){return":host{display:block}"}},[0,"salla-cart-item-offers",{quantity:[2],offers:[1],itemId:[2,"item-id"],productPrice:[2,"product-price"],internalQuantity:[32],internalOffers:[32],internalProductPrice:[32],showAll:[32],freeLabel:[32],receivedOffer:[32],discountAmountLabel:[32],showMoreOffers:[32]}]);function n(){"undefined"!=typeof customElements&&["salla-cart-item-offers"].forEach((t=>{"salla-cart-item-offers"===t&&(customElements.get(s(t))||customElements.define(s(t),o))}))}n();const l=o,h=n;export{l as SallaCartItemOffers,h as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { S as SpecialDiscountIcon } from './special-discount.js';
+import { l as loyaltyProgramIcon } from './gift.js';
+import { A as ArrowDown } from './keyboard_arrow_down.js';
+
+var TagMoneyIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>tag-money</title>
+<path d="M20.567 11.433c-0.521-0.521-1.364-0.521-1.885 0l-0.524 0.524c-1.28-0.819-3.091-0.681-4.191 0.419-0.631 0.631-0.976 1.468-0.976 2.359 0 0.889 0.347 1.727 0.976 2.357l0.943 0.943c0.171 0.171 0.195 0.368 0.195 0.472s-0.025 0.301-0.196 0.472c-0.169 0.169-0.367 0.195-0.471 0.195s-0.301-0.025-0.472-0.195l-2.357-2.357c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l0.944 0.941-0.472 0.472c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l0.519-0.519c0.54 0.359 1.173 0.553 1.837 0.553 0.892 0 1.729-0.348 2.357-0.976 0.631-0.631 0.976-1.467 0.976-2.357s-0.347-1.727-0.976-2.357l-0.943-0.943c-0.26-0.26-0.26-0.684 0-0.944 0.259-0.259 0.683-0.261 0.944 0l1.885 1.887c0.521 0.521 1.364 0.521 1.885 0 0.521-0.52 0.521-1.364 0-1.885l-0.472-0.472 0.472-0.472c0.521-0.521 0.521-1.365 0.001-1.887zM28 0h-9.344c-1.059 0-2.056 0.411-2.809 1.153l-14.673 14.456c-1.56 1.56-1.561 4.097-0.001 5.657l9.56 9.56c0.755 0.755 1.76 1.172 2.828 1.173h0.003c1.068 0 2.072-0.416 2.833-1.179l14.451-14.668c0.743-0.753 1.153-1.751 1.153-2.809v-9.344c0-2.205-1.795-4-4-4zM29.333 13.344c0 0.353-0.137 0.685-0.385 0.937l-14.444 14.661c-0.252 0.252-0.587 0.391-0.941 0.391-0.001 0-0.001 0-0.001 0-0.356-0.001-0.691-0.139-0.943-0.392l-9.561-9.56c-0.52-0.52-0.52-1.365-0.005-1.88l14.667-14.449c0.253-0.248 0.585-0.385 0.937-0.385h9.344c0.736 0 1.333 0.597 1.333 1.333zM24 6.673c-0.737 0-1.333 0.604-1.333 1.341s0.596 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.015c0-0.737-0.596-1.327-1.333-1.327z"></path>
+</svg>
+`;
+
+var FireIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>fire</title>
+<path d="M21.56 3.009c-0.052-0.047-0.116-0.065-0.173-0.103-0.073-0.048-0.143-0.1-0.223-0.132-0.083-0.033-0.165-0.047-0.252-0.063-0.081-0.016-0.16-0.035-0.243-0.035-0.089 0-0.172 0.020-0.26 0.037-0.080 0.016-0.159 0.028-0.236 0.059-0.084 0.035-0.157 0.088-0.235 0.14-0.053 0.036-0.115 0.053-0.165 0.097-0.049 0.044-0.988 0.895-2.288 2.255-2.364-2.839-4.476-4.815-4.576-4.908-0.056-0.052-0.127-0.075-0.188-0.115-0.075-0.049-0.143-0.105-0.224-0.137-0.080-0.032-0.163-0.041-0.245-0.057-0.085-0.016-0.167-0.040-0.252-0.040-0.084 0-0.163 0.023-0.245 0.039-0.087 0.016-0.172 0.025-0.253 0.059-0.080 0.032-0.147 0.087-0.22 0.135-0.063 0.041-0.133 0.064-0.189 0.116-0.453 0.423-11.092 10.408-11.092 18.095 0 7.977 4.935 13.549 12 13.549h8.667c6.673 0 11.333-5.115 11.333-12.439 0-7.052-10.013-16.167-10.44-16.552zM20.667 29.333h-7.777c-2.924 0-4.889-2.044-4.889-5.084 0-2.317 2.816-6.441 4.888-8.887 0.76 0.909 2.755 3.397 3.969 5.869 0.212 0.431 0.639 0.715 1.117 0.743 0.489 0.031 0.937-0.203 1.197-0.605 0.552-0.849 1.109-1.596 1.497-2.093 1.491 1.897 3.331 4.78 3.331 6.399 0 2.188-1.34 3.659-3.333 3.659zM26.537 27.052c0.081-0.44 0.129-0.899 0.129-1.377 0-3.269-3.713-7.847-4.46-8.735l-0.523-0.617c-0.507-0.599-1.528-0.599-2.035 0l-0.531 0.627c-0.147 0.175-0.495 0.599-0.936 1.187-1.595-2.597-3.495-4.776-3.595-4.889l-0.697-0.793c-0.507-0.577-1.499-0.577-2.004 0l-0.697 0.795c-0.6 0.684-5.856 6.803-5.856 11.001 0 0.881 0.127 1.712 0.356 2.484-1.896-1.933-3.023-4.821-3.023-8.283 0-4.915 6.073-11.997 9.329-15.255 1.001 1.008 2.692 2.789 4.368 4.927 0.243 0.309 0.609 0.496 1.001 0.509h0.048c0.376 0 0.735-0.159 0.988-0.439 0.889-0.981 1.693-1.795 2.269-2.359 3.051 2.965 8.663 9.323 8.663 13.727 0 3.171-1.031 5.769-2.796 7.491z"></path>
+</svg>
+`;
+
+var DiscountCouponIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>discount-coupon</title>
+<path d="M27 28h-22c-0.552 0-1-0.448-1-1v0c0-1.657-1.343-3-3-3v0c-0.552 0-1-0.448-1-1v0-12c0-0.552 0.448-1 1-1v0c1.657 0 3-1.343 3-3v0c0-0.552 0.448-1 1-1v0h22c0.552 0 1 0.448 1 1v0c0 1.657 1.343 3 3 3v0c0.552 0 1 0.448 1 1v0 12c0 0.552-0.448 1-1 1v0c-1.657 0-3 1.343-3 3v0c0 0.552-0.448 1-1 1v0zM5.9 26h20.2c0.415-1.964 1.936-3.485 3.867-3.894l0.033-0.006v-10.2c-1.964-0.415-3.485-1.936-3.894-3.867l-0.006-0.033h-20.2c-0.415 1.964-1.936 3.485-3.867 3.894l-0.033 0.006v10.2c1.964 0.415 3.485 1.936 3.894 3.867l0.006 0.033zM20 7h2v3h-2v-3zM20 12h2v4h-2v-4zM20 18h2v4h-2v-4zM20 24h2v3h-2v-3zM9 16c-1.657 0-3-1.343-3-3s1.343-3 3-3c1.657 0 3 1.343 3 3v0c0 1.657-1.343 3-3 3v0zM9 12c-0.552 0-1 0.448-1 1s0.448 1 1 1c0.552 0 1-0.448 1-1v0c0-0.552-0.448-1-1-1v0zM15 24c-1.657 0-3-1.343-3-3s1.343-3 3-3c1.657 0 3 1.343 3 3v0c0 1.657-1.343 3-3 3v0zM15 20c-0.552 0-1 0.448-1 1s0.448 1 1 1c0.552 0 1-0.448 1-1v0c0-0.552-0.448-1-1-1v0zM7 24c-0.552-0-1-0.448-1-1 0-0.244 0.088-0.468 0.233-0.642l-0.001 0.002 10-12c0.185-0.221 0.461-0.36 0.769-0.36 0.553 0 1.001 0.448 1.001 1.001 0 0.245-0.088 0.469-0.233 0.643l0.001-0.002-10 12c-0.185 0.22-0.46 0.358-0.767 0.358-0.001 0-0.002 0-0.003 0h0z"></path>
+</svg>
+`;
+
+const sallaCartItemOffersCss = ":host{display:block}";
+
+const SallaCartItemOffers$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartItemOffers extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.internalOffers = [];
+        this.showAll = false;
+        // Translations
+        this.freeLabel = '';
+        this.receivedOffer = '';
+        this.discountAmountLabel = '';
+        this.showMoreOffers = '';
+        this.icons = {
+            DiscountCouponIcon,
+            GiftIcon: loyaltyProgramIcon,
+            FireIcon,
+            SpecialDiscountIcon,
+            TagMoneyIcon,
+        };
+        this.visibleOffersCount = 3;
+        this.handleCartItemUpdated = (event) => {
+            const updatedItem = event.data.cart.items.find((item) => item.id === this.itemId);
+            if (updatedItem?.id === this.itemId) {
+                this.internalQuantity = updatedItem.quantity;
+                this.internalOffers = updatedItem.detailed_offers || [];
+                this.internalProductPrice = updatedItem.product_price;
+            }
+        };
+        this.toggleShowAll = () => {
+            this.showAll = !this.showAll;
+        };
+    }
+    async componentWillLoad() {
+        await Salla.onReady();
+        await salla.lang.onLoaded(() => {
+            this.freeLabel = salla.lang.get('common.elements.freeExclam');
+            this.receivedOffer = salla.lang.get('pages.cart.received_offer');
+            this.discountAmountLabel = salla.lang.get('pages.cart.discount_amount');
+            this.showMoreOffers = salla.lang.get('pages.cart.show_more_offers');
+        });
+        this.internalQuantity = this.quantity;
+        this.internalOffers = this.parseOffers(this.offers);
+        this.internalProductPrice = this.productPrice;
+    }
+    componentDidLoad() {
+        salla.event.on('cart::item.updated', (event) => this.handleCartItemUpdated(event));
+    }
+    parseOffers(offers) {
+        try {
+            if (typeof offers !== 'string') {
+                console.warn('Offers is not a string. Returning as-is.', offers);
+                return Array.isArray(offers) ? offers : [];
+            }
+            return JSON.parse(offers || '[]');
+        }
+        catch (e) {
+            console.error('Failed to parse offers', e);
+            return [];
+        }
+    }
+    get visibleOffers() {
+        return this.internalOffers.slice(0, this.visibleOffersCount);
+    }
+    get hiddenOffers() {
+        return this.internalOffers.slice(this.visibleOffersCount);
+    }
+    getPaidQty(quantity, offer) {
+        return quantity - offer.free_quantity;
+    }
+    renderOffer(quantity, offer) {
+        const paidQty = this.getPaidQty(quantity, offer);
+        return (h("div", { class: "s-cart-item-offers-box" }, offer.free_quantity > 0 && paidQty > 0 && (h("div", { class: "s-cart-item-offers-paid-free" }, h("div", { class: "s-cart-item-offers-line" }, salla.helpers.number(paidQty), " \u00D7 ", h("span", { innerHTML: salla.money(this.internalProductPrice) })), h("div", { class: "s-cart-item-offers-line" }, salla.helpers.number(offer.free_quantity), " \u00D7", h("span", { class: "s-cart-item-offers-regular-price", innerHTML: salla.money(this.internalProductPrice) }), h("span", { class: "s-cart-item-offers-free-label" }, this.freeLabel)))), h("div", { class: "s-cart-item-offers-details" }, h("span", { class: `s-cart-item-offers-icon`, innerHTML: this.icons[offer.discount_icon] || '' }), h("div", null, h("p", { class: "s-cart-item-offers-title" }, this.receivedOffer.replace(':offer', offer.offer_name)), h("p", { class: "s-cart-item-offers-discount" }, h("span", { innerHTML: this.discountAmountLabel.replace(':amount', salla.money(offer.discount_amount.toFixed(2))) }))))));
+    }
+    render() {
+        if (!this.internalOffers?.length) {
+            return null;
+        }
+        return (h("div", { class: "s-cart-item-offers-container", id: `offers_list_${this.itemId}` }, this.visibleOffers.map((offer) => this.renderOffer(this.internalQuantity, offer)), this.internalOffers?.length > this.visibleOffersCount && (h("div", { class: "s-cart-item-offers-show-more" }, h("button", { class: "s-cart-item-offers-show-more-btn", onClick: this.toggleShowAll, type: "button" }, h("span", { class: "s-cart-item-offers-show-more-label" }, "+", this.hiddenOffers.length, " ", this.showMoreOffers, h("span", { innerHTML: ArrowDown, class: {
+                's-cart-item-offers-arrow-icon': true,
+                's-cart-item-offers-arrow-open': this.showAll,
+            } }))))), this.showAll && (h("div", { class: "s-cart-item-offers-collapsed", id: `offers_${this.itemId}` }, this.hiddenOffers.map((offer) => this.renderOffer(this.internalQuantity, offer))))));
+    }
+    static get style() { return sallaCartItemOffersCss; }
+}, [0, "salla-cart-item-offers", {
+        "quantity": [2],
+        "offers": [1],
+        "itemId": [2, "item-id"],
+        "productPrice": [2, "product-price"],
+        "internalQuantity": [32],
+        "internalOffers": [32],
+        "internalProductPrice": [32],
+        "showAll": [32],
+        "freeLabel": [32],
+        "receivedOffer": [32],
+        "discountAmountLabel": [32],
+        "showMoreOffers": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-cart-item-offers"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-cart-item-offers":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaCartItemOffers$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaCartItemOffers = SallaCartItemOffers$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaCartItemOffers, defineCustomElement };

package/dist/components/salla-cart-summary.js

@@ -1,4 +1,139 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as a,proxyCustomElement as t,HTMLElement as e,h as s,Host as c}from"@stencil/core/internal/client";import{P as r}from"./cart.js";import{a as n}from"./anime.es.js";const o=t(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.cartSummaryCount=salla.storage.get("cart.summary.count")||0,this.cartSummaryTotal=salla.storage.get("cart.summary.total")||0,this.cartLabel="ar"===salla.config.get("user.language_code")?"السلة":"Cart",salla.cart.event.onUpdated((a=>{this.cartSummaryCount=a.count||0,this.cartSummaryTotal=a.total||0}))}async animateToCart(a){if(document.querySelectorAll(".s-cart-thumb").forEach((a=>a.remove())),!a?.src)return void salla.log("Failed to get the img element");let t=this.host.querySelector("#s-cart-icon"),e=t.getBoundingClientRect(),s=e.top+window.scrollY,c=e.left+window.scrollX,r=a.getBoundingClientRect(),o=a.offsetWidth+"px",i=a.offsetHeight+"px",l=r.top,d=r.left,m=document.createElement("img");m.src=a.getAttribute("src"),m.className="s-cart-thumb",m.setAttribute("style","object-fit:cover; width:"+o+"; height:"+i+"; top:"+l+"px; left:"+d+"px;z-index:99999999; "),document.body.append(m);let u=document.querySelector(".s-cart-thumb");t.classList.remove("animated","rubberBand"),(new n.timeline).add({targets:u,width:[150,30],height:[150,30],top:[l,window.scrollY>0?s-window.scrollY-40:s-40],left:[d,c],borderRadius:["20%","50%"],easing:"easeOutExpo",duration:1200},"+=200").add({targets:u,width:[30,0],height:[30,0],opacity:[1,0],easing:"easeOutExpo",top:[window.scrollY>0?s-window.scrollY-40:s-40,window.scrollY>0?s-window.scrollY+10:s+10],left:[c,c+10]},"-=500").add({complete:function(){t.classList.add("animated","rubberBand"),u.remove()}},"-=1700")}componentWillLoad(){return new Promise((a=>salla.onReady(a)))}getCartLink(){let a=salla.url.get("cart");const t=salla.storage.get("scope")||salla.config.get("store.scope");if(t&&t.id)try{const e=new URL(a);return e.searchParams.set("scope",t.id),t.allocation_type&&e.searchParams.set("allocation_type",t.allocation_type),t.allocation_id&&e.searchParams.set("allocation_id",t.allocation_id),""+e}catch(e){const s=a.includes("?")?"&":"?",c=new URLSearchParams;return c.set("scope",t.id+""),t.allocation_type&&c.set("allocation_type",t.allocation_type),t.allocation_id&&c.set("allocation_id",t.allocation_id),`${a}${s}${""+c}`}return a}render(){return s(c,{key:"918f027fd28cd25d653b8419f97223daaf22d428"},s("a",{key:"b74a2724ada356a01b915044d56dfb0f9953338e",class:"s-cart-summary-wrapper",href:this.getCartLink()},s("div",{key:"b9332fe1b66b895c1e9950efaa548f04eb053d46",id:"s-cart-icon"},s("slot",{key:"2b5c1cf8dea4ca23a54beeb83cfad44538ca3ab7",name:"icon"},s("i",{key:"f3145ed4a994762441d925280a3234d78c378bef",class:"s-cart-summary-icon",innerHTML:r}))),s("span",{key:"26a78adf9b279019504e995216ea5373b6866876",class:"s-cart-summary-count"},salla.helpers.number(this.cartSummaryCount)),s("p",{key:"60ad091221ed5cd3e2ac0d27ebc53ec9917ccd64",class:"s-cart-summary-content"},this.showCartLabel&&s("span",{key:"66819086b9ed7f6f21be2cd5e8baf0bc88021e40",class:"s-cart-summary-label"},this.cartLabel),s("b",{key:"a07c85971e50add3cdd5b51942e642d4daf19d82",class:"s-cart-summary-total",innerHTML:salla.money(this.cartSummaryTotal)}))))}get host(){return this}static get style(){return""}},[260,"salla-cart-summary",{showCartLabel:[4,"show-cart-label"],cartSummaryCount:[32],cartSummaryTotal:[32],cartLabel:[32],animateToCart:[64]}]);function i(){"undefined"!=typeof customElements&&["salla-cart-summary"].forEach((t=>{"salla-cart-summary"===t&&(customElements.get(a(t))||customElements.define(a(t),o))}))}i();const l=o,d=i;export{l as SallaCartSummary,d as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { P as PendingOrdersIcon } from './cart.js';
+import { a as anime } from './anime.es.js';
+
+const sallaCartSummaryCss = "";
+
+const SallaCartSummary$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartSummary extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.cartSummaryCount = salla.storage.get('cart.summary.count') || 0;
+        this.cartSummaryTotal = salla.storage.get('cart.summary.total') || 0;
+        this.cartLabel = salla.config.get('user.language_code') === 'ar' ? 'السلة' : 'Cart';
+        salla.cart.event.onUpdated((response) => {
+            this.cartSummaryCount = response.count || 0;
+            this.cartSummaryTotal = response.total || 0;
+        });
+    }
+    /**
+     * Animate product Image to cart summary
+     * @param image the image element to animate
+     */
+    async animateToCart(image) {
+        document.querySelectorAll('.s-cart-thumb').forEach(el => el.remove());
+        if (!image?.src) {
+            salla.log('Failed to get the img element');
+            return;
+        }
+        let cartBtn = this.host.querySelector('#s-cart-icon'), btnOffset = cartBtn.getBoundingClientRect(), btnTop = btnOffset.top + window.scrollY, btnLeft = btnOffset.left + window.scrollX;
+        // get thumb position ---
+        let position = image.getBoundingClientRect(), width = image.offsetWidth + 'px', height = image.offsetHeight + 'px', top = position.top, left = position.left;
+        // create thumb img element ---
+        let img = document.createElement("img");
+        img.src = image.getAttribute('src');
+        img.className = "s-cart-thumb";
+        img.setAttribute("style", "object-fit:cover; width:" + width + '; height:' + height + '; top:' + top + 'px; left:' + left + 'px;z-index:99999999; ');
+        document.body.append(img);
+        let cartThumb = document.querySelector('.s-cart-thumb');
+        cartBtn.classList.remove('animated', 'rubberBand');
+        // start timeline ---
+        let cartThumbAnime = new anime.timeline();
+        cartThumbAnime.add({
+            targets: cartThumb,
+            width: [150, 30],
+            height: [150, 30],
+            top: [top, window.scrollY > 0 ? btnTop - window.scrollY - 40 : btnTop - 40],
+            left: [left, btnLeft],
+            borderRadius: ['20%', '50%'],
+            easing: 'easeOutExpo',
+            duration: 1200,
+        }, '+=200')
+            .add({
+            targets: cartThumb,
+            width: [30, 0],
+            height: [30, 0],
+            opacity: [1, 0],
+            easing: 'easeOutExpo',
+            top: [window.scrollY > 0 ? btnTop - window.scrollY - 40 : btnTop - 40, window.scrollY > 0 ? btnTop - window.scrollY + 10 : btnTop + 10],
+            left: [btnLeft, btnLeft + 10],
+        }, '-=500')
+            .add({
+            complete: function () {
+                cartBtn.classList.add('animated', 'rubberBand');
+                cartThumb.remove();
+            },
+        }, '-=1700');
+    }
+    /**
+     * Some times it renderes with main domain, something like `https://salla.sa/cart`, because salla is not loaded,
+     * here, we are sure it will not be rendred unless salla is ready
+     */
+    componentWillLoad() {
+        return new Promise(resolve => salla.onReady(resolve));
+    }
+    /**
+     * Compute cart href with scope + allocation parameters.
+     * Uses storage (not config) so allocation_type/allocation_id set by bullet-delivery are included.
+     */
+    getCartLink() {
+        let cartUrl = salla.url.get('cart');
+        // Prefer storage over config: storage holds allocation_type/allocation_id, config only has type+id
+        const scope = salla.storage.get('scope') || salla.config.get('store.scope');
+        if (scope && scope.id) {
+            try {
+                const url = new URL(cartUrl);
+                url.searchParams.set('scope', scope.id);
+                if (scope.allocation_type)
+                    url.searchParams.set('allocation_type', scope.allocation_type);
+                if (scope.allocation_id)
+                    url.searchParams.set('allocation_id', scope.allocation_id);
+                return url.toString();
+            }
+            catch (e) {
+                const delimiter = cartUrl.includes('?') ? '&' : '?';
+                const params = new URLSearchParams();
+                params.set('scope', String(scope.id));
+                if (scope.allocation_type)
+                    params.set('allocation_type', scope.allocation_type);
+                if (scope.allocation_id)
+                    params.set('allocation_id', scope.allocation_id);
+                return `${cartUrl}${delimiter}${params.toString()}`;
+            }
+        }
+        return cartUrl;
+    }
+    render() {
+        return (h(Host, { key: '918f027fd28cd25d653b8419f97223daaf22d428' }, h("a", { key: 'b74a2724ada356a01b915044d56dfb0f9953338e', class: "s-cart-summary-wrapper", href: this.getCartLink() }, h("div", { key: 'b9332fe1b66b895c1e9950efaa548f04eb053d46', id: "s-cart-icon" }, h("slot", { key: '2b5c1cf8dea4ca23a54beeb83cfad44538ca3ab7', name: "icon" }, h("i", { key: 'f3145ed4a994762441d925280a3234d78c378bef', class: "s-cart-summary-icon", innerHTML: PendingOrdersIcon }))), h("span", { key: '26a78adf9b279019504e995216ea5373b6866876', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: '60ad091221ed5cd3e2ac0d27ebc53ec9917ccd64', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: '66819086b9ed7f6f21be2cd5e8baf0bc88021e40', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: 'a07c85971e50add3cdd5b51942e642d4daf19d82', class: "s-cart-summary-total", innerHTML: salla.money(this.cartSummaryTotal) })))));
+    }
+    get host() { return this; }
+    static get style() { return sallaCartSummaryCss; }
+}, [4, "salla-cart-summary", {
+        "showCartLabel": [4, "show-cart-label"],
+        "cartSummaryCount": [32],
+        "cartSummaryTotal": [32],
+        "cartLabel": [32],
+        "animateToCart": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-cart-summary"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-cart-summary":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaCartSummary$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaCartSummary = SallaCartSummary$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaCartSummary, defineCustomElement };

package/dist/components/salla-color-picker.js

@@ -1,4 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{S as o,d as r}from"./salla-color-picker2.js";const s=o,a=r;export{s as SallaColorPicker,a as defineCustomElement}
+import { S as SallaColorPicker$1, d as defineCustomElement$1 } from './salla-color-picker2.js';
+
+const SallaColorPicker = SallaColorPicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaColorPicker, defineCustomElement };

package/dist/components/salla-color-picker2.js

@@ -1,4 +1,263 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as s,h as o,Host as n}from"@stencil/core/internal/client";import{A as a}from"./keyboard_arrow_down.js";const r=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.colorChanged=s(this,"colorChanged",7),this.invalidInput=s(this,"invalidInput",7),this.submitted=s(this,"submitted",7),this.popupOpened=s(this,"popupOpened",7),this.popupClosed=s(this,"popupClosed",7),this.picker=null,this.pickerReady=null,this.name="color",this.required=!1,this.format="hex",this.showCancelButton=!1,this.showTextField=!0,this.enableAlpha=!1,this.updateViewportCache=()=>{this.cachedViewportWidth=this.getViewportWidthFromBreakpoints()},this.cachedViewportWidth=0}colorChangeHandler(t){this.colorInput&&(this.colorInput.value=t.hex),this.colorChanged.emit(t)}async submittedHandler(t){await this.setColorValue(t.rgbaString,!0),this.canvas&&(this.canvas.style.backgroundColor=t.rgbString),this.colorInput&&(this.colorInput.value=t.hex,this.colorInput.dispatchEvent(new window.Event("change",{bubbles:!0}))),this.submitted.emit(t)}popupOpenedHandler(t){requestAnimationFrame((()=>{requestAnimationFrame((()=>this.setPopInPosition()))})),this.popupOpened.emit(t)}popupClosedHandler(t){this.popupClosed.emit(t)}async ensurePicker(){if(this.picker)return this.picker;if(this.pickerReady)return await this.pickerReady;throw new Error("Color picker not initialized")}async setPickerOption(t){(await this.ensurePicker()).setOptions(t)}async movePopUp(t,i){(await this.ensurePicker()).movePopup(t,i)}async setColorValue(t,i){(await this.ensurePicker()).setColor(t,i)}async openPicker(){(await this.ensurePicker()).show()}async closePicker(){(await this.ensurePicker()).hide()}async destroyPicker(){(await this.ensurePicker()).destroy(),this.picker=null,this.pickerReady=null}disconnectedCallback(){window.removeEventListener("resize",this.updateViewportCache)}componentWillLoad(){salla.onReady((()=>{this.color=this.color?this.color:salla.config.get("theme.color.primary","#5dd5c4")}))}getViewportWidthFromBreakpoints(){return"undefined"==typeof window?1024:window.matchMedia("(min-width: 1200px)").matches?1200:window.matchMedia("(min-width: 992px)").matches?992:window.matchMedia("(min-width: 768px)").matches?768:375}setPopInPosition(){const t=this.cachedViewportWidth||this.getViewportWidthFromBreakpoints(),i=this.host.querySelector(".picker_wrapper"),e=this.host.querySelector(".s-color-picker-widget");if(!i||!e)return;const s=e.getBoundingClientRect(),o=t/2-s.width/2,n=o>s.x,a=o<s.x,r=o===s.x,h=!window.matchMedia("(min-width: 768px)").matches;h&&n&&(i.style.left="0"),h&&a&&(i.style.left="auto"),(!h||h&&(!a&&!n||r))&&(i.style.left="-95px")}initColorPicker(){this.pickerReady=import("./vanilla-picker.js").then((function(t){return t.v})).then((t=>{const i=new(0,t.default)({parent:this.host,color:this.color,popup:"bottom",alpha:this.enableAlpha,editor:this.showTextField,editorFormat:this.format,cancelButton:this.showCancelButton,onChange:t=>this.colorChangeHandler(t),onDone:t=>this.submittedHandler(t),onOpen:t=>this.popupOpenedHandler(t),onClose:t=>this.popupClosedHandler(t)});return this.picker=i,this.picker}))}render(){return o(n,{key:"2f142fd64afd5571574a7e1c40de3be16ede62e6",class:"s-color-picker-main"},o("slot",{key:"92acdf14b2f42ac52d0a632ba6840a5dcebfa4d4",name:"widget"},o("div",{key:"7ba074040299a91802109d0e1d2e78604e39d3a8",class:"s-color-picker-widget"},o("div",{key:"a6272207f79fd28e33b66e415a3e05b969ace983",class:"s-color-picker-widget-canvas",ref:t=>this.canvas=t}),o("span",{key:"e6fed242bb84fae6221cdec525658b68f7514ce7",innerHTML:a}))),o("input",{key:"9eb1673f44e663f939124da45fec79c401736203",class:"s-hidden",name:this.name,required:this.required,value:this.color,ref:t=>this.colorInput=t}))}componentDidLoad(){this.canvas&&(this.canvas.style.backgroundColor=this.color),this.initColorPicker(),requestAnimationFrame((()=>this.updateViewportCache())),window.addEventListener("resize",this.updateViewportCache),this.colorInput&&(this.colorInput.addEventListener("invalid",(t=>{this.invalidInput.emit(t)})),this.colorInput.addEventListener("input",(()=>{this.colorInput.setCustomValidity(""),this.colorInput.reportValidity()})))}get host(){return this}static get style(){return""}},[260,"salla-color-picker",{name:[1],required:[4],color:[1537],format:[1],showCancelButton:[4,"show-cancel-button"],showTextField:[4,"show-text-field"],enableAlpha:[4,"enable-alpha"],widgetColor:[32],setPickerOption:[64],movePopUp:[64],setColorValue:[64],openPicker:[64],closePicker:[64],destroyPicker:[64]}]);function h(){"undefined"!=typeof customElements&&["salla-color-picker"].forEach((i=>{"salla-color-picker"===i&&(customElements.get(t(i))||customElements.define(t(i),r))}))}h();export{r as S,h as d}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { A as ArrowDown } from './keyboard_arrow_down.js';
+
+const sallaColorPickerCss = "";
+
+const SallaColorPicker = /*@__PURE__*/ proxyCustomElement(class SallaColorPicker extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.colorChanged = createEvent(this, "colorChanged", 7);
+        this.invalidInput = createEvent(this, "invalidInput", 7);
+        this.submitted = createEvent(this, "submitted", 7);
+        this.popupOpened = createEvent(this, "popupOpened", 7);
+        this.popupClosed = createEvent(this, "popupClosed", 7);
+        /** Lazy-loaded to avoid bundling vanilla-picker (Babel polyfills) into main/hydrate bundle. */
+        this.picker = null;
+        this.pickerReady = null;
+        /**
+         * File input name for the native formData
+         */
+        this.name = 'color';
+        /**
+         * Set if the color picker input is required or not
+         */
+        this.required = false;
+        /**
+         * How to display the selected color in the text field
+         * (the text field still supports input in any format).
+         */
+        this.format = 'hex';
+        /**
+         * Whether to have a "Cancel" button which closes the popup.
+         */
+        this.showCancelButton = false;
+        /**
+         * Whether to show a text field for color value editing.
+         */
+        this.showTextField = true;
+        /**
+         * Whether to enable adjusting the alpha channel.
+         */
+        this.enableAlpha = false;
+        this.updateViewportCache = () => {
+            this.cachedViewportWidth = this.getViewportWidthFromBreakpoints();
+        };
+        this.cachedViewportWidth = 0; // Will be populated in componentDidLoad via requestAnimationFrame
+    }
+    colorChangeHandler(color) {
+        if (this.colorInput)
+            this.colorInput.value = color.hex;
+        this.colorChanged.emit(color);
+    }
+    async submittedHandler(color) {
+        await this.setColorValue(color.rgbaString, true);
+        if (this.canvas)
+            this.canvas.style.backgroundColor = color.rgbString;
+        if (this.colorInput) {
+            this.colorInput.value = color.hex;
+            this.colorInput.dispatchEvent(new window.Event('change', { bubbles: true }));
+        }
+        this.submitted.emit(color);
+    }
+    popupOpenedHandler(color) {
+        // Double rAF: defer setPopInPosition (getBoundingClientRect) until after paint to avoid forced reflow
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => this.setPopInPosition());
+        });
+        this.popupOpened.emit(color);
+    }
+    popupClosedHandler(color) {
+        this.popupClosed.emit(color);
+    }
+    /** Methods */
+    async ensurePicker() {
+        if (this.picker)
+            return this.picker;
+        if (this.pickerReady)
+            return await this.pickerReady;
+        throw new Error('Color picker not initialized');
+    }
+    /**
+     * Set the picker options.
+     *
+     * (Usually a new .parent and .color).
+     * @param {Object} options
+     */
+    async setPickerOption(options) {
+        const picker = await this.ensurePicker();
+        picker.setOptions(options);
+    }
+    /**
+     * Move the popup to a different parent, optionally opening it at the same time.
+     *
+     * (Usually a new .parent and .color).
+     * @param {Options} option
+     *
+     * Whether to open the popup immediately.
+     * @param {boolean} openImmediately
+     */
+    async movePopUp(options, openImmediately) {
+        const picker = await this.ensurePicker();
+        picker.movePopup(options, openImmediately);
+    }
+    /**
+     * Set/initialize the picker's color.
+     *
+     * Color name, RGBA/HSLA/HEX string, or RGBA array.
+     * @param {string} color
+     *
+     * If true, won't trigger onChange.
+     * @param {boolean} triggerEvent
+     */
+    async setColorValue(color, triggerEvent) {
+        const picker = await this.ensurePicker();
+        picker.setColor(color, triggerEvent);
+    }
+    /**
+     * Show/open the picker.
+     */
+    async openPicker() {
+        const picker = await this.ensurePicker();
+        picker.show();
+    }
+    /**
+     * Close/Hide the picker.
+     */
+    async closePicker() {
+        const picker = await this.ensurePicker();
+        picker.hide();
+    }
+    /**
+     * Release all resources used by this picker instance.
+     */
+    async destroyPicker() {
+        const picker = await this.ensurePicker();
+        picker.destroy();
+        this.picker = null;
+        this.pickerReady = null;
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateViewportCache);
+    }
+    componentWillLoad() {
+        salla.onReady(() => {
+            this.color = this.color ? this.color : salla.config.get('theme.color.primary', '#5dd5c4');
+        });
+    }
+    /**
+     * Returns viewport width from matchMedia breakpoints (no layout read).
+     * Must match updateViewportCache breakpoints for consistency.
+     */
+    getViewportWidthFromBreakpoints() {
+        if (typeof window === 'undefined')
+            return 1024;
+        if (window.matchMedia('(min-width: 1200px)').matches)
+            return 1200;
+        if (window.matchMedia('(min-width: 992px)').matches)
+            return 992;
+        if (window.matchMedia('(min-width: 768px)').matches)
+            return 768;
+        return 375;
+    }
+    setPopInPosition() {
+        // Use cached viewport width – reading innerWidth at popup open causes forced reflow.
+        // Fallback: matchMedia-based value when cache is 0 (e.g. SSR before hydration). Same breakpoints as updateViewportCache.
+        const viewportWidth = this.cachedViewportWidth || this.getViewportWidthFromBreakpoints();
+        const popup = this.host.querySelector('.picker_wrapper');
+        const widgetEl = this.host.querySelector('.s-color-picker-widget');
+        if (!popup || !widgetEl)
+            return;
+        const widgetPosition = widgetEl.getBoundingClientRect();
+        const widgetToWindowEq = viewportWidth / 2 - widgetPosition.width / 2;
+        const widgetInLeft = widgetToWindowEq > widgetPosition.x;
+        const widgetInRight = widgetToWindowEq < widgetPosition.x;
+        const widgetInCenter = widgetToWindowEq === widgetPosition.x;
+        const isMobile = !window.matchMedia('(min-width: 768px)').matches;
+        if (isMobile && widgetInLeft) {
+            popup.style.left = '0';
+        }
+        if (isMobile && widgetInRight) {
+            popup.style.left = 'auto';
+        }
+        if (!isMobile || (isMobile && ((!widgetInRight && !widgetInLeft) || widgetInCenter))) {
+            popup.style.left = `-95px`;
+        }
+    }
+    initColorPicker() {
+        this.pickerReady = import('./vanilla-picker.js').then(function (n) { return n.v; }).then(mod => {
+            const Picker = mod.default;
+            const picker = new Picker({
+                parent: this.host,
+                color: this.color,
+                popup: 'bottom',
+                alpha: this.enableAlpha,
+                editor: this.showTextField,
+                editorFormat: this.format,
+                cancelButton: this.showCancelButton,
+                onChange: (color) => this.colorChangeHandler(color),
+                onDone: (color) => this.submittedHandler(color),
+                onOpen: (color) => this.popupOpenedHandler(color),
+                onClose: (color) => this.popupClosedHandler(color),
+            });
+            this.picker = picker;
+            return this.picker;
+        });
+    }
+    render() {
+        return (h(Host, { key: '2f142fd64afd5571574a7e1c40de3be16ede62e6', class: "s-color-picker-main" }, h("slot", { key: '92acdf14b2f42ac52d0a632ba6840a5dcebfa4d4', name: "widget" }, h("div", { key: '7ba074040299a91802109d0e1d2e78604e39d3a8', class: "s-color-picker-widget" }, h("div", { key: 'a6272207f79fd28e33b66e415a3e05b969ace983', class: "s-color-picker-widget-canvas", ref: dv => (this.canvas = dv) }), h("span", { key: 'e6fed242bb84fae6221cdec525658b68f7514ce7', innerHTML: ArrowDown }))), h("input", { key: '9eb1673f44e663f939124da45fec79c401736203', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => (this.colorInput = color) })));
+    }
+    componentDidLoad() {
+        if (this.canvas)
+            this.canvas.style.backgroundColor = this.color;
+        this.initColorPicker();
+        // Populate viewport cache in next frame (avoids forced reflow during initial render)
+        requestAnimationFrame(() => this.updateViewportCache());
+        window.addEventListener('resize', this.updateViewportCache);
+        if (this.colorInput) {
+            this.colorInput.addEventListener('invalid', e => {
+                this.invalidInput.emit(e);
+            });
+            this.colorInput.addEventListener('input', () => {
+                this.colorInput.setCustomValidity('');
+                this.colorInput.reportValidity();
+            });
+        }
+    }
+    get host() { return this; }
+    static get style() { return sallaColorPickerCss; }
+}, [4, "salla-color-picker", {
+        "name": [1],
+        "required": [4],
+        "color": [1537],
+        "format": [1],
+        "showCancelButton": [4, "show-cancel-button"],
+        "showTextField": [4, "show-text-field"],
+        "enableAlpha": [4, "enable-alpha"],
+        "widgetColor": [32],
+        "setPickerOption": [64],
+        "movePopUp": [64],
+        "setColorValue": [64],
+        "openPicker": [64],
+        "closePicker": [64],
+        "destroyPicker": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-color-picker"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-color-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaColorPicker);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaColorPicker as S, defineCustomElement as d };

package/dist/components/salla-comment-form.js

@@ -1,4 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{S as o,d as m}from"./salla-comment-form2.js";const s=o,a=m;export{s as SallaCommentForm,a as defineCustomElement}
+import { S as SallaCommentForm$1, d as defineCustomElement$1 } from './salla-comment-form2.js';
+
+const SallaCommentForm = SallaCommentForm$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaCommentForm, defineCustomElement };