@basic-ui-components-stc/basic-ui-components 1.0.0

package/dist/collection/components/ds-sla/ds-sla.js

@@ -0,0 +1,196 @@
+import { Host, h } from '@stencil/core';
+export class DsSla {
+  constructor() {
+    this.radius = 0;
+    this.strokeDasharray = 0;
+    this.strokeDashoffset = 0;
+    this.maxValue = undefined;
+    this.value = 0;
+    this.canvasScale = 80;
+    this.innerLineColor = '#FAFAFA';
+    this.outerLineColor = '#02C389';
+    this.innerLineWidth = 4;
+    this.outerLineWidth = 4;
+    this.customValue = '';
+  }
+  componentWillUpdate() {
+    this.animateSLA();
+  }
+  componentWillRender() {
+    this.animateSLA();
+  }
+  animateSLA() {
+    this.radius = (this.canvasScale / 2) - this.outerLineWidth;
+    this.strokeDasharray = Math.PI * (this.radius * 2);
+    // this.strokeDashoffset = this.strokeDasharray;
+    this.transform = `rotate(-90 ${this.canvasScale / 2} ${this.canvasScale / 2})`;
+    if (this.value > this.maxValue) {
+      this.strokeDashoffset = 0;
+    }
+    else {
+      this.strokeDashoffset = ((this.maxValue - this.value) / this.maxValue) * this.strokeDasharray;
+    }
+  }
+  render() {
+    return (h(Host, null, h("svg", { part: "base", width: `${this.canvasScale}px`, height: `${this.canvasScale}px` }, h("circle", { fill: "transparent", cx: this.canvasScale / 2, cy: this.canvasScale / 2, r: this.radius, stroke: this.innerLineColor, "stroke-width": this.innerLineWidth }), h("circle", { class: "another-circle", fill: "transparent", transform: this.transform, cx: this.canvasScale / 2, cy: this.canvasScale / 2, r: this.radius, stroke: this.outerLineColor, "stroke-width": this.outerLineWidth, "stroke-dasharray": this.strokeDasharray, "stroke-dashoffset": this.strokeDashoffset }), h("text", { part: "text", x: this.canvasScale / 2, y: this.canvasScale / 2, "text-anchor": "middle", "alignment-baseline": "middle" }, this.customValue.length < 1 ? this.value + '/' + this.maxValue : this.customValue))));
+  }
+  static get is() { return "ds-sla"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-sla.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-sla.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "maxValue": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-value",
+        "reflect": true
+      },
+      "value": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "canvasScale": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "canvas-scale",
+        "reflect": true,
+        "defaultValue": "80"
+      },
+      "innerLineColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inner-line-color",
+        "reflect": true,
+        "defaultValue": "'#FAFAFA'"
+      },
+      "outerLineColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "outer-line-color",
+        "reflect": true,
+        "defaultValue": "'#02C389'"
+      },
+      "innerLineWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inner-line-width",
+        "reflect": true,
+        "defaultValue": "4"
+      },
+      "outerLineWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "outer-line-width",
+        "reflect": true,
+        "defaultValue": "4"
+      },
+      "customValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-value",
+        "reflect": true,
+        "defaultValue": "''"
+      }
+    };
+  }
+}

package/dist/collection/components/ds-slider/ds-slider.css

@@ -0,0 +1,111 @@
+:host {
+  display: block;
+  --slider-width: 500px;
+  --pagination-size: 50px;
+  --pagination-radius: 50%;
+  --pagination-bg: #ddd;
+  --pagination-color: black;
+  --pagination-bg-active: purple;
+  --pagination-color-active: white;
+  --progress-height: 10px;
+  --progress-color: #ddd;
+  --progress-color-active: purple;
+  --step-border-width: 1px;
+  --step-border-color: black;
+  --step-bg-color: #ddd;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host .ds-slider {
+  max-width: var(--slider-width);
+  margin: auto;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  transform-style: preserve-3d;
+}
+:host .ds-slider .slides {
+  display: flex;
+  flex-wrap: nowrap;
+  position: relative;
+  margin: auto;
+  transition: transform 0.5s;
+  cursor: grab;
+}
+:host .ds-slider .slides ::slotted([part=slide]) {
+  overflow: hidden;
+  user-select: none;
+  pointer-events: none;
+}
+:host .ds-slider .progress {
+  display: grid;
+  grid-gap: 10px;
+}
+:host .ds-slider .progress .progress-item {
+  height: var(--progress-height);
+  background-color: var(--progress-color);
+  display: block;
+  width: 100%;
+  transition: background-color 0.5s linear;
+}
+:host .ds-slider .progress .progress-item.active {
+  background-color: var(--progress-color-active);
+}
+:host .ds-slider .pagination {
+  display: grid;
+  grid-gap: 10px;
+  grid-auto-flow: column;
+  place-content: center;
+  cursor: default !important;
+}
+:host .ds-slider .pagination .page-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--pagination-size);
+  height: var(--pagination-size);
+  border-radius: var(--pagination-radius);
+  background-color: var(--pagination-bg);
+  color: var(--pagination-color);
+  cursor: pointer !important;
+  transition: all 0.5s;
+}
+:host .ds-slider .pagination .page-item.active {
+  color: var(--pagination-color-active);
+  background-color: var(--pagination-bg-active);
+}
+:host .ds-slider .stepper {
+  display: grid;
+  grid-gap: 10px;
+  grid-auto-flow: column;
+  place-content: center;
+}
+:host .ds-slider .stepper .step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+:host .ds-slider .stepper .step-item.visited {
+  --step-border-color: green;
+  --step-border-width: 2px;
+}
+:host .ds-slider .stepper .step-item.active {
+  --step-border-color: purple;
+  --step-border-width: 2px;
+}
+:host .ds-slider .stepper .step-item .step-number {
+  min-width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--step-border-width) solid var(--step-border-color);
+}
+:host .ds-slider .controls {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem;
+}

package/dist/collection/components/ds-slider/ds-slider.js

@@ -0,0 +1,329 @@
+import { Host, h } from '@stencil/core';
+export class DsSlider {
+  constructor() {
+    this.initialConfig = Object.assign({ initialSlide: 1, loop: false, dir: 'rtl', slidesPerView: 3, showPagination: true, showProgress: true, showStepper: true }, this.config);
+    this.startPos = 0;
+    this.touchstartX = 0;
+    this.touchendX = 0;
+    this.isMouseDown = false;
+    this.config = {};
+    this.slidesLength = undefined;
+    this.currentSlide = undefined;
+    this.currentSlideNumber = undefined;
+  }
+  watchPropHandler(newValue) {
+    this.currentSlide = +newValue;
+    // console.log('The new value of activated is: ', newValue);
+  }
+  handleResize() {
+    this.applyStyles();
+  }
+  async handelEvents(e, eventType) {
+    switch (eventType) {
+      case 'touchstart':
+        this.touchstartX = e.changedTouches[0].screenX;
+        this.slidesWrapper.style.cursor = 'grabbing';
+        break;
+      case 'touchend':
+        this.touchendX = e.changedTouches[0].screenX;
+        this.slidesWrapper.style.cursor = 'grab';
+        this.handleSwipe();
+        break;
+      case 'mousedown':
+        this.isMouseDown = true;
+        this.touchstartX = e.screenX;
+        this.slidesWrapper.style.cursor = 'grabbing';
+        break;
+      case 'mousemove':
+        if (this.isMouseDown) {
+          // console.log(e.screenX);
+          // this.startPos = (this.currentSlideNumber - 1) * this.slideWidth + e.screenX
+          // console.log(this.startPos);
+          // this.applyStyles()
+        }
+        break;
+      case 'mouseup':
+        this.touchendX = e.screenX;
+        this.isMouseDown = false;
+        this.slidesWrapper.style.cursor = 'grab';
+        this.handleSwipe();
+        break;
+      case 'onNext':
+        !this.nextButton.disabled && this.move('');
+        break;
+      case 'onPrev':
+        !this.prevButton.disabled && this.move('back');
+      default:
+        return;
+    }
+  }
+  async slideTo(slideNumber) {
+    if (slideNumber <= 0 || slideNumber >= this.slides.length + 1) {
+      return;
+    }
+    const classesToRemove = ['prev', 'current', 'next'];
+    this.prev.classList.remove(...classesToRemove);
+    this.current.classList.remove(...classesToRemove);
+    this.next.classList.remove(...classesToRemove);
+    this.currentSlideNumber = slideNumber;
+    [this.prev, this.current, this.next] = [
+      this.slides[slideNumber - 2] || this.slider.lastElementChild,
+      this.slides[slideNumber - 1],
+      this.slides[slideNumber] || this.slider.firstElementChild,
+    ];
+    this.applyClasses();
+  }
+  componentWillLoad() {
+    this.assignVariables();
+    this.slidesLength = this.slides.length;
+  }
+  componentDidLoad() {
+    this.slidesWrapper.addEventListener('touchstart', (e) => this.handelEvents(e, 'touchstart'), false);
+    this.slidesWrapper.addEventListener('touchend', (e) => this.handelEvents(e, 'touchend'), false);
+    this.slidesWrapper.addEventListener('mousedown', (e) => this.handelEvents(e, 'mousedown'), false);
+    this.slidesWrapper.addEventListener('mousemove', (e) => this.handelEvents(e, 'mousemove'), false);
+    this.slidesWrapper.addEventListener('mouseup', (e) => this.handelEvents(e, 'mouseup'), false);
+  }
+  componentDidRender() {
+    this.slidesWrapper = this.slider.shadowRoot.querySelector('.slider-wrapper');
+    this.applyStyles();
+    this.applyClasses();
+    this.sliderControls();
+  }
+  componentDidUpdate() {
+  }
+  componentWillUpdate() {
+  }
+  assignVariables() {
+    var _a, _b;
+    this.currentSlideNumber = this.initialConfig.initialSlide;
+    this.slides = this.slider.querySelectorAll('.slide-item');
+    this.steps = this.slider.querySelectorAll("[part='step']");
+    // console.log(this.steps);
+    this.slider.querySelectorAll('.step-label').forEach(item => {
+      item.remove();
+    });
+    if (this.initialConfig.initialSlide > this.slides.length + 1 || this.slides.length < 0) {
+      throw new Error('The initial slider bigger than the slides length');
+    }
+    this.current = this.slider.querySelector('.current') || this.slides[this.initialConfig.initialSlide - 1];
+    this.prev = ((_a = this.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling) || this.slider.lastElementChild;
+    this.next = ((_b = this.current) === null || _b === void 0 ? void 0 : _b.nextElementSibling) || this.slider.lastElementChild;
+  }
+  applyStyles() {
+    this.slidesContainer = this.slider.shadowRoot.querySelector('.slides');
+    this.slideWidth = (this.slidesContainer.offsetWidth / this.initialConfig.slidesPerView);
+    this.slides.forEach(item => {
+      item.style.minWidth = `${this.slideWidth}px`;
+    });
+    this.startPos = (this.currentSlideNumber - 1) * this.slideWidth;
+    this.startPos = this.initialConfig.dir === 'ltr' ? -this.startPos : this.startPos;
+    if (this.initialConfig.slidesPerView < this.slides.length + 1) {
+      this.slidesContainer.style.transform = `translateX(${this.startPos}px)`;
+    }
+  }
+  applyClasses() {
+    var _a, _b, _c;
+    (_a = this.current) === null || _a === void 0 ? void 0 : _a.classList.add('current');
+    (_b = this.prev) === null || _b === void 0 ? void 0 : _b.classList.add('prev');
+    (_c = this.next) === null || _c === void 0 ? void 0 : _c.classList.add('next');
+  }
+  sliderControls() {
+    this.prevButton.disabled = !this.initialConfig.loop && (this.currentSlideNumber < this.initialConfig.slidesPerView - this.currentSlideNumber || this.currentSlideNumber == 1);
+    this.nextButton.disabled = !this.initialConfig.loop && (this.currentSlideNumber > (this.slides.length - this.initialConfig.slidesPerView));
+    if (this.initialConfig.slidesPerView >= this.slides.length) {
+      this.prevButton.remove();
+      this.nextButton.remove();
+    }
+  }
+  handleSwipe() {
+    if (this.touchendX > this.touchstartX) {
+      if (!this.initialConfig.loop && (this.currentSlideNumber < this.initialConfig.slidesPerView - this.currentSlideNumber || this.currentSlideNumber == 1)) {
+        return;
+      }
+      else
+        this.move('back');
+    }
+    if (this.touchendX < this.touchstartX) {
+      if (!this.initialConfig.loop && (this.currentSlideNumber > (this.slides.length - this.initialConfig.slidesPerView))) {
+        return;
+      }
+      else
+        this.move('');
+    }
+  }
+  move(direction) {
+    var _a, _b, _c, _d, _e;
+    const classesToRemove = ['prev', 'current', 'next'];
+    (_a = this.prev) === null || _a === void 0 ? void 0 : _a.classList.remove(...classesToRemove);
+    (_b = this.current) === null || _b === void 0 ? void 0 : _b.classList.remove(...classesToRemove);
+    (_c = this.next) === null || _c === void 0 ? void 0 : _c.classList.remove(...classesToRemove);
+    if (direction === 'back') {
+      [this.prev, this.current, this.next] = [((_d = this.prev) === null || _d === void 0 ? void 0 : _d.previousElementSibling) || this.slider.lastElementChild, this.prev, this.current];
+      this.currentSlideNumber = [...this.slides].indexOf(this.current) + 1;
+    }
+    else {
+      [this.prev, this.current, this.next] = [this.current, this.next, ((_e = this.next) === null || _e === void 0 ? void 0 : _e.nextElementSibling) || this.slider.firstElementChild];
+      this.currentSlideNumber = [...this.slides].indexOf(this.current) + 1;
+    }
+    this.applyClasses();
+  }
+  drawPagination() {
+    return Array.apply(null, { length: this.slides.length + 1 - this.initialConfig.slidesPerView }).map((page, index) => {
+      return (h("div", { onClick: () => this.slideTo(index + 1), id: page === null || page === void 0 ? void 0 : page.length, class: `page-item page-${index + 1} ${index === this.currentSlideNumber - 1 ? 'active' : ''}` }, index + 1));
+    });
+  }
+  drawProgress() {
+    return Array.apply(null, { length: this.slides.length + 1 - this.initialConfig.slidesPerView }).map((page, index) => {
+      return (h("span", { id: page === null || page === void 0 ? void 0 : page.length, class: `progress-item page-${index + 1} ${index <= this.currentSlideNumber - 1 ? 'active' : ''}` }));
+    });
+  }
+  drawStepper() {
+    return [...this.steps].map((step, index) => {
+      return (h("div", { onClick: () => this.slideTo(index + 1), class: `step-item step-${index + 1} ${index < this.currentSlideNumber - 1 ? 'visited' : ''} ${index === this.currentSlideNumber - 1 ? 'active' : ''}` }, h("span", { class: "step-number" }, index + 1), [...step.childNodes].map(child => {
+        return h("span", { class: child.className }, child.textContent);
+      })));
+    });
+  }
+  render() {
+    return (h(Host, { dir: this.initialConfig.dir }, h("div", { part: 'base', class: 'ds-slider' }, this.initialConfig.showStepper &&
+      h("div", { part: 'stepper', class: 'stepper', style: { gridTemplateColumns: `repeat(${this.slides.length + 1 - this.initialConfig.slidesPerView}, 1fr)` } }, this.drawStepper()), this.initialConfig.showProgress &&
+      h("div", { part: 'progress', class: 'progress', style: { gridTemplateColumns: `repeat(${this.slides.length + 1 - this.initialConfig.slidesPerView}, 1fr)` } }, this.drawProgress()), h("div", { class: 'slider-wrapper' }, h("div", { part: 'slides', class: 'slides' }, h("slot", null))), h("div", { part: 'pagination', class: 'pagination' }, this.current && this.drawPagination()), h("div", { part: 'controls', class: 'controls' }, h("ds-button", { class: 'to-prev', onClick: (e) => this.handelEvents(e, 'onPrev'), ref: e => this.prevButton = e }, h("ds-icon", { slot: 'prefix', icon: 'arrow-left' }), "Prev"), h("ds-button", { class: 'to-next', onClick: (e) => this.handelEvents(e, 'onNext'), ref: e => this.nextButton = e }, h("ds-icon", { slot: 'suffix', icon: 'arrow-right' }), "Next")))));
+  }
+  static get is() { return "ds-slider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-slider.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-slider.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "config": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SliderConfig",
+          "resolved": "SliderConfig",
+          "references": {
+            "SliderConfig": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{}"
+      },
+      "slidesLength": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "slides-length",
+        "reflect": false
+      },
+      "currentSlide": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "current-slide",
+        "reflect": true
+      }
+    };
+  }
+  static get states() {
+    return {
+      "currentSlideNumber": {}
+    };
+  }
+  static get methods() {
+    return {
+      "handelEvents": {
+        "complexType": {
+          "signature": "(e: any, eventType: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "slideTo": {
+        "complexType": {
+          "signature": "(slideNumber: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "slider"; }
+  static get watchers() {
+    return [{
+        "propName": "currentSlideNumber",
+        "methodName": "watchPropHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/ds-splash/ds-splash.css

@@ -0,0 +1,62 @@
+:host {
+  display: block;
+}
+:host .splash {
+  background-color: var(--purple);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 99999;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  animation: seconds 1s forwards;
+  animation-iteration-count: 1;
+  animation-delay: 5s;
+}
+@keyframes seconds {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100vw);
+    transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+  }
+}
+:host .splash .text-container {
+  height: 75px;
+  overflow: hidden;
+}
+:host .splash .text {
+  animation: diamondMovesBack linear;
+  animation-duration: 0.9s;
+  text-align: center;
+}
+:host .splash svg {
+  width: 170px;
+  height: 85px;
+  margin-bottom: 20px;
+}
+@keyframes diamondMovesBack {
+  0% {
+    transform: translate(0, -100px);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+}
+@keyframes slide {
+  from {
+    transform: translateX(-80px);
+  }
+  to {
+    transform: translateX(0px);
+  }
+}