@salla.sa/twilight-components 1.0.6 → 1.0.7

package/dist/esm/{index-8919a244.js → index-643344dc.js}

@@ -19,7 +19,17 @@ const plt = {
     ce: (eventName, opts) => new CustomEvent(eventName, opts),
 };
 const promiseResolve = (v) => Promise.resolve(v);
+const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
+        try {
+            new CSSStyleSheet();
+            return typeof new CSSStyleSheet().replace === 'function';
+        }
+        catch (e) { }
+        return false;
+    })()
+    ;
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
 const createTime = (fnName, tagName = '') => {
     {
         return () => {
@@ -34,6 +44,59 @@ const uniqueTime = (key, measureText) => {
         };
     }
 };
+const rootAppliedStyles = new WeakMap();
+const registerStyle = (scopeId, cssText, allowCS) => {
+    let style = styles.get(scopeId);
+    if (supportsConstructibleStylesheets && allowCS) {
+        style = (style || new CSSStyleSheet());
+        style.replace(cssText);
+    }
+    else {
+        style = cssText;
+    }
+    styles.set(scopeId, style);
+};
+const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    let scopeId = getScopeId(cmpMeta);
+    let style = styles.get(scopeId);
+    // if an element is NOT connected then getRootNode() will return the wrong root node
+    // so the fallback is to always use the document for the root node in those cases
+    styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
+    if (style) {
+        if (typeof style === 'string') {
+            styleContainerNode = styleContainerNode.head || styleContainerNode;
+            let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+            let styleElm;
+            if (!appliedStyles) {
+                rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
+            }
+            if (!appliedStyles.has(scopeId)) {
+                {
+                    {
+                        styleElm = doc.createElement('style');
+                        styleElm.innerHTML = style;
+                    }
+                    styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
+                }
+                if (appliedStyles) {
+                    appliedStyles.add(scopeId);
+                }
+            }
+        }
+        else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
+            styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+        }
+    }
+    return scopeId;
+};
+const attachStyles = (hostRef) => {
+    const cmpMeta = hostRef.$cmpMeta$;
+    const elm = hostRef.$hostElement$;
+    const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
+    addStyle(elm.getRootNode(), cmpMeta);
+    endAttachStyles();
+};
+const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
 /**
  * Default style mode id
  */
@@ -60,6 +123,7 @@ const isComplexType = (o) => {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let slotName = null;
     let simple = false;
     let lastSimple = false;
@@ -88,6 +152,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         if (vnodeData.name) {
             slotName = vnodeData.name;
         }
@@ -108,6 +176,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     {
         vnode.$name$ = slotName;
     }
@@ -124,6 +195,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     {
         vnode.$name$ = null;
     }
@@ -175,6 +249,14 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
         }
+        else if (memberName === 'key')
+            ;
+        else if (memberName === 'ref') {
+            // minifier will clean this up
+            if (newValue) {
+                newValue(elm);
+            }
+        }
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -236,16 +318,36 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
                 catch (e) { }
             }
+            /**
+             * Need to manually update attribute if:
+             * - memberName is not an attribute
+             * - if we are rendering the host element in order to reflect attribute
+             * - if it's a SVG, since properties might not work in <svg>
+             * - if the newValue is null/undefined or 'false'.
+             */
+            let xlink = false;
+            {
+                if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
+                    memberName = ln;
+                    xlink = true;
+                }
+            }
             if (newValue == null || newValue === false) {
                 if (newValue !== false || elm.getAttribute(memberName) === '') {
-                    {
+                    if (xlink) {
+                        elm.removeAttributeNS(XLINK_NS, memberName);
+                    }
+                    else {
                         elm.removeAttribute(memberName);
                     }
                 }
             }
             else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
                 newValue = newValue === true ? '' : newValue;
-                {
+                if (xlink) {
+                    elm.setAttributeNS(XLINK_NS, memberName, newValue);
+                }
+                else {
                     elm.setAttribute(memberName, newValue);
                 }
             }
@@ -385,6 +487,7 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
             elm = vnode.$elm$;
+            callNodeRefs(vnode);
             {
                 // we're removing this element
                 // so it's possible we need to show slot fallback content now
@@ -407,6 +510,8 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -414,6 +519,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // Vnode might have been moved left
@@ -459,7 +565,29 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // createKeyToOldIdx
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // new element
                 node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
                 newStartVnode = newCh[++newStartIdx];
@@ -485,7 +613,9 @@ const isSameVnode = (vnode1, vnode2) => {
         if (vnode1.$tag$ === 'slot') {
             return vnode1.$name$ === vnode2.$name$;
         }
-        return true;
+        {
+            return vnode1.$key$ === vnode2.$key$;
+        }
     }
     return false;
 };
@@ -675,6 +805,12 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
     }
     return slotNameAttr === '';
 };
+const callNodeRefs = (vNode) => {
+    {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+        vNode.$children$ && vNode.$children$.map(callNodeRefs);
+    }
+};
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
@@ -830,13 +966,17 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
         }
     }
     endSchedule();
-    return then(promise, () => updateComponent(hostRef, instance));
+    return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
     // updateComponent
     const elm = hostRef.$hostElement$;
     const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
     const rc = elm['s-rc'];
+    if (isInitialLoad) {
+        // DOM WRITE!
+        attachStyles(hostRef);
+    }
     const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
     {
         callRender(hostRef, instance);
@@ -965,6 +1105,10 @@ const parsePropertyValue = (propValue, propType) => {
             // but we'll cheat here and say that the string "false" is the boolean false
             return propValue === 'false' ? false : propValue === '' || !!propValue;
         }
+        if (propType & 2 /* Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
         if (propType & 1 /* String */) {
             // could have been passed as a number or boolean
             // but we still want it as a string
@@ -1165,6 +1309,16 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             }
             endNewInstance();
         }
+        if (Cstr.style) {
+            // this component has styles but we haven't registered them yet
+            let style = Cstr.style;
+            const scopeId = getScopeId(cmpMeta);
+            if (!styles.has(scopeId)) {
+                const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
+                registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
+                endRegisterStyles();
+            }
+        }
     }
     // we've successfully created a lazy instance
     const ancestorComponent = hostRef.$ancestorComponent$;
@@ -1372,6 +1526,7 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
         return importedModule[exportName];
     }, consoleError);
 };
+const styles = new Map();
 const queueDomReads = [];
 const queueDomWrites = [];
 const queueTask = (queue, write) => (cb) => {

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-export { S as SallaLogin } from './salla-login-4aa5bb90.js';
-export { S as SallaSearch } from './salla-search-bd2f71b3.js';
-import './index-8919a244.js';
+export { S as SallaLogin } from './salla-login-0e85b2d8.js';
+export { S as SallaSearch } from './salla-search-5d4a6f1a.js';
+import './index-643344dc.js';

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-8919a244.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-643344dc.js';
 
 /*
  Stencil Client Patch Esm v2.8.1 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["salla-login_2",[[0,"salla-login"],[4,"salla-modal",{"error":[4],"success":[4],"visible":[516],"subTitle":[1,"sub-title"],"icon":[1]}]]],["salla-currency-language",[[4,"salla-currency-language",{"show":[64],"hide":[64]}]]],["salla-search",[[4,"salla-search",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]]], options);
+  return bootstrapLazy([["salla-localization",[[4,"salla-localization",{"show":[64],"hide":[64]}]]],["order-rating",[[0,"order-rating",{"order":[8]}]]],["salla-search",[[4,"salla-search",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]],["salla-button",[[4,"salla-button",{"kind":[513],"loading":[516],"load":[64],"stop":[64],"disable":[64],"enable":[64]}]]],["multi-warehouse_3",[[4,"multi-warehouse",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}],[0,"salla-login"],[4,"salla-modal",{"error":[4],"success":[4],"isClosable":[1028,"is-closable"],"modalWidth":[1,"modal-width"],"visible":[516],"subTitle":[1,"sub-title"],"icon":[1],"show":[64],"hide":[64]}]]]], options);
   });
 };
 

package/dist/esm/multi-warehouse_3.entry.js

@@ -0,0 +1,149 @@
+import { r as registerInstance, h, g as getElement, c as createEvent, H as Host } from './index-643344dc.js';
+export { S as salla_login } from './salla-login-0e85b2d8.js';
+import { H as Helper } from './Helper-23b2de40.js';
+
+// import Helper from "../../Helpers/Helper";
+let engine = require('store/src/store-engine');
+let storages = require('store/storages/sessionStorage');
+let sessionStore = engine.createStore(storages);
+const MultiWarehouse = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.open = false;
+    this.isOpenedBefore = sessionStore.get("multi-warehouse-opened-before");
+    this.displayAs = 'default';
+    this.browseProductsFrom = 'all';
+    this.branches = [
+      { id: 1, name: 'فرع الرياض', open: true, available: true, limited: false, tag: 'متوفر' },
+      { id: 2, name: 'فرع جدة', open: false, available: false, limited: false, tag: 'غير متوفر' },
+      { id: 3, name: 'فرع مكة', open: true, available: true, limited: false, tag: 'متوفر' },
+      { id: 4, name: 'فرع المدينة', open: true, available: true, limited: false, tag: 'متوفر' },
+      { id: 5, name: 'فرع جازان', open: true, available: true, limited: true, tag: 'الكمية محدودة' }
+    ];
+    this.current = 1;
+    this.currentBranch = (prop) => {
+      return this.branches.filter((el) => el.id == this.current)[0][prop];
+    };
+    this.statusColor = (branch = null) => {
+      return branch ?
+        branch.limited ? 'text-red-400' : branch.available ? 'text-green-500' : 'text-gray-400'
+        :
+          this.currentBranch('limited') ? 'text-red-400' : this.currentBranch('available') ? 'text-green-500' : 'text-gray-400';
+    };
+    this.isChoiceable = () => {
+      return (this.browseProductsFrom !== 'all' && this.position == 'single') || this.position == 'header';
+    };
+    this.formTitle = () => {
+      return this.isChoiceable() ?
+        'توفر المنتج في الفروع الآخرى'
+        : 'التسوق من فرع آخر';
+    };
+    salla.event.on('branches::show', () => this.show());
+  }
+  async show() {
+    return this.modal.show();
+  }
+  async hide() {
+    return this.modal.hide();
+  }
+  handelChange(event) {
+    this.selected = event.target.value;
+  }
+  handleSubmit() {
+    sessionStore.set("multi-warehouse-opened-before", true);
+    this.show();
+    setTimeout(() => {
+      this.current = this.selected;
+    }, 300);
+  }
+  render() {
+    return (h("salla-modal", { "is-closable": !this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true', ref: modal => this.modal = modal, "modal-width": "w-116", id: "multi-warehouse-modal", class: "hidden" }, h("slot", { name: "header" }, h("div", { slot: "header" })), h("div", null, h("div", { class: "text-right" }, h("div", { class: "flex items-center mb-8" }, h("div", { class: "flex-shrink-0 sm:mb-0 me-4" }, h("div", { class: "h-16 w-16 border border-gray-200 bg-white text-primary rounded-full flex justify-center items-center" }, h("span", { class: "sicon-store-alt" }))), h("div", null, h("p", { class: "mt-1 text-xs text-gray-400" }, "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646"), h("h4", { class: "text-base" }, "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636"))), h("fieldset", { class: "mt-4" }, h("h4", { class: "text-sm text-gray-600 mb-6" }, this.formTitle()), h("legend", { class: "sr-only" }, this.formTitle()), this.branches.length <= 5 ?
+      h("div", { class: "space-y-5" }, this.branches.map((branch) => h("div", { class: "flex items-center" }, h("input", { id: this.position + '_branch_' + branch.id, disabled: !branch.open && this.isChoiceable(), name: "lang", type: "radio", value: branch.id, onChange: (event) => this.handelChange(event), class: {
+          'me-3 focus:ring-primary h-4 w-4 text-primary border-gray-300': true,
+          'opacity-50': !branch.open,
+          'hidden': !this.isChoiceable()
+        }, checked: this.current == branch.id }), h("label", { htmlFor: this.position + '_branch_' + branch.id, class: {
+          'flex items-center justify-between text-sm font-medium text-gray-700 flex-grow': true,
+          'cursor-pointer': this.isChoiceable()
+        } }, h("span", { class: { 'opacity-50': !branch.open } }, branch.name), this.isChoiceable() ?
+        h("small", { class: "text-red-400" }, branch.open ? '' : 'مُغلق')
+        :
+          h("span", { class: this.statusColor(branch) }, branch.tag)))))
+      :
+        h("select", { class: "w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary sm:text-sm border-gray-200 rounded-md appearance-none visibility_condition px-4", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق'))))))), this.isChoiceable() ?
+      h("p", { slot: "footer" }, h("slot", { name: "footer" }, h("button", { type: "button", class: "mt-8 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white transition-colors hover:bg-primary-d focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:col-start-2 sm:text-sm", onClick: () => this.handleSubmit() }, salla.lang.get('common.elements.ok'))))
+      : ''));
+  }
+  componentDidRender() {
+  }
+  get host() { return getElement(this); }
+};
+
+const SallaModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ready = createEvent(this, "ready", 7);
+    this.close = createEvent(this, "close", 7);
+    this.error = false;
+    this.success = false;
+    this.isClosable = true;
+    this.modalWidth = 'w-96'; //todo use friendly names
+    this.visible = false;
+    this.subTitle = '';
+    this.icon = 'sicon-cancel';
+    salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
+    salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
+  }
+  handleVisible(newValue) {
+    if (!newValue) {
+      this.toggleModal(false);
+      this.close.emit();
+      return;
+    }
+    this.host.classList.remove('hidden');
+    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
+    this.ready.emit();
+  }
+  async show() {
+    this.host.setAttribute('visible', '');
+    return this.host;
+  }
+  async hide() {
+    this.host.removeAttribute('visible');
+    return this.host;
+  }
+  toggleModal(isOpen) {
+    Helper.toggleElement(this.host.querySelector('.s-modal-overlay'), 'ease-out duration-300 opacity-100', 'opacity-0', () => isOpen)
+      .toggleElement(this.host.querySelector('.s-modal-body'), 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100', //add these classes
+    'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95', //remove these classes
+    () => isOpen)
+      .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
+    if (!isOpen) {
+      setTimeout(() => this.host.classList.add('hidden'), 350);
+    }
+  }
+  closeModal() {
+    if (!this.isClosable) {
+      return;
+    }
+    this.host.removeAttribute('visible');
+  }
+  render() {
+    this.host.id = this.host.id || 'salla-modal';
+    return (h(Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-wrapper" }, h("div", { class: "s-modal-overlay", onClick: () => this.closeModal() }), h("span", { class: "s-modal-spacer" }, "\u200B"), h("div", { class: 's-modal-body ' + this.modalWidth }, h("slot", { name: "header" }, h("div", { class: "s-modal-header" }, this.isClosable ?
+      h("button", { class: "s-modal-close cursor-pointer", onClick: () => this.closeModal(), type: "button" }, h("span", { class: "sicon-cancel" }))
+      : '', this.error || this.success
+      ? h("div", { class: { 's-modal-icon': true, 's-modal-bg-error': this.error, 's-modal-bg-success': this.success } }, h("i", { class: {
+          [this.icon]: true,
+          's-modal-text-error': this.error,
+          's-modal-text-success': this.success
+        } }))
+      : '', h("div", { class: "s-modal-title", innerHTML: this.host.title }), h("p", { class: "s-modal-sub-title", innerHTML: this.subTitle }))), h("slot", null), h("slot", { name: "footer" })))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "visible": ["handleVisible"]
+  }; }
+};
+
+export { MultiWarehouse as multi_warehouse, SallaModal as salla_modal };