@salla.sa/twilight-components 1.0.159 → 1.1.4

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

@@ -0,0 +1,200 @@
+/**
+ * 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;
+}
+
+.s-swiper-container {
+  padding-top: 5px;
+}
+
+.s-swiper-button-next {
+  right: -25px !important;
+}
+
+.s-swiper-button-prev {
+  left: -25px !important;
+}
+
+.s-swiper-button-prev,
+.s-swiper-button-next {
+  position: absolute;
+  top: 50%;
+  z-index: 3;
+}
+
+.s-swiper-button-icon {
+  color: black !important;
+}

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

@@ -0,0 +1,154 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, State, Prop, h } from '@stencil/core';
+import Swiper from 'swiper';
+export class SallaSwiper {
+  constructor() {
+    // slider-options
+    this.loop = false;
+    this.speed = 300;
+    this.itemPerView = "auto";
+    this.spaceBetweenItems = 8;
+    this.direction = 'ltr';
+    // 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", dir: this.direction },
+      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("i", { class: "sicon-arrow-left s-swiper-button-icon" }))),
+      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("i", { class: "sicon-arrow-right s-swiper-button-icon" }))),
+      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": ""
+      },
+      "attribute": "loop",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "speed": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "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": ""
+      },
+      "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": ""
+      },
+      "attribute": "space-between-items",
+      "reflect": false,
+      "defaultValue": "8"
+    },
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "direction",
+      "reflect": false,
+      "defaultValue": "'ltr'"
+    }
+  }; }
+  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.
+*/

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

@@ -0,0 +1,77 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Prop, State, Method, h } from '@stencil/core';
+export class SallaTabContent {
+  constructor() {
+    this.isSelected = false;
+  }
+  async getChild() {
+    return {
+      select: this.select.bind(this),
+      unselect: this.unselect.bind(this),
+      name: this.name
+    };
+  }
+  unselect() {
+    this.isSelected = false;
+  }
+  select() {
+    this.isSelected = true;
+  }
+  render() {
+    const classes = {
+      's-tabs-content': true,
+      's-tabs-content-selected': this.isSelected
+    };
+    return (h("div", { class: classes },
+      h("slot", null)));
+  }
+  static get is() { return "salla-tab-content"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-tab-content.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-tab-content.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "isSelected": {}
+  }; }
+  static get methods() { return {
+    "getChild": {
+      "complexType": {
+        "signature": "() => Promise<{ select: any; unselect: any; name: string; }>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<{ select: any; unselect: any; name: string; }>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

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

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

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

@@ -0,0 +1,170 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Prop, Event, Method, State, h } from '@stencil/core';
+import { generateRandomId } from './utils';
+export class SallaTabHeader {
+  constructor() {
+    this.id = generateRandomId();
+    /**
+   * The class applied to the currently active(selected) tab
+   */
+    this.activeClass = undefined;
+    /**
+     * Set the height of the tab bar
+     */
+    this.height = undefined;
+    /**
+     * Center tab items in the given flex.
+     */
+    this.centered = false;
+    this.isSelected = false;
+  }
+  async getChild() {
+    return {
+      select: this.select.bind(this),
+      unselect: this.unselect.bind(this),
+      name: this.name,
+      id: this.id
+    };
+  }
+  unselect() {
+    this.isSelected = false;
+  }
+  select() {
+    this.isSelected = true;
+  }
+  onClick() {
+    this.getChild().then(child => {
+      this.onSelect.emit(child);
+    });
+  }
+  render() {
+    const classes = {
+      's-tabs-header-item': true,
+      's-tabs-bg-normal': true,
+      's-tabs-active': this.isSelected,
+    };
+    return [
+      h("div", { class: classes, onClick: this.onClick.bind(this) },
+        h("slot", null)),
+    ];
+  }
+  static get is() { return "salla-tab-header"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-tab-header.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-tab-header.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Header identifier name to sync with the"
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "activeClass": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The class applied to the currently active(selected) tab"
+      },
+      "attribute": "active-class",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "height": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "number | string",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the height of the tab bar"
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "centered": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Center tab items in the given flex."
+      },
+      "attribute": "centered",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "isSelected": {}
+  }; }
+  static get events() { return [{
+      "method": "onSelect",
+      "name": "onSelect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "getChild": {
+      "complexType": {
+        "signature": "() => Promise<{ select: any; unselect: any; name: string; id: string; }>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<{ select: any; unselect: any; name: string; id: string; }>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,15 @@
+/*
+* Salla Tabs Component: has many sizes, styles and loading state.
+* You can use these classes to target the elements in the component.
+*/
+.s-tabs-header {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+.s-tabs-header::-webkit-scrollbar {
+  display: none;
+}