@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-price-range2.js

@@ -1,4 +1,207 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as s,createEvent as i,h as a,Host as l}from"@stencil/core/internal/client";import{I as r}from"./arrow-left.js";import{d as n}from"./salla-button2.js";const c=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.changed=i(this,"changed",7),this.min=0,this.max=1e4,this.moreThanLabel="أكثر من",this.lessThanLabel="أقل من",this.toLabel="الى",this.fromLabel="من",this.typing=!1,this.isMin=!1,this.isRTL=salla.config.get("theme.is_rtl",!0),this.filterValues=[]}connectedCallback(){if(this.filtersData&&this.filtersData?.price&&(this.minPrice=this.filtersData.price.min,this.maxPrice=this.filtersData.price.max),salla.lang.onLoaded((()=>{this.moreThanLabel=salla.lang.getWithDefault("common.elements.more_than",this.moreThanLabel),this.lessThanLabel=salla.lang.getWithDefault("common.elements.less_than",this.lessThanLabel),this.toLabel=salla.lang.getWithDefault("common.elements.to",this.toLabel),this.fromLabel=salla.lang.getWithDefault("common.elements.from",this.fromLabel)})),1==this.option.values.length)return;if(this.option.values.length<=5)return void(this.filterValues=this.option.values);const e=Math.ceil(this.option.values.length/5);for(let t=0;t<this.option.values.length;t+=e)this.filterValues.push(this.option.values.slice(t,t+e).reduce(((e,t)=>(e.to=t.to,e.count+=t.count,e))))}async reset(){this.minInput.value=null,this.maxInput.value=null,this.minPrice=null,this.maxPrice=null}getPriceLabel(e){return isNaN(e.from)||e.from<1?`${this.lessThanLabel} ${salla.money(e.to)}`:isNaN(e.to)||e.to<1?`${this.moreThanLabel} ${salla.money(e.from)}`:`${salla.money(e.from)} ${this.toLabel} ${salla.money(e.to)}`}minInputValidation(e){e&&(e>this.max||this.maxPrice&&e>this.maxPrice)||(e<this.min?this.minPrice=this.min:e&&(this.minPrice=e))}maxInputValidation(e){e&&(e<this.min||this.minPrice&&e<this.minPrice)||e>this.max&&(this.maxPrice=this.max)}async changedEventHandler(e){salla.helpers.inputDigitsOnly(this.minInput),salla.helpers.inputDigitsOnly(this.maxInput);const t=this.minPrice?1*+this.minPrice:null,s=this.maxPrice?1*+this.maxPrice:null;this.maxPrice||(this.maxPrice=""),this.isMin?this.minInputValidation(t):(this.minPrice||(this.minPrice=0),this.maxInputValidation(s)),this.isReady&&this.changed.emit({event:e,option:this.option,value:{max:this.maxPrice,min:this.minPrice}})}handleMinMaxPrice(e,t){this.minPrice=t.from,this.maxPrice="*"!==t.to?t.to:"",this.changedEventHandler(e)}isChecked(e){return!(!this.minPrice&&!this.maxPrice)&&(((e.from<1||"*"==e.from)&&0==this.minPrice||e.from==this.minPrice)&&("*"==e.to||!e.to||e.to==this.maxPrice))}handleMinPrice(e){this.isMin=!0;const t=e.target.value;this.minPrice=""===t?0:t}handleMaxPrice(e){this.isMin=!1;const t=e.target.value;this.maxPrice=void 0===t?"":t}render(){return a(l,{key:"01971028ddbcb6dd89aec0e1552f4c724c32e76f"},this.filterValues.map(((e,t)=>a("label",{class:"s-filters-label",htmlFor:`${this.option.key}-${t}`,key:t},a("input",{id:`${this.option.key}-${t}`,name:"price",type:"radio",checked:this.isChecked(e),class:"s-filters-radio",onChange:t=>this.handleMinMaxPrice(t,e)}),a("span",{innerHTML:this.getPriceLabel(e)})))),a("div",{key:"0961c02c062e2cad89f35fd51cdcbb379965f31c",class:"flex justify-center items-center"},a("div",{key:"f503bbb2b490dc6908b06c5f1353a6577466cd66",class:"relative max-w-xl w-full"},a("div",{key:"6149d29228345ecd88d2c3e1c4622fd91dba52a2",class:"s-price-range-inputs"},a("div",{key:"8e45f9e8728de535671809d6b71fda57a8c9f763",class:"s-price-range-relative"},a("div",{key:"8cf8df2c549ab8f9bf6bc3fcb89a4155c8acfe0c",class:"s-price-range-currency"}," ",salla.config.currency().symbol),a("input",{key:"c79d97935d8675ba44e38c28d72513cb4ba4f614",type:"number",maxlength:"5",ref:e=>this.minInput=e,onBlur:e=>this.handleMinPrice(e),value:this.minPrice,placeholder:this.fromLabel,class:"s-price-range-number-input"})),a("div",{key:"c2826af5c0d8073d5278dac67f40412e562d6a80",class:"s-price-range-gray-text"}," -"),a("div",{key:"3a1c1641ee465c673dd4914cf4d19acd2d7f6911",class:"s-price-range-relative"},a("div",{key:"2efecf246fb31f52a792e19f3af42da55f5f5407",class:"s-price-range-currency"}," ",salla.config.currency().symbol),a("input",{key:"85dea69e3ae374aff1a6d7f1764346475a8688c8",type:"number",maxlength:"5",ref:e=>this.maxInput=e,onBlur:e=>this.handleMaxPrice(e),value:this.maxPrice,placeholder:this.toLabel,class:"s-price-range-number-input","aria-describedby":"price-currency"})),a("salla-button",{key:"59722b42d4cd5eef95360b95093772cdd59aed6c",color:"gray",shape:"icon",size:"small",fill:"outline",onClick:e=>this.changedEventHandler(e)},a("span",{key:"2142e831cb931574a63bb4f6ba12787677fecb1f",innerHTML:this.isRTL?r:'\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>arrow-right</title>\n<path d="M29.217 15.465c-0.019-0.044-0.056-0.077-0.080-0.119-0.067-0.116-0.139-0.227-0.236-0.317-0.011-0.009-0.013-0.024-0.024-0.033l-10.667-9.333c-0.553-0.484-1.396-0.429-1.881 0.125-0.484 0.555-0.428 1.396 0.127 1.881l7.996 6.997h-20.452c-0.737 0-1.333 0.597-1.333 1.333s0.596 1.333 1.333 1.333h20.452l-7.996 6.997c-0.555 0.485-0.611 1.327-0.127 1.881 0.264 0.3 0.633 0.455 1.004 0.455 0.312 0 0.625-0.109 0.877-0.331l10.667-9.333c0.011-0.009 0.015-0.024 0.024-0.033 0.097-0.091 0.169-0.201 0.236-0.317 0.024-0.041 0.060-0.075 0.080-0.119 0.073-0.163 0.116-0.343 0.116-0.533s-0.043-0.371-0.116-0.535z"></path>\n</svg>\n'}))))))}componentDidLoad(){this.isReady=!0}static get style(){return":host{display:block}.rtl .rtl-range-slider,[dir=rtl] .rtl-range-slider{transform:rotateY(180deg)}.rtl .rtl-range-numbers,[dir=rtl] .rtl-range-numbers{flex-direction:row-reverse}.rtl .form-select,.rtl select,[dir=rtl] .form-select,[dir=rtl] select{background-position:left 0.5rem center;padding-right:12px}.rtl .menu-divide li:not(:last-child):after,[dir=rtl] .menu-divide li:not(:last-child):after{left:0;right:auto}input[type=range]::-webkit-slider-thumb{pointer-events:all;width:24px;height:24px;-webkit-appearance:none}[type=checkbox]:checked{background-size:80%}"}},[0,"salla-price-range",{minPrice:[1032,"min-price"],maxPrice:[1032,"max-price"],option:[16],filtersData:[520,"filters-data"],min:[32],max:[32],priceOptions:[32],moreThanLabel:[32],lessThanLabel:[32],toLabel:[32],fromLabel:[32],typing:[32],isMin:[32],isRTL:[32],reset:[64]}]);function h(){"undefined"!=typeof customElements&&["salla-price-range","salla-button"].forEach((t=>{switch(t){case"salla-price-range":customElements.get(e(t))||customElements.define(e(t),c);break;case"salla-button":customElements.get(e(t))||n()}}))}h();export{c as S,h as d}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { I as IconArrowLeft } from './arrow-left.js';
+import { d as defineCustomElement$1 } from './salla-button2.js';
+
+var arrowRight = `<!-- 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>arrow-right</title>
+<path d="M29.217 15.465c-0.019-0.044-0.056-0.077-0.080-0.119-0.067-0.116-0.139-0.227-0.236-0.317-0.011-0.009-0.013-0.024-0.024-0.033l-10.667-9.333c-0.553-0.484-1.396-0.429-1.881 0.125-0.484 0.555-0.428 1.396 0.127 1.881l7.996 6.997h-20.452c-0.737 0-1.333 0.597-1.333 1.333s0.596 1.333 1.333 1.333h20.452l-7.996 6.997c-0.555 0.485-0.611 1.327-0.127 1.881 0.264 0.3 0.633 0.455 1.004 0.455 0.312 0 0.625-0.109 0.877-0.331l10.667-9.333c0.011-0.009 0.015-0.024 0.024-0.033 0.097-0.091 0.169-0.201 0.236-0.317 0.024-0.041 0.060-0.075 0.080-0.119 0.073-0.163 0.116-0.343 0.116-0.533s-0.043-0.371-0.116-0.535z"></path>
+</svg>
+`;
+
+const sallaPriceRangeCss = ":host{display:block}.rtl .rtl-range-slider,[dir=rtl] .rtl-range-slider{transform:rotateY(180deg)}.rtl .rtl-range-numbers,[dir=rtl] .rtl-range-numbers{flex-direction:row-reverse}.rtl .form-select,.rtl select,[dir=rtl] .form-select,[dir=rtl] select{background-position:left 0.5rem center;padding-right:12px}.rtl .menu-divide li:not(:last-child):after,[dir=rtl] .menu-divide li:not(:last-child):after{left:0;right:auto}input[type=range]::-webkit-slider-thumb{pointer-events:all;width:24px;height:24px;-webkit-appearance:none}[type=checkbox]:checked{background-size:80%}";
+
+const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class SallaPriceRange extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.changed = createEvent(this, "changed", 7);
+        this.min = 0;
+        this.max = 10000;
+        this.moreThanLabel = "أكثر من";
+        this.lessThanLabel = "أقل من";
+        this.toLabel = "الى";
+        this.fromLabel = "من";
+        this.typing = false;
+        this.isMin = false;
+        this.isRTL = salla.config.get('theme.is_rtl', true);
+        this.filterValues = [];
+    }
+    connectedCallback() {
+        if (this.filtersData && this.filtersData?.price) {
+            this.minPrice = this.filtersData.price.min;
+            this.maxPrice = this.filtersData.price.max;
+        }
+        salla.lang.onLoaded(() => {
+            this.moreThanLabel = salla.lang.getWithDefault('common.elements.more_than', this.moreThanLabel);
+            this.lessThanLabel = salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel);
+            this.toLabel = salla.lang.getWithDefault('common.elements.to', this.toLabel);
+            this.fromLabel = salla.lang.getWithDefault('common.elements.from', this.fromLabel);
+        });
+        //no need to show one option only
+        if (this.option.values.length == 1) {
+            return;
+        }
+        //here we may receive too many prices, we will group all inputs to
+        if (this.option.values.length <= 5) {
+            this.filterValues = this.option.values;
+            return;
+        }
+        const chunkSize = Math.ceil(this.option.values.length / 5);
+        for (let i = 0; i < this.option.values.length; i += chunkSize) {
+            this.filterValues.push(this.option.values
+                .slice(i, i + chunkSize)
+                .reduce((final, currentValue) => {
+                final.to = currentValue.to;
+                final.count += currentValue.count;
+                return final;
+            }));
+            // do whatever
+        }
+    }
+    /**
+     * reset the price range inputs
+     */
+    async reset() {
+        //@ts-ignore
+        this.minInput.value = null;
+        this.maxInput.value = null;
+        this.minPrice = null;
+        this.maxPrice = null;
+    }
+    getPriceLabel(filterValue) {
+        // @ts-ignore
+        if (isNaN(filterValue.from) || filterValue.from < 1) {
+            return `${this.lessThanLabel} ${salla.money(filterValue.to)}`;
+        }
+        // @ts-ignore
+        if (isNaN(filterValue.to) || filterValue.to < 1) {
+            return `${this.moreThanLabel} ${salla.money(filterValue.from)}`;
+        }
+        return `${salla.money(filterValue.from)} ${this.toLabel} ${salla.money(filterValue.to)}`;
+    }
+    minInputValidation(value) {
+        if (value && (value > this.max || (this.maxPrice && value > this.maxPrice))) {
+            // this.minPrice = this.maxPrice;
+            return;
+        }
+        if (value < this.min) {
+            this.minPrice = this.min;
+            return;
+        }
+        if (value) {
+            this.minPrice = value;
+        }
+    }
+    maxInputValidation(value) {
+        if (value && (value < this.min || (this.minPrice && value < this.minPrice))) {
+            // this.maxPrice = this.minPrice;
+            return;
+        }
+        if (value > this.max) {
+            this.maxPrice = this.max;
+            return;
+        }
+    }
+    async changedEventHandler(event) {
+        salla.helpers.inputDigitsOnly(this.minInput);
+        salla.helpers.inputDigitsOnly(this.maxInput);
+        const minInputValue = this.minPrice ? +this.minPrice * 1 : null;
+        const maxInputValue = this.maxPrice ? +this.maxPrice * 1 : null;
+        if (!this.maxPrice) {
+            this.maxPrice = '';
+        }
+        if (this.isMin) {
+            this.minInputValidation(minInputValue);
+        }
+        else {
+            if (!this.minPrice) {
+                this.minPrice = 0;
+            }
+            this.maxInputValidation(maxInputValue);
+        }
+        this.isReady && this.changed.emit({
+            event: event,
+            option: this.option,
+            value: { max: this.maxPrice, min: this.minPrice }
+        });
+    }
+    handleMinMaxPrice(event, value) {
+        //todo:: cover when from is star
+        this.minPrice = value.from;
+        this.maxPrice = value.to !== '*' ? value.to : "";
+        this.changedEventHandler(event);
+    }
+    isChecked(filterValue) {
+        if (!this.minPrice && !this.maxPrice) {
+            return false;
+        }
+        //1 filterValue.from zero or * and this.minPrice not set or zero
+        //2 filterValue.from == this.minPrice
+        //@ts-ignore
+        let isMinEqual = ((filterValue.from < 1 || filterValue.from == '*') && this.minPrice == 0) || filterValue.from == this.minPrice;
+        //1 filterValue.to == "*" or null
+        //2 filterValue.to == this.max
+        let isMaxEqual = filterValue.to == '*' || !filterValue.to || filterValue.to == this.maxPrice;
+        return isMinEqual && isMaxEqual;
+    }
+    handleMinPrice(event) {
+        this.isMin = true;
+        const value = event.target.value;
+        this.minPrice = value === '' ? 0 : value;
+    }
+    handleMaxPrice(event) {
+        this.isMin = false;
+        const value = event.target.value;
+        this.maxPrice = value === undefined ? '' : value;
+    }
+    render() {
+        return (h(Host, { key: '01971028ddbcb6dd89aec0e1552f4c724c32e76f' }, this.filterValues.map((filterValue, index) => {
+            return h("label", { class: "s-filters-label", htmlFor: `${this.option.key}-${index}`, key: index }, h("input", { id: `${this.option.key}-${index}`, name: "price", type: "radio", checked: this.isChecked(filterValue), class: "s-filters-radio", onChange: e => this.handleMinMaxPrice(e, filterValue) }), h("span", { innerHTML: this.getPriceLabel(filterValue) }));
+        }), h("div", { key: '0961c02c062e2cad89f35fd51cdcbb379965f31c', class: "flex justify-center items-center" }, h("div", { key: 'f503bbb2b490dc6908b06c5f1353a6577466cd66', class: "relative max-w-xl w-full" }, h("div", { key: '6149d29228345ecd88d2c3e1c4622fd91dba52a2', class: "s-price-range-inputs" }, h("div", { key: '8e45f9e8728de535671809d6b71fda57a8c9f763', class: "s-price-range-relative" }, h("div", { key: '8cf8df2c549ab8f9bf6bc3fcb89a4155c8acfe0c', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: 'c79d97935d8675ba44e38c28d72513cb4ba4f614', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: 'c2826af5c0d8073d5278dac67f40412e562d6a80', class: "s-price-range-gray-text" }, " -"), h("div", { key: '3a1c1641ee465c673dd4914cf4d19acd2d7f6911', class: "s-price-range-relative" }, h("div", { key: '2efecf246fb31f52a792e19f3af42da55f5f5407', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '85dea69e3ae374aff1a6d7f1764346475a8688c8', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '59722b42d4cd5eef95360b95093772cdd59aed6c', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: '2142e831cb931574a63bb4f6ba12787677fecb1f', innerHTML: this.isRTL ? IconArrowLeft : arrowRight })))))));
+    }
+    componentDidLoad() {
+        this.isReady = true;
+    }
+    static get style() { return sallaPriceRangeCss; }
+}, [0, "salla-price-range", {
+        "minPrice": [1032, "min-price"],
+        "maxPrice": [1032, "max-price"],
+        "option": [16],
+        "filtersData": [520, "filters-data"],
+        "min": [32],
+        "max": [32],
+        "priceOptions": [32],
+        "moreThanLabel": [32],
+        "lessThanLabel": [32],
+        "toLabel": [32],
+        "fromLabel": [32],
+        "typing": [32],
+        "isMin": [32],
+        "isRTL": [32],
+        "reset": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-price-range", "salla-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-price-range":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaPriceRange);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaPriceRange as S, defineCustomElement as d };

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

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

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

@@ -1,4 +1,209 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as i,h as a,Host as l}from"@stencil/core/internal/client";import{B as e}from"./bell-ring.js";import{H as o}from"./Helper.js";import{d as r}from"./salla-button2.js";import{d as n}from"./salla-loading2.js";import{d as c}from"./salla-modal2.js";import{d as h}from"./salla-tel-input2.js";const d=t(class extends i{constructor(s){super(),!1!==s&&this.__registerHost(),this.isUser=salla.config.isUser(),this.translationLoaded=!1,this.notifyOptionsAvailability=!1,this.isSubscribed=!1,this.handleSubmitOptions=async()=>{let s={id:this.productId};if(!this.notifyOptionsAvailability)return s;let t=document.querySelector(`salla-product-options[product-id="${this.productId}"]`),i=Object.values(await(t?.getSelectedOptionsData())||{});if(i.length&&!await(t?.reportValidity())){let s=salla.lang.get("common.messages.required_fields");throw salla.error(s),s}return s.options=[],i.forEach((t=>{t&&!isNaN(t)&&s.options.push(Number(t))})),s},this.typing=s=>{const t=s.target.nextElementSibling;s.target.classList.remove("s-has-error"),t?.classList.contains("s-product-availability-error-msg")&&(t.innerText=""),13===s.keyCode&&this.submit()},salla.lang.onLoaded((()=>{this.translationLoaded=!0,this.title_=this.host.title||salla.lang.get("pages.products.notify_availability_title"),this.modal?.setTitle(this.title_)})),this.productId||(this.productId=salla.config.get("page.id")),this.isUser||(this.channelsWatcher(this.channels),this.title_=this.host.title||salla.lang.get("pages.products.notify_availability_title"),this.host.removeAttribute("title"),this.isVisitorSubscribed=this.notifyOptionsAvailability?"":salla.storage.get(`product-${this.productId}-subscribed`))}channelsWatcher(s){this.channels_=s?s.split(","):[]}openModel(){this.handleSubmitOptions().then((s=>s?this.modal.open():null))}async submit(){let s=await this.handleSubmitOptions();if(this.isUser)return salla.api.product.availabilitySubscribe(s).then((()=>this.isSubscribed=!0));if(this.channels_.includes("sms")){let{phone:t,countryCode:i}=await this.mobileInput.getValues();s.country_code=i,s.phone=t}return this.channels_.includes("email")&&""!==this.email.value&&(s.email=this.email.value),await this.validateform(),this.btn.load().then((()=>this.btn.disable())).then((()=>salla.api.product.availabilitySubscribe(s))).then((()=>{if(!this.notifyOptionsAvailability)return salla.storage.set(`product-${this.productId}-subscribed`,!0),void(this.isSubscribed=!0);if(s.options.length){let t=salla.storage.get(`product-${this.productId}-subscribed-options`)||[],i=s.options.join(",");t.includes(i)?salla.log("already subscribed to this options"):(t.push(i),salla.storage.set(`product-${this.productId}-subscribed-options`,t),this.isSubscribed=!0)}})).then((()=>this.btn.stop())).then((()=>this.modal.close())).catch((()=>this.btn.stop()&&this.btn.enable()))}async validateform(){try{if(this.channels_.includes("email")){const s=o.isValidEmail(this.email.value);if(s)return;!s&&this.validateField(this.email,salla.lang.get("common.elements.email_is_valid"))}if(this.channels_.includes("sms")&&await this.mobileInput.isValid())return}catch(s){throw"Please insert required fields"}}validateField(s,t){s.classList.add("s-has-error"),s.nextElementSibling.innerText="* "+t}render(){return a(l,{key:"caab03a9cadb614db15d47cf54d0fe72cc7be482",class:"s-product-availability-wrap"},this.isSubscribed||this.isVisitorSubscribed?a("div",{class:"s-product-availability-subscribed"},a("span",{innerHTML:e,class:"s-product-availability-subs-icon"}),salla.lang.get("pages.products.notify_availability_success")):a("salla-button",{width:"wide",onClick:()=>this.isUser?this.submit():this.openModel()},salla.lang.get("pages.products.notify_availability")),this.isUser||this.isSubscribed||this.isVisitorSubscribed?"":this.renderModal())}renderModal(){return a("salla-modal",{ref:s=>this.modal=s,"modal-title":this.title_,subTitle:salla.lang.get("pages.products.notify_availability_subtitle"),width:"sm"},a("span",{slot:"icon",class:"s-product-availability-header-icon",innerHTML:e}),a("div",{class:"s-product-availability-body"},this.channels_.includes("email")?[a("label",{class:"s-product-availability-label"},salla.lang.get("common.elements.email")),a("input",{class:"s-product-availability-input",onKeyDown:s=>this.typing(s),placeholder:salla.lang.get("common.elements.email_placeholder")||"your@email.com",ref:s=>this.email=s,type:"email"}),a("span",{class:"s-product-availability-error-msg"})]:"",this.channels_.includes("sms")?[a("label",{class:"s-product-availability-label"},salla.lang.get("common.elements.mobile")),a("salla-tel-input",{ref:s=>this.mobileInput=s,onKeyDown:s=>this.typing(s)})]:""),a("div",{slot:"footer",class:"s-product-availability-footer"},a("salla-button",{class:"modal-cancel-btn",width:"wide",color:"light",fill:"outline",onClick:()=>this.modal.close()},salla.lang.get("common.elements.cancel")),a("salla-button",{class:"submit-btn","loader-position":"center",width:"wide",ref:s=>this.btn=s,onClick:()=>this.submit()},salla.lang.get("common.elements.submit"))))}get host(){return this}static get watchers(){return{channels:[{channelsWatcher:0}]}}static get style(){return""}},[0,"salla-product-availability",{channels:[1],notifyOptionsAvailability:[4,"notify-options-availability"],productId:[2,"product-id"],isSubscribed:[1028,"is-subscribed"],translationLoaded:[32],title_:[32],isVisitorSubscribed:[32]},void 0,{channels:[{channelsWatcher:0}]}]);function u(){"undefined"!=typeof customElements&&["salla-product-availability","salla-button","salla-loading","salla-modal","salla-tel-input"].forEach((t=>{switch(t){case"salla-product-availability":customElements.get(s(t))||customElements.define(s(t),d);break;case"salla-button":customElements.get(s(t))||r();break;case"salla-loading":customElements.get(s(t))||n();break;case"salla-modal":customElements.get(s(t))||c();break;case"salla-tel-input":customElements.get(s(t))||h()}}))}u();export{d as S,u as d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { B as BellRing } from './bell-ring.js';
+import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$4 } from './salla-button2.js';
+import { d as defineCustomElement$3 } from './salla-loading2.js';
+import { d as defineCustomElement$2 } from './salla-modal2.js';
+import { d as defineCustomElement$1 } from './salla-tel-input2.js';
+
+const sallaProductAvailabilityCss = "";
+
+const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class SallaProductAvailability extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.isUser = salla.config.isUser();
+        this.translationLoaded = false;
+        /**
+         * Listen to product options availability.
+         */
+        this.notifyOptionsAvailability = false;
+        /**
+         * is current user already subscribed
+         */
+        this.isSubscribed = false;
+        this.handleSubmitOptions = async () => {
+            let payload = { id: this.productId };
+            if (!this.notifyOptionsAvailability) {
+                return payload;
+            }
+            let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+            let options = Object.values(await optionsElement?.getSelectedOptionsData() || {});
+            //if all options not selected, show message && throw exception
+            if (options.length && !await optionsElement?.reportValidity()) {
+                let errorMessage = salla.lang.get('common.messages.required_fields');
+                salla.error(errorMessage);
+                throw errorMessage;
+            }
+            payload.options = [];
+            options.forEach(option => {
+                //inject numbers only, without zeros
+                if (option && !isNaN(option)) {
+                    payload.options.push(Number(option));
+                }
+            });
+            return payload;
+        };
+        // helpers
+        this.typing = (e) => {
+            const error = e.target.nextElementSibling;
+            e.target.classList.remove('s-has-error');
+            error?.classList.contains('s-product-availability-error-msg') && (error.innerText = '');
+            e.keyCode === 13 && this.submit();
+        };
+        salla.lang.onLoaded(() => {
+            this.translationLoaded = true;
+            this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+            this.modal?.setTitle(this.title_);
+        });
+        if (!this.productId) {
+            this.productId = salla.config.get('page.id');
+        }
+        if (this.isUser)
+            return;
+        this.channelsWatcher(this.channels);
+        this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+        this.host.removeAttribute('title');
+        //todo:: fix this to cover options too
+        this.isVisitorSubscribed = !this.notifyOptionsAvailability ? salla.storage.get(`product-${this.productId}-subscribed`) : '';
+    }
+    channelsWatcher(newValue) {
+        this.channels_ = !!newValue ? newValue.split(',') : [];
+    }
+    openModel() {
+        this.handleSubmitOptions().then(isSuccess => isSuccess ? this.modal.open() : null);
+    }
+    async submit() {
+        let payload = await this.handleSubmitOptions();
+        if (this.isUser) {
+            return salla.api.product.availabilitySubscribe(payload)
+                .then(() => this.isSubscribed = true);
+        }
+        if (this.channels_.includes('sms')) {
+            let { phone, countryCode } = await this.mobileInput.getValues();
+            payload['country_code'] = countryCode;
+            payload['phone'] = phone;
+        }
+        if (this.channels_.includes('email')) {
+            this.email.value !== '' && (payload['email'] = this.email.value);
+        }
+        await this.validateform();
+        return this.btn.load()
+            .then(() => this.btn.disable())
+            .then(() => salla.api.product.availabilitySubscribe(payload))
+            .then(() => {
+            if (!this.notifyOptionsAvailability) {
+                salla.storage.set(`product-${this.productId}-subscribed`, true);
+                this.isSubscribed = true;
+                return;
+            }
+            if (payload.options.length) {
+                let options = salla.storage.get(`product-${this.productId}-subscribed-options`) || [];
+                let selectedOptionsString = payload.options.join(',');
+                if (!options.includes(selectedOptionsString)) {
+                    options.push(selectedOptionsString);
+                    salla.storage.set(`product-${this.productId}-subscribed-options`, options);
+                    this.isSubscribed = true;
+                }
+                else {
+                    salla.log('already subscribed to this options');
+                }
+            }
+        })
+            .then(() => this.btn.stop())
+            .then(() => this.modal.close())
+            .catch(() => this.btn.stop() && this.btn.enable());
+    }
+    async validateform() {
+        try {
+            if (this.channels_.includes('email')) {
+                const isEmailValid = Helper.isValidEmail(this.email.value);
+                if (isEmailValid)
+                    return;
+                !isEmailValid && this.validateField(this.email, salla.lang.get('common.elements.email_is_valid'));
+            }
+            if (this.channels_.includes('sms')) {
+                const isPhoneValid = await this.mobileInput.isValid();
+                if (isPhoneValid)
+                    return;
+            }
+        }
+        catch (error) {
+            throw ('Please insert required fields');
+        }
+    }
+    validateField(field, errorMsg) {
+        field.classList.add('s-has-error');
+        field.nextElementSibling['innerText'] = '* ' + errorMsg;
+    }
+    render() {
+        return (h(Host, { key: 'caab03a9cadb614db15d47cf54d0fe72cc7be482', class: "s-product-availability-wrap" }, this.isSubscribed || this.isVisitorSubscribed
+            ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRing, class: "s-product-availability-subs-icon" }), salla.lang.get('pages.products.notify_availability_success'))
+            :
+                h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.openModel() }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribed || this.isVisitorSubscribed ? '' : this.renderModal()));
+    }
+    renderModal() {
+        return (h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" }, h("span", { slot: 'icon', class: "s-product-availability-header-icon", innerHTML: BellRing }), h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
+            h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
+            h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
+            h("span", { class: "s-product-availability-error-msg" })
+        ] : '', this.channels_.includes('sms') ? [
+            h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
+            h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e) })
+        ] : ''), h("div", { slot: "footer", class: "s-product-availability-footer" }, h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "channels": ["channelsWatcher"]
+    }; }
+    static get style() { return sallaProductAvailabilityCss; }
+}, [0, "salla-product-availability", {
+        "channels": [1],
+        "notifyOptionsAvailability": [4, "notify-options-availability"],
+        "productId": [2, "product-id"],
+        "isSubscribed": [1028, "is-subscribed"],
+        "translationLoaded": [32],
+        "title_": [32],
+        "isVisitorSubscribed": [32]
+    }, undefined, {
+        "channels": ["channelsWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-product-availability", "salla-button", "salla-loading", "salla-modal", "salla-tel-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-product-availability":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaProductAvailability);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-tel-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaProductAvailability as S, defineCustomElement as d };

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

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