@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-search.js

@@ -1,4 +1,216 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as e,HTMLElement as a,h as t}from"@stencil/core/internal/client";import{S as i}from"./search.js";import{H as c}from"./Helper.js";import{d as r}from"./salla-button2.js";import{d as h}from"./salla-loading2.js";import{d as l}from"./salla-modal2.js";const o=e(class extends a{constructor(s){super(),!1!==s&&this.__registerHost(),this.inputValue="",this.translationLoaded=!1,this.loading=!1,this.typing=!1,this.debounce=setTimeout((()=>""),1e3),this.placeholder=!1,this.inline=!1,this.oval=!1,this.height=60,this.maxWords=5,this.showAction=!1,this.productSlot=this.host.querySelector('[slot="product"]')?.innerHTML||this.getDefaultProductSlot(),salla.event.on("search::open",(()=>this.open())),salla.lang.onLoaded((()=>{this.translationLoaded=!0})),salla.event.on("modalClosed",(()=>this.onModalClose()))}async open(){this.inline||await this.modal.open().then((()=>setTimeout((()=>this.searchInput.focus()),300)))}onModalClose(){this.searchInput.value="",this.results=void 0,this.afterSearching(),this.container.classList.remove("s-search-no-results")}handleKeyDown(s){"Enter"===s.key&&this.search_term?.length&&(window.location.href=salla.url.get("search?q="+encodeURI(this.search_term)))}getDefaultProductSlot(){return'<div class="s-search-product-image-container">  <img class="s-search-product-image" src="{image}" alt="{name}"/></div><div class="s-search-product-details">  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div></div>'}debounceSearch(s){this.typing=!0,clearTimeout(this.debounce),this.debounce=setTimeout((()=>{this.typing=!1,this.search_term=s.target.value}),700)}limitWordsAndSearch(s){const e=s.target.value.trim().split(/\s+/);if(e.length>this.maxWords){const s=e.slice(0,this.maxWords).join(" ");this.searchInput.value=s}this.debounceSearch(s)}getQueryParam(s){return new URLSearchParams(window.location.search).get(s)}handleActionClick(){if(this.search_term&&this.search_term.length>2)return this.search(this.search_term)}handleSearch(s){this.inputValue=s,s.length>2?this.search(s):(this.results=void 0,this.afterSearching())}search(s){this.noResults.style.display="none",this.loading=!0,salla.product.fetch({source:"search",source_value:s}).then((e=>{this.results=e,salla.event.emit("Products Searched",s)})).catch((s=>"Query is same as previous one!"!==s?this.results=void 0:null)).finally((()=>this.afterSearching(!1)))}afterSearching(s=!0){this.noResults.style.display=s||this.results?.data.length>0?"none":"block",c.toggleElementClassIf(this.container,"s-search-container-open","s-search-no-results",(()=>this.results?.data.length)),this.loading=!1,salla.product.api.previousQuery="",this.inputValue.length<3&&this.container.classList.remove("s-search-no-results")}render(){const s=t("div",{key:"a403e7257b398cce5c26c61f55e143775575bb7b",class:{"s-search-container":!0,"s-search-inline":this.inline},ref:s=>this.container=s},t("div",{key:"3c3d523d181ec1c7b4e9d9e05988d1d2a4e0362d",class:"s-search-input-wrapper"},t("span",{key:"86a8bcf0ab96c8818fc940d7ed4cfd70429ee2c1",class:"s-search-icon-wrap"},t("span",{key:"0bacbc11b2b9c63c2167e79f46c73cb80804869a",class:"s-search-icon",innerHTML:this.loading?'<i class="s-search-spinner-loader"/>':i})),t("input",{key:"766e7ae8ce9c2bdcf984d76c47a234ba5dc60d43",type:"search",enterkeyhint:"search",autocomplete:"off",class:"s-search-input",placeholder:salla.lang.get("blocks.header.search_placeholder"),onInput:s=>this.limitWordsAndSearch(s),onKeyDown:s=>this.handleKeyDown(s),ref:s=>this.searchInput=s,style:{height:this.height+"px",borderRadius:this.oval?this.height/2+"px":""}}),this.showAction?t("salla-button",{loading:this.loading,class:{"s-search-action":!0,"s-search-action-oval":this.oval},onClick:()=>this.handleActionClick()},!this.loading&&t("span",{innerHTML:i})):null),t("div",{key:"307c8fc64860af188bf1f1ba6eea480c357ac46d",class:"s-search-results"},this.results?.data.map((s=>t("a",{href:s.url+"?from=search-bar",class:{"s-search-product":!0,"s-search-product-not-available":!s.is_available},innerHTML:this.productSlot.replace(/\{name\}/g,s.name).replace(/\{price\}/g,s.price?salla.money(s.price):"").replace(/\{regular_price\}/g,s.is_on_sale&&s.regular_price?salla.money(s.regular_price):"").replace(/\{image\}/g,s.image.url)}))),t("p",{key:"b0971a0eb27a98f2e4e53da6462b0a8fa1b7fa42",ref:s=>this.noResults=s,class:"s-search-no-results-placeholder"},salla.lang.get("common.elements.no_options")))),e=t("salla-modal",{key:"9394500f337c06afad44d5202e8e84dc2feb317f",position:"top",class:"s-search-modal",ref:s=>this.modal=s},s),a=t("div",{key:"f092b80ca35842209eae7b1ef143619d2a718229",class:"s-search-placeholder-wrapper s-search-inline"},t("div",{key:"020d98faaa926578057e49734d7f11077a0b933b",class:"s-search-input-wrapper"},t("span",{key:"44b6f78b74952d562efcb6dcd652432b5b1a7053",class:"s-search-icon-wrap"},t("span",{key:"d4e4166510cc4d38e53668f0f4f3995861a65d24",class:"s-search-icon",innerHTML:i})),t("button",{key:"615e5dd776936c182fa7f50efaebbe5fa0fb7c61",type:"button",class:"s-search-input s-search-placeholder-trigger",onClick:()=>this.open(),style:{height:this.height+"px",borderRadius:this.oval?this.height/2+"px":""}},salla.lang.get("blocks.header.search_placeholder"))),e);return this.placeholder?a:this.inline?t("div",{class:"s-search-modal"},s):e}componentDidLoad(){this.afterSearching(),this.searchInput.value=this.getQueryParam("q")}get host(){return this}static get watchers(){return{search_term:[{handleSearch:0}]}}static get style(){return".s-search-placeholder-wrapper{position:relative;display:inline-block}.s-search-input-wrapper{position:relative}.s-search-placeholder-trigger{cursor:pointer;appearance:none;text-align:start}"}},[0,"salla-search",{placeholder:[4],inline:[4],oval:[4],height:[2],maxWords:[2,"max-words"],showAction:[4,"show-action"],translationLoaded:[32],results:[32],loading:[32],typing:[32],debounce:[32],search_term:[32]},[[0,"keydown","handleKeyDown"]],{search_term:[{handleSearch:0}]}]);function n(){"undefined"!=typeof customElements&&["salla-search","salla-button","salla-loading","salla-modal"].forEach((e=>{switch(e){case"salla-search":customElements.get(s(e))||customElements.define(s(e),o);break;case"salla-button":customElements.get(s(e))||r();break;case"salla-loading":customElements.get(s(e))||h();break;case"salla-modal":customElements.get(s(e))||l()}}))}n();const d=o,p=n;export{d as SallaSearch,p as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { S as Search } from './search.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';
+
+const sallaSearchCss = ".s-search-placeholder-wrapper{position:relative;display:inline-block}.s-search-input-wrapper{position:relative}.s-search-placeholder-trigger{cursor:pointer;appearance:none;text-align:start}";
+
+const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.inputValue = '';
+        this.translationLoaded = false;
+        this.loading = false;
+        this.typing = false;
+        this.debounce = setTimeout(() => '', 1000);
+        /**
+         * Set the component to display as a placeholder (button) that will open the modal. Defaults to `false`
+         */
+        this.placeholder = false;
+        /**
+         * Set the component display without modal window. Defaults to `false`
+         */
+        this.inline = false;
+        /**
+         * Adds a border radius to the input. Half of the height.
+         */
+        this.oval = false;
+        /**
+         * Sets the height of the input
+         */
+        this.height = 60;
+        /**
+         * Maximum number of words allowed in the input
+         */
+        this.maxWords = 5;
+        /**
+         * Show submit action buttons at the end.
+         */
+        this.showAction = false;
+        this.productSlot =
+            this.host.querySelector('[slot="product"]')?.innerHTML || this.getDefaultProductSlot();
+        salla.event.on('search::open', () => this.open());
+        salla.lang.onLoaded(() => {
+            this.translationLoaded = true;
+        });
+        salla.event.on('modalClosed', () => this.onModalClose());
+    }
+    async open() {
+        if (!this.inline) {
+            await this.modal.open().then(() => setTimeout(() => this.searchInput.focus(), 300));
+        }
+    }
+    onModalClose() {
+        this.searchInput.value = '';
+        this.results = undefined;
+        this.afterSearching();
+        this.container.classList.remove('s-search-no-results');
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Enter' && this.search_term?.length) {
+            window.location.href = salla.url.get('search?q=' + encodeURI(this.search_term));
+        }
+    }
+    getDefaultProductSlot() {
+        return ('<div class="s-search-product-image-container">' +
+            '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
+            '</div>' +
+            '<div class="s-search-product-details">' +
+            '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
+            '</div>');
+    }
+    debounceSearch(event) {
+        this.typing = true;
+        clearTimeout(this.debounce);
+        this.debounce = setTimeout(() => {
+            this.typing = false;
+            this.search_term = event.target.value;
+        }, 700);
+    }
+    limitWordsAndSearch(event) {
+        let value = event.target.value;
+        const words = value.trim().split(/\s+/);
+        if (words.length > this.maxWords) {
+            const truncatedInput = words.slice(0, this.maxWords).join(' ');
+            this.searchInput.value = truncatedInput;
+        }
+        this.debounceSearch(event);
+    }
+    getQueryParam(param) {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get(param);
+    }
+    handleActionClick() {
+        if (!!this.search_term && this.search_term.length > 2) {
+            return this.search(this.search_term);
+        }
+    }
+    handleSearch(val) {
+        this.inputValue = val;
+        if (val.length > 2) {
+            this.search(val);
+        }
+        else {
+            this.results = undefined;
+            this.afterSearching();
+        }
+    }
+    search(val) {
+        this.noResults.style.display = 'none';
+        //run loading spinner or stop it
+        this.loading = true;
+        salla.product
+            .fetch({ source: 'search', source_value: val })
+            .then(response => {
+            this.results = response;
+            salla.event.emit('Products Searched', val);
+        })
+            .catch(err => (err !== 'Query is same as previous one!' ? (this.results = undefined) : null))
+            .finally(() => this.afterSearching(/*isEmpty*/ false));
+    }
+    afterSearching(isEmpty = true) {
+        this.noResults.style.display = isEmpty || this.results?.data.length > 0 ? 'none' : 'block';
+        Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => this.results?.data.length);
+        this.loading = false;
+        salla.product.api.previousQuery = ''; //avoid having error 'Query is same as previous one!' after reopen modal;
+        this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
+    }
+    render() {
+        const searchContent = (h("div", { key: 'a403e7257b398cce5c26c61f55e143775575bb7b', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => (this.container = container) }, h("div", { key: '3c3d523d181ec1c7b4e9d9e05988d1d2a4e0362d', class: "s-search-input-wrapper" }, h("span", { key: '86a8bcf0ab96c8818fc940d7ed4cfd70429ee2c1', class: "s-search-icon-wrap" }, h("span", { key: '0bacbc11b2b9c63c2167e79f46c73cb80804869a', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: '766e7ae8ce9c2bdcf984d76c47a234ba5dc60d43', type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => (this.searchInput = input), style: {
+                height: this.height + 'px',
+                borderRadius: this.oval ? this.height / 2 + 'px' : '',
+            } }), this.showAction ? (h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && h("span", { innerHTML: Search }))) : null), h("div", { key: '307c8fc64860af188bf1f1ba6eea480c357ac46d', class: "s-search-results" }, this.results?.data.map(product => (h("a", { href: product.url + '?from=search-bar', class: {
+                's-search-product': true,
+                's-search-product-not-available': !product.is_available,
+            }, innerHTML: this.productSlot
+                .replace(/\{name\}/g, product.name)
+                .replace(/\{price\}/g, product.price ? salla.money(product.price) : '')
+                .replace(/\{regular_price\}/g, product.is_on_sale && product.regular_price
+                ? salla.money(product.regular_price)
+                : '')
+                .replace(/\{image\}/g, product.image.url) }))), h("p", { key: 'b0971a0eb27a98f2e4e53da6462b0a8fa1b7fa42', ref: el => (this.noResults = el), class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options')))));
+        const modalContent = (h("salla-modal", { key: '9394500f337c06afad44d5202e8e84dc2feb317f', position: "top", class: "s-search-modal", ref: modal => (this.modal = modal) }, searchContent));
+        const placeholderContent = (h("div", { key: 'f092b80ca35842209eae7b1ef143619d2a718229', class: "s-search-placeholder-wrapper s-search-inline" }, h("div", { key: '020d98faaa926578057e49734d7f11077a0b933b', class: "s-search-input-wrapper" }, h("span", { key: '44b6f78b74952d562efcb6dcd652432b5b1a7053', class: "s-search-icon-wrap" }, h("span", { key: 'd4e4166510cc4d38e53668f0f4f3995861a65d24', class: "s-search-icon", innerHTML: Search })), h("button", { key: '615e5dd776936c182fa7f50efaebbe5fa0fb7c61', type: "button", class: "s-search-input s-search-placeholder-trigger", onClick: () => this.open(), style: {
+                height: this.height + 'px',
+                borderRadius: this.oval ? this.height / 2 + 'px' : '',
+            } }, salla.lang.get('blocks.header.search_placeholder'))), modalContent));
+        return this.placeholder ? (placeholderContent) : this.inline ? (h("div", { class: "s-search-modal" }, searchContent)) : (modalContent);
+    }
+    /**
+     * Run it one time after load
+     */
+    componentDidLoad() {
+        this.afterSearching();
+        this.searchInput.value = this.getQueryParam('q');
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "search_term": ["handleSearch"]
+    }; }
+    static get style() { return sallaSearchCss; }
+}, [0, "salla-search", {
+        "placeholder": [4],
+        "inline": [4],
+        "oval": [4],
+        "height": [2],
+        "maxWords": [2, "max-words"],
+        "showAction": [4, "show-action"],
+        "translationLoaded": [32],
+        "results": [32],
+        "loading": [32],
+        "typing": [32],
+        "debounce": [32],
+        "search_term": [32]
+    }, [[0, "keydown", "handleKeyDown"]], {
+        "search_term": ["handleSearch"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-search", "salla-button", "salla-loading", "salla-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-search":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaSearch$1);
+            }
+            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;
+    } });
+}
+defineCustomElement$1();
+
+const SallaSearch = SallaSearch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaSearch, defineCustomElement };

package/dist/components/salla-skeleton.js

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

package/dist/components/salla-skeleton2.js

@@ -1,4 +1,53 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as s,h as c,Host as l}from"@stencil/core/internal/client";const a=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.type="normal",this.width="100%",this.height="100%"}render(){return c(l,{key:"366d9fcd96b22edc9b5cdc07f8d8367fdbc5c574",class:"s-skeleton-wrapper",style:{width:this.width,height:this.height}},c("div",{key:"b4ad9adc7d8ce69aeaeaa1cf287726fa69018730",class:{"s-skeleton-item":!0,"s-skeleton-item-circular":"circle"==this.type}}," "))}static get style(){return":host{display:block}"}},[0,"salla-skeleton",{type:[1],width:[1],height:[1]}]);function i(){"undefined"!=typeof customElements&&["salla-skeleton"].forEach((t=>{"salla-skeleton"===t&&(customElements.get(e(t))||customElements.define(e(t),a))}))}i();export{a as S,i as d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sallaSkeletonCss = ":host{display:block}";
+
+const SallaSkeleton = /*@__PURE__*/ proxyCustomElement(class SallaSkeleton extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+       *  Set the shape type of the skeleton is it circle or normal
+       */
+        this.type = 'normal';
+        /**
+       *  Set the skeleton width
+       */
+        this.width = '100%';
+        /**
+       *  Set the skeleton height
+       */
+        this.height = '100%';
+    }
+    render() {
+        const classes = {
+            's-skeleton-item': true,
+            's-skeleton-item-circular': this.type == 'circle',
+        };
+        return (h(Host, { key: '366d9fcd96b22edc9b5cdc07f8d8367fdbc5c574', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: 'b4ad9adc7d8ce69aeaeaa1cf287726fa69018730', class: classes }, "\u00A0")));
+    }
+    static get style() { return sallaSkeletonCss; }
+}, [0, "salla-skeleton", {
+        "type": [1],
+        "width": [1],
+        "height": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-skeleton"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-skeleton":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaSkeleton);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaSkeleton as S, defineCustomElement as d };

package/dist/components/salla-slider.js

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