@salla.sa/twilight-components 2.14.393 → 2.14.395

package/dist/components/salla-products-slider.js

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

package/dist/components/salla-products-slider2.js

@@ -1,4 +1,218 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as a,h as l,Host as e}from"@stencil/core/internal/client";import{H as r}from"./Helper.js";import{d as i}from"./salla-add-product-button2.js";import{d as o}from"./salla-button2.js";import{d as c}from"./salla-count-down2.js";import{d}from"./salla-loading2.js";import{d as u}from"./salla-modal2.js";import{d as n}from"./salla-product-availability2.js";import{d as p}from"./salla-product-card2.js";import{d as m}from"./salla-progress-bar2.js";import{d as h}from"./salla-quick-buy2.js";import{d as b}from"./salla-slider2.js";import{d as f}from"./salla-tel-input2.js";const k=t(class extends a{constructor(s){super(),!1!==s&&this.__registerHost(),this.productCardComponent="custom-salla-product-card",this.apiUrl=""}componentWillLoad(){return salla.onReady().then((()=>{if(this.includes=r.parseJson(this.includes||this.host.getAttribute("includes")),Array.isArray(this.includes)||(this.includes=null),r.setIncludes(this.includes),this.sourceValueIsValid=!(!this.getSourceValue()&&!this.isSourceWithoutValue()),this.sourceValueIsValid){if(this.hasCustomComponent=!!customElements.get(this.productCardComponent),"json"===this.source)return this.productsData=this.getSourceValue(),void(this.isReady=!0);if("related"!=this.getSource()||salla.config.get("store.settings.product.related_products_enabled"))return salla.api.withoutNotifier((()=>salla.product.api.fetch({source:r.getApiSource(this.getSource()),source_value:this.getSourceValue(),limit:this.limit}))).then((s=>r.injectExtraFieldsToResponse(s))).then((s=>{this.productsData=s.data,this.isReady=!0,s.source=this.getSource(),s.sourceValue=this.getSourceValue(),salla.event.emit("salla-products-slider::products.fetched",s.data)}));this.isReady=!1}else salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`)}))}componentDidRender(){let s=0;const t=setInterval((()=>{this.host.querySelectorAll('[loading="lazy"]')?.forEach((s=>s.removeAttribute("loading"))),s++,s>=10&&clearInterval(t)}),1e3)}async componentDidLoad(){await Salla.hooks.registerComponent("salla-products-slider",this)}isSourceWithoutValue(){return["offers","latest","sales","top-rated"].includes(this.getSource())}getItemHTML(s){const t="landing-page"===this.getSource();t&&(s.url="");const a=t?void 0:()=>{r.saveProductSource(this.getSource())};if(this.hasCustomComponent&&"custom-salla-product-card"==this.productCardComponent.toLowerCase())return l("div",{class:"s-products-slider-card",onClick:a},l("custom-salla-product-card",{product:s,source:this.getSource(),"source-value":this.getSourceValue()}));if(this.hasCustomComponent){const t=document.createElement(this.productCardComponent);return t.setAttribute("product",JSON.stringify(s)),t.setAttribute("source",this.getSource()),t.setAttribute("source-value",this.getSourceValue()),l("div",{class:"s-products-slider-card",onClick:a,innerHTML:t.outerHTML})}return l("div",{class:"s-products-slider-card",onClick:a},l("salla-product-card",{"show-quantity":t,"hide-add-btn":t,"shadow-on-hover":!0,product:s}))}canRender(){return this.sourceValueIsValid&&this.isReady}getSource(){return r.getProductsSource(this.source)}getSourceValue(){return r.getProductsSourceValue(this.source,this.sourceValue)}render(){if(this.canRender())return l(e,{class:"s-products-slider-wrapper"},l("salla-slider",{class:"s-products-slider-slider",id:this.sliderId||`s-products-slider-${Math.random().toString(36).substr(2,9)}`,...this.sliderProps||{},"auto-play":this.autoplay,type:"carousel","block-title":this.blockTitle,"block-subTitle":this.subTitle,"display-all-url":this.displayAllUrl,sliderConfig:this.sliderConfig?this.sliderConfig:null},l("div",{slot:"items"},this.productsData?.map((s=>this.getItemHTML(s))))))}get host(){return this}static get style(){return""}},[0,"salla-products-slider",{blockTitle:[1,"block-title"],subTitle:[1,"sub-title"],sliderId:[1,"slider-id"],displayAllUrl:[1,"display-all-url"],autoplay:[1028],source:[1537],sourceValue:[1,"source-value"],limit:[1026],sliderConfig:[520,"slider-config"],sliderProps:[16],productCardComponent:[1,"product-card-component"],includes:[1040],productsData:[32],isReady:[32],sourceValueIsValid:[32],hasCustomComponent:[32],apiUrl:[32],parsedSourceValue:[32]}]);function g(){"undefined"!=typeof customElements&&["salla-products-slider","salla-add-product-button","salla-button","salla-count-down","salla-loading","salla-modal","salla-product-availability","salla-product-card","salla-progress-bar","salla-quick-buy","salla-slider","salla-tel-input"].forEach((t=>{switch(t){case"salla-products-slider":customElements.get(s(t))||customElements.define(s(t),k);break;case"salla-add-product-button":customElements.get(s(t))||i();break;case"salla-button":customElements.get(s(t))||o();break;case"salla-count-down":customElements.get(s(t))||c();break;case"salla-loading":customElements.get(s(t))||d();break;case"salla-modal":customElements.get(s(t))||u();break;case"salla-product-availability":customElements.get(s(t))||n();break;case"salla-product-card":customElements.get(s(t))||p();break;case"salla-progress-bar":customElements.get(s(t))||m();break;case"salla-quick-buy":customElements.get(s(t))||h();break;case"salla-slider":customElements.get(s(t))||b();break;case"salla-tel-input":customElements.get(s(t))||f()}}))}g();export{k as S,g as d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$b } from './salla-add-product-button2.js';
+import { d as defineCustomElement$a } from './salla-button2.js';
+import { d as defineCustomElement$9 } from './salla-count-down2.js';
+import { d as defineCustomElement$8 } from './salla-loading2.js';
+import { d as defineCustomElement$7 } from './salla-modal2.js';
+import { d as defineCustomElement$6 } from './salla-product-availability2.js';
+import { d as defineCustomElement$5 } from './salla-product-card2.js';
+import { d as defineCustomElement$4 } from './salla-progress-bar2.js';
+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';
+
+const sallaProductsSliderCss = "";
+
+const SallaProductsSlider = /*@__PURE__*/ proxyCustomElement(class SallaProductsSlider extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Custom Card Component for the Salla Products Slider.
+         *
+         * This component allows you to customize the appearance of individual product cards within a Salla Products Slider.
+         *
+         * @example
+         * <salla-products-slider product-card-component="my-custom-card-style1" ...
+         * <salla-products-slider product-card-component="my-custom-card-style2" ...
+         */
+        this.productCardComponent = 'custom-salla-product-card';
+        this.apiUrl = '';
+    }
+    componentWillLoad() {
+        return salla.onReady()
+            .then(() => {
+            //TODO:: check why `this.includes` not working!!
+            this.includes = Helper.parseJson(this.includes || this.host.getAttribute('includes'));
+            if (!Array.isArray(this.includes)) {
+                this.includes = null;
+            }
+            Helper.setIncludes(this.includes);
+            this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());
+            if (!this.sourceValueIsValid) {
+                salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);
+                return;
+            }
+            this.hasCustomComponent = !!customElements.get(this.productCardComponent);
+            if (this.source === 'json') {
+                this.productsData = this.getSourceValue();
+                this.isReady = true;
+                return;
+            }
+            if ((this.getSource() == 'related' && !salla.config.get('store.settings.product.related_products_enabled'))) {
+                this.isReady = false;
+                return;
+            }
+            return salla.api.withoutNotifier(() => salla.product.api.fetch({
+                source: Helper.getApiSource(this.getSource()),
+                source_value: this.getSourceValue(),
+                limit: this.limit
+            }))
+                .then(response => Helper.injectExtraFieldsToResponse(response))
+                .then(response => {
+                this.productsData = response.data;
+                this.isReady = true;
+                response.source = this.getSource();
+                response.sourceValue = this.getSourceValue();
+                salla.event.emit('salla-products-slider::products.fetched', response.data);
+            });
+        });
+    }
+    componentDidRender() {
+        let processedCount = 0;
+        const intervalId = setInterval(() => {
+            this.host.querySelectorAll('[loading="lazy"]')?.forEach(img => img.removeAttribute('loading'));
+            processedCount++;
+            if (processedCount >= 10) {
+                clearInterval(intervalId);
+            }
+        }, 1000);
+    }
+    async componentDidLoad() {
+        await Salla.hooks.registerComponent('salla-products-slider', this);
+    }
+    isSourceWithoutValue() {
+        return ['offers', 'latest', 'sales', 'top-rated'].includes(this.getSource());
+    }
+    getItemHTML(product) {
+        //as a request they don't want to let the user to open the product details
+        //todo:: find a better way to handle this request
+        const isLandingPage = this.getSource() === 'landing-page';
+        isLandingPage && (product.url = '');
+        const handleClick = isLandingPage ? undefined : () => {
+            Helper.saveProductSource(this.getSource());
+        };
+        if (this.hasCustomComponent && this.productCardComponent.toLowerCase() == 'custom-salla-product-card') {
+            return h("div", { class: "s-products-slider-card", onClick: handleClick }, h("custom-salla-product-card", { product: product, source: this.getSource(), "source-value": this.getSourceValue() }));
+        }
+        if (this.hasCustomComponent) {
+            const customElem = document.createElement(this.productCardComponent);
+            customElem.setAttribute('product', JSON.stringify(product));
+            customElem.setAttribute('source', this.getSource());
+            customElem.setAttribute('source-value', this.getSourceValue());
+            return h("div", { class: "s-products-slider-card", onClick: handleClick, innerHTML: customElem.outerHTML });
+        }
+        return h("div", { class: "s-products-slider-card", onClick: handleClick }, h("salla-product-card", { "show-quantity": isLandingPage, "hide-add-btn": isLandingPage, "shadow-on-hover": true, product: product }));
+    }
+    canRender() {
+        return this.sourceValueIsValid && this.isReady;
+    }
+    getSource() {
+        return Helper.getProductsSource(this.source);
+    }
+    getSourceValue() {
+        return Helper.getProductsSourceValue(this.source, this.sourceValue);
+    }
+    render() {
+        if (!this.canRender()) {
+            return;
+        }
+        return (h(Host, { class: "s-products-slider-wrapper" }, h("salla-slider", { class: "s-products-slider-slider", id: this.sliderId || `s-products-slider-${Math.random().toString(36).substr(2, 9)}`, ...(this.sliderProps || {}), "auto-play": this.autoplay, type: "carousel", "block-title": this.blockTitle, "block-subTitle": this.subTitle, "display-all-url": this.displayAllUrl, sliderConfig: this.sliderConfig ? this.sliderConfig : null }, h("div", { slot: "items" }, this.productsData?.map(product => this.getItemHTML(product))))));
+    }
+    get host() { return this; }
+    static get style() { return sallaProductsSliderCss; }
+}, [0, "salla-products-slider", {
+        "blockTitle": [1, "block-title"],
+        "subTitle": [1, "sub-title"],
+        "sliderId": [1, "slider-id"],
+        "displayAllUrl": [1, "display-all-url"],
+        "autoplay": [1028],
+        "source": [1537],
+        "sourceValue": [1, "source-value"],
+        "limit": [1026],
+        "sliderConfig": [520, "slider-config"],
+        "sliderProps": [16, "slider-props"],
+        "productCardComponent": [1, "product-card-component"],
+        "includes": [1040],
+        "productsData": [32],
+        "isReady": [32],
+        "sourceValueIsValid": [32],
+        "hasCustomComponent": [32],
+        "apiUrl": [32],
+        "parsedSourceValue": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-products-slider", "salla-add-product-button", "salla-button", "salla-count-down", "salla-loading", "salla-modal", "salla-product-availability", "salla-product-card", "salla-progress-bar", "salla-quick-buy", "salla-slider", "salla-tel-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-products-slider":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaProductsSlider);
+            }
+            break;
+        case "salla-add-product-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-count-down":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-product-availability":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-product-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-quick-buy":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-tel-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaProductsSlider as S, defineCustomElement as d };

package/dist/components/salla-progress-bar.js

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

package/dist/components/salla-progress-bar2.js

@@ -1,4 +1,97 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as r,h as a}from"@stencil/core/internal/client";const e=t(class extends r{constructor(s){super(),!1!==s&&this.__registerHost(),this.height="10px";try{if(this.donation){let s="string"==typeof this.donation?JSON.parse(this.donation):this.donation;s.can_donate&&s.target_amount?(s.target_end_date="0000-00-00"==s.target_end_date?null:s.target_end_date,this.value=s.collected_amount,this.target=s.target_amount,this.header=salla.lang.get("pages.products.target"),this.message=s.target_end_date?salla.lang.get("pages.products.donation_target_date")+" "+s.target_end_date:""):this.message=s.target_amount?s.target_message:""}}catch(s){salla.log("Wrong donation json")}salla.lang.onLoaded((()=>{this.header=this.header?.replace("pages.products.target",salla.lang.get("pages.products.target")),this.message=this.message?.replace("pages.products.donation_target_date",salla.lang.get("pages.products.donation_target_date"))})),salla.onReady((()=>{this.color=this.color||salla.config.get("theme.color.primary","#ffd5c4"),this.unit||(this.unit=salla.config.currency().symbol)}))}getPercentage(){return this.value/this.target*100}render(){return this.target||this.message?a("div",{class:"s-progress-bar-container"},this.header?a("div",{class:"s-progress-bar-header"},this.header):"",this.getProgressBar(),this.message?a("span",{class:"s-progress-bar-message"},this.message):""):""}getProgressBar(){return this.target?[this.hideUnits?null:a("div",{class:"s-progress-bar-target-section"},a("span",{innerHTML:`${salla.helpers.number(this.value)} ${this.unit}`}),a("span",{innerHTML:`${salla.helpers.number(this.target)} ${this.unit}`})),a("div",{class:"s-progress-bar-wrapper",style:{height:this.height}},a("div",{class:{"s-progress-bar-progress":!0,"s-progress-bar-progress-stripped":this.stripped},style:{width:`${this.getPercentage()}%`,backgroundColor:this.color}}))]:null}static get style(){return""}},[0,"salla-progress-bar",{donation:[1],target:[1026],value:[1026],height:[1025],header:[1025],stripped:[1028],message:[1025],unit:[1025],color:[1025],hideUnits:[4,"hide-units"]}]);function i(){"undefined"!=typeof customElements&&["salla-progress-bar"].forEach((t=>{"salla-progress-bar"===t&&(customElements.get(s(t))||customElements.define(s(t),e))}))}i();export{e as S,i as d}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sallaProgressBarCss = "";
+
+const SallaProgressBar = /*@__PURE__*/ proxyCustomElement(class SallaProgressBar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Set height for the wrapper.
+         */
+        this.height = "10px";
+        try {
+            if (this.donation) {
+                let donationJson = typeof this.donation == 'string' ? JSON.parse(this.donation) : this.donation;
+                if (donationJson.can_donate && donationJson.target_amount) {
+                    donationJson.target_end_date = donationJson.target_end_date == '0000-00-00' ? null : donationJson.target_end_date;
+                    this.value = donationJson.collected_amount;
+                    this.target = donationJson.target_amount;
+                    this.header = salla.lang.get('pages.products.target');
+                    this.message = donationJson.target_end_date ? salla.lang.get('pages.products.donation_target_date') + ' ' + donationJson.target_end_date : '';
+                }
+                else {
+                    //in case the product is not enabled target campaign
+                    this.message = donationJson.target_amount
+                        ? donationJson.target_message
+                        : '';
+                }
+            }
+        }
+        catch (e) {
+            salla.log('Wrong donation json');
+        }
+        salla.lang.onLoaded(() => {
+            this.header = this.header?.replace('pages.products.target', salla.lang.get('pages.products.target'));
+            this.message = this.message?.replace('pages.products.donation_target_date', salla.lang.get('pages.products.donation_target_date'));
+        });
+        salla.onReady(() => {
+            this.color = this.color || salla.config.get('theme.color.primary', "#ffd5c4");
+            if (!this.unit) {
+                this.unit = salla.config.currency().symbol;
+            }
+        });
+    }
+    getPercentage() {
+        return (this.value / this.target) * 100;
+    }
+    render() {
+        if (!this.target && !this.message) {
+            return '';
+        }
+        return (h("div", { class: "s-progress-bar-container" }, this.header ? h("div", { class: "s-progress-bar-header" }, this.header) : '', this.getProgressBar(), this.message ? h("span", { class: "s-progress-bar-message" }, this.message) : ''));
+    }
+    getProgressBar() {
+        return this.target ? [
+            !this.hideUnits ? (h("div", { class: "s-progress-bar-target-section" }, h("span", { innerHTML: `${salla.helpers.number(this.value)} ${this.unit}` }), h("span", { innerHTML: `${salla.helpers.number(this.target)} ${this.unit}` }))) : null,
+            h("div", { class: "s-progress-bar-wrapper", style: { height: this.height } }, h("div", { class: {
+                    "s-progress-bar-progress": true,
+                    's-progress-bar-progress-stripped': this.stripped
+                }, style: {
+                    width: `${this.getPercentage()}%`,
+                    backgroundColor: this.color
+                } }))
+        ] : null;
+    }
+    static get style() { return sallaProgressBarCss; }
+}, [0, "salla-progress-bar", {
+        "donation": [1],
+        "target": [1026],
+        "value": [1026],
+        "height": [1025],
+        "header": [1025],
+        "stripped": [1028],
+        "message": [1025],
+        "unit": [1025],
+        "color": [1025],
+        "hideUnits": [4, "hide-units"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-progress-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaProgressBar);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaProgressBar as S, defineCustomElement as d };

package/dist/components/salla-quantity-input.js

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

package/dist/components/salla-quantity-input2.js

@@ -1,4 +1,130 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as e,HTMLElement as s,h as n,Host as a}from"@stencil/core/internal/client";import{A as i,M as u}from"./minus.js";import{H as c}from"./Helper.js";const r=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.disableInput=!1,this.hostAttributes={},this.hasIncrementSlot=!1,this.hasDecrementSlot=!1,this.didLoaded=!1,this.quantity=1,this.fireChangeEvent=!0}watchPropHandler(){this.didLoaded&&(this.fireChangeEvent?c.debounce((()=>{salla.document.event.fireEvent(this.textInput,"change",{bubbles:!0,detail:{productId:this.cartItemId,quantity:this.quantity}})})):this.fireChangeEvent=!0)}async componentWillLoad(){await salla.onReady(),this.disableInput=!salla.config.get("store.settings.product.manual_quantity"),this.quantity=parseInt(this.host.getAttribute("value"))||1,this.hasIncrementSlot=!!this.host.querySelector('[slot="increment-button"]'),this.hasDecrementSlot=!!this.host.querySelector('[slot="decrement-button"]')}componentDidLoad(){this.didLoaded=!0,this.textInput.addEventListener("input",(t=>salla.helpers.inputDigitsOnly(t.target)))}getInputAttributes(){for(let t=0;t<this.host.attributes.length;t++)["id","value","min","class"].includes(this.host.attributes[t].name)||(this.hostAttributes[this.host.attributes[t].name]=this.host.attributes[t].value);return this.hostAttributes}async decrease(){return this.setValue(this.quantity-1)}async increase(){return this.setValue(Number(this.quantity)+1)}async setValue(t,e=!0){this.fireChangeEvent=e;let s=parseInt(this.host.getAttribute("max"));return s&&t>s&&(t=s),t<=1&&(t=1),this.quantity=t,this.host}render(){const t=this.getInputAttributes();return t["aria-label"]||t["aria-labelledby"]||(t["aria-label"]=salla.lang.getWithDefault("common.elements.quantity","Quantity")),n(a,{key:"c9b83e158f990a40a69100bcc7880bc208433de1",class:"s-quantity-input"},n("div",{key:"74ee814b486365c28950a675f0e75ed78fad1549",class:"s-quantity-input-container"},n("button",{key:"a78de04f1ca0efc4b20d3fc4acdb1d881bf31501",onClick:()=>this.increase(),class:"s-quantity-input-increase-button s-quantity-input-button",type:"button","aria-label":salla.lang.getWithDefault("common.elements.increase_quantity","Increase quantity")},this.hasIncrementSlot?"":n("span",{innerHTML:i}),n("slot",{key:"d1222cf3e005c8fbf1d38e42589e5abac08b99bf",name:"increment-button"})),n("input",{key:"b2402558907f7e0e15bf622b1524a5649d74fe8d",class:"s-quantity-input-input",...t,ref:t=>this.textInput=t,onInput:t=>this.setValue(t.target.value),min:"1",readOnly:this.disableInput,value:this.quantity}),n("button",{key:"578d4ff2f4c4d6b778d052a2eed68f9abcc8625b",class:"s-quantity-input-decrease-button s-quantity-input-button",onClick:()=>this.decrease(),type:"button","aria-label":salla.lang.getWithDefault("common.elements.decrease_quantity","Decrease quantity")},this.hasDecrementSlot?"":n("span",{innerHTML:u}),n("slot",{key:"e8540cb6aae1027d76736069f2372ba18903bd25",name:"decrement-button"}))))}get host(){return this}static get watchers(){return{quantity:[{watchPropHandler:0}]}}static get style(){return""}},[260,"salla-quantity-input",{cartItemId:[8,"cart-item-id"],disableInput:[32],quantity:[32],fireChangeEvent:[32],decrease:[64],increase:[64],setValue:[64]},void 0,{quantity:[{watchPropHandler:0}]}]);function l(){"undefined"!=typeof customElements&&["salla-quantity-input"].forEach((e=>{"salla-quantity-input"===e&&(customElements.get(t(e))||customElements.define(t(e),r))}))}l();export{r as S,l as d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { A as Add, M as Minus } from './minus.js';
+import { H as Helper } from './Helper.js';
+
+const sallaQuantityInputCss = "";
+
+const SallaQuantityInput = /*@__PURE__*/ proxyCustomElement(class SallaQuantityInput extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Based on store setting: store.settings.product.manual_quantity
+         */
+        this.disableInput = false;
+        this.hostAttributes = {};
+        this.hasIncrementSlot = false;
+        this.hasDecrementSlot = false;
+        this.didLoaded = false;
+        this.quantity = 1;
+        this.fireChangeEvent = true;
+    }
+    /**
+     * Workaround to fire change event for the input.
+     */
+    watchPropHandler() {
+        if (!this.didLoaded) {
+            return;
+        }
+        if (!this.fireChangeEvent) {
+            this.fireChangeEvent = true;
+            return;
+        }
+        Helper.debounce(() => {
+            salla.document.event.fireEvent(this.textInput, 'change', {
+                bubbles: true,
+                detail: { productId: this.cartItemId, quantity: this.quantity }
+            });
+        });
+    }
+    async componentWillLoad() {
+        await salla.onReady();
+        this.disableInput = !salla.config.get('store.settings.product.manual_quantity');
+        this.quantity = parseInt(this.host.getAttribute('value')) || 1;
+        this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
+        this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
+    }
+    componentDidLoad() {
+        this.didLoaded = true;
+        this.textInput.addEventListener('input', (event) => salla.helpers.inputDigitsOnly(event.target));
+    }
+    getInputAttributes() {
+        for (let i = 0; i < this.host.attributes.length; i++) {
+            if (!['id', 'value', 'min', 'class'].includes(this.host.attributes[i].name)) {
+                this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+            }
+        }
+        return this.hostAttributes;
+    }
+    /**
+     * decrease quantity by one.
+     * @return HTMLSallaQuantityInputElement
+     */
+    async decrease() {
+        return this.setValue(this.quantity - 1);
+    }
+    /**
+     * increase quantity by one.
+     * @return HTMLSallaQuantityInputElement
+     */
+    async increase() {
+        return this.setValue(Number(this.quantity) + 1);
+    }
+    /**
+     * set quantity by one.
+     * @return HTMLSallaQuantityInputElement
+     */
+    async setValue(value, fireChangeEvent = true) {
+        this.fireChangeEvent = fireChangeEvent;
+        let maxQuantity = parseInt(this.host.getAttribute('max'));
+        if (maxQuantity && value > maxQuantity) {
+            value = maxQuantity;
+        }
+        if (value <= 1) {
+            value = 1;
+        }
+        this.quantity = value;
+        return this.host;
+    }
+    render() {
+        const inputAttributes = this.getInputAttributes();
+        if (!inputAttributes['aria-label'] && !inputAttributes['aria-labelledby']) {
+            inputAttributes['aria-label'] = salla.lang.getWithDefault('common.elements.quantity', 'Quantity');
+        }
+        return (h(Host, { key: 'c9b83e158f990a40a69100bcc7880bc208433de1', class: "s-quantity-input" }, h("div", { key: '74ee814b486365c28950a675f0e75ed78fad1549', class: "s-quantity-input-container" }, h("button", { key: 'a78de04f1ca0efc4b20d3fc4acdb1d881bf31501', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button", "aria-label": salla.lang.getWithDefault('common.elements.increase_quantity', 'Increase quantity') }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: 'd1222cf3e005c8fbf1d38e42589e5abac08b99bf', name: "increment-button" })), h("input", { key: 'b2402558907f7e0e15bf622b1524a5649d74fe8d', class: "s-quantity-input-input", ...inputAttributes, ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", readOnly: this.disableInput, value: this.quantity }), h("button", { key: '578d4ff2f4c4d6b778d052a2eed68f9abcc8625b', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button", "aria-label": salla.lang.getWithDefault('common.elements.decrease_quantity', 'Decrease quantity') }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: 'e8540cb6aae1027d76736069f2372ba18903bd25', name: "decrement-button" })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "quantity": ["watchPropHandler"]
+    }; }
+    static get style() { return sallaQuantityInputCss; }
+}, [4, "salla-quantity-input", {
+        "cartItemId": [8, "cart-item-id"],
+        "disableInput": [32],
+        "quantity": [32],
+        "fireChangeEvent": [32],
+        "decrease": [64],
+        "increase": [64],
+        "setValue": [64]
+    }, undefined, {
+        "quantity": ["watchPropHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-quantity-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-quantity-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaQuantityInput);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaQuantityInput as S, defineCustomElement as d };

package/dist/components/salla-quick-buy.js

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