@salla.sa/twilight-components 1.0.160 → 1.1.4

package/dist/components/salla-tab-content.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaTabContent extends Components.SallaTabContent, HTMLElement {}
+export const SallaTabContent: {
+  prototype: SallaTabContent;
+  new (): SallaTabContent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-tab-content.js

@@ -0,0 +1,9 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { S as SallaTabContent$1, d as defineCustomElement$1 } from './salla-tab-content2.js';
+
+const SallaTabContent = SallaTabContent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaTabContent, defineCustomElement };

package/dist/components/salla-tab-content2.js

@@ -0,0 +1,55 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sallaTabContentCss = "";
+
+const SallaTabContent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.isSelected = false;
+  }
+  async getChild() {
+    return {
+      select: this.select.bind(this),
+      unselect: this.unselect.bind(this),
+      name: this.name
+    };
+  }
+  unselect() {
+    this.isSelected = false;
+  }
+  select() {
+    this.isSelected = true;
+  }
+  render() {
+    const classes = {
+      's-tabs-content': true,
+      's-tabs-content-selected': this.isSelected
+    };
+    return (h("div", { class: classes }, h("slot", null)));
+  }
+  static get style() { return sallaTabContentCss; }
+}, [4, "salla-tab-content", {
+    "name": [1],
+    "isSelected": [32],
+    "getChild": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-tab-content"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-tab-content":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaTabContent);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SallaTabContent as S, defineCustomElement as d };

package/dist/components/salla-tab-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaTabHeader extends Components.SallaTabHeader, HTMLElement {}
+export const SallaTabHeader: {
+  prototype: SallaTabHeader;
+  new (): SallaTabHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-tab-header.js

@@ -0,0 +1,9 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { S as SallaTabHeader$1, d as defineCustomElement$1 } from './salla-tab-header2.js';
+
+const SallaTabHeader = SallaTabHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaTabHeader, defineCustomElement };

package/dist/components/salla-tab-header2.js

@@ -0,0 +1,85 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+function generateRandomId() {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+const sallaTabHeaderCss = "";
+
+const SallaTabHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.onSelect = createEvent(this, "onSelect", 7);
+    this.id = generateRandomId();
+    /**
+   * The class applied to the currently active(selected) tab
+   */
+    this.activeClass = undefined;
+    /**
+     * Set the height of the tab bar
+     */
+    this.height = undefined;
+    /**
+     * Center tab items in the given flex.
+     */
+    this.centered = false;
+    this.isSelected = false;
+  }
+  async getChild() {
+    return {
+      select: this.select.bind(this),
+      unselect: this.unselect.bind(this),
+      name: this.name,
+      id: this.id
+    };
+  }
+  unselect() {
+    this.isSelected = false;
+  }
+  select() {
+    this.isSelected = true;
+  }
+  onClick() {
+    this.getChild().then(child => {
+      this.onSelect.emit(child);
+    });
+  }
+  render() {
+    const classes = {
+      's-tabs-header-item': true,
+      's-tabs-bg-normal': true,
+      's-tabs-active': this.isSelected,
+    };
+    return [
+      h("div", { class: classes, onClick: this.onClick.bind(this) }, h("slot", null)),
+    ];
+  }
+  static get style() { return sallaTabHeaderCss; }
+}, [4, "salla-tab-header", {
+    "name": [1],
+    "activeClass": [1, "active-class"],
+    "height": [8],
+    "centered": [4],
+    "isSelected": [32],
+    "getChild": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-tab-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-tab-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaTabHeader);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SallaTabHeader as S, defineCustomElement as d };

package/dist/components/salla-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaTabs extends Components.SallaTabs, HTMLElement {}
+export const SallaTabs: {
+  prototype: SallaTabs;
+  new (): SallaTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-tabs.js

@@ -0,0 +1,9 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { S as SallaTabs$1, d as defineCustomElement$1 } from './salla-tabs2.js';
+
+const SallaTabs = SallaTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaTabs, defineCustomElement };

package/dist/components/salla-tabs2.js

@@ -0,0 +1,78 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sallaTabsCss = ".s-tabs-header{-ms-overflow-style:none;scrollbar-width:none;}.s-tabs-header::-webkit-scrollbar{display:none}";
+
+const SallaTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Background color
+     */
+    this.backgroundColor = undefined;
+    /**
+     * Align tabs vertically.
+     */
+    this.vertical = false;
+  }
+  componentWillLoad() {
+    this.createGroup().then(() => {
+      const [group] = this.tabGroup;
+      this.selectGroup(group);
+    });
+  }
+  onSelectedTab(event) {
+    const group = this.tabGroup.find(group => group.header.id === event.detail.id);
+    this.selectGroup(group);
+  }
+  async createGroup() {
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll('salla-tab-header'));
+    this.tabsHeader = await Promise.all(tabsHeaderEl.map(el => el.getChild()));
+    const tabsContentEl = Array.from(this.host.querySelectorAll('salla-tab-content'));
+    this.tabsContent = await Promise.all(tabsContentEl.map(el => el.getChild()));
+    this.tabGroup = this.tabsHeader.map(header => {
+      const content = this.tabsContent.find(content => content.name === header.name);
+      return {
+        header: header,
+        content: content
+      };
+    });
+  }
+  selectGroup(group) {
+    this.tabGroup.map(g => {
+      g.header.unselect();
+      g.content.unselect();
+    });
+    group.header.select();
+    group.content.select();
+  }
+  render() {
+    return [
+      h("div", { class: "s-tabs" }, h("div", { class: "s-tabs-header" }, h("slot", { name: "header" })), h("div", { class: "s-tabs-content-wrapper" }, h("slot", { name: "content" })))
+    ];
+  }
+  get host() { return this; }
+  static get style() { return sallaTabsCss; }
+}, [4, "salla-tabs", {
+    "backgroundColor": [1, "background-color"],
+    "vertical": [4]
+  }, [[0, "onSelect", "onSelectedTab"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaTabs);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SallaTabs as S, defineCustomElement as d };

package/dist/components/salla-verify2.js

@@ -3,7 +3,8 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
-import { d as defineCustomElement$2 } from './salla-button2.js';
+import { d as defineCustomElement$3 } from './salla-button2.js';
+import { d as defineCustomElement$2 } from './salla-loading2.js';
 import { d as defineCustomElement$1 } from './salla-modal2.js';
 
 const sallaVerifyCss = "salla-verify{display:block}";
@@ -176,7 +177,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-verify", "salla-button", "salla-modal"];
+  const components = ["salla-verify", "salla-button", "salla-loading", "salla-modal"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-verify":
       if (!customElements.get(tagName)) {
@@ -184,6 +185,11 @@ function defineCustomElement() {
       }
       break;
     case "salla-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "salla-loading":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/esm/{index-20b84fd0.js → index-4e30ffd0.js}

@@ -160,6 +160,11 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
  * Don't add values to these!!
  */
 const EMPTY_OBJ = {};
+/**
+ * Namespaces
+ */
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const HTML_NS = 'http://www.w3.org/1999/xhtml';
 const isComplexType = (o) => {
     // https://jsperf.com/typeof-fn-object/5
     o = typeof o;
@@ -460,10 +465,17 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             doc.createTextNode('');
     }
     else {
+        if (!isSvgMode) {
+            isSvgMode = newVNode.$tag$ === 'svg';
+        }
         // create element
-        elm = newVNode.$elm$ = (doc.createElement(newVNode.$flags$ & 2 /* isSlotFallback */
+        elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$flags$ & 2 /* isSlotFallback */
                 ? 'slot-fb'
-                : newVNode.$tag$));
+                : newVNode.$tag$)
+            );
+        if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
+            isSvgMode = false;
+        }
         // add css classes, attrs, props, listeners, etc.
         {
             updateElement(null, newVNode, isSvgMode);
@@ -479,6 +491,16 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
                 }
             }
         }
+        {
+            if (newVNode.$tag$ === 'svg') {
+                // Only reset the SVG context when we're exiting <svg> element
+                isSvgMode = false;
+            }
+            else if (elm.tagName === 'foreignObject') {
+                // Reenter SVG context when we're exiting <foreignObject> element
+                isSvgMode = true;
+            }
+        }
     }
     {
         elm['s-hn'] = hostTagName;
@@ -689,6 +711,11 @@ const patch = (oldVNode, newVNode) => {
     const text = newVNode.$text$;
     let defaultHolder;
     if (text === null) {
+        {
+            // test if we're rendering an svg element, or still rendering nodes inside of one
+            // only add this to the when the compiler sees we're using an svg somewhere
+            isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
+        }
         // element node
         {
             if (tag === 'slot')
@@ -717,6 +744,9 @@ const patch = (oldVNode, newVNode) => {
             // no new child vnodes, but there are old child vnodes to remove
             removeVnodes(oldChildren, 0, oldChildren.length - 1);
         }
+        if (isSvgMode && tag === 'svg') {
+            isSvgMode = false;
+        }
     }
     else if ((defaultHolder = elm['s-cr'])) {
         // this element has slotted content

package/dist/esm/loader.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { p as promiseResolve, b as bootstrapLazy } from './index-20b84fd0.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-4e30ffd0.js';
 
 /*
  Stencil Client Patch Esm v2.17.3 | MIT Licensed | https://stenciljs.com
@@ -13,7 +13,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["salla-branches_13",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[4,"salla-branches",{"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-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-add-product-button",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
+  return bootstrapLazy([["salla-branches_22",[[4,"salla-loyalty",{"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"points":[32],"exchange_points":[32],"are_you_sure_to_exchange":[32],"for":[32],"cancel":[32],"confirm":[32],"loyalty_placeholder":[32],"loyalty_placeholder_info":[32],"open":[64],"close":[64],"exchangeLoyaltyPoint":[64]}],[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}],[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[4,"salla-branches",{"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-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"direction":[1],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"]}],[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"onSelect","onSelectedTab"]]],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-add-product-button",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
   });
 };
 

package/dist/esm/salla-add-product-button.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-20b84fd0.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4e30ffd0.js';
 
 const sallaAddProductButtonCss = ":host{display:block}salla-add-product-button[width=wide]{width:100%}";