@salla.sa/twilight-components 2.14.573 → 2.14.575

package/dist/components/salla-product-card2.js

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as HeartIcon } from './heart.js';
 import { R as Rate } from './star2.js';
 import { P as PendingOrdersIcon } from './cart.js';
 import { d as defineCustomElement$j } from './salla-add-product-button2.js';
@@ -24,13 +25,6 @@ import { d as defineCustomElement$3 } from './salla-quick-buy2.js';
 import { d as defineCustomElement$2 } from './salla-slider2.js';
 import { d as defineCustomElement$1 } from './salla-tel-input2.js';
 
-var Heart = `<!-- 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>heart</title>
-<path d="M23.333 2.267c-3.547 0-5.779 1.605-7.333 3.061-1.555-1.456-3.787-3.061-7.333-3.061-5.955 0-8.667 5.045-8.667 9.733 0 8.503 10.147 14.735 15.513 16.841 0.156 0.061 0.321 0.092 0.487 0.092s0.331-0.031 0.487-0.092c5.367-2.107 15.513-8.339 15.513-16.841 0-4.688-2.712-9.733-8.667-9.733zM16 26.161c-5.537-2.309-13.333-7.799-13.333-14.161 0-3.517 1.856-7.067 6-7.067 2.983 0 4.656 1.451 6.384 3.203 0.5 0.508 1.399 0.508 1.899 0 1.728-1.752 3.401-3.203 6.384-3.203 4.144 0 6 3.549 6 7.067 0 6.363-7.796 11.852-13.333 14.161z"></path>
-</svg>
-`;
-
 const sallaProductCardCss = "/*!twlt*/.s-product-card-image::before{font-family:\"sallaicons\";content:\"\\ec1f\" !important}.s-product-card-content-pie-svg circle{transition:stroke-dashoffset 1s linear;-webkit-transition:stroke-dashoffset 1s linear;-moz-transition:stroke-dashoffset 1s linear;-ms-transition:stroke-dashoffset 1s linear;-o-transition:stroke-dashoffset 1s linear;stroke:#E8EDF2;stroke-width:2px;stroke-linecap:round;fill:none}.s-product-card-content-pie-svg-bar{stroke:var(--color-primary) !important;stroke-dasharray:100 100;stroke-dashoffset:100}.text-xl{font-size:1.25rem;line-height:1.75rem}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline{outline-style:solid}.has-error .s-form-control,.has-error .s-tel-input-control,.has-error .s-datetime-picker-input{border-color:#ff443a;color:#ff443a}.s-form-control{display:block;width:100%;border-radius:var(--s-radius, 0.25rem);border-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:0.5rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.s-form-control:focus{border-color:var(--color-primary);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.s-product-card-entry{position:relative;display:flex;height:100%;justify-content:space-between;border-radius:var(--s-radius, 0.25rem);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-product-card-shadow:hover{box-shadow:5px 10px 30px #2b2d340d}.s-product-card-out-of-stock img.loaded{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-product-card-overlay{position:absolute;top:0px;bottom:0px;left:0px;right:0px;--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));opacity:0.5;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:700ms}.s-product-card-overlay:hover{opacity:0.4}.s-product-card-vertical{flex-direction:column}.s-product-card-vertical .s-product-card-image{flex:1 1 0%;border-top-left-radius:var(--s-radius, 0.25rem);border-top-right-radius:var(--s-radius, 0.25rem)}.s-product-card-vertical .s-product-card-wishlist-btn{position:absolute;top:0.5rem;right:0.5rem;opacity:0.75}.s-product-card-vertical .s-product-card-wishlist-btn:hover{opacity:1}@media (min-width: 768px){.s-product-card-vertical .s-product-card-wishlist-btn{right:0.5rem}}.s-product-card-vertical .s-product-card-wishlist-btn:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:0.5rem;right:unset}@media (min-width: 768px){.s-product-card-vertical .s-product-card-wishlist-btn:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:0.5rem;right:unset}}.s-product-card-minimal .s-product-card-wishlist-btn{position:absolute;top:0px;right:0px;opacity:0.75}.s-product-card-minimal .s-product-card-wishlist-btn:hover{opacity:1}@media (min-width: 768px){.s-product-card-minimal .s-product-card-wishlist-btn{right:0px}}.s-product-card-minimal .s-product-card-wishlist-btn:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:0px;right:unset}@media (min-width: 768px){.s-product-card-minimal .s-product-card-wishlist-btn:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:0px;right:unset}}.s-product-card-minimal .s-product-card-image{width:8rem}@media (min-width: 640px){.s-product-card-minimal .s-product-card-image{width:14rem}}@media (min-width: 1024px){.s-product-card-minimal .s-product-card-image{width:7rem}}.s-product-card-minimal .s-product-card-content-title a{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.s-product-card-minimal .s-product-card-content{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden;padding:1.25rem}.s-product-card-minimal .s-product-card-wishlist-btn button{margin:0px;background-color:transparent}.s-product-card-minimal .s-product-card-wishlist-btn button svg,.s-product-card-full-image .s-product-card-wishlist-btn button svg{height:1rem;width:1rem;fill:#fff}.s-product-card-vertical .s-product-card-wishlist-btn button{margin:0px;--tw-bg-opacity:1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important}.s-product-card-wishlist-btn button:hover svg{fill:#4b5563}.s-product-card-fit-height .s-product-card-image{height:11rem;max-height:15rem}.s-product-card-quantity{position:absolute;bottom:0.25rem;left:50%;z-index:1;max-width:calc(100% - 60px);--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:var(--s-radius, 0.25rem);--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity, 1));padding-left:0.625rem;padding-right:0.625rem;padding-top:0.375rem;padding-bottom:0.375rem;font-size:0.75rem;line-height:1rem;font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}@media (min-width: 768px){.s-product-card-quantity{padding-top:0.5rem;padding-bottom:0.5rem}}.s-product-card-promotion-title{position:absolute;top:1rem;left:0px;z-index:1;max-width:calc(100% - 60px);border-top-right-radius:var(--s-radius, 0.25rem);border-bottom-right-radius:var(--s-radius, 0.25rem);--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity, 1));padding-left:0.625rem;padding-right:0.625rem;padding-top:0.375rem;padding-bottom:0.375rem;font-size:0.75rem;line-height:1rem;font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}@media (min-width: 768px){.s-product-card-promotion-title{padding-top:0.5rem;padding-bottom:0.5rem}}.s-product-card-promotion-title:where([dir=\"rtl\"],[dir=\"rtl\"] *){right:0px;left:unset;border-top-left-radius:var(--s-radius, 0.25rem);border-bottom-left-radius:var(--s-radius, 0.25rem);border-top-right-radius:0px;border-bottom-right-radius:0px}.s-product-card-out-badge{position:absolute;bottom:0.5rem;left:50%;z-index:1;max-width:calc(100% - 60px);--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));padding-left:0.625rem;padding-right:0.625rem;padding-top:0.375rem;padding-bottom:0.375rem;font-size:0.75rem;line-height:1rem;font-weight:700;--tw-text-opacity:1;color:rgb(153 153 153 / var(--tw-text-opacity, 1))}@media (min-width: 768px){.s-product-card-out-badge{padding-top:0.5rem;padding-bottom:0.5rem}}.s-product-card-image{position:relative;height:100%;width:100%;flex-shrink:0;overflow:hidden;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.s-product-card-image::before{position:absolute;top:50%;left:50%;display:inline-block;--tw-translate-x:-50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));font-size:1.875rem;line-height:2.25rem;content:var(--tw-content);--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.s-product-card-image:hover{opacity:0.9}.s-product-card-image img{height:100%;width:100%;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms}.s-product-card-image img.lazy{opacity:0}.s-product-card-image img.loaded{position:relative;opacity:1}.s-product-card-content{position:relative;display:flex;flex-direction:column;padding:0.75rem}@media (min-width: 640px){.s-product-card-content{padding:1.25rem}}.s-product-card-content-title{margin-bottom:0.625rem;max-width:100%;line-height:1.5rem}.s-product-card-content-subtitle{margin-bottom:0.625rem;font-size:0.875rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-product-card-special .s-product-card-content-main,special .s-product-card-content-sub{padding-right:6rem}.s-product-card-special .s-product-card-content-main:where([dir=\"rtl\"],[dir=\"rtl\"] *),special .s-product-card-content-sub:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-left:6rem;padding-right:0px}.s-product-card-donation-input{flex:1 1 0%}.s-product-card-donation-input label{margin-bottom:0.625rem;display:block;font-size:0.875rem;line-height:1.25rem}.s-product-card-donation-input label span{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.s-product-card-content-title a{display:block;text-align:start;font-size:0.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.s-product-card-content-title a:hover{color:var(--color-primary)}.s-product-card-content-sub{margin-bottom:1.25rem;display:flex;width:100%;align-items:center;justify-content:space-between}.s-product-card-out-of-stock-label{font-size:0.75rem;line-height:1rem;font-weight:700;--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.s-product-card-rating{display:flex;align-items:center}.s-product-card-rating>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.25rem * var(--tw-space-x-reverse));margin-left:calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))}.s-product-card-rating{font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-product-card-rating:where([dir=\"rtl\"],[dir=\"rtl\"] *)>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}.s-product-card-rating span svg{margin-bottom:3px;height:1rem;width:1rem;fill:#fbbf24}.s-product-card-content-footer{margin-top:auto;display:flex;align-items:center}.s-product-card-sale-price>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.25rem * var(--tw-space-x-reverse));margin-left:calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))}.s-product-card-sale-price:where([dir=\"rtl\"],[dir=\"rtl\"] *)>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}.s-product-card-sale-price span{font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));text-decoration-line:line-through}.s-product-card-starting-price{display:flex;width:100%;align-items:center;justify-content:space-between}.s-product-card-starting-price h4{display:inline-block;font-size:0.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.s-product-card-price-value{display:inline-block;font-size:0.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.s-product-card-image-cover{object-fit:cover}.s-product-card-image-contain{object-fit:contain}.s-product-card-content-pie{position:absolute;top:0.625rem;right:1.25rem;display:flex;height:72px;width:72px;align-items:center;justify-content:center;color:var(--color-primary)}.s-product-card-content-pie:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:1.25rem;right:unset}.s-product-card-content-pie span{position:absolute;top:43%;left:50%;display:flex;--tw-translate-y:-50%;--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:0.75rem;line-height:1rem;line-height:1;--tw-text-opacity:1;color:rgb(124 128 130 / var(--tw-text-opacity, 1))}.s-product-card-content-pie span b{font-size:1.25rem;line-height:1.75rem;font-weight:700;color:var(--color-primary)}.s-product-card-content-extra-padding{padding-right:6rem}.s-product-card-content-extra-padding:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-left:6rem;padding-right:0px}.s-product-card-wishlist-added svg{fill:#ef4444}.s-product-card-horizontal .s-product-card-image{height:auto;width:8rem}@media (min-width: 640px){.s-product-card-horizontal .s-product-card-image{width:14rem}}.s-product-card-horizontal .s-product-card-image:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-top-left-radius:var(--s-radius, 0.25rem);border-bottom-left-radius:var(--s-radius, 0.25rem)}.s-product-card-horizontal .s-product-card-image:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-top-right-radius:var(--s-radius, 0.25rem);border-bottom-right-radius:var(--s-radius, 0.25rem)}.s-product-card-horizontal .s-product-card-quantity{max-width:unset}.s-product-card-horizontal .s-product-card-content-title a{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.s-product-card-horizontal .s-product-card-promotion-title{max-width:unset}.s-product-card-horizontal .s-product-card-out-badge{max-width:unset}.s-product-card-horizontal .s-product-card-content{margin-bottom:0.625rem;width:100%}.s-product-card-full-image{height:20rem;overflow:hidden}@media (min-width: 768px){.s-product-card-full-image{height:auto}}.s-product-card-full-image .s-product-card-content{position:absolute;bottom:0px;z-index:10;width:100%;padding-left:2.5rem;padding-right:2.5rem;padding-top:1.25rem;padding-bottom:1.75rem}.s-product-card-full-image img{position:relative;height:100%;width:100%;overflow:hidden;border-radius:var(--s-radius, 0.25rem)}.s-product-card-full-image img:hover{opacity:0.9}.s-product-card-full-image .s-product-card-image a{height:100%;width:100%}.s-product-card-full-image .s-product-card-content-title a{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.s-product-card-full-image .s-product-card-content-title a:hover{color:var(--color-primary)}.s-product-card-full-image .s-product-card-content-subtitle{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.s-product-card-full-image .s-product-card-price-value{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.s-product-card-full-image .s-product-card-sale-price{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.s-product-card-full-image .s-product-card-sale-price span{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.s-product-card-image-full{width:100%}.s-product-card-compact{display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:0.75rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-top:0.75rem;padding-bottom:0.75rem;padding-left:0px;padding-right:0px;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms}.s-product-card-compact .s-product-card-content-footer{margin-top:0px;flex-shrink:0;gap:0.5rem}.s-product-card-add-to-cart-icon svg{height:1rem;width:1rem;fill:currentColor}.s-product-card-compact .s-add-product-button-compact salla-button .s-button-btn{height:2rem;border-radius:0.375rem;border-width:1px;border-color:var(--color-primary);background-color:transparent;padding-left:0.75rem;padding-right:0.75rem;font-size:0.75rem;line-height:1rem;font-weight:500;color:var(--color-primary);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms}.s-product-card-compact .s-add-product-button-compact salla-button .s-button-btn:hover{border-color:var(--color-primary);background-color:var(--color-primary);--tw-bg-opacity:0.1;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.s-product-card-compact .s-product-card-content{min-width:0px;flex:1 1 0%;padding:0px;text-align:right}.s-product-card-compact .s-product-card-content-main{margin-bottom:0.25rem}.s-product-card-compact .s-product-card-content-title{font-size:0.875rem;line-height:1.25rem;font-weight:500;line-height:1.25;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.s-product-card-compact .s-product-card-content-title a{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-weight:500}.s-product-card-compact .s-product-card-content-subtitle{margin-top:0.25rem;display:none;font-size:0.75rem;line-height:1rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-product-card-compact .s-product-card-content-sub{display:flex;align-items:center;justify-content:flex-start;gap:0.5rem;font-size:0.75rem;line-height:1rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-product-card-compact .s-product-card-content-sub h4{margin:0px}.s-product-card-compact .s-product-card-starting-price h4{font-weight:700}.s-product-card-compact .s-product-card-starting-price{justify-content:flex-start;gap:0.25rem}.s-product-card-compact .s-product-card-image{height:5rem;width:5rem;flex-shrink:0;border-radius:0.375rem}.s-product-card-compact .s-product-card-image img{height:100%;width:100%;border-radius:0.375rem;object-fit:cover}.s-product-card-compact .s-product-card-promotion-title{display:none}.s-search-grid-item .s-product-card-out-badge{--tw-bg-opacity:1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}";
 
 const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class SallaProductCard extends HTMLElement {
@@ -168,7 +162,7 @@ const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class SallaProductCard
                 : this.fitImageHeight
                     ? this.fitImageHeight
                     : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: '57a7f91ea104bab4727f17dd45e837b2521fdf8a', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
-            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: '16e23d6cdd67e90a3b06238a32135885c280508d', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
+            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: HeartIcon })) : ''), h("div", { key: '16e23d6cdd67e90a3b06238a32135885c280508d', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
             h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
             : '', h("div", { key: 'af150cdc2b9aa7cbe3cd6ffc32f5a11171a53dd1', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: 'fea0aa2c44be7439b103298e63947f8a2fbf149b', class: "s-product-card-content-title" }, h("a", { key: 'f32166bb5a42aab0253f5e0c0771958065ef34ab', ...hrefProp }, this.getDisplayTitle())), this.productData?.subtitle && !this.minimal ?
             h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
@@ -187,11 +181,11 @@ const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class SallaProductCard
             ? h("salla-count-down", { date: this.formatDate(this.productData.discount_ends), "end-of-day": true, boxed: true, labeled: true })
             : '', !this.hideAddBtn && !this.compact ?
             h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { fill: "outline", width: "wide", ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type }, this.renderAddToCartLabel()), this.horizontal || this.fullImage ?
-                h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick(), "data-id": "{{ product.id }}" }, h("span", { class: "text-xl", innerHTML: Heart }))
+                h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick(), "data-id": "{{ product.id }}" }, h("span", { class: "text-xl", innerHTML: HeartIcon }))
                 : '')
             : ''), !this.hideAddBtn && this.compact ?
             h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type, class: "s-add-product-button-compact" }, this.renderAddToCartLabel()), this.forceShowWishlistButton ?
-                h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart }))
+                h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: HeartIcon }))
                 : '')
             : ''));
     }

package/dist/components/salla-rating-modal-v2.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { a as SallaRatingModalV2$1, d as defineCustomElement$1 } from './salla-rating-modal-v22.js';
+import { b as SallaRatingModalV2$1, d as defineCustomElement$1 } from './salla-rating-modal-v22.js';
 
 const SallaRatingModalV2 = SallaRatingModalV2$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/salla-rating-modal-v22.js

@@ -2,7 +2,6 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { W as WishListIcon } from './star.js';
 import { C as CheckCircle2 } from './check-circle2.js';
 import { H as Helper } from './Helper.js';
 import { I as ImageIcon } from './image.js';
@@ -25,6 +24,13 @@ var ShippingFast = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
+var Star = `<!-- 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>star</title>
+<path d="M31.819 12.077c-0.367-0.883-1.209-1.411-2.259-1.411h-8.437l-2.681-8.871c-0.347-1.075-1.329-1.796-2.443-1.796s-2.096 0.721-2.447 1.805l-2.788 8.861h-8.275c-1.076 0-1.939 0.533-2.308 1.427-0.375 0.904-0.159 2.012 0.525 2.693 0.044 0.044 0.092 0.085 0.141 0.124l6.811 5.101-2.773 8.567c-0.344 1.063 0.019 2.228 0.899 2.899 0.459 0.351 1.001 0.527 1.544 0.527 0.528 0 1.056-0.165 1.511-0.499l7.159-5.267 7.161 5.268c0.896 0.659 2.168 0.645 3.051-0.028 0.884-0.671 1.245-1.836 0.901-2.9l-2.773-8.567 6.811-5.101c0.051-0.037 0.099-0.080 0.143-0.124 0.687-0.687 0.904-1.8 0.528-2.709zM21.976 18.448c-0.456 0.343-0.644 0.936-0.469 1.477l3.044 9.293-7.763-5.711c-0.235-0.173-0.513-0.259-0.791-0.259s-0.556 0.085-0.791 0.259l-7.713 5.676 2.997-9.257c0.175-0.541-0.013-1.136-0.469-1.477l-6.829-5.116h8.551c0.583 0 1.097-0.377 1.272-0.933l2.981-9.479 2.861 9.465c0.169 0.561 0.688 0.947 1.276 0.947h8.672z"></path>
+</svg>
+`;
+
 const MAX_IMAGE_UPLOAD_LIMIT = 10;
 const MAX_VIDEO_UPLOAD_LIMIT = 5;
 const MAX_VIDEO_FILE_SIZE = '100MB';
@@ -1423,7 +1429,7 @@ const SallaRatingModalV2 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
             return (h(Host, { class: "s-rating-modal" }, h("salla-modal", { class: "s-rating-modal-wrap", onModalVisibilityChanged: isOpen => this.resetData(isOpen), isLoading: true, width: "custom", customWidth: MODAL_WIDTH, ref: modal => {
                     if (modal)
                         this.modal = modal;
-                } }, h("div", { slot: "loading" }, h("div", { class: "s-rating-modal-skeleton" }, h("salla-skeleton", { type: "circle", height: "80px", width: "80px" }), h("salla-skeleton", { height: "15px", width: "60%" }), h("salla-skeleton", { height: "10px", width: "30%" }), h("div", { class: "s-rating-modal-skeleton-stars" }, [...Array(5)].map(v => (h("div", { key: v, innerHTML: WishListIcon })))), h("salla-skeleton", { height: "100px", width: "100%" }), h("div", { class: "s-rating-modal-skeleton-footer" }, h("salla-skeleton", { height: "40px", width: "30%" })))), !this.hasError && this.order ? ([
+                } }, h("div", { slot: "loading" }, h("div", { class: "s-rating-modal-skeleton" }, h("salla-skeleton", { type: "circle", height: "80px", width: "80px" }), h("salla-skeleton", { height: "15px", width: "60%" }), h("salla-skeleton", { height: "10px", width: "30%" }), h("div", { class: "s-rating-modal-skeleton-stars" }, [...Array(5)].map(v => (h("div", { key: v, innerHTML: Star })))), h("salla-skeleton", { height: "100px", width: "100%" }), h("div", { class: "s-rating-modal-skeleton-footer" }, h("salla-skeleton", { height: "40px", width: "30%" })))), !this.hasError && this.order ? ([
                 h("div", { class: "s-rating-modal-wrapper", ref: el => {
                         if (el)
                             this.body = el;
@@ -1665,4 +1671,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { ShippingFast as S, SallaRatingModalV2 as a, defineCustomElement as d };
+export { ShippingFast as S, Star as a, SallaRatingModalV2 as b, defineCustomElement as d };

package/dist/components/salla-rating-modal2.js

@@ -6,8 +6,7 @@ import { a as anime } from './anime.es.js';
 import { C as CheckCircle2 } from './check-circle2.js';
 import { I as ImageIcon } from './image.js';
 import { M as MailIcon } from './mail.js';
-import { d as defineCustomElement$4, S as ShippingFast } from './salla-rating-modal-v22.js';
-import { W as WishListIcon } from './star.js';
+import { d as defineCustomElement$4, S as ShippingFast, a as Star } from './salla-rating-modal-v22.js';
 import { W as WhatsappIcon } from './whatsapp2.js';
 import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$a } from './salla-attachment-view2.js';
@@ -478,7 +477,7 @@ const SallaRatingModal = /*@__PURE__*/ proxyCustomElement(class SallaRatingModal
             return h(Host, { class: "s-rating-modal" }, this.getEditModal());
         }
         if (this.defaultMode) {
-            return (h(Host, { class: "s-rating-modal" }, h("salla-modal", { class: "s-rating-modal-wrap", onModalVisibilityChanged: (isOpen) => this.resetData(isOpen), isLoading: true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: 'loading' }, h("div", { class: "s-rating-modal-skeleton" }, h("salla-skeleton", { type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { height: '15px', width: '60%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("div", { class: "s-rating-modal-skeleton-stars" }, [...Array(5)].map((v) => h("div", { key: v, innerHTML: WishListIcon }))), h("salla-skeleton", { height: '100px', width: '100%' }), h("div", { class: "s-rating-modal-skeleton-footer" }, h("salla-skeleton", { height: '40px', width: '30%' })))), !this.hasError && this.order
+            return (h(Host, { class: "s-rating-modal" }, h("salla-modal", { class: "s-rating-modal-wrap", onModalVisibilityChanged: (isOpen) => this.resetData(isOpen), isLoading: true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: 'loading' }, h("div", { class: "s-rating-modal-skeleton" }, h("salla-skeleton", { type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { height: '15px', width: '60%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("div", { class: "s-rating-modal-skeleton-stars" }, [...Array(5)].map((v) => h("div", { key: v, innerHTML: Star }))), h("salla-skeleton", { height: '100px', width: '100%' }), h("div", { class: "s-rating-modal-skeleton-footer" }, h("salla-skeleton", { height: '40px', width: '30%' })))), !this.hasError && this.order
                 ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el }, this.order?.testimonials_enabled ?
                         h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" }, h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })), h("h2", { class: "s-rating-modal-title" }, salla.lang.get('pages.rating.rate_the_store')), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))
                         : '', this.order.products_enabled

package/dist/components/salla-user-menu.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { A as ArrowDown } from './keyboard_arrow_down.js';
 import { B as BellRing } from './bell-ring.js';
 import { P as PendingOrdersIcon } from './cart.js';
-import { W as WishListIcon } from './star.js';
+import { H as HeartIcon } from './heart.js';
 import { C as Cancel } from './cancel.js';
 import { R as Rate } from './star2.js';
 import { l as loyaltyProgramIcon } from './gift.js';
@@ -112,7 +112,7 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
             notifications: BellRing,
             orders: OrderIcon,
             pending_orders: PendingOrdersIcon,
-            wishlist: WishListIcon,
+            wishlist: HeartIcon,
             wallet: WalletIcon,
             loyalty_points: loyaltyProgramIcon,
             profile: UserCircle

package/dist/components/salla-wishlist-summary.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaWishlistSummary extends Components.SallaWishlistSummary, HTMLElement {}
+export const SallaWishlistSummary: {
+    prototype: SallaWishlistSummary;
+    new (): SallaWishlistSummary;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,67 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as HeartIcon } from './heart.js';
+import { H as Helper } from './Helper.js';
+
+const sallaWishlistSummaryCss = "/*!twlt*/:host{display:inline-flex;align-items:center;margin-inline-start:1rem}.hidden{display:none}.s-wishlist-summary-wrapper{position:relative;margin-inline-start:0.75rem;display:inline-flex;align-items:center;border-style:none;text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms}.s-wishlist-summary-wrapper:hover{opacity:0.8}.s-wishlist-summary-icon{display:inline-flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-color:var(--color-border,#e5e7eb);color:var(--color-text-primary,#374151)}.s-wishlist-summary-icon svg{height:1.25rem;width:1.25rem;fill:currentColor}.s-wishlist-summary-count{position:absolute;top:-4px;left:-6px;display:inline-flex;height:1.25rem;width:1.25rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity, 1));padding:0.25rem;font-size:0.75rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.s-wishlist-summary-count:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:unset;right:-6px}";
+
+const SallaWishlistSummary$1 = /*@__PURE__*/ proxyCustomElement(class SallaWishlistSummary extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.isEnabled = false;
+        this.wishlistCount = 0;
+        this.wishlistLabel = salla.lang.get('common.titles.wishlist');
+        salla.wishlist.event.onAdded(() => this.syncCount());
+        salla.wishlist.event.onRemoved(() => this.syncCount());
+        // Server hydration (packages/twilight/src/api/wishlist.js syncStorageFromServer)
+        // rewrites `salla::wishlist` in storage after the add/remove events above have
+        // already fired, or without either firing at all — re-sync once it settles so
+        // the badge doesn't stay stale.
+        salla.event.on('wishlist::storage.synced', () => this.syncCount());
+    }
+    componentWillLoad() {
+        return new Promise(resolve => salla.onReady(() => {
+            const plan = Helper.getPlanName();
+            this.isEnabled = !!plan && ['basic', 'plus'].includes(plan);
+            this.syncCount();
+            resolve();
+        }));
+    }
+    syncCount() {
+        this.wishlistCount = (salla.storage.get('salla::wishlist', []) || []).length;
+    }
+    render() {
+        const is_guest = salla.config.isGuest();
+        if (!this.isEnabled || is_guest) {
+            return h(Host, { hidden: true });
+        }
+        return (h(Host, null, h("a", { class: "s-wishlist-summary-wrapper", href: salla.url.get('account/wishlist'), "aria-label": this.wishlistLabel }, h("i", { class: "s-wishlist-summary-icon", innerHTML: HeartIcon }), this.wishlistCount > 0 && (h("span", { class: "s-wishlist-summary-count" }, salla.helpers.number(this.wishlistCount))))));
+    }
+    static get style() { return sallaWishlistSummaryCss; }
+}, [0, "salla-wishlist-summary", {
+        "isEnabled": [32],
+        "wishlistCount": [32],
+        "wishlistLabel": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-wishlist-summary"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-wishlist-summary":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaWishlistSummary$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaWishlistSummary = SallaWishlistSummary$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaWishlistSummary, defineCustomElement };

package/dist/components/translate.js

@@ -0,0 +1,18 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+/**
+ * Translate with a real fallback.
+ *
+ * `salla.lang.get(key, replacements, locale)` takes a LOCALE as its third
+ * argument, not a fallback, and lang.js echoes the key back when it has no
+ * translation. Passing a fallback there silently asks for a nonsense locale and
+ * still renders the raw key to the customer, which is what a store shows while
+ * its translation bundle has not yet picked up newly added keys.
+ */
+function translate(key, replacements, fallback) {
+    const value = salla.lang.get(key, replacements);
+    return !value || value === key ? fallback : value;
+}
+
+export { translate as t };