@salla.sa/twilight-components 2.11.14 → 2.11.16

package/dist/cjs/salla-button_37.cjs.entry.js

@@ -2660,7 +2660,7 @@ const SallaColorPicker = class {
     });
   }
   render() {
-    return (index.h(index.Host, { class: "s-color-picker-main" }, index.h("slot", null, index.h("div", { class: "s-color-picker-widget" }, index.h("div", { class: "s-color-picker-widget-canvas", ref: dv => this.canvas = dv }), index.h("span", { innerHTML: ArrowDown }))), index.h("input", { type: "hidden", name: this.name, required: this.required, value: this.color, ref: color => this.colorInput = color })));
+    return (index.h(index.Host, { class: "s-color-picker-main" }, index.h("slot", { name: "widget" }, index.h("div", { class: "s-color-picker-widget" }, index.h("div", { class: "s-color-picker-widget-canvas", ref: dv => this.canvas = dv }), index.h("span", { innerHTML: ArrowDown }))), index.h("input", { type: "hidden", name: this.name, required: this.required, value: this.color, ref: color => this.colorInput = color })));
   }
   get host() { return index.getElement(this); }
 };
@@ -22623,10 +22623,10 @@ const SallaMap = class {
     this.defaultLat = 21.419421; //Mecca 🕋
     this.defaultLng = 39.82553; //Mecca 🕋
     // state variables
-    this.modalActivityTitle = 'Activity Location';
-    this.confirmButtonTitle = 'Confirm';
-    this.locateButtonTitle = 'Locate';
-    this.locateButtonEdit = 'Edit';
+    this.modalActivityTitle = salla.lang.get('pages.checkout.select_your_address_from_map');
+    this.confirmButtonTitle = salla.lang.get('pages.checkout.confirm_address');
+    this.locateButtonTitle = salla.lang.get('pages.cart.detect_location');
+    this.locateButtonEdit = salla.lang.get('common.elements.edit');
     this.searchInputValue = null;
     this.geolocationError = false;
     /**
@@ -22645,10 +22645,6 @@ const SallaMap = class {
      * Sets the search bar visibility.
      */
     this.searchable = false;
-    /**
-     * Sets google api key value
-     */
-    this.apiKey = null;
     /**
      * Modal Title
      */
@@ -22664,9 +22660,10 @@ const SallaMap = class {
     salla.lang.onLoaded(() => {
       this.modalActivityTitle = salla.lang.get('pages.checkout.select_your_address_from_map');
       this.confirmButtonTitle = salla.lang.get('pages.checkout.confirm_address');
-      this.locateButtonTitle = salla.lang.get('pages.checkout.confirm_address');
+      this.locateButtonTitle = salla.lang.get('pages.cart.detect_location');
       this.locateButtonEdit = salla.lang.get('common.elements.edit');
     });
+    this.apiKey = 'AIzaSyBPhPJ4KG13ywvmeAovLRnbi7WzlsdcWKs';
   }
   formatAddress(address) {
     return address.length > 25 ? address.substring(0, 25) + '...' : address;
@@ -22692,7 +22689,10 @@ const SallaMap = class {
         center: (this.lat || this.lng) ? {
           lat: this.lat,
           lng: this.lng,
-        } : null,
+        } : {
+          lat: this.defaultLat,
+          lng: this.defaultLng,
+        },
         zoom: this.zoom,
         zoomControl: true,
         mapTypeControl: false,
@@ -23473,7 +23473,6 @@ const SallaProductOptions = class {
   //@ts-ignore
   fileOption(option) {
     let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);
-    console.log(option.name, types);
     return types.length
       ? this.fileUploader(option, { accept: types.join(',') })
       : 'File types not selected.';
@@ -26806,16 +26805,21 @@ const SallaUserMenu = class {
       ? index.h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[item[0]])
       : ""));
   }
+  componentShouldUpdate() {
+    if (!this.opened) {
+      window.removeEventListener('click', this.onClickOutside);
+    }
+  }
   render() {
     //todo:: reduce class names, they are too long
     return (index.h(index.Host, null, this.inline ?
       index.h("ul", { class: "s-user-menu-inline" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i)))
       : index.h("div", { class: { 's-user-menu-wrapper': true, 's-user-menu-relative-dropdown': this.relativeDropdown } }, this.getTheHeader(), index.h("div", { class: { 's-user-menu-toggler': true, 'opened': this.opened } }, index.h("div", { class: "s-user-menu-dropdown", onClick: (e) => e.stopPropagation() }, this.showHeader ? index.h("div", { class: "s-user-menu-dropdown-header" }, index.h("img", { src: this.avatar, alt: `${this.first_name} ${this.last_name}` }), index.h("div", { class: "s-user-menu-dropdown-header-content" }, index.h("span", null, this.hello), index.h("p", null, this.first_name, " ", this.last_name)), index.h("button", { class: "s-user-menu-dropdown-header-close", innerHTML: Cancel, onClick: () => this.opened = false })) : '', index.h("ul", { class: "s-user-menu-dropdown-list" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i))))))));
   }
-  componentShouldUpdate() {
-    if (!this.opened) {
-      window.removeEventListener('click', this.onClickOutside);
-    }
+  componentDidLoad() {
+    var _a;
+    //make sure to load the avatar if it's lazy, we use it in Y
+    (_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update(this.host.querySelectorAll('.lazy'));
   }
   get host() { return index.getElement(this); }
 };

package/dist/collection/components/salla-color-picker/salla-color-picker.js

@@ -147,7 +147,7 @@ export class SallaColorPicker {
   }
   render() {
     return (h(Host, { class: "s-color-picker-main" },
-      h("slot", null,
+      h("slot", { name: "widget" },
         h("div", { class: "s-color-picker-widget" },
           h("div", { class: "s-color-picker-widget-canvas", ref: dv => this.canvas = dv }),
           h("span", { innerHTML: ArrowDown }))),

package/dist/collection/components/salla-map/salla-map.js

@@ -14,10 +14,10 @@ export class SallaMap {
     this.defaultLat = 21.419421; //Mecca 🕋
     this.defaultLng = 39.82553; //Mecca 🕋
     // state variables
-    this.modalActivityTitle = 'Activity Location';
-    this.confirmButtonTitle = 'Confirm';
-    this.locateButtonTitle = 'Locate';
-    this.locateButtonEdit = 'Edit';
+    this.modalActivityTitle = salla.lang.get('pages.checkout.select_your_address_from_map');
+    this.confirmButtonTitle = salla.lang.get('pages.checkout.confirm_address');
+    this.locateButtonTitle = salla.lang.get('pages.cart.detect_location');
+    this.locateButtonEdit = salla.lang.get('common.elements.edit');
     this.searchInputValue = null;
     this.geolocationError = false;
     /**
@@ -36,10 +36,6 @@ export class SallaMap {
      * Sets the search bar visibility.
      */
     this.searchable = false;
-    /**
-     * Sets google api key value
-     */
-    this.apiKey = null;
     /**
      * Modal Title
      */
@@ -55,9 +51,10 @@ export class SallaMap {
     salla.lang.onLoaded(() => {
       this.modalActivityTitle = salla.lang.get('pages.checkout.select_your_address_from_map');
       this.confirmButtonTitle = salla.lang.get('pages.checkout.confirm_address');
-      this.locateButtonTitle = salla.lang.get('pages.checkout.confirm_address');
+      this.locateButtonTitle = salla.lang.get('pages.cart.detect_location');
       this.locateButtonEdit = salla.lang.get('common.elements.edit');
     });
+    this.apiKey = 'AIzaSyBPhPJ4KG13ywvmeAovLRnbi7WzlsdcWKs';
   }
   formatAddress(address) {
     return address.length > 25 ? address.substring(0, 25) + '...' : address;
@@ -83,7 +80,10 @@ export class SallaMap {
         center: (this.lat || this.lng) ? {
           lat: this.lat,
           lng: this.lng,
-        } : null,
+        } : {
+          lat: this.defaultLat,
+          lng: this.defaultLng,
+        },
         zoom: this.zoom,
         zoomControl: true,
         mapTypeControl: false,
@@ -376,11 +376,10 @@ export class SallaMap {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Sets google api key value"
+        "text": "Sets google api key value, default Merchant key"
       },
       "attribute": "api-key",
-      "reflect": false,
-      "defaultValue": "null"
+      "reflect": false
     },
     "modalTitle": {
       "type": "string",

package/dist/collection/components/salla-product-options/salla-product-options.js

@@ -125,7 +125,6 @@ export class SallaProductOptions {
   //@ts-ignore
   fileOption(option) {
     let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);
-    console.log(option.name, types);
     return types.length
       ? this.fileUploader(option, { accept: types.join(',') })
       : 'File types not selected.';

package/dist/collection/components/salla-user-menu/salla-user-menu.js

@@ -144,6 +144,11 @@ export class SallaUserMenu {
           ? h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[item[0]])
           : ""));
   }
+  componentShouldUpdate() {
+    if (!this.opened) {
+      window.removeEventListener('click', this.onClickOutside);
+    }
+  }
   render() {
     //todo:: reduce class names, they are too long
     return (h(Host, null, this.inline ?
@@ -163,10 +168,10 @@ export class SallaUserMenu {
               h("button", { class: "s-user-menu-dropdown-header-close", innerHTML: Cancel, onClick: () => this.opened = false })) : '',
             h("ul", { class: "s-user-menu-dropdown-list" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i))))))));
   }
-  componentShouldUpdate() {
-    if (!this.opened) {
-      window.removeEventListener('click', this.onClickOutside);
-    }
+  componentDidLoad() {
+    var _a;
+    //make sure to load the avatar if it's lazy, we use it in Y
+    (_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update(this.host.querySelectorAll('.lazy'));
   }
   static get is() { return "salla-user-menu"; }
   static get originalStyleUrls() { return {

package/dist/components/salla-color-picker2.js

@@ -1154,7 +1154,7 @@ const SallaColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     });
   }
   render() {
-    return (h(Host, { class: "s-color-picker-main" }, h("slot", null, h("div", { class: "s-color-picker-widget" }, h("div", { class: "s-color-picker-widget-canvas", ref: dv => this.canvas = dv }), h("span", { innerHTML: ArrowDown }))), h("input", { type: "hidden", name: this.name, required: this.required, value: this.color, ref: color => this.colorInput = color })));
+    return (h(Host, { class: "s-color-picker-main" }, h("slot", { name: "widget" }, h("div", { class: "s-color-picker-widget" }, h("div", { class: "s-color-picker-widget-canvas", ref: dv => this.canvas = dv }), h("span", { innerHTML: ArrowDown }))), h("input", { type: "hidden", name: this.name, required: this.required, value: this.color, ref: color => this.colorInput = color })));
   }
   get host() { return this; }
   static get style() { return sallaColorPickerCss; }

package/dist/components/salla-map2.js

@@ -450,10 +450,10 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.defaultLat = 21.419421; //Mecca 🕋
     this.defaultLng = 39.82553; //Mecca 🕋
     // state variables
-    this.modalActivityTitle = 'Activity Location';
-    this.confirmButtonTitle = 'Confirm';
-    this.locateButtonTitle = 'Locate';
-    this.locateButtonEdit = 'Edit';
+    this.modalActivityTitle = salla.lang.get('pages.checkout.select_your_address_from_map');
+    this.confirmButtonTitle = salla.lang.get('pages.checkout.confirm_address');
+    this.locateButtonTitle = salla.lang.get('pages.cart.detect_location');
+    this.locateButtonEdit = salla.lang.get('common.elements.edit');
     this.searchInputValue = null;
     this.geolocationError = false;
     /**
@@ -472,10 +472,6 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Sets the search bar visibility.
      */
     this.searchable = false;
-    /**
-     * Sets google api key value
-     */
-    this.apiKey = null;
     /**
      * Modal Title
      */
@@ -491,9 +487,10 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     salla.lang.onLoaded(() => {
       this.modalActivityTitle = salla.lang.get('pages.checkout.select_your_address_from_map');
       this.confirmButtonTitle = salla.lang.get('pages.checkout.confirm_address');
-      this.locateButtonTitle = salla.lang.get('pages.checkout.confirm_address');
+      this.locateButtonTitle = salla.lang.get('pages.cart.detect_location');
       this.locateButtonEdit = salla.lang.get('common.elements.edit');
     });
+    this.apiKey = 'AIzaSyBPhPJ4KG13ywvmeAovLRnbi7WzlsdcWKs';
   }
   formatAddress(address) {
     return address.length > 25 ? address.substring(0, 25) + '...' : address;
@@ -519,7 +516,10 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         center: (this.lat || this.lng) ? {
           lat: this.lat,
           lng: this.lng,
-        } : null,
+        } : {
+          lat: this.defaultLat,
+          lng: this.defaultLng,
+        },
         zoom: this.zoom,
         zoomControl: true,
         mapTypeControl: false,

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

@@ -174,7 +174,6 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   //@ts-ignore
   fileOption(option) {
     let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);
-    console.log(option.name, types);
     return types.length
       ? this.fileUploader(option, { accept: types.join(',') })
       : 'File types not selected.';

package/dist/components/salla-user-menu.js

@@ -159,16 +159,21 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       ? h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[item[0]])
       : ""));
   }
+  componentShouldUpdate() {
+    if (!this.opened) {
+      window.removeEventListener('click', this.onClickOutside);
+    }
+  }
   render() {
     //todo:: reduce class names, they are too long
     return (h(Host, null, this.inline ?
       h("ul", { class: "s-user-menu-inline" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i)))
       : h("div", { class: { 's-user-menu-wrapper': true, 's-user-menu-relative-dropdown': this.relativeDropdown } }, this.getTheHeader(), h("div", { class: { 's-user-menu-toggler': true, 'opened': this.opened } }, h("div", { class: "s-user-menu-dropdown", onClick: (e) => e.stopPropagation() }, this.showHeader ? h("div", { class: "s-user-menu-dropdown-header" }, h("img", { src: this.avatar, alt: `${this.first_name} ${this.last_name}` }), h("div", { class: "s-user-menu-dropdown-header-content" }, h("span", null, this.hello), h("p", null, this.first_name, " ", this.last_name)), h("button", { class: "s-user-menu-dropdown-header-close", innerHTML: Cancel, onClick: () => this.opened = false })) : '', h("ul", { class: "s-user-menu-dropdown-list" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i))))))));
   }
-  componentShouldUpdate() {
-    if (!this.opened) {
-      window.removeEventListener('click', this.onClickOutside);
-    }
+  componentDidLoad() {
+    var _a;
+    //make sure to load the avatar if it's lazy, we use it in Y
+    (_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update(this.host.querySelectorAll('.lazy'));
   }
   get host() { return this; }
   static get style() { return sallaUserMenuCss; }

package/dist/esm/salla-button_37.entry.js

@@ -2656,7 +2656,7 @@ const SallaColorPicker = class {
     });
   }
   render() {
-    return (h(Host, { class: "s-color-picker-main" }, h("slot", null, h("div", { class: "s-color-picker-widget" }, h("div", { class: "s-color-picker-widget-canvas", ref: dv => this.canvas = dv }), h("span", { innerHTML: ArrowDown }))), h("input", { type: "hidden", name: this.name, required: this.required, value: this.color, ref: color => this.colorInput = color })));
+    return (h(Host, { class: "s-color-picker-main" }, h("slot", { name: "widget" }, h("div", { class: "s-color-picker-widget" }, h("div", { class: "s-color-picker-widget-canvas", ref: dv => this.canvas = dv }), h("span", { innerHTML: ArrowDown }))), h("input", { type: "hidden", name: this.name, required: this.required, value: this.color, ref: color => this.colorInput = color })));
   }
   get host() { return getElement(this); }
 };
@@ -22619,10 +22619,10 @@ const SallaMap = class {
     this.defaultLat = 21.419421; //Mecca 🕋
     this.defaultLng = 39.82553; //Mecca 🕋
     // state variables
-    this.modalActivityTitle = 'Activity Location';
-    this.confirmButtonTitle = 'Confirm';
-    this.locateButtonTitle = 'Locate';
-    this.locateButtonEdit = 'Edit';
+    this.modalActivityTitle = salla.lang.get('pages.checkout.select_your_address_from_map');
+    this.confirmButtonTitle = salla.lang.get('pages.checkout.confirm_address');
+    this.locateButtonTitle = salla.lang.get('pages.cart.detect_location');
+    this.locateButtonEdit = salla.lang.get('common.elements.edit');
     this.searchInputValue = null;
     this.geolocationError = false;
     /**
@@ -22641,10 +22641,6 @@ const SallaMap = class {
      * Sets the search bar visibility.
      */
     this.searchable = false;
-    /**
-     * Sets google api key value
-     */
-    this.apiKey = null;
     /**
      * Modal Title
      */
@@ -22660,9 +22656,10 @@ const SallaMap = class {
     salla.lang.onLoaded(() => {
       this.modalActivityTitle = salla.lang.get('pages.checkout.select_your_address_from_map');
       this.confirmButtonTitle = salla.lang.get('pages.checkout.confirm_address');
-      this.locateButtonTitle = salla.lang.get('pages.checkout.confirm_address');
+      this.locateButtonTitle = salla.lang.get('pages.cart.detect_location');
       this.locateButtonEdit = salla.lang.get('common.elements.edit');
     });
+    this.apiKey = 'AIzaSyBPhPJ4KG13ywvmeAovLRnbi7WzlsdcWKs';
   }
   formatAddress(address) {
     return address.length > 25 ? address.substring(0, 25) + '...' : address;
@@ -22688,7 +22685,10 @@ const SallaMap = class {
         center: (this.lat || this.lng) ? {
           lat: this.lat,
           lng: this.lng,
-        } : null,
+        } : {
+          lat: this.defaultLat,
+          lng: this.defaultLng,
+        },
         zoom: this.zoom,
         zoomControl: true,
         mapTypeControl: false,
@@ -23469,7 +23469,6 @@ const SallaProductOptions = class {
   //@ts-ignore
   fileOption(option) {
     let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);
-    console.log(option.name, types);
     return types.length
       ? this.fileUploader(option, { accept: types.join(',') })
       : 'File types not selected.';
@@ -26802,16 +26801,21 @@ const SallaUserMenu = class {
       ? h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[item[0]])
       : ""));
   }
+  componentShouldUpdate() {
+    if (!this.opened) {
+      window.removeEventListener('click', this.onClickOutside);
+    }
+  }
   render() {
     //todo:: reduce class names, they are too long
     return (h(Host, null, this.inline ?
       h("ul", { class: "s-user-menu-inline" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i)))
       : h("div", { class: { 's-user-menu-wrapper': true, 's-user-menu-relative-dropdown': this.relativeDropdown } }, this.getTheHeader(), h("div", { class: { 's-user-menu-toggler': true, 'opened': this.opened } }, h("div", { class: "s-user-menu-dropdown", onClick: (e) => e.stopPropagation() }, this.showHeader ? h("div", { class: "s-user-menu-dropdown-header" }, h("img", { src: this.avatar, alt: `${this.first_name} ${this.last_name}` }), h("div", { class: "s-user-menu-dropdown-header-content" }, h("span", null, this.hello), h("p", null, this.first_name, " ", this.last_name)), h("button", { class: "s-user-menu-dropdown-header-close", innerHTML: Cancel, onClick: () => this.opened = false })) : '', h("ul", { class: "s-user-menu-dropdown-list" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i))))))));
   }
-  componentShouldUpdate() {
-    if (!this.opened) {
-      window.removeEventListener('click', this.onClickOutside);
-    }
+  componentDidLoad() {
+    var _a;
+    //make sure to load the avatar if it's lazy, we use it in Y
+    (_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update(this.host.querySelectorAll('.lazy'));
   }
   get host() { return getElement(this); }
 };