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

package/dist/cjs/salla-conditional-fields.cjs.entry.js

@@ -0,0 +1,87 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cac2fd59.js');
+
+const SallaConditionalFields = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  changeHandler(event) {
+    var _a;
+    salla.log('Received the change event: ', event);
+    if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
+      salla.log('Ignore the change because is not support input: ' + (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) || 'N/A'));
+      return;
+    }
+    // to extract the option id from the input name, the supported names are name[*] and name[*][]
+    let optionId = event.target.name.replace('[]', '');
+    let isMultiple = event.target.getAttribute('type') === 'checkbox';
+    salla.log('Trying to find all the element with condition:', `[data-show-when^="${optionId}"]`);
+    this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
+      .forEach((field) => {
+      let isEqual = !(field === null || field === void 0 ? void 0 : field.dataset.showWhen.includes('!='));
+      let value = field === null || field === void 0 ? void 0 : field.dataset.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$3').trim();
+      // let isSelected = isMultiple ? event.target?.checked : value === event.target.value;
+      let isSelected;
+      if (isMultiple) {
+        // @ts-ignore
+        let selectedValues = Array.from(this.host.querySelectorAll(`input[name="${event.target.name}"]:checked`), e => e === null || e === void 0 ? void 0 : e.value);
+        isSelected = selectedValues.includes(value.toString());
+      }
+      else {
+        isSelected = value === event.target.value;
+      }
+      salla.log('The input is ', (isMultiple ? 'Multiple' : 'Single'), ' value:', isSelected);
+      let showTheInput = (isEqual && isSelected) || (!isEqual && !isSelected);
+      if (showTheInput) {
+        field.classList.remove('hidden');
+        field.querySelectorAll('[name]').forEach((input) => {
+          input.removeAttribute('disabled');
+          //To handle focus on hidden input error
+          if (!['checkbox'].includes(input.getAttribute('type')) && field.getElementsByClassName('required').length) {
+            input.setAttribute('required', '');
+          }
+        });
+      }
+      else {
+        field.classList.add('hidden');
+        field.querySelectorAll('[name]').forEach((input) => {
+          input.setAttribute('disabled', '');
+          input.removeAttribute('required');
+          if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
+            // @ts-ignore
+            input.checked = false;
+          }
+          //firing this event will show errors, so don't run it when pageLoading.
+          // if (this.optionsAlreadyInitiated) {
+          //   salla.document.event.fireEvent(input, 'change', {'bubbles': true});
+          // }
+        });
+      }
+    });
+  }
+  componentDidRender() {
+    this.host.querySelectorAll(`[data-show-when]`).forEach((field) => {
+      var _a;
+      // @ts-ignore
+      let optionName = (_a = field === null || field === void 0 ? void 0 : field.dataset) === null || _a === void 0 ? void 0 : _a.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();
+      if (!optionName) {
+        return;
+      }
+      this.changeHandler({
+        target: this.host.querySelector('[name^="' + optionName + '"]')
+      });
+    });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
+
+exports.salla_conditional_fields = SallaConditionalFields;

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

@@ -0,0 +1,135 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cac2fd59.js');
+
+const sallaInstallmentCss = "#tabbyPromoWrapper{background:white;border-radius:0.375rem;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:20px}.salla-y #tabbyPromoWrapper{border:1px solid var(--color-grey-dark);border-radius:12px}#tabbyPromoWrapper:hover{-webkit-box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D}#tabbyPromoWrapper #tabbyPromo *{font-family:var(--font-main)}#tabbyPromoWrapper #tabbyPromo>div>div{max-width:none;-webkit-box-shadow:none;box-shadow:none;border:none}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet{max-width:100%;min-height:100px;padding:18px 20px;border:none !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__text,#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-size:var(--font-sm);color:var(--color-text) !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-weight:bold}.tabby-promo-wrapper #tabby-promo{font-family:var(--font-main) !important}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-title{font-size:var(--font-md)}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-desc{font-size:var(--font-sm);line-height:20px}.tamara-product-widget{margin-bottom:20px}.tamara-product-widget,.spotii-wrapper{min-height:100px;position:relative;color:var(--color-text);font-size:var(--font-sm);line-height:1.25;padding:18px 20px 18px 100px !important;background:white;border-radius:0.375rem;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)}.salla-y .tamara-product-widget,.salla-y .spotii-wrapper{border-radius:12px;border:1px solid var(--color-grey-dark)}.tamara-product-widget:hover,.spotii-wrapper:hover{-webkit-box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D}.tamara-product-widget .spotii-logo,.spotii-wrapper .spotii-logo{float:left;margin:0 0 0 -75px}.ltr .tamara-product-widget,.ltr .spotii-wrapper{text-align:left;padding:18px 100px 18px 20px !important}.ltr .tamara-product-widget .spotii-logo,.ltr .spotii-wrapper .spotii-logo{float:right;margin:0 -75px 0 0}.ltr .tamara-product-widget .spotii-product-widget,.ltr .spotii-wrapper .spotii-product-widget{text-align:left !important}.spotii-wrapper .spotii-promo{font-size:var(--font-md)}.spotii-wrapper .spotii-product-widget{font-size:var(--font-sm) !important;margin-top:10px}.tamara-product-widget .tamara-logo{position:absolute;left:20px;top:18px;margin:0 !important}.ltr .tamara-product-widget .tamara-logo{right:20px;left:auto}.tamara-product-widget span{font-family:var(--font-main);font-size:var(--font-sm);color:var(--color-text)}.tamara-product-widget span:last-child{display:block;position:relative;margin-top:8px}.tamara-popup__wrap{overflow:auto !important}";
+
+const SallaInstallment = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tabbyBorderRemoved = false;
+    this.tabbyRemoveBorderTries = 0;
+    //todo:: this is patch, use better way😜
+    this.readyToRender = false;
+    /**
+     * Language code
+     */
+    this.language = salla.config.get('user.language_code');
+    /**
+     * Currency code
+     */
+    this.currency = salla.config.get('user.currency_code');
+    this.tamaraIsActive = false;
+    this.tabbyIsActive = false;
+    this.spotiiIsActive = false;
+    salla.lang.onLoaded(() => {
+      const installment = salla.config.get('store.settings.installments');
+      if (installment) {
+        this.tamaraIsActive = installment.includes('tamara_installment');
+        this.tabbyIsActive = installment.includes('tabby_installment');
+        this.spotiiIsActive = installment.includes('spotii_pay');
+      }
+      this.readyToRender = true;
+    });
+  }
+  render() {
+    return (index.h(index.Host, null, this.tamaraIsActive ?
+      index.h("div", { class: "tamara-product-widget", "data-price": this.price, "data-currency": this.currency, "data-lang": this.language, "data-payment-type": "installment" })
+      : '', this.tabbyIsActive ?
+      index.h("div", { id: "tabbyPromoWrapper" }, index.h("div", { id: "tabbyPromo" }))
+      : '', this.spotiiIsActive ?
+      index.h("div", { class: "spotii-wrapper" }, index.h("div", { class: "spotii-promo" }))
+      : ''));
+  }
+  componentDidRender() {
+    if (!this.readyToRender) {
+      return;
+    }
+    // Tamara
+    if (this.tamaraIsActive) {
+      var script = document.createElement('script');
+      script.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');
+      document.head.appendChild(script);
+      script.onload = () => {
+        window.TamaraProductWidget.init({ lang: this.language });
+        setTimeout(() => {
+          window.TamaraProductWidget.render();
+        }, 300);
+      };
+    }
+    // tabby
+    if (this.tabbyIsActive) {
+      var script = document.createElement('script');
+      script.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');
+      document.head.appendChild(script);
+      script.onload = () => {
+        const TabbyPromo = window.TabbyPromo;
+        new TabbyPromo({
+          selector: '#tabbyPromo',
+          currency: this.currency,
+          price: this.price,
+          lang: this.language,
+        });
+        document.querySelectorAll('.tabby-promo-snippet__logo').forEach(function (element) {
+          element.setAttribute('aria-label', 'Tabby Logo');
+        });
+      };
+      //this is workaround to remove the default border and add margin
+      this.removeTabbyBorder();
+    }
+    // Spotii
+    if (this.spotiiIsActive) {
+      let amount = salla.money((Number(this.price) / 4).toFixed(2));
+      let isRTL = salla.config.get('theme.is_rtl', true);
+      window.spotiiConfig = {
+        targetXPath: ['.spotii-wrapper'],
+        renderToPath: ['.spotii-promo'],
+        numberOfPayment: 4,
+        currency: this.currency,
+        templateLine: "${textOne} ${number} ${textTwo} " + amount + "${logo} ${info}",
+        //todo:: translate these
+        textOne: isRTL ? "جزء الدفع على" : "Split it into",
+        textTwo: isRTL ? "أقساط متساوية بدون تكاليف اضافية بقيمة" : "payments of",
+        textThree: "مع",
+        price: this.price,
+        // forcedShow: false,
+        // merchantID: null,
+      };
+      var script = document.createElement('script');
+      script.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));
+      document.head.appendChild(script);
+      // script.onload = () => {
+      //   // setTimeout()
+      // }
+    }
+  }
+  /**
+   * this is workaround to remove the default border and add margin
+   * we will try to remove tabby border 5 times for 7.5 seconds
+   */
+  removeTabbyBorder() {
+    if (this.tabbyBorderRemoved || this.tabbyRemoveBorderTries > 5) {
+      return;
+    }
+    this.tabbyRemoveBorderTries++;
+    setTimeout(() => {
+      let promo = document.querySelector('#tabbyPromo>div>div');
+      promo = promo ? promo.shadowRoot.querySelector('div[class^="styles__tabby-promo-snippet--"]') : null;
+      if (promo) {
+        promo.style = 'border: none; margin: 15px 0!important;';
+        this.tabbyBorderRemoved = true;
+      }
+      else {
+        this.removeTabbyBorder();
+      }
+    }, this.tabbyRemoveBorderTries * 500);
+  }
+};
+SallaInstallment.style = sallaInstallmentCss;
+
+exports.salla_installment = SallaInstallment;

package/dist/cjs/salla-loyalty-prize-item.cjs.entry.js

@@ -0,0 +1,26 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cac2fd59.js');
+
+const sallaLoyaltyPrizeItemCss = "salla-loyalty-prize-item:hover{-webkit-box-shadow:0 5px 15px 1px rgba(0, 0, 0, 0.04) !important;box-shadow:0 5px 15px 1px rgba(0, 0, 0, 0.04) !important}";
+
+const SallaLoyaltyPrizeItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.prizeItemSelected = index.createEvent(this, "prizeItemSelected", 7);
+  }
+  onPrizeItemClick() {
+    this.prizeItemSelected.emit(this.item);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { onClick: this.onPrizeItemClick.bind(this) }, index.h("img", { class: "s-loyalty-prize-item-image", src: this.item.image, alt: this.item.name }), index.h("div", { class: "s-loyalty-prize-item-title" }, this.item.name), index.h("div", { class: "s-loyalty-prize-item-subtitle" }, this.item.description), index.h("div", { class: "s-loyalty-prize-item-points" }, this.item.cost_points, " Points"))));
+  }
+};
+SallaLoyaltyPrizeItem.style = sallaLoyaltyPrizeItemCss;
+
+exports.salla_loyalty_prize_item = SallaLoyaltyPrizeItem;

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

@@ -0,0 +1,166 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cac2fd59.js');
+const search = require('./search-b487cc49.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 index.h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, index.h("span", { slot: "title" }, salla.lang.get("blocks.scope.branch_looking_for_not_found")), index.h("span", { slot: "description" }, salla.lang.get("blocks.scope.our_services_not_available_in_this_branch")));
+  }
+  defaultContent() {
+    return [index.h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes.map((scope) => index.h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, index.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 }), index.h("label", { htmlFor: `${this.selection} + '_scope_' + ${scope.id}`, class: "s-scopes-label s-scopes-clickable" }, index.h("span", null, scope.name))))), this.footerContent()];
+  }
+  availabilityContent() {
+    return index.h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => {
+      var _a, _b, _c, _d, _e, _f;
+      return index.h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, index.h("h2", { class: { "s-scopes-label": true, "s-scopes-clickable": this.mode === ModeType.DEFAULT } }, index.h("span", null, scope.name)), index.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 index.h("div", { class: "s-scopes-footer" }, index.h("slot", { name: "footer" }, index.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 (index.h(index.Host, null, index.h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true, "has-skeleton": true }, index.h("div", { slot: "loading" }, index.h("div", { class: "s-scopes-skeleton" }, index.h("salla-list-tile", { class: "s-scopes-header" }, index.h("div", { slot: "icon", class: "s-scopes-header-icon" }, index.h("salla-skeleton", { type: "circle" })), index.h("div", { slot: "title", class: "s-scopes-header-title mb-5" }, index.h("salla-skeleton", { height: '15px', width: '50%' })), index.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, index.h("salla-skeleton", { height: '10px' }), index.h("salla-skeleton", { height: '10px', width: '75%' }))), index.h("div", { class: "s-scopes-skeleton-search" }, index.h("salla-skeleton", { height: '10px', width: '50%' }), index.h("salla-skeleton", { height: '30px', width: '100%' })), index.h("div", { class: "s-scopes-skeleton-scopes" }, index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' })), index.h("div", { class: "s-scopes-skeleton-btn" }, index.h("salla-skeleton", { height: '40px', width: '100%' })))), index.h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, index.h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), index.h("div", { slot: "title", class: "s-scopes-header-title" }, salla.lang.get('blocks.scope.you_are_browse_store_from')), index.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), index.h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && index.h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
+      index.h("div", { class: "s-scopes-search-wrapper" }, index.h("div", { class: "s-scopes-search-icon", innerHTML: search.Search }), index.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();
+    }
+  }
+};
+SallaScopees.style = sallaScopesCss;
+
+exports.salla_scopes = SallaScopees;

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

@@ -0,0 +1,159 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cac2fd59.js');
+
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * 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 index.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 (index.h(index.Host, null, !!this.label ?
+      index.h("label", { htmlFor: "s-select", class: "s-select-label" }, this.label)
+      : "", index.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 ?
+      index.h("option", { selected: !this.value }, this.placeholder)
+      : "", this.items.map((item) => 
+    // item instanceof Object ?
+    index.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>
+    )), index.h("div", { class: { "s-hidden": this.hideDetail } }, this.generateHint())));
+  }
+};
+SallaSelect.style = sallaSelectCss;
+
+exports.salla_select = SallaSelect;

package/dist/cjs/search-b487cc49.js

@@ -0,0 +1,13 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+const Search = `<!-- 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>search</title>
+<path d="M30.276 28.391l-7.576-7.576c1.644-2.053 2.633-4.652 2.633-7.481 0-6.616-5.384-12-12-12s-12 5.384-12 12 5.384 12 12 12c2.829 0 5.428-0.989 7.481-2.633l7.576 7.576c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885zM13.333 22.667c-5.147 0-9.333-4.187-9.333-9.333s4.187-9.333 9.333-9.333 9.333 4.187 9.333 9.333-4.187 9.333-9.333 9.333z"></path>
+</svg>
+`;
+
+exports.Search = Search;