@everymatrix/general-slider 1.29.1 → 1.29.4

package/dist/cjs/general-slider.cjs.entry.js

@@ -2,23 +2,53 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-86ebe85a.js');
+const index = require('./index-813e9dd4.js');
 
 const generalSliderCss = ":host{display:block}.GeneralSlider{position:relative}.Slider{position:relative;width:100%;margin:0 auto;overflow:hidden}.SliderList{display:flex;margin:0;padding:0;list-style:none;transition:transform 0.5s ease-in-out}::slotted(li){flex:1 0 auto;width:100%;margin:auto}::slotted(li.hide){visibility:hidden;height:0;transition-delay:500ms}.Col-2 ::slotted(li){flex:2 0 auto;width:50%}.Col-3 ::slotted(li){flex:3 0 auto;width:33.3333333333%}.Col-4 ::slotted(li){flex:4 0 auto;width:25%}.Col-5 ::slotted(li){flex:5 0 auto;width:20%}.Col-6 ::slotted(li){flex:6 0 auto;width:16.6666666667%}.Col-7 ::slotted(li){flex:7 0 auto;width:14.2857142857%}.Col-8 ::slotted(li){flex:8 0 auto;width:12.5%}.Col-9 ::slotted(li){flex:9 0 auto;width:11.1111111111%}.Col-10 ::slotted(li){flex:10 0 auto;width:10%}.Col-11 ::slotted(li){flex:11 0 auto;width:9.0909090909%}.Col-12 ::slotted(li){flex:12 0 auto;width:8.3333333333%}.Button{position:absolute;z-index:1;top:calc(50% - 32px);padding:20px;font-size:20px;line-height:20px;opacity:0.5;border:none;background:var(--emfe-w-color-contrast, #07072A);color:var(--emfe-w-color-white, #FFFFFF);cursor:pointer}.Button:hover{opacity:1;transition:opacity 0.5s ease-in-out}.Button[disabled],.Button[disabled]:hover{color:var(--emfe-w-color-gray-150, #828282);opacity:0.25}.Button.ButtonNext{right:0}.PageButtons{display:flex;gap:4px;margin-top:8px}.PageButton{width:15px;height:4px;border-radius:4px;background-color:var(--emfe-w-tournament-color-primary, #0072ed);opacity:0.2;cursor:pointer;float:right}.PageButton.active{width:45px;opacity:1}";
 
 const GeneralSlider = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.showStatus = false;
+    /**
+     * Slide Count
+     */
     this.slideNumber = 3;
+    /**
+     * Slides to show
+     */
     this.slideShow = 3;
+    /**
+     * Display the arrow icon
+     */
     this.showArrow = true;
+    /**
+     * Display the button
+     */
     this.showButton = false;
+    /**
+     * Auto Slide
+     */
     this.autoSlide = false;
+    /**
+     * Auto Slide loop time
+     */
     this.loopTime = 1;
+    /**
+     * Auto fill the Item height
+     */
     this.autoItemHeight = false;
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
     this.currentSlideNumber = 0;
     this.slidesCount = 0;
+    this.limitStylingAppends = false;
+    this.slides = null;
     this.slideWidth = 0;
     this.currentPage = 0;
     this.controls = {
@@ -57,38 +87,54 @@ const GeneralSlider = class {
     }
   }
   componentWillLoad() {
-    this.slides = this.el.querySelectorAll('li');
-    this.slidesCount = this.slides.length;
     if (!this.slideNumber)
       this.slideNumber = 1;
     if (!this.slideShow)
       this.slideShow = 1;
   }
   componentDidLoad() {
-    this.sliderList = this.el.shadowRoot.querySelector('ul');
-    this.slideWidth = this.slides[0].offsetWidth;
+    this.slides = this.slotEl.assignedElements();
+    this.slidesCount = this.slides.length;
     for (let type in this.controls) {
       this.controls[type] = this.el.shadowRoot.querySelector('.Button' + type);
     }
-    this.updateControls();
     if (this.autoSlide) {
       this.setSlideAutoInterval();
     }
+    if (!this.limitStylingAppends && this.el.shadowRoot) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
   }
   componentDidRender() {
+    if (this.slides)
+      this.slideWidth = this.slides[0].offsetWidth;
     this.el.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
     this.el.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });
     this.updateListStyle();
+    if (!this.limitStylingAppends && this.el.shadowRoot) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
   }
   updateListStyle() {
     if (!this.autoItemHeight)
       return;
-    const sliderlist = this.el.querySelectorAll('li');
-    sliderlist.forEach((li, index) => {
-      li.classList.add('hide');
+    if (this.slides === null)
+      return;
+    this.slides.forEach((li, index) => {
       if (index >= this.currentPage * this.slideNumber && index < (this.currentPage + 1) * this.slideNumber) {
         li.classList.remove('hide');
       }
+      else {
+        li.classList.add('hide');
+      }
     });
   }
   disconnectedCallback() {
@@ -141,7 +187,7 @@ const GeneralSlider = class {
     }, Number(this.loopTime) * 1000);
   }
   componentDidUpdate() {
-    this.sliderList.style.transform = `translateX(${this.currentSlideNumber * this.slideWidth * -1}px)`;
+    this.sliderEl.style.transform = `translateX(${this.currentSlideNumber * this.slideWidth * -1}px)`;
     this.updateControls();
   }
   switchLoopStatus(isMouseMoveEnter) {
@@ -156,9 +202,28 @@ const GeneralSlider = class {
       }
     }
   }
+  setClientStyling() {
+    const sheet = new CSSStyleSheet();
+    // @ts-ignore
+    sheet.replace(this.clientStyling);
+    // @ts-ignore
+    this.el.shadowRoot.adoptedStyleSheets = [...this.el.shadowRoot.adoptedStyleSheets, sheet];
+  }
+  setClientStylingURL() {
+    let url = new URL(this.clientStylingUrl);
+    fetch(url.href)
+      .then((res) => res.text())
+      .then((data) => {
+      const sheet = new CSSStyleSheet();
+      // @ts-ignore
+      sheet.replace(data);
+      // @ts-ignore
+      this.el.shadowRoot.adoptedStyleSheets = [...this.el.shadowRoot.adoptedStyleSheets, sheet];
+    });
+  }
   render() {
     return (index.h("div", { class: "GeneralSlider" }, index.h("div", { class: "Slider" }, this.showArrow &&
-      index.h("div", null, index.h("button", { type: "button", class: "Button ButtonNext", onClick: this.slide.bind(this, true), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, ">"), index.h("button", { type: "button", class: "Button ButtonPrev", onClick: this.slide.bind(this, false), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, "<")), index.h("ul", { class: `SliderList Col-${this.slideShow}`, part: "SliderList", onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, index.h("slot", null))), this.showButton && this.slidesCount > 0 &&
+      index.h("div", null, index.h("button", { type: "button", class: "Button ButtonNext", onClick: this.slide.bind(this, true), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, ">"), index.h("button", { type: "button", class: "Button ButtonPrev", onClick: this.slide.bind(this, false), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, "<")), index.h("ul", { class: `SliderList Col-${this.slideShow}`, part: "SliderList", onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false), ref: (el) => this.sliderEl = el }, index.h("slot", { ref: (el) => this.slotEl = el }))), this.showButton && this.slidesCount > 0 &&
       index.h("div", { class: "PageButtons", part: "PageButtons" }, [...Array(this.slidesCount / this.slideNumber)].map((_x, i) => index.h("div", { class: `PageButton ${this.currentPage == i ? 'active' : ''}`, title: `page${i}`, onClick: this.slideTo.bind(this, i), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, "\u00A0")))));
   }
   get el() { return index.getElement(this); }

package/dist/cjs/general-slider.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-86ebe85a.js');
+const index = require('./index-813e9dd4.js');
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["general-slider.cjs",[[1,"general-slider",{"showStatus":[4,"show-status"],"slideNumber":[2,"slide-number"],"slideShow":[2,"slide-show"],"showArrow":[4,"show-arrow"],"showButton":[4,"show-button"],"autoSlide":[4,"auto-slide"],"loopTime":[2,"loop-time"],"autoItemHeight":[4,"auto-item-height"],"currentSlideNumber":[32]}]]]], options);
+  return index.bootstrapLazy([["general-slider.cjs",[[1,"general-slider",{"slideNumber":[2,"slide-number"],"slideShow":[2,"slide-show"],"showArrow":[4,"show-arrow"],"showButton":[4,"show-button"],"autoSlide":[4,"auto-slide"],"loopTime":[2,"loop-time"],"autoItemHeight":[4,"auto-item-height"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"currentSlideNumber":[32],"slidesCount":[32],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/cjs/{index-86ebe85a.js → index-813e9dd4.js}

@@ -234,6 +234,12 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'ref') {
+            // minifier will clean this up
+            if (newValue) {
+                newValue(elm);
+            }
+        }
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -390,6 +396,7 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
             elm = vnode.$elm$;
+            callNodeRefs(vnode);
             // remove the vnode's element from the dom
             elm.remove();
         }
@@ -511,6 +518,12 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+const callNodeRefs = (vNode) => {
+    {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+        vNode.$children$ && vNode.$children$.map(callNodeRefs);
+    }
+};
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -738,6 +751,11 @@ const parsePropertyValue = (propValue, propType) => {
             // force it to be a number
             return parseFloat(propValue);
         }
+        if (propType & 1 /* String */) {
+            // could have been passed as a number or boolean
+            // but we still want it as a string
+            return String(propValue);
+        }
         // redundant return here for better minification
         return propValue;
     }

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-86ebe85a.js');
+const index = require('./index-813e9dd4.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["general-slider.cjs",[[1,"general-slider",{"showStatus":[4,"show-status"],"slideNumber":[2,"slide-number"],"slideShow":[2,"slide-show"],"showArrow":[4,"show-arrow"],"showButton":[4,"show-button"],"autoSlide":[4,"auto-slide"],"loopTime":[2,"loop-time"],"autoItemHeight":[4,"auto-item-height"],"currentSlideNumber":[32]}]]]], options);
+  return index.bootstrapLazy([["general-slider.cjs",[[1,"general-slider",{"slideNumber":[2,"slide-number"],"slideShow":[2,"slide-show"],"showArrow":[4,"show-arrow"],"showButton":[4,"show-button"],"autoSlide":[4,"auto-slide"],"loopTime":[2,"loop-time"],"autoItemHeight":[4,"auto-item-height"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"currentSlideNumber":[32],"slidesCount":[32],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

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

@@ -1,16 +1,46 @@
 import { Component, Prop, h, Element, State } from '@stencil/core';
 export class GeneralSlider {
   constructor() {
-    this.showStatus = false;
+    /**
+     * Slide Count
+     */
     this.slideNumber = 3;
+    /**
+     * Slides to show
+     */
     this.slideShow = 3;
+    /**
+     * Display the arrow icon
+     */
     this.showArrow = true;
+    /**
+     * Display the button
+     */
     this.showButton = false;
+    /**
+     * Auto Slide
+     */
     this.autoSlide = false;
+    /**
+     * Auto Slide loop time
+     */
     this.loopTime = 1;
+    /**
+     * Auto fill the Item height
+     */
     this.autoItemHeight = false;
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
     this.currentSlideNumber = 0;
     this.slidesCount = 0;
+    this.limitStylingAppends = false;
+    this.slides = null;
     this.slideWidth = 0;
     this.currentPage = 0;
     this.controls = {
@@ -49,38 +79,54 @@ export class GeneralSlider {
     }
   }
   componentWillLoad() {
-    this.slides = this.el.querySelectorAll('li');
-    this.slidesCount = this.slides.length;
     if (!this.slideNumber)
       this.slideNumber = 1;
     if (!this.slideShow)
       this.slideShow = 1;
   }
   componentDidLoad() {
-    this.sliderList = this.el.shadowRoot.querySelector('ul');
-    this.slideWidth = this.slides[0].offsetWidth;
+    this.slides = this.slotEl.assignedElements();
+    this.slidesCount = this.slides.length;
     for (let type in this.controls) {
       this.controls[type] = this.el.shadowRoot.querySelector('.Button' + type);
     }
-    this.updateControls();
     if (this.autoSlide) {
       this.setSlideAutoInterval();
     }
+    if (!this.limitStylingAppends && this.el.shadowRoot) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
   }
   componentDidRender() {
+    if (this.slides)
+      this.slideWidth = this.slides[0].offsetWidth;
     this.el.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
     this.el.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });
     this.updateListStyle();
+    if (!this.limitStylingAppends && this.el.shadowRoot) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
   }
   updateListStyle() {
     if (!this.autoItemHeight)
       return;
-    const sliderlist = this.el.querySelectorAll('li');
-    sliderlist.forEach((li, index) => {
-      li.classList.add('hide');
+    if (this.slides === null)
+      return;
+    this.slides.forEach((li, index) => {
       if (index >= this.currentPage * this.slideNumber && index < (this.currentPage + 1) * this.slideNumber) {
         li.classList.remove('hide');
       }
+      else {
+        li.classList.add('hide');
+      }
     });
   }
   disconnectedCallback() {
@@ -133,7 +179,7 @@ export class GeneralSlider {
     }, Number(this.loopTime) * 1000);
   }
   componentDidUpdate() {
-    this.sliderList.style.transform = `translateX(${this.currentSlideNumber * this.slideWidth * -1}px)`;
+    this.sliderEl.style.transform = `translateX(${this.currentSlideNumber * this.slideWidth * -1}px)`;
     this.updateControls();
   }
   switchLoopStatus(isMouseMoveEnter) {
@@ -148,6 +194,25 @@ export class GeneralSlider {
       }
     }
   }
+  setClientStyling() {
+    const sheet = new CSSStyleSheet();
+    // @ts-ignore
+    sheet.replace(this.clientStyling);
+    // @ts-ignore
+    this.el.shadowRoot.adoptedStyleSheets = [...this.el.shadowRoot.adoptedStyleSheets, sheet];
+  }
+  setClientStylingURL() {
+    let url = new URL(this.clientStylingUrl);
+    fetch(url.href)
+      .then((res) => res.text())
+      .then((data) => {
+      const sheet = new CSSStyleSheet();
+      // @ts-ignore
+      sheet.replace(data);
+      // @ts-ignore
+      this.el.shadowRoot.adoptedStyleSheets = [...this.el.shadowRoot.adoptedStyleSheets, sheet];
+    });
+  }
   render() {
     return (h("div", { class: "GeneralSlider" },
       h("div", { class: "Slider" },
@@ -155,8 +220,8 @@ export class GeneralSlider {
           h("div", null,
             h("button", { type: "button", class: "Button ButtonNext", onClick: this.slide.bind(this, true), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, ">"),
             h("button", { type: "button", class: "Button ButtonPrev", onClick: this.slide.bind(this, false), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, "<")),
-        h("ul", { class: `SliderList Col-${this.slideShow}`, part: "SliderList", onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) },
-          h("slot", null))),
+        h("ul", { class: `SliderList Col-${this.slideShow}`, part: "SliderList", onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false), ref: (el) => this.sliderEl = el },
+          h("slot", { ref: (el) => this.slotEl = el }))),
       this.showButton && this.slidesCount > 0 &&
         h("div", { class: "PageButtons", part: "PageButtons" }, [...Array(this.slidesCount / this.slideNumber)].map((_x, i) => h("div", { class: `PageButton ${this.currentPage == i ? 'active' : ''}`, title: `page${i}`, onClick: this.slideTo.bind(this, i), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, "\u00A0")))));
   }
@@ -169,24 +234,6 @@ export class GeneralSlider {
     "$": ["general-slider.css"]
   }; }
   static get properties() { return {
-    "showStatus": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-status",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "slideNumber": {
       "type": "number",
       "mutable": false,
@@ -199,7 +246,7 @@ export class GeneralSlider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Slide Count"
       },
       "attribute": "slide-number",
       "reflect": false,
@@ -217,7 +264,7 @@ export class GeneralSlider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Slides to show"
       },
       "attribute": "slide-show",
       "reflect": false,
@@ -235,7 +282,7 @@ export class GeneralSlider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Display the arrow icon"
       },
       "attribute": "show-arrow",
       "reflect": false,
@@ -253,7 +300,7 @@ export class GeneralSlider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Display the button"
       },
       "attribute": "show-button",
       "reflect": false,
@@ -271,7 +318,7 @@ export class GeneralSlider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Auto Slide"
       },
       "attribute": "auto-slide",
       "reflect": false,
@@ -289,7 +336,7 @@ export class GeneralSlider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Auto Slide loop time"
       },
       "attribute": "loop-time",
       "reflect": false,
@@ -307,15 +354,53 @@ export class GeneralSlider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Auto fill the Item height"
       },
       "attribute": "auto-item-height",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via inline styles"
+      },
+      "attribute": "client-styling",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url"
+      },
+      "attribute": "client-styling-url",
+      "reflect": false,
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {
-    "currentSlideNumber": {}
+    "currentSlideNumber": {},
+    "slidesCount": {},
+    "limitStylingAppends": {}
   }; }
   static get elementRef() { return "el"; }
 }

package/dist/components/general-slider.js

@@ -7,16 +7,46 @@ const GeneralSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.showStatus = false;
+    /**
+     * Slide Count
+     */
     this.slideNumber = 3;
+    /**
+     * Slides to show
+     */
     this.slideShow = 3;
+    /**
+     * Display the arrow icon
+     */
     this.showArrow = true;
+    /**
+     * Display the button
+     */
     this.showButton = false;
+    /**
+     * Auto Slide
+     */
     this.autoSlide = false;
+    /**
+     * Auto Slide loop time
+     */
     this.loopTime = 1;
+    /**
+     * Auto fill the Item height
+     */
     this.autoItemHeight = false;
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
     this.currentSlideNumber = 0;
     this.slidesCount = 0;
+    this.limitStylingAppends = false;
+    this.slides = null;
     this.slideWidth = 0;
     this.currentPage = 0;
     this.controls = {
@@ -55,38 +85,54 @@ const GeneralSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     }
   }
   componentWillLoad() {
-    this.slides = this.el.querySelectorAll('li');
-    this.slidesCount = this.slides.length;
     if (!this.slideNumber)
       this.slideNumber = 1;
     if (!this.slideShow)
       this.slideShow = 1;
   }
   componentDidLoad() {
-    this.sliderList = this.el.shadowRoot.querySelector('ul');
-    this.slideWidth = this.slides[0].offsetWidth;
+    this.slides = this.slotEl.assignedElements();
+    this.slidesCount = this.slides.length;
     for (let type in this.controls) {
       this.controls[type] = this.el.shadowRoot.querySelector('.Button' + type);
     }
-    this.updateControls();
     if (this.autoSlide) {
       this.setSlideAutoInterval();
     }
+    if (!this.limitStylingAppends && this.el.shadowRoot) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
   }
   componentDidRender() {
+    if (this.slides)
+      this.slideWidth = this.slides[0].offsetWidth;
     this.el.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
     this.el.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });
     this.updateListStyle();
+    if (!this.limitStylingAppends && this.el.shadowRoot) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
   }
   updateListStyle() {
     if (!this.autoItemHeight)
       return;
-    const sliderlist = this.el.querySelectorAll('li');
-    sliderlist.forEach((li, index) => {
-      li.classList.add('hide');
+    if (this.slides === null)
+      return;
+    this.slides.forEach((li, index) => {
       if (index >= this.currentPage * this.slideNumber && index < (this.currentPage + 1) * this.slideNumber) {
         li.classList.remove('hide');
       }
+      else {
+        li.classList.add('hide');
+      }
     });
   }
   disconnectedCallback() {
@@ -139,7 +185,7 @@ const GeneralSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     }, Number(this.loopTime) * 1000);
   }
   componentDidUpdate() {
-    this.sliderList.style.transform = `translateX(${this.currentSlideNumber * this.slideWidth * -1}px)`;
+    this.sliderEl.style.transform = `translateX(${this.currentSlideNumber * this.slideWidth * -1}px)`;
     this.updateControls();
   }
   switchLoopStatus(isMouseMoveEnter) {
@@ -154,15 +200,33 @@ const GeneralSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       }
     }
   }
+  setClientStyling() {
+    const sheet = new CSSStyleSheet();
+    // @ts-ignore
+    sheet.replace(this.clientStyling);
+    // @ts-ignore
+    this.el.shadowRoot.adoptedStyleSheets = [...this.el.shadowRoot.adoptedStyleSheets, sheet];
+  }
+  setClientStylingURL() {
+    let url = new URL(this.clientStylingUrl);
+    fetch(url.href)
+      .then((res) => res.text())
+      .then((data) => {
+      const sheet = new CSSStyleSheet();
+      // @ts-ignore
+      sheet.replace(data);
+      // @ts-ignore
+      this.el.shadowRoot.adoptedStyleSheets = [...this.el.shadowRoot.adoptedStyleSheets, sheet];
+    });
+  }
   render() {
     return (h("div", { class: "GeneralSlider" }, h("div", { class: "Slider" }, this.showArrow &&
-      h("div", null, h("button", { type: "button", class: "Button ButtonNext", onClick: this.slide.bind(this, true), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, ">"), h("button", { type: "button", class: "Button ButtonPrev", onClick: this.slide.bind(this, false), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, "<")), h("ul", { class: `SliderList Col-${this.slideShow}`, part: "SliderList", onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, h("slot", null))), this.showButton && this.slidesCount > 0 &&
+      h("div", null, h("button", { type: "button", class: "Button ButtonNext", onClick: this.slide.bind(this, true), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, ">"), h("button", { type: "button", class: "Button ButtonPrev", onClick: this.slide.bind(this, false), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, "<")), h("ul", { class: `SliderList Col-${this.slideShow}`, part: "SliderList", onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false), ref: (el) => this.sliderEl = el }, h("slot", { ref: (el) => this.slotEl = el }))), this.showButton && this.slidesCount > 0 &&
       h("div", { class: "PageButtons", part: "PageButtons" }, [...Array(this.slidesCount / this.slideNumber)].map((_x, i) => h("div", { class: `PageButton ${this.currentPage == i ? 'active' : ''}`, title: `page${i}`, onClick: this.slideTo.bind(this, i), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, "\u00A0")))));
   }
   get el() { return this; }
   static get style() { return generalSliderCss; }
 }, [1, "general-slider", {
-    "showStatus": [4, "show-status"],
     "slideNumber": [2, "slide-number"],
     "slideShow": [2, "slide-show"],
     "showArrow": [4, "show-arrow"],
@@ -170,7 +234,11 @@ const GeneralSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "autoSlide": [4, "auto-slide"],
     "loopTime": [2, "loop-time"],
     "autoItemHeight": [4, "auto-item-height"],
-    "currentSlideNumber": [32]
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrl": [1, "client-styling-url"],
+    "currentSlideNumber": [32],
+    "slidesCount": [32],
+    "limitStylingAppends": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/esm/general-slider.entry.js

@@ -1,20 +1,50 @@
-import { r as registerInstance, h, g as getElement } from './index-d8114a95.js';
+import { r as registerInstance, h, g as getElement } from './index-3bef6f6d.js';
 
 const generalSliderCss = ":host{display:block}.GeneralSlider{position:relative}.Slider{position:relative;width:100%;margin:0 auto;overflow:hidden}.SliderList{display:flex;margin:0;padding:0;list-style:none;transition:transform 0.5s ease-in-out}::slotted(li){flex:1 0 auto;width:100%;margin:auto}::slotted(li.hide){visibility:hidden;height:0;transition-delay:500ms}.Col-2 ::slotted(li){flex:2 0 auto;width:50%}.Col-3 ::slotted(li){flex:3 0 auto;width:33.3333333333%}.Col-4 ::slotted(li){flex:4 0 auto;width:25%}.Col-5 ::slotted(li){flex:5 0 auto;width:20%}.Col-6 ::slotted(li){flex:6 0 auto;width:16.6666666667%}.Col-7 ::slotted(li){flex:7 0 auto;width:14.2857142857%}.Col-8 ::slotted(li){flex:8 0 auto;width:12.5%}.Col-9 ::slotted(li){flex:9 0 auto;width:11.1111111111%}.Col-10 ::slotted(li){flex:10 0 auto;width:10%}.Col-11 ::slotted(li){flex:11 0 auto;width:9.0909090909%}.Col-12 ::slotted(li){flex:12 0 auto;width:8.3333333333%}.Button{position:absolute;z-index:1;top:calc(50% - 32px);padding:20px;font-size:20px;line-height:20px;opacity:0.5;border:none;background:var(--emfe-w-color-contrast, #07072A);color:var(--emfe-w-color-white, #FFFFFF);cursor:pointer}.Button:hover{opacity:1;transition:opacity 0.5s ease-in-out}.Button[disabled],.Button[disabled]:hover{color:var(--emfe-w-color-gray-150, #828282);opacity:0.25}.Button.ButtonNext{right:0}.PageButtons{display:flex;gap:4px;margin-top:8px}.PageButton{width:15px;height:4px;border-radius:4px;background-color:var(--emfe-w-tournament-color-primary, #0072ed);opacity:0.2;cursor:pointer;float:right}.PageButton.active{width:45px;opacity:1}";
 
 const GeneralSlider = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.showStatus = false;
+    /**
+     * Slide Count
+     */
     this.slideNumber = 3;
+    /**
+     * Slides to show
+     */
     this.slideShow = 3;
+    /**
+     * Display the arrow icon
+     */
     this.showArrow = true;
+    /**
+     * Display the button
+     */
     this.showButton = false;
+    /**
+     * Auto Slide
+     */
     this.autoSlide = false;
+    /**
+     * Auto Slide loop time
+     */
     this.loopTime = 1;
+    /**
+     * Auto fill the Item height
+     */
     this.autoItemHeight = false;
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
     this.currentSlideNumber = 0;
     this.slidesCount = 0;
+    this.limitStylingAppends = false;
+    this.slides = null;
     this.slideWidth = 0;
     this.currentPage = 0;
     this.controls = {
@@ -53,38 +83,54 @@ const GeneralSlider = class {
     }
   }
   componentWillLoad() {
-    this.slides = this.el.querySelectorAll('li');
-    this.slidesCount = this.slides.length;
     if (!this.slideNumber)
       this.slideNumber = 1;
     if (!this.slideShow)
       this.slideShow = 1;
   }
   componentDidLoad() {
-    this.sliderList = this.el.shadowRoot.querySelector('ul');
-    this.slideWidth = this.slides[0].offsetWidth;
+    this.slides = this.slotEl.assignedElements();
+    this.slidesCount = this.slides.length;
     for (let type in this.controls) {
       this.controls[type] = this.el.shadowRoot.querySelector('.Button' + type);
     }
-    this.updateControls();
     if (this.autoSlide) {
       this.setSlideAutoInterval();
     }
+    if (!this.limitStylingAppends && this.el.shadowRoot) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
   }
   componentDidRender() {
+    if (this.slides)
+      this.slideWidth = this.slides[0].offsetWidth;
     this.el.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
     this.el.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });
     this.updateListStyle();
+    if (!this.limitStylingAppends && this.el.shadowRoot) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
   }
   updateListStyle() {
     if (!this.autoItemHeight)
       return;
-    const sliderlist = this.el.querySelectorAll('li');
-    sliderlist.forEach((li, index) => {
-      li.classList.add('hide');
+    if (this.slides === null)
+      return;
+    this.slides.forEach((li, index) => {
       if (index >= this.currentPage * this.slideNumber && index < (this.currentPage + 1) * this.slideNumber) {
         li.classList.remove('hide');
       }
+      else {
+        li.classList.add('hide');
+      }
     });
   }
   disconnectedCallback() {
@@ -137,7 +183,7 @@ const GeneralSlider = class {
     }, Number(this.loopTime) * 1000);
   }
   componentDidUpdate() {
-    this.sliderList.style.transform = `translateX(${this.currentSlideNumber * this.slideWidth * -1}px)`;
+    this.sliderEl.style.transform = `translateX(${this.currentSlideNumber * this.slideWidth * -1}px)`;
     this.updateControls();
   }
   switchLoopStatus(isMouseMoveEnter) {
@@ -152,9 +198,28 @@ const GeneralSlider = class {
       }
     }
   }
+  setClientStyling() {
+    const sheet = new CSSStyleSheet();
+    // @ts-ignore
+    sheet.replace(this.clientStyling);
+    // @ts-ignore
+    this.el.shadowRoot.adoptedStyleSheets = [...this.el.shadowRoot.adoptedStyleSheets, sheet];
+  }
+  setClientStylingURL() {
+    let url = new URL(this.clientStylingUrl);
+    fetch(url.href)
+      .then((res) => res.text())
+      .then((data) => {
+      const sheet = new CSSStyleSheet();
+      // @ts-ignore
+      sheet.replace(data);
+      // @ts-ignore
+      this.el.shadowRoot.adoptedStyleSheets = [...this.el.shadowRoot.adoptedStyleSheets, sheet];
+    });
+  }
   render() {
     return (h("div", { class: "GeneralSlider" }, h("div", { class: "Slider" }, this.showArrow &&
-      h("div", null, h("button", { type: "button", class: "Button ButtonNext", onClick: this.slide.bind(this, true), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, ">"), h("button", { type: "button", class: "Button ButtonPrev", onClick: this.slide.bind(this, false), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, "<")), h("ul", { class: `SliderList Col-${this.slideShow}`, part: "SliderList", onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, h("slot", null))), this.showButton && this.slidesCount > 0 &&
+      h("div", null, h("button", { type: "button", class: "Button ButtonNext", onClick: this.slide.bind(this, true), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, ">"), h("button", { type: "button", class: "Button ButtonPrev", onClick: this.slide.bind(this, false), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, "<")), h("ul", { class: `SliderList Col-${this.slideShow}`, part: "SliderList", onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false), ref: (el) => this.sliderEl = el }, h("slot", { ref: (el) => this.slotEl = el }))), this.showButton && this.slidesCount > 0 &&
       h("div", { class: "PageButtons", part: "PageButtons" }, [...Array(this.slidesCount / this.slideNumber)].map((_x, i) => h("div", { class: `PageButton ${this.currentPage == i ? 'active' : ''}`, title: `page${i}`, onClick: this.slideTo.bind(this, i), onMouseEnter: this.switchLoopStatus.bind(this, true), onMouseLeave: this.switchLoopStatus.bind(this, false) }, "\u00A0")))));
   }
   get el() { return getElement(this); }

package/dist/esm/general-slider.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-d8114a95.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-3bef6f6d.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["general-slider",[[1,"general-slider",{"showStatus":[4,"show-status"],"slideNumber":[2,"slide-number"],"slideShow":[2,"slide-show"],"showArrow":[4,"show-arrow"],"showButton":[4,"show-button"],"autoSlide":[4,"auto-slide"],"loopTime":[2,"loop-time"],"autoItemHeight":[4,"auto-item-height"],"currentSlideNumber":[32]}]]]], options);
+  return bootstrapLazy([["general-slider",[[1,"general-slider",{"slideNumber":[2,"slide-number"],"slideShow":[2,"slide-show"],"showArrow":[4,"show-arrow"],"showButton":[4,"show-button"],"autoSlide":[4,"auto-slide"],"loopTime":[2,"loop-time"],"autoItemHeight":[4,"auto-item-height"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"currentSlideNumber":[32],"slidesCount":[32],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/esm/{index-d8114a95.js → index-3bef6f6d.js}

@@ -212,6 +212,12 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'ref') {
+            // minifier will clean this up
+            if (newValue) {
+                newValue(elm);
+            }
+        }
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -368,6 +374,7 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
             elm = vnode.$elm$;
+            callNodeRefs(vnode);
             // remove the vnode's element from the dom
             elm.remove();
         }
@@ -489,6 +496,12 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+const callNodeRefs = (vNode) => {
+    {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+        vNode.$children$ && vNode.$children$.map(callNodeRefs);
+    }
+};
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -716,6 +729,11 @@ const parsePropertyValue = (propValue, propType) => {
             // force it to be a number
             return parseFloat(propValue);
         }
+        if (propType & 1 /* String */) {
+            // could have been passed as a number or boolean
+            // but we still want it as a string
+            return String(propValue);
+        }
         // redundant return here for better minification
         return propValue;
     }

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-d8114a95.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-3bef6f6d.js';
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["general-slider",[[1,"general-slider",{"showStatus":[4,"show-status"],"slideNumber":[2,"slide-number"],"slideShow":[2,"slide-show"],"showArrow":[4,"show-arrow"],"showButton":[4,"show-button"],"autoSlide":[4,"auto-slide"],"loopTime":[2,"loop-time"],"autoItemHeight":[4,"auto-item-height"],"currentSlideNumber":[32]}]]]], options);
+  return bootstrapLazy([["general-slider",[[1,"general-slider",{"slideNumber":[2,"slide-number"],"slideShow":[2,"slide-show"],"showArrow":[4,"show-arrow"],"showButton":[4,"show-button"],"autoSlide":[4,"auto-slide"],"loopTime":[2,"loop-time"],"autoItemHeight":[4,"auto-item-height"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"currentSlideNumber":[32],"slidesCount":[32],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

package/dist/general-slider/general-slider.esm.js

@@ -1 +1 @@
-import{p as o,b as e}from"./p-95e8d88b.js";(()=>{const e=import.meta.url,t={};return""!==e&&(t.resourcesUrl=new URL(".",e).href),o(t)})().then((o=>e([["p-3899d032",[[1,"general-slider",{showStatus:[4,"show-status"],slideNumber:[2,"slide-number"],slideShow:[2,"slide-show"],showArrow:[4,"show-arrow"],showButton:[4,"show-button"],autoSlide:[4,"auto-slide"],loopTime:[2,"loop-time"],autoItemHeight:[4,"auto-item-height"],currentSlideNumber:[32]}]]]],o)));
+import{p as e,b as t}from"./p-1d97b302.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((e=>t([["p-20e28994",[[1,"general-slider",{slideNumber:[2,"slide-number"],slideShow:[2,"slide-show"],showArrow:[4,"show-arrow"],showButton:[4,"show-button"],autoSlide:[4,"auto-slide"],loopTime:[2,"loop-time"],autoItemHeight:[4,"auto-item-height"],clientStyling:[1,"client-styling"],clientStylingUrl:[1,"client-styling-url"],currentSlideNumber:[32],slidesCount:[32],limitStylingAppends:[32]}]]]],e)));

package/dist/general-slider/p-1d97b302.js

@@ -0,0 +1 @@
+let e,t,n=!1;const l="undefined"!=typeof window?window:{},s=l.document||{head:{}},o={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},r=e=>Promise.resolve(e),i=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),c=new WeakMap,a=e=>"sc-"+e.o,u={},f=e=>"object"==(e=typeof e)||"function"===e,d=(e,t,...n)=>{let l=null,s=!1,o=!1,r=[];const i=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?i(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!f(l))&&(l+=""),s&&o?r[r.length-1].i+=l:r.push(s?p(null,l):l),o=s)};if(i(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const c=p(e,null);return c.u=t,r.length>0&&(c.p=r),c},p=(e,t)=>({t:0,$:e,i:t,h:null,p:null,u:null}),$={},h=(e,t,n,s,r,i)=>{if(n!==s){let c=V(e,t),a=t.toLowerCase();if("class"===t){const t=e.classList,l=y(n),o=y(s);t.remove(...l.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!l.includes(e))))}else if("ref"===t)s&&s(e);else if(c||"o"!==t[0]||"n"!==t[1]){const l=f(s);if((c||l&&null!==s)&&!r)try{if(e.tagName.includes("-"))e[t]=s;else{let l=null==s?"":s;"list"===t?c=!1:null!=n&&e[t]==l||(e[t]=l)}}catch(e){}null==s||!1===s?!1===s&&""!==e.getAttribute(t)||e.removeAttribute(t):(!c||4&i||r)&&!l&&e.setAttribute(t,s=!0===s?"":s)}else t="-"===t[2]?t.slice(3):V(l,a)?a.slice(2):a[2]+t.slice(3),n&&o.rel(e,t,n,!1),s&&o.ael(e,t,s,!1)}},m=/\s/,y=e=>e?e.split(m):[],b=(e,t,n,l)=>{const s=11===t.h.nodeType&&t.h.host?t.h.host:t.h,o=e&&e.u||u,r=t.u||u;for(l in o)l in r||h(s,l,o[l],void 0,n,t.t);for(l in r)h(s,l,o[l],r[l],n,t.t)},w=(t,n,l)=>{let o,r,i=n.p[l],c=0;if(null!==i.i)o=i.h=s.createTextNode(i.i);else if(o=i.h=s.createElement(i.$),b(null,i,!1),null!=e&&o["s-si"]!==e&&o.classList.add(o["s-si"]=e),i.p)for(c=0;c<i.p.length;++c)r=w(t,i,c),r&&o.appendChild(r);return o},S=(e,n,l,s,o,r)=>{let i,c=e;for(c.shadowRoot&&c.tagName===t&&(c=c.shadowRoot);o<=r;++o)s[o]&&(i=w(null,l,o),i&&(s[o].h=i,c.insertBefore(i,n)))},g=(e,t,n,l,s)=>{for(;t<=n;++t)(l=e[t])&&(s=l.h,k(l),s.remove())},j=(e,t)=>e.$===t.$,M=(e,t)=>{const n=t.h=e.h,l=e.p,s=t.p,o=t.i;null===o?("slot"===t.$||b(e,t,!1),null!==l&&null!==s?((e,t,n,l)=>{let s,o=0,r=0,i=t.length-1,c=t[0],a=t[i],u=l.length-1,f=l[0],d=l[u];for(;o<=i&&r<=u;)null==c?c=t[++o]:null==a?a=t[--i]:null==f?f=l[++r]:null==d?d=l[--u]:j(c,f)?(M(c,f),c=t[++o],f=l[++r]):j(a,d)?(M(a,d),a=t[--i],d=l[--u]):j(c,d)?(M(c,d),e.insertBefore(c.h,a.h.nextSibling),c=t[++o],d=l[--u]):j(a,f)?(M(a,f),e.insertBefore(a.h,c.h),a=t[--i],f=l[++r]):(s=w(t&&t[r],n,r),f=l[++r],s&&c.h.parentNode.insertBefore(s,c.h));o>i?S(e,null==l[u+1]?null:l[u+1].h,n,l,r,u):r>u&&g(t,o,i)})(n,l,t,s):null!==s?(null!==e.i&&(n.textContent=""),S(n,null,t,s,0,s.length-1)):null!==l&&g(l,0,l.length-1)):e.i!==o&&(n.data=o)},k=e=>{e.u&&e.u.ref&&e.u.ref(null),e.p&&e.p.map(k)},v=e=>F(e).m,C=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},O=(e,t)=>{if(e.t|=16,!(4&e.t))return C(e,e.g),Z((()=>L(e,t)));e.t|=512},L=(e,t)=>{const n=e.j;let l;return t&&(l=N(n,"componentWillLoad")),R(l,(()=>P(e,n,t)))},P=async(e,t,n)=>{const l=e.m,o=l["s-rc"];n&&(e=>{const t=e.M,n=e.m,l=t.t,o=((e,t)=>{let n=a(t),l=G.get(n);if(e=11===e.nodeType?e:s,l)if("string"==typeof l){let t,o=c.get(e=e.head||e);o||c.set(e,o=new Set),o.has(n)||(t=s.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),o&&o.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);x(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>D(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},x=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.m,o=n.k||p(null,null),r=(e=>e&&e.$===$)(l)?l:d(null,null,l);t=s.tagName,r.$=null,r.t|=4,n.k=r,r.h=o.h=s.shadowRoot||s,e=s["s-sc"],M(o,r)})(n,l)}catch(e){_(e,n.m)}return null},D=e=>{const t=e.m,n=e.j,l=e.g;N(n,"componentDidRender"),64&e.t?N(n,"componentDidUpdate"):(e.t|=64,T(t),N(n,"componentDidLoad"),e.v(t),l||E()),e.S&&(e.S(),e.S=void 0),512&e.t&&Y((()=>O(e,!1))),e.t&=-517},E=()=>{T(s.documentElement),Y((()=>(e=>{const t=o.ce("appload",{detail:{namespace:"general-slider"}});return e.dispatchEvent(t),t})(l)))},N=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){_(e)}},R=(e,t)=>e&&e.then?e.then(t):t(),T=e=>e.classList.add("hydrated"),U=(e,t,n)=>{if(t.C){const l=Object.entries(t.C),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>F(this).O.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=F(e),o=s.O.get(t),r=s.t,i=s.j;n=((e,t)=>null==e||f(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,l.C[t][0]),8&r&&void 0!==o||n===o||Number.isNaN(o)&&Number.isNaN(n)||(s.O.set(t,n),i&&2==(18&r)&&O(s,!1))})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const t=new Map;s.attributeChangedCallback=function(e,n,l){o.jmp((()=>{const n=t.get(e);if(this.hasOwnProperty(n))l=this[n],delete this[n];else if(s.hasOwnProperty(n)&&"number"==typeof this[n]&&this[n]==l)return;this[n]=(null!==l||"boolean"!=typeof this[n])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,n])=>{const l=n[1]||e;return t.set(l,e),l}))}}return e},W=(e,t={})=>{const n=[],r=t.exclude||[],c=l.customElements,u=s.head,f=u.querySelector("meta[charset]"),d=s.createElement("style"),p=[];let $,h=!0;Object.assign(o,t),o.l=new URL(t.resourcesUrl||"./",s.baseURI).href,e.map((e=>{e[1].map((t=>{const l={t:t[0],o:t[1],C:t[2],L:t[3]};l.C=t[2];const s=l.o,u=class extends HTMLElement{constructor(e){super(e),H(e=this,l),1&l.t&&e.attachShadow({mode:"open"})}connectedCallback(){$&&(clearTimeout($),$=null),h?p.push(this):o.jmp((()=>(e=>{if(0==(1&o.t)){const t=F(e),n=t.M,l=()=>{};if(!(1&t.t)){t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){C(t,t.g=n);break}}n.C&&Object.entries(n.C).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=B(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(U(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){_(e)}t.t&=-9,e()}if(s.style){let e=s.style;const t=a(n);if(!G.has(t)){const l=()=>{};((e,t,n)=>{let l=G.get(e);i&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,G.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.g,r=()=>O(t,!0);o&&o["s-rc"]?o["s-rc"].push(r):r()})(0,t,n)}l()}})(this)))}disconnectedCallback(){o.jmp((()=>(()=>{0==(1&o.t)&&N(F(this).j,"disconnectedCallback")})()))}componentOnReady(){return F(this).P}};l.D=e[0],r.includes(s)||c.get(s)||(n.push(s),c.define(s,U(u,l,1)))}))})),d.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",d.setAttribute("data-styles",""),u.insertBefore(d,f?f.nextSibling:u.firstChild),h=!1,p.length?p.map((e=>e.connectedCallback())):o.jmp((()=>$=setTimeout(E,30)))},A=new WeakMap,F=e=>A.get(e),q=(e,t)=>A.set(t.j=e,t),H=(e,t)=>{const n={t:0,m:e,M:t,O:new Map};return n.P=new Promise((e=>n.v=e)),e["s-p"]=[],e["s-rc"]=[],A.set(e,n)},V=(e,t)=>t in e,_=(e,t)=>(0,console.error)(e,t),z=new Map,B=e=>{const t=e.o.replace(/-/g,"_"),n=e.D,l=z.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(z.set(n,e),e[t])),_)},G=new Map,I=[],J=[],K=(e,t)=>l=>{e.push(l),n||(n=!0,t&&4&o.t?Y(X):o.raf(X))},Q=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){_(e)}e.length=0},X=()=>{Q(I),Q(J),(n=I.length>0)&&o.raf(X)},Y=e=>r().then(e),Z=K(J,!0);export{W as b,v as g,d as h,r as p,q as r}

package/dist/general-slider/p-20e28994.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i,g as s}from"./p-1d97b302.js";const h=class{constructor(i){t(this,i),this.slideNumber=3,this.slideShow=3,this.showArrow=!0,this.showButton=!1,this.autoSlide=!1,this.loopTime=1,this.autoItemHeight=!1,this.clientStyling="",this.clientStylingUrl="",this.currentSlideNumber=0,this.slidesCount=0,this.limitStylingAppends=!1,this.slides=null,this.slideWidth=0,this.currentPage=0,this.controls={Prev:null,Next:null},this.xDown=null,this.yDown=null}slide(t){let i=0;i=t?this.currentSlideNumber+this.slideNumber:this.currentSlideNumber-this.slideNumber,i<0||i>=this.slidesCount||(this.currentSlideNumber=i,this.currentPage=this.currentSlideNumber/this.slideNumber,this.updateListStyle())}slideTo(t){this.currentSlideNumber=t*this.slideNumber,this.currentPage=t,this.updateListStyle()}updateControls(){this.switchControl("Prev",0!==this.currentSlideNumber),this.switchControl("Next",this.currentSlideNumber!==this.slidesCount-this.slideShow)}switchControl(t,i){this.controls[t]&&(this.controls[t].disabled=!i)}componentWillLoad(){this.slideNumber||(this.slideNumber=1),this.slideShow||(this.slideShow=1)}componentDidLoad(){this.slides=this.slotEl.assignedElements(),this.slidesCount=this.slides.length;for(let t in this.controls)this.controls[t]=this.el.shadowRoot.querySelector(".Button"+t);this.autoSlide&&this.setSlideAutoInterval(),!this.limitStylingAppends&&this.el.shadowRoot&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}componentDidRender(){this.slides&&(this.slideWidth=this.slides[0].offsetWidth),this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),this.updateListStyle(),!this.limitStylingAppends&&this.el.shadowRoot&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}updateListStyle(){this.autoItemHeight&&null!==this.slides&&this.slides.forEach(((t,i)=>{i>=this.currentPage*this.slideNumber&&i<(this.currentPage+1)*this.slideNumber?t.classList.remove("hide"):t.classList.add("hide")}))}disconnectedCallback(){this.el.removeEventListener("touchstart",this.handleTouchStart),this.el.removeEventListener("touchmove",this.handleTouchMove)}handleTouchStart(t){const i=this.getTouches(t)[0];this.xDown=i.clientX,this.yDown=i.clientY,clearInterval(this.sliderInterval)}getTouches(t){return t.touches||t.originalEvent.touches}handleTouchMove(t){if(!this.xDown||!this.yDown)return;let i=this.xDown-t.touches[0].clientX,s=this.yDown-t.touches[0].clientY;Math.abs(i)>Math.abs(s)&&this.slide(i>0),this.xDown=null,this.yDown=null,this.autoSlide&&this.setSlideAutoInterval()}setSlideAutoInterval(){0!=this.loopTime&&(clearInterval(this.sliderInterval),this.sliderInterval=setInterval((()=>{this.slideTo(this.currentPage+1<this.slidesCount/this.slideNumber?this.currentPage+1:0)}),1e3*Number(this.loopTime)))}componentDidUpdate(){this.sliderEl.style.transform=`translateX(${this.currentSlideNumber*this.slideWidth*-1}px)`,this.updateControls()}switchLoopStatus(t){this.autoSlide&&this.loopTime>0&&(t?clearInterval(this.sliderInterval):this.setSlideAutoInterval())}setClientStyling(){const t=new CSSStyleSheet;t.replace(this.clientStyling),this.el.shadowRoot.adoptedStyleSheets=[...this.el.shadowRoot.adoptedStyleSheets,t]}setClientStylingURL(){let t=new URL(this.clientStylingUrl);fetch(t.href).then((t=>t.text())).then((t=>{const i=new CSSStyleSheet;i.replace(t),this.el.shadowRoot.adoptedStyleSheets=[...this.el.shadowRoot.adoptedStyleSheets,i]}))}render(){return i("div",{class:"GeneralSlider"},i("div",{class:"Slider"},this.showArrow&&i("div",null,i("button",{type:"button",class:"Button ButtonNext",onClick:this.slide.bind(this,!0),onMouseEnter:this.switchLoopStatus.bind(this,!0),onMouseLeave:this.switchLoopStatus.bind(this,!1)},">"),i("button",{type:"button",class:"Button ButtonPrev",onClick:this.slide.bind(this,!1),onMouseEnter:this.switchLoopStatus.bind(this,!0),onMouseLeave:this.switchLoopStatus.bind(this,!1)},"<")),i("ul",{class:`SliderList Col-${this.slideShow}`,part:"SliderList",onMouseEnter:this.switchLoopStatus.bind(this,!0),onMouseLeave:this.switchLoopStatus.bind(this,!1),ref:t=>this.sliderEl=t},i("slot",{ref:t=>this.slotEl=t}))),this.showButton&&this.slidesCount>0&&i("div",{class:"PageButtons",part:"PageButtons"},[...Array(this.slidesCount/this.slideNumber)].map(((t,s)=>i("div",{class:"PageButton "+(this.currentPage==s?"active":""),title:`page${s}`,onClick:this.slideTo.bind(this,s),onMouseEnter:this.switchLoopStatus.bind(this,!0),onMouseLeave:this.switchLoopStatus.bind(this,!1)}," ")))))}get el(){return s(this)}};h.style=":host{display:block}.GeneralSlider{position:relative}.Slider{position:relative;width:100%;margin:0 auto;overflow:hidden}.SliderList{display:flex;margin:0;padding:0;list-style:none;transition:transform 0.5s ease-in-out}::slotted(li){flex:1 0 auto;width:100%;margin:auto}::slotted(li.hide){visibility:hidden;height:0;transition-delay:500ms}.Col-2 ::slotted(li){flex:2 0 auto;width:50%}.Col-3 ::slotted(li){flex:3 0 auto;width:33.3333333333%}.Col-4 ::slotted(li){flex:4 0 auto;width:25%}.Col-5 ::slotted(li){flex:5 0 auto;width:20%}.Col-6 ::slotted(li){flex:6 0 auto;width:16.6666666667%}.Col-7 ::slotted(li){flex:7 0 auto;width:14.2857142857%}.Col-8 ::slotted(li){flex:8 0 auto;width:12.5%}.Col-9 ::slotted(li){flex:9 0 auto;width:11.1111111111%}.Col-10 ::slotted(li){flex:10 0 auto;width:10%}.Col-11 ::slotted(li){flex:11 0 auto;width:9.0909090909%}.Col-12 ::slotted(li){flex:12 0 auto;width:8.3333333333%}.Button{position:absolute;z-index:1;top:calc(50% - 32px);padding:20px;font-size:20px;line-height:20px;opacity:0.5;border:none;background:var(--emfe-w-color-contrast, #07072A);color:var(--emfe-w-color-white, #FFFFFF);cursor:pointer}.Button:hover{opacity:1;transition:opacity 0.5s ease-in-out}.Button[disabled],.Button[disabled]:hover{color:var(--emfe-w-color-gray-150, #828282);opacity:0.25}.Button.ButtonNext{right:0}.PageButtons{display:flex;gap:4px;margin-top:8px}.PageButton{width:15px;height:4px;border-radius:4px;background-color:var(--emfe-w-tournament-color-primary, #0072ed);opacity:0.2;cursor:pointer;float:right}.PageButton.active{width:45px;opacity:1}";export{h as general_slider}

package/dist/types/components/general-slider/general-slider.d.ts

@@ -1,17 +1,47 @@
 export declare class GeneralSlider {
   el: HTMLElement;
-  showStatus: boolean;
+  /**
+   * Slide Count
+   */
   slideNumber: number;
+  /**
+   * Slides to show
+   */
   slideShow: number;
+  /**
+   * Display the arrow icon
+   */
   showArrow: boolean;
+  /**
+   * Display the button
+   */
   showButton: boolean;
+  /**
+   * Auto Slide
+   */
   autoSlide: boolean;
+  /**
+   * Auto Slide loop time
+   */
   loopTime: number;
+  /**
+   * Auto fill the Item height
+   */
   autoItemHeight: boolean;
+  /**
+   * Client custom styling via inline styles
+   */
+  clientStyling?: string;
+  /**
+   * Client custom styling via url
+   */
+  clientStylingUrl?: string;
   currentSlideNumber: number;
-  private slidesCount;
+  slidesCount: number;
+  private limitStylingAppends;
+  private sliderEl;
+  private slotEl;
   private slides;
-  private sliderList;
   private slideWidth;
   private sliderInterval;
   private currentPage;
@@ -33,5 +63,7 @@ export declare class GeneralSlider {
   setSlideAutoInterval(): void;
   componentDidUpdate(): void;
   switchLoopStatus(isMouseMoveEnter: any): void;
+  setClientStyling(): void;
+  setClientStylingURL(): void;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -7,13 +7,41 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
     interface GeneralSlider {
+        /**
+          * Auto fill the Item height
+         */
         "autoItemHeight": boolean;
+        /**
+          * Auto Slide
+         */
         "autoSlide": boolean;
+        /**
+          * Client custom styling via inline styles
+         */
+        "clientStyling"?: string;
+        /**
+          * Client custom styling via url
+         */
+        "clientStylingUrl"?: string;
+        /**
+          * Auto Slide loop time
+         */
         "loopTime": number;
+        /**
+          * Display the arrow icon
+         */
         "showArrow": boolean;
+        /**
+          * Display the button
+         */
         "showButton": boolean;
-        "showStatus": boolean;
+        /**
+          * Slide Count
+         */
         "slideNumber": number;
+        /**
+          * Slides to show
+         */
         "slideShow": number;
     }
 }
@@ -30,13 +58,41 @@ declare global {
 }
 declare namespace LocalJSX {
     interface GeneralSlider {
+        /**
+          * Auto fill the Item height
+         */
         "autoItemHeight"?: boolean;
+        /**
+          * Auto Slide
+         */
         "autoSlide"?: boolean;
+        /**
+          * Client custom styling via inline styles
+         */
+        "clientStyling"?: string;
+        /**
+          * Client custom styling via url
+         */
+        "clientStylingUrl"?: string;
+        /**
+          * Auto Slide loop time
+         */
         "loopTime"?: number;
+        /**
+          * Display the arrow icon
+         */
         "showArrow"?: boolean;
+        /**
+          * Display the button
+         */
         "showButton"?: boolean;
-        "showStatus"?: boolean;
+        /**
+          * Slide Count
+         */
         "slideNumber"?: number;
+        /**
+          * Slides to show
+         */
         "slideShow"?: number;
     }
     interface IntrinsicElements {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-slider",
-  "version": "1.29.1",
+  "version": "1.29.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",
@@ -15,5 +15,8 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@everymatrix/general-slider": "*"
   }
 }

package/dist/general-slider/p-3899d032.entry.js

@@ -1 +0,0 @@
-import{r as t,h as i,g as s}from"./p-95e8d88b.js";const h=class{constructor(i){t(this,i),this.showStatus=!1,this.slideNumber=3,this.slideShow=3,this.showArrow=!0,this.showButton=!1,this.autoSlide=!1,this.loopTime=1,this.autoItemHeight=!1,this.currentSlideNumber=0,this.slidesCount=0,this.slideWidth=0,this.currentPage=0,this.controls={Prev:null,Next:null},this.xDown=null,this.yDown=null}slide(t){let i=0;i=t?this.currentSlideNumber+this.slideNumber:this.currentSlideNumber-this.slideNumber,i<0||i>=this.slidesCount||(this.currentSlideNumber=i,this.currentPage=this.currentSlideNumber/this.slideNumber,this.updateListStyle())}slideTo(t){this.currentSlideNumber=t*this.slideNumber,this.currentPage=t,this.updateListStyle()}updateControls(){this.switchControl("Prev",0!==this.currentSlideNumber),this.switchControl("Next",this.currentSlideNumber!==this.slidesCount-this.slideShow)}switchControl(t,i){this.controls[t]&&(this.controls[t].disabled=!i)}componentWillLoad(){this.slides=this.el.querySelectorAll("li"),this.slidesCount=this.slides.length,this.slideNumber||(this.slideNumber=1),this.slideShow||(this.slideShow=1)}componentDidLoad(){this.sliderList=this.el.shadowRoot.querySelector("ul"),this.slideWidth=this.slides[0].offsetWidth;for(let t in this.controls)this.controls[t]=this.el.shadowRoot.querySelector(".Button"+t);this.updateControls(),this.autoSlide&&this.setSlideAutoInterval()}componentDidRender(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),this.updateListStyle()}updateListStyle(){this.autoItemHeight&&this.el.querySelectorAll("li").forEach(((t,i)=>{t.classList.add("hide"),i>=this.currentPage*this.slideNumber&&i<(this.currentPage+1)*this.slideNumber&&t.classList.remove("hide")}))}disconnectedCallback(){this.el.removeEventListener("touchstart",this.handleTouchStart),this.el.removeEventListener("touchmove",this.handleTouchMove)}handleTouchStart(t){const i=this.getTouches(t)[0];this.xDown=i.clientX,this.yDown=i.clientY,clearInterval(this.sliderInterval)}getTouches(t){return t.touches||t.originalEvent.touches}handleTouchMove(t){if(!this.xDown||!this.yDown)return;let i=this.xDown-t.touches[0].clientX,s=this.yDown-t.touches[0].clientY;Math.abs(i)>Math.abs(s)&&this.slide(i>0),this.xDown=null,this.yDown=null,this.autoSlide&&this.setSlideAutoInterval()}setSlideAutoInterval(){0!=this.loopTime&&(clearInterval(this.sliderInterval),this.sliderInterval=setInterval((()=>{this.slideTo(this.currentPage+1<this.slidesCount/this.slideNumber?this.currentPage+1:0)}),1e3*Number(this.loopTime)))}componentDidUpdate(){this.sliderList.style.transform=`translateX(${this.currentSlideNumber*this.slideWidth*-1}px)`,this.updateControls()}switchLoopStatus(t){this.autoSlide&&this.loopTime>0&&(t?clearInterval(this.sliderInterval):this.setSlideAutoInterval())}render(){return i("div",{class:"GeneralSlider"},i("div",{class:"Slider"},this.showArrow&&i("div",null,i("button",{type:"button",class:"Button ButtonNext",onClick:this.slide.bind(this,!0),onMouseEnter:this.switchLoopStatus.bind(this,!0),onMouseLeave:this.switchLoopStatus.bind(this,!1)},">"),i("button",{type:"button",class:"Button ButtonPrev",onClick:this.slide.bind(this,!1),onMouseEnter:this.switchLoopStatus.bind(this,!0),onMouseLeave:this.switchLoopStatus.bind(this,!1)},"<")),i("ul",{class:`SliderList Col-${this.slideShow}`,part:"SliderList",onMouseEnter:this.switchLoopStatus.bind(this,!0),onMouseLeave:this.switchLoopStatus.bind(this,!1)},i("slot",null))),this.showButton&&this.slidesCount>0&&i("div",{class:"PageButtons",part:"PageButtons"},[...Array(this.slidesCount/this.slideNumber)].map(((t,s)=>i("div",{class:"PageButton "+(this.currentPage==s?"active":""),title:`page${s}`,onClick:this.slideTo.bind(this,s),onMouseEnter:this.switchLoopStatus.bind(this,!0),onMouseLeave:this.switchLoopStatus.bind(this,!1)}," ")))))}get el(){return s(this)}};h.style=":host{display:block}.GeneralSlider{position:relative}.Slider{position:relative;width:100%;margin:0 auto;overflow:hidden}.SliderList{display:flex;margin:0;padding:0;list-style:none;transition:transform 0.5s ease-in-out}::slotted(li){flex:1 0 auto;width:100%;margin:auto}::slotted(li.hide){visibility:hidden;height:0;transition-delay:500ms}.Col-2 ::slotted(li){flex:2 0 auto;width:50%}.Col-3 ::slotted(li){flex:3 0 auto;width:33.3333333333%}.Col-4 ::slotted(li){flex:4 0 auto;width:25%}.Col-5 ::slotted(li){flex:5 0 auto;width:20%}.Col-6 ::slotted(li){flex:6 0 auto;width:16.6666666667%}.Col-7 ::slotted(li){flex:7 0 auto;width:14.2857142857%}.Col-8 ::slotted(li){flex:8 0 auto;width:12.5%}.Col-9 ::slotted(li){flex:9 0 auto;width:11.1111111111%}.Col-10 ::slotted(li){flex:10 0 auto;width:10%}.Col-11 ::slotted(li){flex:11 0 auto;width:9.0909090909%}.Col-12 ::slotted(li){flex:12 0 auto;width:8.3333333333%}.Button{position:absolute;z-index:1;top:calc(50% - 32px);padding:20px;font-size:20px;line-height:20px;opacity:0.5;border:none;background:var(--emfe-w-color-contrast, #07072A);color:var(--emfe-w-color-white, #FFFFFF);cursor:pointer}.Button:hover{opacity:1;transition:opacity 0.5s ease-in-out}.Button[disabled],.Button[disabled]:hover{color:var(--emfe-w-color-gray-150, #828282);opacity:0.25}.Button.ButtonNext{right:0}.PageButtons{display:flex;gap:4px;margin-top:8px}.PageButton{width:15px;height:4px;border-radius:4px;background-color:var(--emfe-w-tournament-color-primary, #0072ed);opacity:0.2;cursor:pointer;float:right}.PageButton.active{width:45px;opacity:1}";export{h as general_slider}

package/dist/general-slider/p-95e8d88b.js

@@ -1 +0,0 @@
-let e,t,n=!1;const l="undefined"!=typeof window?window:{},s=l.document||{head:{}},o={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},r=e=>Promise.resolve(e),i=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),c=new WeakMap,a=e=>"sc-"+e.o,u={},f=e=>"object"==(e=typeof e)||"function"===e,d=(e,t,...n)=>{let l=null,s=!1,o=!1,r=[];const i=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?i(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!f(l))&&(l+=""),s&&o?r[r.length-1].i+=l:r.push(s?p(null,l):l),o=s)};if(i(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const c=p(e,null);return c.u=t,r.length>0&&(c.p=r),c},p=(e,t)=>({t:0,$:e,i:t,h:null,p:null,u:null}),$={},h=(e,t,n,s,r,i)=>{if(n!==s){let c=H(e,t),a=t.toLowerCase();if("class"===t){const t=e.classList,l=y(n),o=y(s);t.remove(...l.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!l.includes(e))))}else if(c||"o"!==t[0]||"n"!==t[1]){const l=f(s);if((c||l&&null!==s)&&!r)try{if(e.tagName.includes("-"))e[t]=s;else{let l=null==s?"":s;"list"===t?c=!1:null!=n&&e[t]==l||(e[t]=l)}}catch(e){}null==s||!1===s?!1===s&&""!==e.getAttribute(t)||e.removeAttribute(t):(!c||4&i||r)&&!l&&e.setAttribute(t,s=!0===s?"":s)}else t="-"===t[2]?t.slice(3):H(l,a)?a.slice(2):a[2]+t.slice(3),n&&o.rel(e,t,n,!1),s&&o.ael(e,t,s,!1)}},m=/\s/,y=e=>e?e.split(m):[],b=(e,t,n,l)=>{const s=11===t.h.nodeType&&t.h.host?t.h.host:t.h,o=e&&e.u||u,r=t.u||u;for(l in o)l in r||h(s,l,o[l],void 0,n,t.t);for(l in r)h(s,l,o[l],r[l],n,t.t)},w=(t,n,l)=>{let o,r,i=n.p[l],c=0;if(null!==i.i)o=i.h=s.createTextNode(i.i);else if(o=i.h=s.createElement(i.$),b(null,i,!1),null!=e&&o["s-si"]!==e&&o.classList.add(o["s-si"]=e),i.p)for(c=0;c<i.p.length;++c)r=w(t,i,c),r&&o.appendChild(r);return o},S=(e,n,l,s,o,r)=>{let i,c=e;for(c.shadowRoot&&c.tagName===t&&(c=c.shadowRoot);o<=r;++o)s[o]&&(i=w(null,l,o),i&&(s[o].h=i,c.insertBefore(i,n)))},g=(e,t,n,l)=>{for(;t<=n;++t)(l=e[t])&&l.h.remove()},j=(e,t)=>e.$===t.$,M=(e,t)=>{const n=t.h=e.h,l=e.p,s=t.p,o=t.i;null===o?("slot"===t.$||b(e,t,!1),null!==l&&null!==s?((e,t,n,l)=>{let s,o=0,r=0,i=t.length-1,c=t[0],a=t[i],u=l.length-1,f=l[0],d=l[u];for(;o<=i&&r<=u;)null==c?c=t[++o]:null==a?a=t[--i]:null==f?f=l[++r]:null==d?d=l[--u]:j(c,f)?(M(c,f),c=t[++o],f=l[++r]):j(a,d)?(M(a,d),a=t[--i],d=l[--u]):j(c,d)?(M(c,d),e.insertBefore(c.h,a.h.nextSibling),c=t[++o],d=l[--u]):j(a,f)?(M(a,f),e.insertBefore(a.h,c.h),a=t[--i],f=l[++r]):(s=w(t&&t[r],n,r),f=l[++r],s&&c.h.parentNode.insertBefore(s,c.h));o>i?S(e,null==l[u+1]?null:l[u+1].h,n,l,r,u):r>u&&g(t,o,i)})(n,l,t,s):null!==s?(null!==e.i&&(n.textContent=""),S(n,null,t,s,0,s.length-1)):null!==l&&g(l,0,l.length-1)):e.i!==o&&(n.data=o)},k=e=>A(e).m,v=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},C=(e,t)=>{if(e.t|=16,!(4&e.t))return v(e,e.g),Y((()=>O(e,t)));e.t|=512},O=(e,t)=>{const n=e.j;let l;return t&&(l=E(n,"componentWillLoad")),N(l,(()=>L(e,n,t)))},L=async(e,t,n)=>{const l=e.m,o=l["s-rc"];n&&(e=>{const t=e.M,n=e.m,l=t.t,o=((e,t)=>{let n=a(t),l=B.get(n);if(e=11===e.nodeType?e:s,l)if("string"==typeof l){let t,o=c.get(e=e.head||e);o||c.set(e,o=new Set),o.has(n)||(t=s.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),o&&o.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);P(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>x(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},P=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.m,o=n.k||p(null,null),r=(e=>e&&e.$===$)(l)?l:d(null,null,l);t=s.tagName,r.$=null,r.t|=4,n.k=r,r.h=o.h=s.shadowRoot||s,e=s["s-sc"],M(o,r)})(n,l)}catch(e){V(e,n.m)}return null},x=e=>{const t=e.m,n=e.j,l=e.g;E(n,"componentDidRender"),64&e.t?E(n,"componentDidUpdate"):(e.t|=64,R(t),E(n,"componentDidLoad"),e.v(t),l||D()),e.S&&(e.S(),e.S=void 0),512&e.t&&X((()=>C(e,!1))),e.t&=-517},D=()=>{R(s.documentElement),X((()=>(e=>{const t=o.ce("appload",{detail:{namespace:"general-slider"}});return e.dispatchEvent(t),t})(l)))},E=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){V(e)}},N=(e,t)=>e&&e.then?e.then(t):t(),R=e=>e.classList.add("hydrated"),T=(e,t,n)=>{if(t.C){const l=Object.entries(t.C),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>A(this).O.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=A(e),o=s.O.get(t),r=s.t,i=s.j;n=((e,t)=>null==e||f(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):e)(n,l.C[t][0]),8&r&&void 0!==o||n===o||Number.isNaN(o)&&Number.isNaN(n)||(s.O.set(t,n),i&&2==(18&r)&&C(s,!1))})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const t=new Map;s.attributeChangedCallback=function(e,n,l){o.jmp((()=>{const n=t.get(e);if(this.hasOwnProperty(n))l=this[n],delete this[n];else if(s.hasOwnProperty(n)&&"number"==typeof this[n]&&this[n]==l)return;this[n]=(null!==l||"boolean"!=typeof this[n])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,n])=>{const l=n[1]||e;return t.set(l,e),l}))}}return e},U=(e,t={})=>{const n=[],r=t.exclude||[],c=l.customElements,u=s.head,f=u.querySelector("meta[charset]"),d=s.createElement("style"),p=[];let $,h=!0;Object.assign(o,t),o.l=new URL(t.resourcesUrl||"./",s.baseURI).href,e.map((e=>{e[1].map((t=>{const l={t:t[0],o:t[1],C:t[2],L:t[3]};l.C=t[2];const s=l.o,u=class extends HTMLElement{constructor(e){super(e),q(e=this,l),1&l.t&&e.attachShadow({mode:"open"})}connectedCallback(){$&&(clearTimeout($),$=null),h?p.push(this):o.jmp((()=>(e=>{if(0==(1&o.t)){const t=A(e),n=t.M,l=()=>{};if(!(1&t.t)){t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){v(t,t.g=n);break}}n.C&&Object.entries(n.C).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=z(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(T(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){V(e)}t.t&=-9,e()}if(s.style){let e=s.style;const t=a(n);if(!B.has(t)){const l=()=>{};((e,t,n)=>{let l=B.get(e);i&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,B.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.g,r=()=>C(t,!0);o&&o["s-rc"]?o["s-rc"].push(r):r()})(0,t,n)}l()}})(this)))}disconnectedCallback(){o.jmp((()=>(()=>{0==(1&o.t)&&E(A(this).j,"disconnectedCallback")})()))}componentOnReady(){return A(this).P}};l.D=e[0],r.includes(s)||c.get(s)||(n.push(s),c.define(s,T(u,l,1)))}))})),d.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",d.setAttribute("data-styles",""),u.insertBefore(d,f?f.nextSibling:u.firstChild),h=!1,p.length?p.map((e=>e.connectedCallback())):o.jmp((()=>$=setTimeout(D,30)))},W=new WeakMap,A=e=>W.get(e),F=(e,t)=>W.set(t.j=e,t),q=(e,t)=>{const n={t:0,m:e,M:t,O:new Map};return n.P=new Promise((e=>n.v=e)),e["s-p"]=[],e["s-rc"]=[],W.set(e,n)},H=(e,t)=>t in e,V=(e,t)=>(0,console.error)(e,t),_=new Map,z=e=>{const t=e.o.replace(/-/g,"_"),n=e.D,l=_.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(_.set(n,e),e[t])),V)},B=new Map,G=[],I=[],J=(e,t)=>l=>{e.push(l),n||(n=!0,t&&4&o.t?X(Q):o.raf(Q))},K=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){V(e)}e.length=0},Q=()=>{K(G),K(I),(n=G.length>0)&&o.raf(Q)},X=e=>r().then(e),Y=J(I,!0);export{U as b,k as g,d as h,r as p,F as r}