@salla.sa/twilight-components 1.4.7 → 1.4.8

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

@@ -1,387 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import { Component, Element, h, Method, Prop, Host } from '@stencil/core';
-export class SallaButton {
-  constructor() {
-    this.hostAttributes = {};
-    /**
-     * Button Type
-     */
-    this.shape = 'btn';
-    /**
-     * Button Color
-     */
-    this.color = 'primary';
-    /**
-     * Button Fill
-     */
-    this.fill = 'solid';
-    /**
-     * Button Size
-     */
-    this.size = 'medium';
-    /**
-     * Button Width
-     */
-    this.width = 'normal';
-    /**
-     * Is the button currently loading
-     */
-    this.loading = false;
-    /**
-     * Is the button currently disabled
-     */
-    this.disabled = false;
-    /**
-     * If there is need to change loader position, pass the position
-     */
-    this.loaderPosition = 'after';
-  }
-  /**
-   * Run loading animation
-   */
-  async load() {
-    if (this.loaderPosition == 'center')
-      this.text.classList.add('s-button-hide');
-    this.host.setAttribute('loading', '');
-    return this.host;
-  }
-  /**
-   * Stop loading animation
-   */
-  async stop() {
-    this.host.removeAttribute('loading');
-    this.host.querySelector('button').removeAttribute('loading');
-    if (this.loaderPosition == 'center')
-      this.text.classList.remove('s-button-hide');
-    return this.host;
-  }
-  /**
-   * Changing the body of the button
-   * @param html
-   */
-  async setText(html) {
-    this.text.innerHTML = html;
-    return this.host;
-  }
-  /**
-   * Add `disabled` attribute
-   */
-  async disable() {
-    this.host.setAttribute('disabled', '');
-    return this.host;
-  }
-  /**
-   * Remove `disabled` attribute
-   */
-  async enable() {
-    this.host.removeAttribute('disabled');
-    return this.host;
-  }
-  getBtnAttributes() {
-    for (let i = 0; i < this.host.attributes.length; i++) {
-      if (!['color', 'fill', 'size', 'width', 'id'].includes(this.host.attributes[i].name)) {
-        this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
-      }
-    }
-    this.hostAttributes.type = this.hostAttributes.type || 'button';
-    this.hostAttributes.class +=
-      ' s-button-element s-button-' + this.shape
-        + ' s-button-' + (this.fill == "none" ? 'fill-none' : this.fill)
-        + (this.size != "medium" ? ' s-button-' + this.size : '')
-        + (this.width != "normal" ? ' s-button-' + this.width : '')
-        + (this.shape == "link" ? ' s-button-' + this.color + '-link' : '')
-        + (this.shape != "link" && this.fill != 'outline' ? ' s-button-' + this.color : '')
-        + (this.fill == 'outline' ? ' s-button-' + this.color + '-outline' : '')
-        + (this.disabled ? ' s-button-disabled ' : '')
-        + (this.shape == 'icon' ? ' s-button-loader-center' : ' s-button-loader-' + this.loaderPosition);
-    return this.hostAttributes;
-  }
-  button() {
-    return (h("button", Object.assign({}, this.getBtnAttributes(), { disabled: this.disabled }),
-      h("span", { class: "s-button-text", ref: el => this.text = el },
-        h("slot", null)),
-      this.loading ? h("span", { class: "s-button-loader" }) : ''));
-  }
-  render() {
-    return (h(Host, { class: "s-button-wrap" }, this.href ? h("a", { href: this.href }, this.button()) : this.button()));
-  }
-  static get is() { return "salla-button"; }
-  static get originalStyleUrls() { return {
-    "$": ["salla-button.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["salla-button.css"]
-  }; }
-  static get properties() { return {
-    "shape": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'link' | 'icon' | 'btn'",
-        "resolved": "\"btn\" | \"icon\" | \"link\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button Type"
-      },
-      "attribute": "shape",
-      "reflect": true,
-      "defaultValue": "'btn'"
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary' | 'success' | 'warning' | 'danger' | 'light' | 'gray' | 'dark'",
-        "resolved": "\"danger\" | \"dark\" | \"gray\" | \"light\" | \"primary\" | \"success\" | \"warning\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button Color"
-      },
-      "attribute": "color",
-      "reflect": true,
-      "defaultValue": "'primary'"
-    },
-    "fill": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'solid' | 'outline' | 'none'",
-        "resolved": "\"none\" | \"outline\" | \"solid\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button Fill"
-      },
-      "attribute": "fill",
-      "reflect": true,
-      "defaultValue": "'solid'"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'large' | 'medium'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button Size"
-      },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'medium'"
-    },
-    "width": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'wide' | 'normal'",
-        "resolved": "\"normal\" | \"wide\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button Width"
-      },
-      "attribute": "width",
-      "reflect": true,
-      "defaultValue": "'normal'"
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Is the button currently loading"
-      },
-      "attribute": "loading",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Is the button currently disabled"
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "loaderPosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'start' | 'end' | 'center' | 'after'",
-        "resolved": "\"after\" | \"center\" | \"end\" | \"start\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If there is need to change loader position, pass the position"
-      },
-      "attribute": "loader-position",
-      "reflect": false,
-      "defaultValue": "'after'"
-    },
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button with href as normal link"
-      },
-      "attribute": "href",
-      "reflect": false
-    }
-  }; }
-  static get methods() { return {
-    "load": {
-      "complexType": {
-        "signature": "() => Promise<HTMLElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "Run loading animation",
-        "tags": []
-      }
-    },
-    "stop": {
-      "complexType": {
-        "signature": "() => Promise<HTMLElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "Stop loading animation",
-        "tags": []
-      }
-    },
-    "setText": {
-      "complexType": {
-        "signature": "(html: string) => Promise<HTMLElement>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "html"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "Changing the body of the button",
-        "tags": [{
-            "name": "param",
-            "text": "html"
-          }]
-      }
-    },
-    "disable": {
-      "complexType": {
-        "signature": "() => Promise<HTMLElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "Add `disabled` attribute",
-        "tags": []
-      }
-    },
-    "enable": {
-      "complexType": {
-        "signature": "() => Promise<HTMLElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "Remove `disabled` attribute",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js

@@ -1,90 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import { Component, Element, Host, Listen, h } from '@stencil/core';
-/**
- * its to easy to use, currenlty its support select & checkbox input as trigger for show/hide the dom
- * the dom you can put it like this data-show-when="{name of the field} {= or !=} {value of the field}"
- */
-export class SallaConditionalFields {
-  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 (h(Host, null,
-      h("slot", null)));
-  }
-  static get is() { return "salla-conditional-fields"; }
-  static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "change",
-      "method": "changeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}

package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.css

@@ -1,4 +0,0 @@
-/*
-* Salla Infinite Scroll Component: used in latest-products page, comments, brands, orders and so on..
-* You can use these classes to target the elements in the component.
-*/

package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.js

@@ -1,171 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import { Component, Element, h, Host, Prop, State } from '@stencil/core';
-import Helper from "../../Helpers/Helper";
-/**
- */
-export class SallaInfiniteScroll {
-  constructor() {
-    /**
-     * Next Page element
-     */
-    this.nextPage = '';
-    /**
-     * Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
-     */
-    this.autoload = false;
-    /**
-     * Class selector to know the container if it's not the host `<salla-infinite-scroll>`
-     */
-    this.container = 'salla-infinite-scroll';
-    /**
-     * Class selector to know list items
-     */
-    this.item = 'salla-infinite-scroll > *';
-    Helper.setHost(this.host);
-    this.status = document.createElement('div');
-    this.status.className = 's-infinite-scroll-wrapper';
-    this.status.innerHTML = `<div class="s-infinite-scroll-status" style="display:none">
-        <p class="s-infinite-scroll-last infinite-scroll-last"></p>
-        <p class="s-infinite-scroll-error infinite-scroll-error"></p>
-      </div>
-      <a href="${this.nextPage}" class="s-infinite-scroll-btn s-button-btn s-button-primary">
-        <span class="s-button-text s-infinite-scroll-btn-text">${salla.lang.get('common.elements.load_more')}</span>
-        <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
-      </a>`;
-    this.btnLoader = this.status.querySelector('.s-button-loader');
-    salla.lang.onLoaded(() => {
-      this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
-      this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
-      this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
-    });
-  }
-  loading(isLoading = true) {
-    let btnText = this.status.querySelector('.s-button-text');
-    Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
-    this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
-  }
-  render() {
-    return this.nextPage.length > 1 ?
-      h(Host, { class: "s-infinite-scroll-container" },
-        h("slot", null)) : '';
-  }
-  componentDidLoad() {
-    if (this.nextPage.length === 0) {
-      return;
-    }
-    this.host.insertAdjacentElement('afterend', this.status);
-    let that = this;
-    let infScroll = salla.infiniteScroll.initiate(this.container, {
-      history: this.autoload ? 'push' : false,
-      scrollThreshold: this.autoload ? 400 : false,
-      nextPage: this.nextPage,
-      checkLastPage: 'salla-infinite-scroll[next-page*=":"],salla-infinite-scroll[next-page*="."]',
-      status: '.s-infinite-scroll-status',
-      button: this.status.querySelector('.s-button-btn'),
-      append: this.item,
-      path: function () {
-        return that.nextPage.replace(/page\=(\d)/g, 'page=' + (this.loadCount + 2));
-      },
-    })
-      .on('request', () => this.loading())
-      .on('load', () => {
-      this.loading(false);
-      if (infScroll.pageIndex == 2) {
-        infScroll.option({ loadOnScroll: false });
-      }
-      if (infScroll.pageIndex == 3) {
-        infScroll.option({ loadOnScroll: true });
-      }
-    })
-      .on('error', () => this.loading(false));
-  }
-  static get is() { return "salla-infinite-scroll"; }
-  static get originalStyleUrls() { return {
-    "$": ["salla-infinite-scroll.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["salla-infinite-scroll.css"]
-  }; }
-  static get properties() { return {
-    "nextPage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Next Page element"
-      },
-      "attribute": "next-page",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "autoload": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`"
-      },
-      "attribute": "autoload",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "container": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Class selector to know the container if it's not the host `<salla-infinite-scroll>`"
-      },
-      "attribute": "container",
-      "reflect": false,
-      "defaultValue": "'salla-infinite-scroll'"
-    },
-    "item": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Class selector to know list items"
-      },
-      "attribute": "item",
-      "reflect": false,
-      "defaultValue": "'salla-infinite-scroll > *'"
-    }
-  }; }
-  static get states() { return {
-    "loadMore": {},
-    "noMore": {},
-    "failedToLoad": {}
-  }; }
-  static get elementRef() { return "host"; }
-}