@salla.sa/twilight-components 2.14.392 → 2.14.393

package/dist/components/salla-search.js

@@ -1,216 +1,4 @@
 /*!
  * Crafted with ❤ by Salla
  */
-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 };
+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}

package/dist/components/salla-skeleton.js

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

package/dist/components/salla-skeleton2.js

@@ -1,53 +1,4 @@
 /*!
  * Crafted with ❤ by Salla
  */
-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 };
+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}

package/dist/components/salla-slider.js

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