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

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

@@ -0,0 +1,91 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, h, Prop, Host } from '@stencil/core';
+export class SallaSkeleton {
+  constructor() {
+    /**
+   *  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 is() { return "salla-skeleton"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-skeleton.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-skeleton.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'circle' | 'normal'",
+        "resolved": "\"circle\" | \"normal\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the shape type of the skeleton is it circle or normal"
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'normal'"
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the skeleton width"
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "'100%'"
+    },
+    "height": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the skeleton height"
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "'100%'"
+    }
+  }; }
+}

package/dist/collection/components/salla-social-share/interfaces.js

@@ -0,0 +1,11 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export var Socials;
+(function (Socials) {
+  Socials["FACEBOOK"] = "facebook";
+  Socials["TWITTER"] = "twitter";
+  Socials["WHATSAPP"] = "whatsapp";
+  Socials["EMAIL"] = "email";
+  Socials["COPY_LINK"] = "copy_link";
+})(Socials || (Socials = {}));

package/dist/collection/components/salla-social-share/salla-social-share.js

@@ -0,0 +1,182 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Prop, h, State, Method } from '@stencil/core';
+import anime from 'animejs';
+import facebook from '../../assets/svg/facebook.svg';
+import twitter from '../../assets/svg/twitter.svg';
+import copy_link from '../../assets/svg/link.svg';
+import email from '../../assets/svg/mail.svg';
+import whatsapp from '../../assets/svg/whatsapp.svg';
+import { Socials } from './interfaces';
+import Cancel from "../../assets/svg/cancel.svg";
+import ShareAlt from "../../assets/svg/share-alt.svg";
+export class SallaSocialShare {
+  constructor() {
+    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 }];
+    /**
+     * page url that will be shared custom | current page url
+     */
+    this.url = "";
+    /**
+     * page url name that will be shared custom | current page url
+     */
+    this.urlName = "";
+    /**
+     * selected platforms to share | all platforms
+     */
+    this.platforms = this.allPlatforms;
+  }
+  componentWillLoad() {
+    let that = this;
+    if (document.getElementById('a2a-script')) {
+      return;
+    }
+    const script = document.createElement('script');
+    script.src = 'https://static.addtoany.com/menu/page.js';
+    script.setAttribute('id', 'a2a-script');
+    script.async = true;
+    script.onload = function () {
+      // ? this will not work if there is one share component in the page
+      window.a2a_config = window.a2a_config || {};
+      window.a2a_config.linkurl = that.url ? that.url : window.location.href;
+      window.a2a_config.linkname = that.urlName ? that.urlName : document.title;
+      window.a2a_config.locale = salla.config.get('user.language_code', salla.lang.getLocale());
+    };
+    document.body.appendChild(script);
+  }
+  /**
+   * Activate or open the share menu.
+   */
+  async open() {
+    this.opened = !this.opened;
+    if (this.opened) {
+      this.shareMenu.classList.add('opened');
+    }
+    else {
+      this.shareMenu.classList.remove('opened');
+    }
+    new anime.timeline()
+      .add({
+      targets: this.shareMenu,
+      translateY: [-50, 0],
+      opacity: [0, 1],
+      duration: 300,
+      podding: '0',
+      easing: 'easeInOutSine'
+    })
+      .add({
+      targets: this.platformItem,
+      translateZ: 0,
+      translateY: [-30, 0],
+      scaleY: [0, 1],
+      opacity: [0, 1],
+      duration: 1200,
+      delay: anime.stagger(100)
+    }, '-=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 ? 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 });
+            }
+          }))));
+      }))));
+  }
+  static get is() { return "salla-social-share"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-social-share.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-social-share.css"]
+  }; }
+  static get properties() { return {
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "page url that will be shared custom | current page url"
+      },
+      "attribute": "url",
+      "reflect": true,
+      "defaultValue": "\"\""
+    },
+    "urlName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "page url name that will be shared custom | current page url"
+      },
+      "attribute": "url-name",
+      "reflect": true,
+      "defaultValue": "\"\""
+    },
+    "platforms": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<string>",
+        "resolved": "string[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "selected platforms to share | all platforms"
+      },
+      "defaultValue": "this.allPlatforms"
+    }
+  }; }
+  static get states() { return {
+    "opened": {},
+    "allPlatforms": {},
+    "platformIcons": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Activate or open the share menu.",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/salla-swiper/salla-swiper.css

@@ -0,0 +1,177 @@
+/**
+ * Swiper 8.3.2
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2022 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: July 26, 2022
+ */
+@font-face {
+  font-family: "swiper-icons";
+  src: url("data:application/font-woff;charset=utf-8;base64, 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") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+:root {
+  --swiper-theme-color: #007aff;
+}
+
+.swiper {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  /* Fix of Webkit flickering */
+  z-index: 1;
+}
+
+.swiper-vertical > .swiper-wrapper {
+  flex-direction: column;
+}
+
+.swiper-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  transition-property: transform;
+  box-sizing: content-box;
+}
+
+.swiper-android .swiper-slide,
+.swiper-wrapper {
+  transform: translate3d(0px, 0, 0);
+}
+
+.swiper-pointer-events {
+  touch-action: pan-y;
+}
+.swiper-pointer-events.swiper-vertical {
+  touch-action: pan-x;
+}
+
+.swiper-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition-property: transform;
+}
+
+.swiper-slide-invisible-blank {
+  visibility: hidden;
+}
+
+/* Auto Height */
+.swiper-autoheight,
+.swiper-autoheight .swiper-slide {
+  height: auto;
+}
+.swiper-autoheight .swiper-wrapper {
+  align-items: flex-start;
+  transition-property: transform, height;
+}
+
+.swiper-backface-hidden .swiper-slide {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+/* 3D Effects */
+.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
+  perspective: 1200px;
+}
+.swiper-3d .swiper-wrapper,
+.swiper-3d .swiper-slide,
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom,
+.swiper-3d .swiper-cube-shadow {
+  transform-style: preserve-3d;
+}
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+.swiper-3d .swiper-slide-shadow {
+  background: rgba(0, 0, 0, 0.15);
+}
+.swiper-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-right {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-bottom {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+/* CSS Mode */
+.swiper-css-mode > .swiper-wrapper {
+  overflow: auto;
+  scrollbar-width: none;
+  /* For Firefox */
+  -ms-overflow-style: none;
+  /* For Internet Explorer and Edge */
+}
+.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.swiper-css-mode > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: start start;
+}
+
+.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
+  scroll-snap-type: x mandatory;
+}
+
+.swiper-vertical.swiper-css-mode > .swiper-wrapper {
+  scroll-snap-type: y mandatory;
+}
+
+.swiper-centered > .swiper-wrapper::before {
+  content: "";
+  flex-shrink: 0;
+  order: 9999;
+}
+.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
+  margin-inline-start: var(--swiper-centered-offset-before);
+}
+.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
+  height: 100%;
+  width: var(--swiper-centered-offset-after);
+}
+.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
+  margin-block-start: var(--swiper-centered-offset-before);
+}
+.swiper-centered.swiper-vertical > .swiper-wrapper::before {
+  width: 100%;
+  height: var(--swiper-centered-offset-after);
+}
+.swiper-centered > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: center center;
+}
+
+.s-swiper {
+  position: relative;
+}

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

@@ -0,0 +1,148 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, State, Prop, h } from '@stencil/core';
+import Swiper from 'swiper';
+import ArrowRightIcon from "../../assets/svg/arrow-right.svg";
+import ArrowLeftIcon from "../../assets/svg/arrow-left.svg";
+export class SallaSwiper {
+  constructor() {
+    /**
+     * Set to true to enable continuous loop mode. Defaults to false.
+     */
+    this.loop = false;
+    /**
+     * Duration of transition between slides (in ms). Defaults to 300ms.
+     */
+    this.speed = 300;
+    /**
+     * Number of slides per view (slides visible at the same time on slider's container).
+     */
+    this.itemPerView = "auto";
+    /**
+     * Distance between slide items in px. Defaults to 8px
+     */
+    this.spaceBetweenItems = 8;
+    // States
+    this.currentIndex = undefined;
+    this.isLastSlideItem = false;
+    this.isFirstSlideItem = true;
+  }
+  componentDidLoad() {
+    this.initSwiper();
+  }
+  initSwiper() {
+    for (const slide of this.swiperWrapper.children) {
+      slide.classList.add('swiper-slide');
+    }
+    this.swiper = new Swiper(this.swiperContainer, {
+      loop: this.loop,
+      speed: this.speed,
+      slidesPerView: this.itemPerView,
+      spaceBetween: this.spaceBetweenItems,
+    });
+  }
+  update() {
+    this.swiper.update();
+  }
+  render() {
+    var _a, _b;
+    return (h("div", { class: "s-swiper" },
+      h("div", { class: "s-swiper-button-prev" },
+        h("salla-button", { disabled: (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.isBeginning, shape: "icon", color: "light", onClick: () => this.swiper.slidePrev() },
+          h("span", { class: "s-swiper-button-icon", innerHTML: ArrowLeftIcon }))),
+      h("div", { class: "s-swiper-button-next" },
+        h("salla-button", { disabled: (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.isEnd, shape: "icon", color: "light", onClick: () => this.swiper.slideNext() },
+          h("span", { class: "s-swiper-button-icon", innerHTML: ArrowRightIcon }))),
+      h("div", { class: "swiper" },
+        h("div", { class: "swiper-container s-swiper-container", ref: el => this.swiperContainer = el },
+          h("div", { class: "swiper-wrapper s-swiper-wrapper", ref: el => this.swiperWrapper = el },
+            h("slot", null))))));
+  }
+  static get is() { return "salla-swiper"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-swiper.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-swiper.css"]
+  }; }
+  static get properties() { return {
+    "loop": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to enable continuous loop mode. Defaults to false."
+      },
+      "attribute": "loop",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "speed": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Duration of transition between slides (in ms). Defaults to 300ms."
+      },
+      "attribute": "speed",
+      "reflect": false,
+      "defaultValue": "300"
+    },
+    "itemPerView": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "\"auto\" | number",
+        "resolved": "\"auto\" | number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Number of slides per view (slides visible at the same time on slider's container)."
+      },
+      "attribute": "item-per-view",
+      "reflect": false,
+      "defaultValue": "\"auto\""
+    },
+    "spaceBetweenItems": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Distance between slide items in px. Defaults to 8px"
+      },
+      "attribute": "space-between-items",
+      "reflect": false,
+      "defaultValue": "8"
+    }
+  }; }
+  static get states() { return {
+    "currentIndex": {},
+    "isLastSlideItem": {},
+    "isFirstSlideItem": {}
+  }; }
+}

package/dist/collection/components/salla-tabs/interfaces.js

@@ -0,0 +1,4 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export {};

package/dist/collection/components/salla-tabs/salla-tab-content.css

@@ -0,0 +1,4 @@
+/*
+* Salla Tab Content Component: has many sizes, styles and loading state.
+* You can use these classes to target the elements in the component.
+*/