@salla.sa/twilight-components 2.14.392 → 2.14.393

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

@@ -1,302 +1,4 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { M as MailIcon } from './mail.js';
-import { C as Cancel } from './cancel.js';
-import { d as defineCustomElement$5 } from './salla-button2.js';
-import { d as defineCustomElement$4 } from './salla-loading2.js';
-import { d as defineCustomElement$3 } from './salla-modal2.js';
-import { d as defineCustomElement$2 } from './salla-tel-input2.js';
-
-var CelebrationIcon = `<!-- 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>party-horn</title>
-<path fill="currentColor" d="M5.333 4.013c0.736 0 1.333-0.596 1.333-1.333v-0.013c0-0.737-0.597-1.327-1.333-1.327s-1.333 0.603-1.333 1.34 0.597 1.333 1.333 1.333zM11.333 10c0.341 0 0.683-0.131 0.943-0.391 1.541-1.54 2.391-3.589 2.391-5.771v-2.505c0-0.737-0.597-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v2.505c0 1.468-0.572 2.848-1.609 3.885-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391zM18.667 9.993c0.319 0 0.639-0.115 0.895-0.345 0.383-0.347 0.684-0.325 1.497-0.22 0.923 0.124 2.319 0.307 3.636-0.887 1.293-1.172 1.303-2.54 1.308-3.539 0.005-0.887 0.043-1.228 0.432-1.581 0.361-0.327 0.621-0.335 1.493-0.216 0.923 0.12 2.317 0.307 3.635-0.884 0.545-0.495 0.587-1.337 0.093-1.883-0.493-0.547-1.336-0.589-1.884-0.093-0.361 0.325-0.621 0.333-1.493 0.216-0.921-0.119-2.317-0.305-3.635 0.884-1.293 1.173-1.303 2.541-1.308 3.54-0.005 0.885-0.043 1.227-0.432 1.58-0.383 0.348-0.683 0.327-1.497 0.22-0.924-0.124-2.32-0.305-3.636 0.887-0.545 0.495-0.587 1.339-0.092 1.884 0.264 0.291 0.625 0.437 0.988 0.437zM18.667 16.013c0.736 0 1.333-0.596 1.333-1.333v-0.013c0-0.737-0.597-1.327-1.333-1.327s-1.333 0.603-1.333 1.34 0.597 1.333 1.333 1.333zM30.667 17.333h-2.505c-2.179 0-4.228 0.849-5.771 2.391-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.603 0.391 0.944 0.391s0.683-0.131 0.943-0.391c1.023-1.023 2.439-1.609 3.884-1.609h2.505c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333zM30.667 10.66c-0.736 0-1.333 0.603-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM29.333 26.66c-0.736 0-1.333 0.603-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM7.456 11.057c-0.327-0.327-0.799-0.46-1.249-0.356-0.449 0.107-0.812 0.439-0.959 0.876l-5.036 15.113c-0.487 1.457-0.113 3.037 0.973 4.125 0.772 0.771 1.792 1.183 2.84 1.183 0.428 0 0.861-0.068 1.284-0.209l15.112-5.037c0.439-0.145 0.769-0.508 0.876-0.959 0.107-0.449-0.028-0.921-0.355-1.249zM4.467 29.259c-0.503 0.163-1.023 0.043-1.395-0.329-0.373-0.373-0.497-0.896-0.329-1.396l4.355-13.065 10.436 10.435z"></path>
-</svg>
-`;
-
-var PortraitIcon = `<!-- 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>portrait</title>
-<path d="M24 1.333h-16c-3.676 0-6.667 2.991-6.667 6.667v16c0 3.028 2.041 5.561 4.811 6.371 0.004 0.001 0.008 0.003 0.012 0.004 0.591 0.172 1.2 0.292 1.844 0.292h16c0.644 0 1.253-0.12 1.843-0.292 0.004-0.001 0.008-0.003 0.012-0.004 2.771-0.809 4.812-3.343 4.812-6.371v-16c0-3.676-2.991-6.667-6.667-6.667zM8.012 28c0.121-1.915 3.363-4 7.988-4s7.868 2.085 7.988 4zM28 24c0 1.24-0.579 2.335-1.467 3.069-0.768-3.288-5.112-5.736-10.533-5.736s-9.765 2.448-10.533 5.736c-0.888-0.735-1.467-1.829-1.467-3.069v-16c0-2.205 1.795-4 4-4h16c2.205 0 4 1.795 4 4zM16 6.667c-3.308 0-6 2.692-6 6s2.692 6 6 6 6-2.692 6-6-2.692-6-6-6zM16 16c-1.839 0-3.333-1.495-3.333-3.333s1.495-3.333 3.333-3.333 3.333 1.495 3.333 3.333-1.495 3.333-3.333 3.333z"></path>
-</svg>
-`;
-
-var IphoneXIcon = `<!-- 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>iphone-x</title>
-<path d="M24 0h-16c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h16c2.205 0 4-1.795 4-4v-24c0-2.205-1.795-4-4-4zM25.333 28c0 0.736-0.597 1.333-1.333 1.333h-16c-0.736 0-1.333-0.597-1.333-1.333v-24c0-0.735 0.597-1.333 1.333-1.333h4c0 1.471 1.196 2.667 2.667 2.667h2.667c1.471 0 2.667-1.196 2.667-2.667h4c0.736 0 1.333 0.599 1.333 1.333z"></path>
-</svg>
-`;
-
-const sallaQuickOrderCss = ".s-quick-order-expandable:not(.s-quick-order-shown){overflow:hidden}";
-
-const SallaQuickOrder$1 = /*@__PURE__*/ proxyCustomElement(class SallaQuickOrder extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.quickOrderSubmited = createEvent(this, "quickOrderSubmited", 7);
-        /**
-         * quick order title
-         */
-        this.quickOrderTitle = 'ليش تنتظر؟';
-        /**
-         * quick order sub title
-         */
-        this.subTitle = 'احصل على المنتج مباشرة الآن';
-        /**
-         * quick order pay button text
-         */
-        this.payButtonTitle = 'اطلب المنتج';
-        /**
-         * quick order confirm pay button text
-         */
-        this.confirmPayButtonTitle = 'اشتر الآن';
-        /**
-         * agreement text from server or from props
-         */
-        this.agreementText = salla.lang.get('pages.checkout.show_full_agreement');
-        /**
-         * is email required
-         */
-        this.isEmailRequired = false;
-        /**
-         * Quick Order Style
-         */
-        this.quickOrderStyle = 'default';
-        this.isAvailable = false;
-        this.oneClick = false;
-        this.expanded = false;
-        this.isTermsRequired = false;
-        this.countryCode = salla.config.get('user.country_code', 'SA') || 'SA';
-        this.submitSucess = false;
-        //Langugae states
-        this.placeHolderEmail = salla.lang.get('common.elements.email');
-        this.emailOptional = salla.lang.get('common.elements.optional');
-        this.agreementShowText = salla.lang.get('pages.checkout.show_full_agreement');
-        this.agreementModalHead = salla.lang.get('pages.checkout.full_agreement');
-        this.userNameLabel = salla.lang.get('pages.products.your_name');
-        this.termsChecked = false;
-        salla.onReady(() => {
-            this.productId = this.productId || salla.config.get('page.id');
-        });
-        salla.lang.onLoaded(() => {
-            this.placeHolderEmail = salla.lang.get('common.elements.email');
-            this.emailOptional = salla.lang.get('common.elements.optional');
-            this.agreementShowText = salla.lang.get('pages.checkout.show_full_agreement');
-            this.agreementModalHead = salla.lang.get('pages.checkout.full_agreement');
-            this.userNameLabel = salla.lang.get('pages.products.your_name');
-        });
-    }
-    getBtnColor() {
-        return this.quickOrderStyle === 'default' ? 'light' : 'primary';
-    }
-    getErrorMessage(type, name) {
-        return name == 'terms'
-            ? salla.lang.get('pages.checkout.check_agreement')
-            : salla.lang.get(`common.errors.${type}`, { attribute: name == 'name' ? this.userNameLabel : this.placeHolderEmail });
-    }
-    handleInvalidInput(e) {
-        let input = e.target;
-        let validity = input.validity;
-        let errorMessage;
-        if (validity.valueMissing) {
-            errorMessage = this.getErrorMessage('field_required', input.name);
-            console.log(this.getErrorMessage('field_required', input.name));
-        }
-        else if (validity.typeMismatch) {
-            errorMessage = this.getErrorMessage('invalid_value', input.name);
-        }
-        input.setCustomValidity(errorMessage);
-    }
-    async setWrapperHeight() {
-        let expandable = this.host.querySelector('.s-quick-order-expandable');
-        setTimeout(() => {
-            if (expandable.style.maxHeight || this.oneClick) {
-                expandable.style.maxHeight = null;
-            }
-            else {
-                expandable.style.maxHeight = expandable.scrollHeight + "px";
-            }
-        }, 50);
-    }
-    getDarkOrLight() {
-        return this.quickOrderStyle === 'default' && salla.config.get('theme.color.is_dark') ? 'dark' : 'light';
-    }
-    getStyleColor() {
-        return {
-            gray: '#f3f3f3',
-            white: '#ffffff',
-            default: salla.config.get('theme.color.primary'),
-        }[this.quickOrderStyle] || '#f3f3f3';
-    }
-    async submit(e, checkOneClick = false) {
-        e.preventDefault();
-        if (checkOneClick && !this.oneClick) {
-            this.expanded = !this.expanded;
-            this.setWrapperHeight();
-            return;
-        }
-        return this.submitBtn.load()
-            .then(() => this.getPayload())
-            .then((payload) => salla.api.cart.createQuickOrder(payload))
-            .then(() => {
-            setTimeout(() => {
-                this.submitBtn.stop();
-                this.submitSucess = true;
-                this.quickOrderSubmited.emit();
-            }, 200);
-        })
-            .catch(error => error && (console.error(error), this.submitBtn.stop()));
-    }
-    async getPayload() {
-        if (this.oneClick) {
-            return {
-                product_ids: [this.productId],
-                agreement: true,
-            };
-        }
-        return {
-            product_ids: [this.productId],
-            email: this.emailInput?.value,
-            phone: Number((await this.phoneInput?.getValues())?.phone),
-            country_code: (await this.phoneInput?.getValues())?.countryCode || this.countryCode,
-            name: this.nameInput?.value,
-            agreement: this.termsChecked,
-        };
-    }
-    formatAgreementText(agreement_text, length = 150) {
-        if (!agreement_text)
-            return '';
-        if (agreement_text.length <= length)
-            return agreement_text;
-        const parsedToDOM = new DOMParser().parseFromString(agreement_text, 'text/html');
-        return parsedToDOM.documentElement.innerText.substring(0, length) + '...';
-    }
-    loadQuickOrderSettings() {
-        let data = salla.config.get('store.settings.quick_order');
-        if (!data) {
-            return Promise.resolve();
-        }
-        this.user = salla.config.get('user') || salla.storage.get('user') || {};
-        this.countryCode = this.user?.country_code || this.countryCode;
-        // make email required if user is gust or is required from server
-        this.isEmailRequired = this.user?.email ? false : this.isEmailRequired;
-        // check if one click is available
-        this.oneClick = this.user?.email;
-        this.initComponentData(data);
-        return Promise.resolve();
-        // return salla.api.withoutNotifier(() => salla.api.cart.getQuickOrderSettings().then(res => this.initComponentData(res.data)));
-    }
-    initComponentData(data) {
-        this.quickOrderTitle = data.title;
-        this.subTitle = data.sub_title;
-        this.payButtonTitle = data.order_now_button;
-        this.isEmailRequired = data.is_email_required;
-        this.isTermsRequired = data.show_agreement;
-        this.agreementText = data.agreement;
-        this.confirmPayButtonTitle = data.confirm_button;
-        this.thanksMessage = data.thanks_message;
-        this.quickOrderStyle = data.style;
-        this.isAvailable = true;
-        // toggle oneClick if true
-        this.oneClick = this.oneClick && !this.isTermsRequired;
-    }
-    componentWillLoad() {
-        return new Promise(resolve => salla.onReady(() => this.loadQuickOrderSettings().then(resolve)));
-    }
-    render() {
-        if (!this.isAvailable) {
-            return;
-        }
-        if (this.submitSucess) {
-            return (h(Host, { class: "s-quick-order" }, h("div", { class: 's-quick-order-confirm', style: {
-                    backgroundColor: salla.config.get('theme.color.primary') + '10',
-                    borderColor: salla.config.get('theme.color.primary') + '10',
-                    color: salla.config.get('theme.color.primary')
-                } }, h("i", { innerHTML: CelebrationIcon }), h("span", null, this.thanksMessage))));
-        }
-        return (h(Host, { class: `s-quick-order s-quick-order-${this.getDarkOrLight()}` }, h("div", { class: `s-quick-order-container s-quick-order-${this.quickOrderStyle}`, style: { backgroundColor: this.getStyleColor() } }, h("div", { class: "s-quick-order-button-cont" }, h("div", null, h("h3", null, this.quickOrderTitle), h("p", null, this.subTitle)), h("salla-button", { class: this.expanded ? "s-quick-order-btn-close" : "", onClick: (e) => this.submit(e, true), color: this.getBtnColor() }, this.oneClick
-            ? this.confirmPayButtonTitle : this.expanded ? h("i", { innerHTML: Cancel }) : this.confirmPayButtonTitle)), h("form", { onSubmit: (e) => this.submit(e), class: 's-quick-order-expandable ' + (this.expanded ? 's-quick-order-shown' : '') }, Salla.config.isGuest() &&
-            [
-                h("div", { class: "s-form-group" }, h("span", { innerHTML: PortraitIcon }), h("input", { type: "text", required: true, class: "s-form-control s-quick-order-phone-field", name: 'name', placeholder: this.userNameLabel, ref: el => (this.nameInput = el) })),
-                h("div", { class: "s-quick-order-flex-input" }, h("div", { class: "s-form-group" }, h("span", { innerHTML: IphoneXIcon }), h("salla-tel-input", { ref: el => (this.phoneInput = el) })), h("div", { class: "s-form-group" }, h("span", { innerHTML: MailIcon }), h("input", { type: "email", class: "s-form-control s-quick-order-email-field", name: 'email', required: this.isEmailRequired, placeholder: this.placeHolderEmail + ' ' + (this.isEmailRequired ? '' : this.emailOptional), ref: el => (this.emailInput = el) }))),
-            ], this.isTermsRequired && (h("label", { htmlFor: "terms", class: "s-quick-order-terms" }, h("input", { type: "checkbox", required: true, name: 'terms', id: 'terms', ref: el => (this.termsInput = el), onChange: () => (this.termsChecked = this.termsInput.checked), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", h("div", { innerHTML: this.formatAgreementText(this.agreementText, 150) }, this.agreementText.length > 150 && (h("salla-button", { shape: "link", onClick: () => this.agreementModal.open() }, this.agreementShowText))), " "))), h("salla-button", { type: "submit", color: this.getBtnColor(), width: "wide", ref: el => (this.submitBtn = el) }, this.payButtonTitle)), h("salla-modal", { "modal-title": this.agreementModalHead, ref: modal => (this.agreementModal = modal) }, h("article", { innerHTML: this.agreementText })))));
-    }
-    componentDidLoad() {
-        this.host.querySelectorAll('input').forEach(input => {
-            input.addEventListener('invalid', e => {
-                this.handleInvalidInput(e);
-            });
-            input.addEventListener('input', () => {
-                input.setCustomValidity('');
-                input.reportValidity();
-            });
-        });
-    }
-    get host() { return this; }
-    static get style() { return sallaQuickOrderCss; }
-}, [0, "salla-quick-order", {
-        "quickOrderTitle": [1025, "quick-order-title"],
-        "subTitle": [1025, "sub-title"],
-        "payButtonTitle": [1025, "pay-button-title"],
-        "confirmPayButtonTitle": [1025, "confirm-pay-button-title"],
-        "agreementText": [1025, "agreement-text"],
-        "isEmailRequired": [1028, "is-email-required"],
-        "productId": [1025, "product-id"],
-        "thanksMessage": [1025, "thanks-message"],
-        "quickOrderStyle": [1025, "quick-order-style"],
-        "user": [32],
-        "isAvailable": [32],
-        "oneClick": [32],
-        "expanded": [32],
-        "isTermsRequired": [32],
-        "countryCode": [32],
-        "submitSucess": [32],
-        "placeHolderEmail": [32],
-        "emailOptional": [32],
-        "agreementShowText": [32],
-        "agreementModalHead": [32],
-        "userNameLabel": [32],
-        "termsChecked": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["salla-quick-order", "salla-button", "salla-loading", "salla-modal", "salla-tel-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "salla-quick-order":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SallaQuickOrder$1);
-            }
-            break;
-        case "salla-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "salla-loading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "salla-modal":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "salla-tel-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const SallaQuickOrder = SallaQuickOrder$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SallaQuickOrder, defineCustomElement };
+import{transformTag as t,proxyCustomElement as s,HTMLElement as e,createEvent as i,h as l,Host as a}from"@stencil/core/internal/client";import{M as r}from"./mail.js";import{C as o}from"./cancel.js";import{d as n}from"./salla-button2.js";import{d as h}from"./salla-loading2.js";import{d as c}from"./salla-modal2.js";import{d as u}from"./salla-tel-input2.js";const m=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.quickOrderSubmited=i(this,"quickOrderSubmited",7),this.quickOrderTitle="ليش تنتظر؟",this.subTitle="احصل على المنتج مباشرة الآن",this.payButtonTitle="اطلب المنتج",this.confirmPayButtonTitle="اشتر الآن",this.agreementText=salla.lang.get("pages.checkout.show_full_agreement"),this.isEmailRequired=!1,this.quickOrderStyle="default",this.isAvailable=!1,this.oneClick=!1,this.expanded=!1,this.isTermsRequired=!1,this.countryCode=salla.config.get("user.country_code","SA")||"SA",this.submitSucess=!1,this.placeHolderEmail=salla.lang.get("common.elements.email"),this.emailOptional=salla.lang.get("common.elements.optional"),this.agreementShowText=salla.lang.get("pages.checkout.show_full_agreement"),this.agreementModalHead=salla.lang.get("pages.checkout.full_agreement"),this.userNameLabel=salla.lang.get("pages.products.your_name"),this.termsChecked=!1,salla.onReady((()=>{this.productId=this.productId||salla.config.get("page.id")})),salla.lang.onLoaded((()=>{this.placeHolderEmail=salla.lang.get("common.elements.email"),this.emailOptional=salla.lang.get("common.elements.optional"),this.agreementShowText=salla.lang.get("pages.checkout.show_full_agreement"),this.agreementModalHead=salla.lang.get("pages.checkout.full_agreement"),this.userNameLabel=salla.lang.get("pages.products.your_name")}))}getBtnColor(){return"default"===this.quickOrderStyle?"light":"primary"}getErrorMessage(t,s){return"terms"==s?salla.lang.get("pages.checkout.check_agreement"):salla.lang.get("common.errors."+t,{attribute:"name"==s?this.userNameLabel:this.placeHolderEmail})}handleInvalidInput(t){let s,e=t.target,i=e.validity;i.valueMissing?(s=this.getErrorMessage("field_required",e.name),console.log(this.getErrorMessage("field_required",e.name))):i.typeMismatch&&(s=this.getErrorMessage("invalid_value",e.name)),e.setCustomValidity(s)}async setWrapperHeight(){let t=this.host.querySelector(".s-quick-order-expandable");setTimeout((()=>{t.style.maxHeight=t.style.maxHeight||this.oneClick?null:t.scrollHeight+"px"}),50)}getDarkOrLight(){return"default"===this.quickOrderStyle&&salla.config.get("theme.color.is_dark")?"dark":"light"}getStyleColor(){return{gray:"#f3f3f3",white:"#ffffff",default:salla.config.get("theme.color.primary")}[this.quickOrderStyle]||"#f3f3f3"}async submit(t,s=!1){return t.preventDefault(),s&&!this.oneClick?(this.expanded=!this.expanded,void this.setWrapperHeight()):this.submitBtn.load().then((()=>this.getPayload())).then((t=>salla.api.cart.createQuickOrder(t))).then((()=>{setTimeout((()=>{this.submitBtn.stop(),this.submitSucess=!0,this.quickOrderSubmited.emit()}),200)})).catch((t=>t&&(console.error(t),this.submitBtn.stop())))}async getPayload(){return this.oneClick?{product_ids:[this.productId],agreement:!0}:{product_ids:[this.productId],email:this.emailInput?.value,phone:Number((await(this.phoneInput?.getValues()))?.phone),country_code:(await(this.phoneInput?.getValues()))?.countryCode||this.countryCode,name:this.nameInput?.value,agreement:this.termsChecked}}formatAgreementText(t,s=150){return t?t.length<=s?t:(new DOMParser).parseFromString(t,"text/html").documentElement.innerText.substring(0,s)+"...":""}loadQuickOrderSettings(){let t=salla.config.get("store.settings.quick_order");return t?(this.user=salla.config.get("user")||salla.storage.get("user")||{},this.countryCode=this.user?.country_code||this.countryCode,this.isEmailRequired=!this.user?.email&&this.isEmailRequired,this.oneClick=this.user?.email,this.initComponentData(t),Promise.resolve()):Promise.resolve()}initComponentData(t){this.quickOrderTitle=t.title,this.subTitle=t.sub_title,this.payButtonTitle=t.order_now_button,this.isEmailRequired=t.is_email_required,this.isTermsRequired=t.show_agreement,this.agreementText=t.agreement,this.confirmPayButtonTitle=t.confirm_button,this.thanksMessage=t.thanks_message,this.quickOrderStyle=t.style,this.isAvailable=!0,this.oneClick=this.oneClick&&!this.isTermsRequired}componentWillLoad(){return new Promise((t=>salla.onReady((()=>this.loadQuickOrderSettings().then(t)))))}render(){if(this.isAvailable)return this.submitSucess?l(a,{class:"s-quick-order"},l("div",{class:"s-quick-order-confirm",style:{backgroundColor:salla.config.get("theme.color.primary")+"10",borderColor:salla.config.get("theme.color.primary")+"10",color:salla.config.get("theme.color.primary")}},l("i",{innerHTML:'\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>party-horn</title>\n<path fill="currentColor" d="M5.333 4.013c0.736 0 1.333-0.596 1.333-1.333v-0.013c0-0.737-0.597-1.327-1.333-1.327s-1.333 0.603-1.333 1.34 0.597 1.333 1.333 1.333zM11.333 10c0.341 0 0.683-0.131 0.943-0.391 1.541-1.54 2.391-3.589 2.391-5.771v-2.505c0-0.737-0.597-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v2.505c0 1.468-0.572 2.848-1.609 3.885-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391zM18.667 9.993c0.319 0 0.639-0.115 0.895-0.345 0.383-0.347 0.684-0.325 1.497-0.22 0.923 0.124 2.319 0.307 3.636-0.887 1.293-1.172 1.303-2.54 1.308-3.539 0.005-0.887 0.043-1.228 0.432-1.581 0.361-0.327 0.621-0.335 1.493-0.216 0.923 0.12 2.317 0.307 3.635-0.884 0.545-0.495 0.587-1.337 0.093-1.883-0.493-0.547-1.336-0.589-1.884-0.093-0.361 0.325-0.621 0.333-1.493 0.216-0.921-0.119-2.317-0.305-3.635 0.884-1.293 1.173-1.303 2.541-1.308 3.54-0.005 0.885-0.043 1.227-0.432 1.58-0.383 0.348-0.683 0.327-1.497 0.22-0.924-0.124-2.32-0.305-3.636 0.887-0.545 0.495-0.587 1.339-0.092 1.884 0.264 0.291 0.625 0.437 0.988 0.437zM18.667 16.013c0.736 0 1.333-0.596 1.333-1.333v-0.013c0-0.737-0.597-1.327-1.333-1.327s-1.333 0.603-1.333 1.34 0.597 1.333 1.333 1.333zM30.667 17.333h-2.505c-2.179 0-4.228 0.849-5.771 2.391-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.603 0.391 0.944 0.391s0.683-0.131 0.943-0.391c1.023-1.023 2.439-1.609 3.884-1.609h2.505c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333zM30.667 10.66c-0.736 0-1.333 0.603-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM29.333 26.66c-0.736 0-1.333 0.603-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM7.456 11.057c-0.327-0.327-0.799-0.46-1.249-0.356-0.449 0.107-0.812 0.439-0.959 0.876l-5.036 15.113c-0.487 1.457-0.113 3.037 0.973 4.125 0.772 0.771 1.792 1.183 2.84 1.183 0.428 0 0.861-0.068 1.284-0.209l15.112-5.037c0.439-0.145 0.769-0.508 0.876-0.959 0.107-0.449-0.028-0.921-0.355-1.249zM4.467 29.259c-0.503 0.163-1.023 0.043-1.395-0.329-0.373-0.373-0.497-0.896-0.329-1.396l4.355-13.065 10.436 10.435z"></path>\n</svg>\n'}),l("span",null,this.thanksMessage))):l(a,{class:"s-quick-order s-quick-order-"+this.getDarkOrLight()},l("div",{class:"s-quick-order-container s-quick-order-"+this.quickOrderStyle,style:{backgroundColor:this.getStyleColor()}},l("div",{class:"s-quick-order-button-cont"},l("div",null,l("h3",null,this.quickOrderTitle),l("p",null,this.subTitle)),l("salla-button",{class:this.expanded?"s-quick-order-btn-close":"",onClick:t=>this.submit(t,!0),color:this.getBtnColor()},this.oneClick?this.confirmPayButtonTitle:this.expanded?l("i",{innerHTML:o}):this.confirmPayButtonTitle)),l("form",{onSubmit:t=>this.submit(t),class:"s-quick-order-expandable "+(this.expanded?"s-quick-order-shown":"")},Salla.config.isGuest()&&[l("div",{class:"s-form-group"},l("span",{innerHTML:'\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>portrait</title>\n<path d="M24 1.333h-16c-3.676 0-6.667 2.991-6.667 6.667v16c0 3.028 2.041 5.561 4.811 6.371 0.004 0.001 0.008 0.003 0.012 0.004 0.591 0.172 1.2 0.292 1.844 0.292h16c0.644 0 1.253-0.12 1.843-0.292 0.004-0.001 0.008-0.003 0.012-0.004 2.771-0.809 4.812-3.343 4.812-6.371v-16c0-3.676-2.991-6.667-6.667-6.667zM8.012 28c0.121-1.915 3.363-4 7.988-4s7.868 2.085 7.988 4zM28 24c0 1.24-0.579 2.335-1.467 3.069-0.768-3.288-5.112-5.736-10.533-5.736s-9.765 2.448-10.533 5.736c-0.888-0.735-1.467-1.829-1.467-3.069v-16c0-2.205 1.795-4 4-4h16c2.205 0 4 1.795 4 4zM16 6.667c-3.308 0-6 2.692-6 6s2.692 6 6 6 6-2.692 6-6-2.692-6-6-6zM16 16c-1.839 0-3.333-1.495-3.333-3.333s1.495-3.333 3.333-3.333 3.333 1.495 3.333 3.333-1.495 3.333-3.333 3.333z"></path>\n</svg>\n'}),l("input",{type:"text",required:!0,class:"s-form-control s-quick-order-phone-field",name:"name",placeholder:this.userNameLabel,ref:t=>this.nameInput=t})),l("div",{class:"s-quick-order-flex-input"},l("div",{class:"s-form-group"},l("span",{innerHTML:'\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>iphone-x</title>\n<path d="M24 0h-16c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h16c2.205 0 4-1.795 4-4v-24c0-2.205-1.795-4-4-4zM25.333 28c0 0.736-0.597 1.333-1.333 1.333h-16c-0.736 0-1.333-0.597-1.333-1.333v-24c0-0.735 0.597-1.333 1.333-1.333h4c0 1.471 1.196 2.667 2.667 2.667h2.667c1.471 0 2.667-1.196 2.667-2.667h4c0.736 0 1.333 0.599 1.333 1.333z"></path>\n</svg>\n'}),l("salla-tel-input",{ref:t=>this.phoneInput=t})),l("div",{class:"s-form-group"},l("span",{innerHTML:r}),l("input",{type:"email",class:"s-form-control s-quick-order-email-field",name:"email",required:this.isEmailRequired,placeholder:this.placeHolderEmail+" "+(this.isEmailRequired?"":this.emailOptional),ref:t=>this.emailInput=t})))],this.isTermsRequired&&l("label",{htmlFor:"terms",class:"s-quick-order-terms"},l("input",{type:"checkbox",required:!0,name:"terms",id:"terms",ref:t=>this.termsInput=t,onChange:()=>this.termsChecked=this.termsInput.checked,class:"s-checkbox"}),l("span",{class:"s-form-label"}," ",l("div",{innerHTML:this.formatAgreementText(this.agreementText,150)},this.agreementText.length>150&&l("salla-button",{shape:"link",onClick:()=>this.agreementModal.open()},this.agreementShowText))," ")),l("salla-button",{type:"submit",color:this.getBtnColor(),width:"wide",ref:t=>this.submitBtn=t},this.payButtonTitle)),l("salla-modal",{"modal-title":this.agreementModalHead,ref:t=>this.agreementModal=t},l("article",{innerHTML:this.agreementText}))))}componentDidLoad(){this.host.querySelectorAll("input").forEach((t=>{t.addEventListener("invalid",(t=>{this.handleInvalidInput(t)})),t.addEventListener("input",(()=>{t.setCustomValidity(""),t.reportValidity()}))}))}get host(){return this}static get style(){return".s-quick-order-expandable:not(.s-quick-order-shown){overflow:hidden}"}},[0,"salla-quick-order",{quickOrderTitle:[1025,"quick-order-title"],subTitle:[1025,"sub-title"],payButtonTitle:[1025,"pay-button-title"],confirmPayButtonTitle:[1025,"confirm-pay-button-title"],agreementText:[1025,"agreement-text"],isEmailRequired:[1028,"is-email-required"],productId:[1025,"product-id"],thanksMessage:[1025,"thanks-message"],quickOrderStyle:[1025,"quick-order-style"],user:[32],isAvailable:[32],oneClick:[32],expanded:[32],isTermsRequired:[32],countryCode:[32],submitSucess:[32],placeHolderEmail:[32],emailOptional:[32],agreementShowText:[32],agreementModalHead:[32],userNameLabel:[32],termsChecked:[32]}]);function d(){"undefined"!=typeof customElements&&["salla-quick-order","salla-button","salla-loading","salla-modal","salla-tel-input"].forEach((s=>{switch(s){case"salla-quick-order":customElements.get(t(s))||customElements.define(t(s),m);break;case"salla-button":customElements.get(t(s))||n();break;case"salla-loading":customElements.get(t(s))||h();break;case"salla-modal":customElements.get(t(s))||c();break;case"salla-tel-input":customElements.get(t(s))||u()}}))}d();const p=m,g=d;export{p as SallaQuickOrder,g as defineCustomElement}