@salla.sa/twilight-components 1.6.15-alpha.0 → 1.6.15-alpha.1

package/dist/components/salla-scopes.js

@@ -0,0 +1,230 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { S as Search } from './search.js';
+import { d as defineCustomElement$7 } from './salla-button2.js';
+import { d as defineCustomElement$6 } from './salla-list-tile2.js';
+import { d as defineCustomElement$5 } from './salla-loading2.js';
+import { d as defineCustomElement$4 } from './salla-modal2.js';
+import { d as defineCustomElement$3 } from './salla-placeholder2.js';
+import { d as defineCustomElement$2 } from './salla-skeleton2.js';
+
+const StoreAlt = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>store-alt</title>
+<path d="M6.667 24h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333zM31.86 10.071l-4-8c-0.227-0.452-0.688-0.737-1.193-0.737h-21.333c-0.505 0-0.967 0.285-1.193 0.737l-4 8c-0.092 0.184-0.14 0.389-0.14 0.596v18.667c0 0.737 0.597 1.333 1.333 1.333h29.333c0.736 0 1.333-0.596 1.333-1.333v-18.667c0-0.207-0.048-0.412-0.14-0.596zM6.157 4h19.685l3.333 6.667h-26.352zM24 28h-5.333v-9.333h5.333zM29.333 28h-2.667v-10.667c0-0.737-0.597-1.333-1.333-1.333h-8c-0.736 0-1.333 0.596-1.333 1.333v10.667h-13.333v-14.667h26.667zM6.667 18.667h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333z"></path>
+</svg>
+`;
+
+var ModeType;
+(function (ModeType) {
+  ModeType["DEFAULT"] = "default";
+  ModeType["AVAILABILITY"] = "availability";
+})(ModeType || (ModeType = {}));
+
+const sallaScopesCss = ".s-scopes-availability-content{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.s-scopes-placeholder{-ms-flex:0 0 85%;flex:0 0 85%}";
+
+const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.translationLoaded = false;
+    this.mode = ModeType.DEFAULT;
+    this.scopes = [];
+    this.originalScopesList = [];
+    this.isOpenedBefore = salla.storage.get("branch-choosed-before");
+    this.hasError = false;
+    /**
+     * Optionally open the modal or enforce the pop-up to the viewer
+     */
+    this.selection = 'optional';
+    /**
+     * Dictates when to show the search field
+     */
+    this.searchDisplayLimit = 6;
+    this.getFormTitle = () => {
+      var _a;
+      if (((_a = this.originalScopesList) === null || _a === void 0 ? void 0 : _a.length) < 2)
+        return "";
+      return this.mode === ModeType.DEFAULT ?
+        salla.lang.get("blocks.scope.shopping_from_another_branch") :
+        salla.lang.get('blocks.scope.search_for_availability_in_other_branches');
+    };
+    salla.event.on('scopes::open', ({ mode = null, product_id = null }) => {
+      this.open(mode, product_id);
+    });
+    salla.lang.onLoaded(() => {
+      this.translationLoaded = true;
+    });
+  }
+  /**
+   * Closes the scope modal.
+   */
+  async close() {
+    var _a;
+    return await ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.close());
+  }
+  /**
+   * Opens the scope modal.
+   */
+  async open(mode = ModeType.DEFAULT, product_id = null) {
+    this.setScopeValues([]);
+    if (typeof mode !== 'undefined' && [ModeType.AVAILABILITY, ModeType.DEFAULT].includes(mode)) {
+      this.mode = mode;
+    }
+    else {
+      this.mode = ModeType.DEFAULT;
+    }
+    this.modal.open();
+    let callback = () => mode == ModeType.AVAILABILITY ? salla.scope.getProductAvailability(product_id) : salla.scope.get();
+    return await salla.api.withoutNotifier(callback)
+      .then((resp) => {
+      if (mode == ModeType.AVAILABILITY) {
+        return this.setScopeValues(resp.data);
+      }
+      this.setScopeValues(resp.data.scopes);
+    }).catch(e => {
+      console.log(e);
+      this.hasError = true;
+    })
+      .finally(() => this.modal.stopLoading());
+  }
+  /**
+   * Submit form to change exsiting scope.
+   */
+  async handleSubmit() {
+    let payload = { 'id': this.current_scope.id };
+    this.changeBtn.load();
+    return await salla.scope.change(payload)
+      .then(() => {
+      salla.storage.set("branch-choosed-before", true);
+      salla.storage.set("scope", {
+        'type': this.current_scope.type,
+        'id': this.current_scope.id
+      });
+      var url = new URL(window.location.href);
+      url.searchParams.set('scope', this.current_scope.id);
+      window.location.href = url.toString();
+      window.location.replace(url.toString());
+    }).catch(e => console.log(e))
+      .finally(() => {
+      this.changeBtn.stop();
+    });
+  }
+  setScopeValues(value) {
+    this.scopes = value;
+    this.originalScopesList = value;
+    if (value.length == 1) {
+      this.current_scope = value[0];
+      this.selected_scope = value[0];
+    }
+    else {
+      this.current_scope = value.find(scope => scope.selected);
+      this.selected_scope = value.find(scope => scope.selected);
+    }
+  }
+  handleSearchFieldTyping(e) {
+    let value = e.target.value.toLocaleLowerCase();
+    if (!!value) {
+      this.scopes = this.originalScopesList.filter(scope => scope.name.toLowerCase().includes(value));
+    }
+    else {
+      this.scopes = this.originalScopesList;
+    }
+  }
+  handleScopeSelection(event) {
+    this.current_scope = this.scopes.find(scope => scope.id == event.target.value);
+  }
+  placeholderContent() {
+    return h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, h("span", { slot: "title" }, salla.lang.get("blocks.scope.branch_looking_for_not_found")), h("span", { slot: "description" }, salla.lang.get("blocks.scope.our_services_not_available_in_this_branch")));
+  }
+  defaultContent() {
+    return [h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, h("input", { id: `${this.selection} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), h("label", { htmlFor: `${this.selection} + '_scope_' + ${scope.id}`, class: "s-scopes-label s-scopes-clickable" }, h("span", null, scope.name))))), this.footerContent()];
+  }
+  availabilityContent() {
+    return h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => {
+      var _a, _b, _c, _d, _e, _f;
+      return h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, h("h2", { class: { "s-scopes-label": true, "s-scopes-clickable": this.mode === ModeType.DEFAULT } }, h("span", null, scope.name)), h("h2", { style: { 'color': (_b = (_a = scope) === null || _a === void 0 ? void 0 : _a.availability) === null || _b === void 0 ? void 0 : _b.color }, class: `s-scopes-${(_d = (_c = scope) === null || _c === void 0 ? void 0 : _c.availability) === null || _d === void 0 ? void 0 : _d.key}` }, (_f = (_e = scope) === null || _e === void 0 ? void 0 : _e.availability) === null || _f === void 0 ? void 0 : _f.label));
+    }));
+  }
+  footerContent() {
+    return h("div", { class: "s-scopes-footer" }, h("slot", { name: "footer" }, h("salla-button", { ref: btn => this.changeBtn = btn, disabled: !this.current_scope, onClick: () => this.handleSubmit(), class: "s-scopes-submit", "loader-position": "center", width: "wide" }, salla.lang.get('common.elements.confirm'))));
+  }
+  render() {
+    return (h(Host, null, h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true, "has-skeleton": true }, h("div", { slot: "loading" }, h("div", { class: "s-scopes-skeleton" }, h("salla-list-tile", { class: "s-scopes-header" }, h("div", { slot: "icon", class: "s-scopes-header-icon" }, h("salla-skeleton", { type: "circle" })), h("div", { slot: "title", class: "s-scopes-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-scopes-skeleton-search" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '30px', width: '100%' })), h("div", { class: "s-scopes-skeleton-scopes" }, h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-scopes-skeleton-btn" }, h("salla-skeleton", { height: '40px', width: '100%' })))), h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), h("div", { slot: "title", class: "s-scopes-header-title" }, salla.lang.get('blocks.scope.you_are_browse_store_from')), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
+      h("div", { class: "s-scopes-search-wrapper" }, h("div", { class: "s-scopes-search-icon", innerHTML: Search }), h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), enterkeyhint: "search", placeholder: salla.lang.get('blocks.scope.searching_for_a_branch') }))
+      : "", this.hasError || this.scopes.length < 2 ?
+      this.placeholderContent()
+      : this.mode === ModeType.DEFAULT ? this.defaultContent() : this.availabilityContent()))));
+  }
+  componentDidLoad() {
+    if (!this.isOpenedBefore && this.selection == 'mandatory') {
+      this.open();
+    }
+  }
+  static get style() { return sallaScopesCss; }
+}, [4, "salla-scopes", {
+    "selection": [1],
+    "searchDisplayLimit": [2, "search-display-limit"],
+    "translationLoaded": [32],
+    "mode": [32],
+    "current_scope": [32],
+    "scopes": [32],
+    "originalScopesList": [32],
+    "selected_scope": [32],
+    "isOpenedBefore": [32],
+    "hasError": [32],
+    "close": [64],
+    "open": [64],
+    "handleSubmit": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-scopes", "salla-button", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-scopes":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaScopees);
+      }
+      break;
+    case "salla-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "salla-list-tile":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "salla-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "salla-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "salla-placeholder":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "salla-skeleton":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SallaScopes = SallaScopees;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaScopes, defineCustomElement };

package/dist/{twilight/salla-search.entry.js → components/salla-search.js}

@@ -1,15 +1,18 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, g as getElement } from './index-2bf908a1.js';
-import { H as Helper } from './Helper-7bc9b55a.js';
-import { S as Search } from './search-19ea3313.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { H as Helper } from './Helper.js';
+import { S as Search } from './search.js';
+import { d as defineCustomElement$3 } from './salla-loading2.js';
+import { d as defineCustomElement$2 } from './salla-modal2.js';
 
 const sallaSearchCss = "";
 
-const SallaSearch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     var _a;
     this.inputValue = '';
     this.translationLoaded = false;
@@ -114,11 +117,48 @@ const SallaSearch = class {
   componentDidLoad() {
     this.afterSearching();
   }
-  get host() { return getElement(this); }
+  get host() { return this; }
   static get watchers() { return {
     "search_term": ["handelSearch"]
   }; }
-};
-SallaSearch.style = sallaSearchCss;
+  static get style() { return sallaSearchCss; }
+}, [0, "salla-search", {
+    "inline": [4],
+    "oval": [4],
+    "height": [2],
+    "translationLoaded": [32],
+    "results": [32],
+    "loading": [32],
+    "typing": [32],
+    "debounce": [32],
+    "search_term": [32]
+  }, [[0, "keydown", "handleKeyDown"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-search", "salla-loading", "salla-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-search":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaSearch$1);
+      }
+      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 as salla_search };
+export { SallaSearch, defineCustomElement };

package/dist/components/salla-select.js

@@ -0,0 +1,199 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sallaSelectCss = ".s-select-label{display:block;margin-bottom:0.5rem;color:#111827;font-size:0.875rem;line-height:1.25rem;font-weight:500}.s-select-underline{display:block;padding-left:0;padding-right:0;padding-top:0.625rem;padding-bottom:0.625rem;background-color:transparent;color:#6B7280;font-size:0.875rem;line-height:1.25rem;width:100%;border-width:0;border-bottom-width:2px;border-color:#E5E7EB;-webkit-appearance:none;-moz-appearance:none;appearance:none}.s-select-outlined{display:block;padding:0.625rem;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;background-color:#F9FAFB;color:#111827;font-size:0.875rem;line-height:1.25rem;width:100%;border-radius:0.5rem;border-width:1px;border-color:#D1D5DB}.s-select-x-large{height:5rem}.s-select-large{height:4rem}.s-select-normal{height:3rem}.s-select-small{height:3rem}.s-select-x-small{height:2.5rem}.s-select-field{padding-top:0.25rem;padding-bottom:0.25rem;padding-right:0.5rem;padding-left:0.5rem;margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:400;line-height:1.75rem;width:100%;border-radius:0.375rem;border-color:#9CA3AF;-webkit-box-shadow:none;box-shadow:none}.s-select-hint{margin-top:0.25rem;color:#374151;font-size:0.875rem;line-height:1.25rem;line-height:1.25rem}";
+
+const SallaSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Sets label
+     */
+    this.label = undefined;
+    /**
+     * Can be an array of objects or array of strings.
+     * When using objects, will look for a text, value and disabled keys.
+     */
+    this.items = [];
+    /**
+     * Set property of items’s text value
+     */
+    this.itemText = "text";
+    /**
+     * Set property of items’s value - must be primitive.
+     * Dot notation is supported.
+     */
+    this.itemValue = "value";
+    /**
+     * Set property of items’s disabled value
+     */
+    this.itemDisabled = 'disabled';
+    /**
+    * Sizing options
+    */
+    this.size = 'normal';
+    /**
+     * The selected value
+     */
+    this.value = undefined;
+    /**
+     * Enable autofocus
+     */
+    this.autofocus = false;
+    /**
+     * Add input clear functionality, default icon is `sicon-cancel`
+     */
+    this.clearable = false;
+    /**
+     * Applied when using clearable and the input is dirty
+     */
+    this.clearIcon = 'sicon-cancel';
+    /**
+     * Applies specified color to the control.
+     */
+    this.color = 'primary';
+    /**
+     * Remove elevation or box shadow.
+     */
+    this.flat = undefined;
+    /**
+     * Disable the input
+     */
+    this.disabled = false;
+    /**
+     * Displays linear progress bar.
+     */
+    this.loading = false;
+    /**
+     * Specifies which color is applied to the progress bar.
+     */
+    this.loadingColor = 'primary';
+    /**
+     * Hint text
+     */
+    this.hint = undefined;
+    /**
+     * Forces hint to always be visible.
+     */
+    this.persistHint = false;
+    /**
+     * Sets the input’s placeholder text.
+     */
+    this.placeholder = undefined;
+    /**
+     * Enable multiple item selection
+     */
+    this.multiple = false;
+    /**
+     * Enable multiple item selection
+     */
+    this.autocomplete = false;
+    /**
+     * Enable multiple item selection
+     */
+    this.required = false;
+    /**
+     * Changes display of selections to chips
+     */
+    this.chips = false;
+    /**
+     * Define appearance of the component
+     */
+    this.shape = 'outlined';
+    /**
+     * Changes the selection behavior to return the object directly
+     * rather than the value specified with item-value
+     */
+    this.returnObject = false;
+    /**
+     * Hides hint if any
+     */
+    this.hideDetail = false;
+  }
+  selectClass() {
+    return `s-select-field s-select-${this.shape} ${this.color} ${this.size}`;
+  }
+  onSelectedItemChange(event) {
+    let selectedIndex = event.target.selectedIndex;
+    if (selectedIndex < 0) {
+      this.value = undefined;
+      return;
+    }
+    let selectedItem = this.items[!!this.placeholder ? selectedIndex - 1 : selectedIndex];
+    this.value = this.returnObject ? selectedItem : selectedItem[this.itemValue];
+    console.log("🚀 ~ file: salla-select.tsx ~ line 153 ~ SallaSelect ~ onSelectedItemChange ~ this.value", this.value);
+  }
+  generateHint() {
+    if (!this.persistHint && !this.value) {
+      return "";
+    }
+    return h("div", { class: "s-select-hint" }, this.hint);
+  }
+  checkForSelected(item) {
+    if (this.returnObject && !!this.value) {
+      return item[this.itemValue] = this.value[this.itemValue];
+    }
+    return item[this.itemValue] == this.value;
+  }
+  render() {
+    return (h(Host, null, !!this.label ?
+      h("label", { htmlFor: "s-select", class: "s-select-label" }, this.label)
+      : "", h("select", { multiple: this.multiple, autocomplete: this.autocomplete ? 'on' : 'off', disabled: this.disabled, autoFocus: this.autofocus, id: "s-select", class: this.selectClass(), onChange: this.onSelectedItemChange.bind(this) }, !!this.placeholder ?
+      h("option", { selected: !this.value }, this.placeholder)
+      : "", this.items.map((item) => 
+    // item instanceof Object ?
+    h("option", { label: item[this.itemText], value: item[this.itemValue], selected: this.checkForSelected(item), disabled: item[this.itemDisabled] })
+    // :
+    // <option label={item} value={item} selected={item == this.value} disabled={item == this.itemDisabled}></option>
+    )), h("div", { class: { "s-hidden": this.hideDetail } }, this.generateHint())));
+  }
+  static get style() { return sallaSelectCss; }
+}, [0, "salla-select", {
+    "label": [1],
+    "items": [16],
+    "itemText": [1, "item-text"],
+    "itemValue": [1, "item-value"],
+    "itemDisabled": [1, "item-disabled"],
+    "size": [1],
+    "value": [1032],
+    "autofocus": [4],
+    "clearable": [4],
+    "clearIcon": [1, "clear-icon"],
+    "color": [1],
+    "flat": [4],
+    "disabled": [4],
+    "loading": [4],
+    "loadingColor": [1, "loading-color"],
+    "hint": [1],
+    "persistHint": [4, "persist-hint"],
+    "placeholder": [1],
+    "multiple": [4],
+    "autocomplete": [4],
+    "required": [4],
+    "chips": [4],
+    "shape": [1],
+    "returnObject": [4, "return-object"],
+    "hideDetail": [4, "hide-detail"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-select"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaSelect$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SallaSelect = SallaSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaSelect, defineCustomElement };

package/dist/components/salla-skeleton.js

@@ -0,0 +1,9 @@
+/*!
+ * 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 };

package/dist/components/salla-skeleton2.js

@@ -0,0 +1,53 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sallaSkeletonCss = ":host{display:block}";
+
+const SallaSkeleton = /*@__PURE__*/ proxyCustomElement(class 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, { class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { 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/{twilight/salla-social-share.entry.js → components/salla-social-share.js}

@@ -1,10 +1,11 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-2bf908a1.js';
-import { a as anime } from './anime.es-7317bfe3.js';
-import { e as email } from './mail-9d5204c6.js';
-import { C as CancelIcon } from './cancel-62d59306.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { e as email } from './mail.js';
+import { C as Cancel } from './cancel.js';
+import { d as defineCustomElement$2 } from './salla-button2.js';
 
 const facebook = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -52,9 +53,10 @@ const ShareAlt = `<!-- Generated by IcoMoon.io -->
 
 const sallaSocialShareCss = "";
 
-const SallaSocialShare = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const SallaSocialShare$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     this.opened = false;
     this.allPlatforms = [Socials.WHATSAPP, Socials.FACEBOOK, Socials.TWITTER, Socials.EMAIL, Socials.COPY_LINK];
     this.platformIcons = [{ icon: whatsapp, name: Socials.WHATSAPP }, { icon: facebook, name: Socials.FACEBOOK }, { icon: twitter, name: Socials.TWITTER }, { icon: email, name: Socials.EMAIL }, { icon: copy_link, name: Socials.COPY_LINK }];
@@ -120,7 +122,7 @@ const SallaSocialShare = class {
     }, '-=200');
   }
   render() {
-    return (h("div", { class: "s-social-share-wrapper" }, h("slot", { name: 'widget' }, h("salla-button", { "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { innerHTML: this.opened ? CancelIcon : ShareAlt }))), h("ul", { ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share" }, this.platforms.map(platform => {
+    return (h("div", { class: "s-social-share-wrapper" }, h("slot", { name: 'widget' }, h("salla-button", { "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share" }, this.platforms.map(platform => {
       return (h("li", { ref: el => this.platformItem = el }, h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
         if (icon.name === platform) {
           return h("span", { class: "s-social-share-icon", innerHTML: icon.icon });
@@ -128,7 +130,37 @@ const SallaSocialShare = class {
       }))));
     }))));
   }
-};
-SallaSocialShare.style = sallaSocialShareCss;
+  static get style() { return sallaSocialShareCss; }
+}, [4, "salla-social-share", {
+    "url": [513],
+    "urlName": [513, "url-name"],
+    "platforms": [16],
+    "opened": [32],
+    "allPlatforms": [32],
+    "platformIcons": [32],
+    "open": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-social-share", "salla-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-social-share":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaSocialShare$1);
+      }
+      break;
+    case "salla-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SallaSocialShare = SallaSocialShare$1;
+const defineCustomElement = defineCustomElement$1;
 
-export { SallaSocialShare as salla_social_share };
+export { SallaSocialShare, defineCustomElement };

package/dist/components/salla-swiper.js

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