scu-web-components 0.0.67 → 0.0.68

package/dist-node/scw-slider/ScwSlider.js

@@ -1,4 +1,4 @@
-var w=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(u,a,t,i)=>{for(var e=i>1?void 0:i?x(a,t):a,s=u.length-1,l;s>=0;s--)(l=u[s])&&(e=(i?l(a,t,e):l(e))||e);return i&&e&&w(a,t,e),e};import{html as b,isServer as z}from"lit";import{property as c,query as g}from"lit/decorators.js";import{LitElement as S,html as T}from"lit";import{property as p,state as M}from"lit/decorators.js";import{css as O}from"lit-element/lit-element.js";var y=O`
+var w=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(f,a,t,i)=>{for(var e=i>1?void 0:i?x(a,t):a,s=f.length-1,l;s>=0;s--)(l=f[s])&&(e=(i?l(a,t,e):l(e))||e);return i&&e&&w(a,t,e),e};import{html as m,isServer as U}from"lit";import{property as c,query as g}from"lit/decorators.js";import{LitElement as k,html as S}from"lit";import{property as v,state as M}from"lit/decorators.js";import{css as O}from"lit-element/lit-element.js";var y=O`
 :host {
   /* scw element */
   position: relative;
@@ -14,9 +14,9 @@ var w=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(u,a,t,i
 
 :host([warning]) {
   outline: 2px solid red !important;
-}`;var f=class{constructor(a,t){this._element=a,this._callback=t,this.observe()}observe(){if(this.disconnect(),this._element){let a={characterData:!0,childList:!0,attributes:!1,subtree:!0};this._mutationObserver=new MutationObserver(()=>this._callback()),this._mutationObserver.observe(this._element,a)}}disconnect(){!this._mutationObserver||this._mutationObserver.disconnect()}};var d=class extends S{constructor(){super(...arguments);this.ariaLabel="";this.ariaDisabled="false";this.isLink=!1;this.dynamic=!1;this.element="component"}disconnectedCallback(){super.disconnectedCallback(),this._lightDomMutationObserver&&this._lightDomMutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.dynamic&&(this._lightDomMutationObserver=new f(this,()=>{this.domMutated()}))}domMutated(){}warn(t){this._lastWarning||(this._lastWarning=t,this.setAttribute("warning",t),this.setAttribute("title",`[ERROR]: ${t}`))}clearWarnings(){this._lastWarning=void 0,this.removeAttribute("warning"),this.removeAttribute("title")}render(){return T`
+}`;var u=class{constructor(a,t){this._element=a,this._callback=t,this.observe()}observe(){if(this.disconnect(),this._element){let a={characterData:!0,childList:!0,attributes:!1,subtree:!0};this._mutationObserver=new MutationObserver(()=>this._callback()),this._mutationObserver.observe(this._element,a)}}disconnect(){!this._mutationObserver||this._mutationObserver.disconnect()}};var d=class extends k{constructor(){super(...arguments);this.ariaLabel="";this.ariaDisabled="false";this.isLink=!1;this.dynamic=!1;this.element="component"}disconnectedCallback(){super.disconnectedCallback(),this._lightDomMutationObserver&&this._lightDomMutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.dynamic&&(this._lightDomMutationObserver=new u(this,()=>{this.domMutated()}))}domMutated(){}warn(t){this._lastWarning||(this._lastWarning=t,this.setAttribute("warning",t),this.setAttribute("title",`[ERROR]: ${t}`))}clearWarnings(){this._lastWarning=void 0,this.removeAttribute("warning"),this.removeAttribute("title")}render(){return S`
       <slot></slot>
-    `}};d.styles=y,n([p({type:String,reflect:!0,attribute:"aria-label"})],d.prototype,"ariaLabel",2),n([p({type:String,attribute:"aria-disabled"})],d.prototype,"ariaDisabled",2),n([p({type:Boolean,reflect:!0,attribute:"is-link"})],d.prototype,"isLink",2),n([p({type:Boolean})],d.prototype,"dynamic",2),n([p({type:String,reflect:!0})],d.prototype,"element",2),n([M()],d.prototype,"_lastWarning",2);import{css as I}from"lit-element/lit-element.js";var L=I`
+    `}};d.styles=y,n([v({type:String,reflect:!0,attribute:"aria-label"})],d.prototype,"ariaLabel",2),n([v({type:String,attribute:"aria-disabled"})],d.prototype,"ariaDisabled",2),n([v({type:Boolean,reflect:!0,attribute:"is-link"})],d.prototype,"isLink",2),n([v({type:Boolean})],d.prototype,"dynamic",2),n([v({type:String,reflect:!0})],d.prototype,"element",2),n([M()],d.prototype,"_lastWarning",2);import{css as I}from"lit-element/lit-element.js";var E=I`
 :host {
   display: flex;
   flex-direction: row;
@@ -86,7 +86,7 @@ var w=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(u,a,t,i
 
 scw-link {
   width: var(--icon-width);
-  z-index: 10;
+  z-index: 1;
 }
 
 :host([scroll]) .slider {
@@ -106,15 +106,15 @@ scw-link {
 
 :host([snap]) .slider {
   scroll-snap-type: x mandatory;
-}`;function v(u,a){return(t,i)=>{let{update:e}=t;a=Object.assign({waitUntilFirstUpdate:!1},a),t.update=function(s){if(s.has(u)){let l=s.get(u),o=this[u];l!==o&&a&&(!a.waitUntilFirstUpdate||this.hasUpdated)&&this[i].call(this,l,o)}e.call(this,s)}}}var m=class{constructor(a,t){this.timerId=0;this.interval=0;this.paused=!1;this.stopped=!0;a.addController(this),this.host=a,this.playCallback=t}hostConnected(){this.host.addEventListener("mouseenter",this.pause.bind(this)),this.host.addEventListener("mouseleave",this.play.bind(this)),this.host.addEventListener("focusin",this.pause.bind(this)),this.host.addEventListener("focusout",this.play.bind(this)),this.host.addEventListener("touchstart",this.pause.bind(this)),this.host.addEventListener("touchend",this.play.bind(this))}hostDisconnected(){this.stop(),this.host.removeEventListener("mouseenter",this.pause.bind(this)),this.host.removeEventListener("mouseleave",this.play.bind(this)),this.host.removeEventListener("focusin",this.pause.bind(this)),this.host.removeEventListener("focusout",this.play.bind(this)),this.host.removeEventListener("touchstart",this.pause.bind(this)),this.host.removeEventListener("touchend",this.play.bind(this))}start(a){this.stop(),this.interval=a,this.stopped=!1,this.timerId=window.setInterval(()=>{this.paused||this.playCallback()},a)}stop(){clearInterval(this.timerId),this.stopped=!0}pause(){this.paused=!0,this.host.requestUpdate()}play(){clearTimeout(this.autoplayTimer),this.autoplayTimer=setTimeout(()=>{this.paused=!1,this.host.requestUpdate()},this.interval)}};var r=class extends d{constructor(){super();this.loop=!1;this.slidesShown=1;this.activeSlide=0;this.center=!1;this.navigation="none";this.drag=!1;this.scrollable=!1;this.tease="";this.gap="0px";this.autoplay=0;this.iconSize="medium";this.teaseOffset=0;this.scrollOffset=0;this.iconPx=0;this.isDown=!1;this.intersectionObserverEntries=new Map;this.autoplayController=new m(this,()=>this.next());if(this.element="slider",!z){this.slides=this.getElementsByTagName("scw-slider-item");let t=new IntersectionObserver(i=>{i.forEach(e=>{this.intersectionObserverEntries.set(e.target,e);let s=e.target;s.toggleAttribute("inert",!e.isIntersecting),s.classList.toggle("shown",e.isIntersecting),s.setAttribute("aria-hidden",e.isIntersecting?"false":"true")})},{root:this,threshold:.8});this.intersectionObserver=t,t.takeRecords().forEach(i=>{this.intersectionObserverEntries.set(i.target,i)})}this.boundSlideHandler=this.handleScroll.bind(this),this.boundResizeHandler=this.initializeSlides.bind(this)}static get styles(){return[super.styles,L]}async firstUpdated(){this.initializeSlides(),this.drag&&this.addDragListener()}connectedCallback(){window.addEventListener("resize",this.boundResizeHandler,!1),this.setIconWidth(),super.connectedCallback()}disconnectedCallback(){window.removeEventListener("resize",this.boundResizeHandler),this.removeScrollListener(),super.disconnectedCallback()}addDragListener(){let t=this.container,i=this.navLeft,e=this.navRight;this.isDown=!1;let s=0,l=0,o=!1;t.addEventListener("mousedown",h=>{this.isDown=!0,t.style.setProperty("scroll-snap-type","unset"),t.classList.add("mouse-active"),this.navigation!=="inline"&&this.navigation!=="none"&&(i.classList.add("hidden"),e.classList.add("hidden")),o=!1,s=h.pageX-t.offsetLeft,l=t.scrollLeft}),t.addEventListener("mouseleave",()=>{this.isDown&&(this.isDown=!1,o=!1,this.handleDragEnd())}),t.addEventListener("mouseup",()=>{this.isDown=!1,o&&(o=!1,this.handleDragEnd())}),t.addEventListener("mousemove",h=>{if(!this.isDown)return;h.preventDefault();let E=h.pageX-t.offsetLeft-s;this.container.scrollTo({left:l-E}),o=!0})}handleDragEnd(){let t=this.container,i=this.navLeft,e=this.navRight;this.navigation!=="inline"&&this.navigation!=="none"&&(i.classList.remove("hidden"),e.classList.remove("hidden"));let s=t.scrollLeft,l=t.scrollTop;t.style.removeProperty("scroll-snap-type");let o=t.scrollLeft,h=t.scrollTop;t.style.setProperty("scroll-snap-type","unset"),t.scrollTo({left:s,top:l,behavior:"auto"}),t.scrollTo({left:o,top:h,behavior:"smooth"}),t.classList.remove("mouse-active"),setTimeout(this.removeMouseActiveProperty.bind(this),300)}removeMouseActiveProperty(){this.container.style.removeProperty("scroll-snap-type")}addScrollListener(){this.container.addEventListener("scroll",this.boundSlideHandler,!1)}removeScrollListener(){this.container.removeEventListener("scroll",this.boundSlideHandler),clearTimeout(this.scrollEndTimer)}handleScroll(){clearTimeout(this.scrollEndTimer),this.scrollEndTimer=setTimeout(this.handleScrollEnd.bind(this),100)}handleScrollEnd(){let t=this.getSlides(),e=[...this.intersectionObserverEntries.values()].find(s=>s.isIntersecting);if(this.loop&&(e==null?void 0:e.target.hasAttribute("data-clone"))){let s=Number(e.target.getAttribute("data-clone"));this.goToSlide(s,"auto");return}e&&(this.activeSlide=t.indexOf(e.target)),this.setLabel()}setLabel(){let t=this.getSlides({excludeClones:!1}),i=this.loop?this.activeSlide+this.slidesShown+this.teaseOffset:this.activeSlide;t.forEach((e,s)=>{s===i+Math.floor(this.slidesShown/2)?e.classList.add("center"):e.classList.remove("center")})}getSlides({excludeClones:t=!0}={}){return this.slides?[...this.slides].filter(i=>!t||!i.hasAttribute("data-clone")):[]}previous(){(this.loop||this.activeSlide>0)&&this.goToSlide(this.activeSlide-1)}next(){this.slides&&(this.loop||this.activeSlide<this.slides.length-this.slidesShown)&&this.goToSlide(this.activeSlide+1)}goToSlide(t,i="smooth"){let e=this.getSlides(),s=this.getSlides({excludeClones:!1}),l=(t+e.length)%e.length;this.activeSlide=l;let o=Math.min(Math.max(t+(this.loop?this.slidesShown+this.teaseOffset:0),0),s.length),h=s[o];this.container.scrollTo({left:h.offsetLeft+this.scrollOffset,top:h.offsetTop,behavior:i})}setIconWidth(){this.iconSize==="large"?this.iconPx=70:this.iconSize==="small"?this.iconPx=20:this.iconPx=50}initializeSlides(){this.removeScrollListener(),this.setIconWidth(),this.navigation==="inline"&&(this.scrollOffset=-this.iconPx),this.slidesShown===0&&(this.loop=!1),this.tease!==""?this.teaseOffset=1:this.teaseOffset=0,this.autoplay>0&&(this.autoplayController.stop(),this.autoplay&&this.autoplayController.start(this.autoplay));let t=this.intersectionObserver;this.intersectionObserverEntries.clear();let i=this.getSlides({excludeClones:!1});if(t&&i.forEach(e=>{t.unobserve(e),e.hasAttribute("data-clone")&&e.remove()}),i=this.getSlides({excludeClones:!1}),this.loop){let e=i.slice(-this.slidesShown-this.teaseOffset),s=i.slice(0,this.slidesShown+this.teaseOffset);e.reverse().forEach((l,o)=>{let h=l.cloneNode(!0);h.setAttribute("data-clone",String(i.length-o-1)),this.prepend(h)}),s.forEach((l,o)=>{let h=l.cloneNode(!0);h.setAttribute("data-clone",String(o)),this.append(h)})}i=this.getSlides({excludeClones:!1}),t&&i.forEach(e=>{t.observe(e)}),this.goToSlide(this.activeSlide,"auto"),this.setLabel(),this.addScrollListener()}render(){let t=this.loop||this.activeSlide>0,i=this.slides&&(this.loop||this.activeSlide<this.slides.length-this.slidesShown),e=100/this.slidesShown*Math.floor(this.slidesShown/2)+"%";return b` ${this.navigation!=="none"?b`<scw-link
+}`;function p(f,a){return(t,i)=>{let{update:e}=t;a=Object.assign({waitUntilFirstUpdate:!1},a),t.update=function(s){if(s.has(f)){let l=s.get(f),o=this[f];l!==o&&a&&(!a.waitUntilFirstUpdate||this.hasUpdated)&&this[i].call(this,l,o)}e.call(this,s)}}}var b=class{constructor(a,t){this.timerId=0;this.interval=0;this.paused=!1;this.stopped=!0;a.addController(this),this.host=a,this.playCallback=t}hostConnected(){this.host.addEventListener("mouseenter",this.pause.bind(this)),this.host.addEventListener("mouseleave",this.play.bind(this)),this.host.addEventListener("focusin",this.pause.bind(this)),this.host.addEventListener("focusout",this.play.bind(this)),this.host.addEventListener("touchstart",this.pause.bind(this)),this.host.addEventListener("touchend",this.play.bind(this))}hostDisconnected(){this.stop(),this.host.removeEventListener("mouseenter",this.pause.bind(this)),this.host.removeEventListener("mouseleave",this.play.bind(this)),this.host.removeEventListener("focusin",this.pause.bind(this)),this.host.removeEventListener("focusout",this.play.bind(this)),this.host.removeEventListener("touchstart",this.pause.bind(this)),this.host.removeEventListener("touchend",this.play.bind(this))}start(a){this.stop(),this.interval=a,this.stopped=!1,this.timerId=window.setInterval(()=>{this.paused||this.playCallback()},a)}stop(){clearInterval(this.timerId),this.stopped=!0}pause(){this.paused=!0,this.host.requestUpdate()}play(){clearTimeout(this.autoplayTimer),this.autoplayTimer=setTimeout(()=>{this.paused=!1,this.host.requestUpdate()},this.interval)}};var r=class extends d{constructor(){super();this.loop=!1;this.slidesShown=1;this.activeSlide=0;this.center=!1;this.navigation="none";this.drag=!1;this.scrollable=!1;this.tease="";this.gap="0px";this.autoplay=0;this.iconSize="medium";this.teaseOffset=0;this.scrollOffset=0;this.iconPx=0;this.isDown=!1;this.nextEnabled=!1;this.prevEnabled=!1;this.slideOffset="0%";this.intersectionObserverEntries=new Map;this.autoplayController=new b(this,()=>this.next());if(this.element="slider",!U){this.slides=this.getElementsByTagName("scw-slider-item");let t=new IntersectionObserver(i=>{i.forEach(e=>{this.intersectionObserverEntries.set(e.target,e);let s=e.target;s.toggleAttribute("inert",!e.isIntersecting),s.classList.toggle("shown",e.isIntersecting),s.setAttribute("aria-hidden",e.isIntersecting?"false":"true")})},{root:this,threshold:.8});this.intersectionObserver=t,t.takeRecords().forEach(i=>{this.intersectionObserverEntries.set(i.target,i)})}this.slideOffset=100/this.slidesShown*Math.floor(this.slidesShown/2)+"%",this.setIconWidth(),this.boundSlideHandler=this.handleScroll.bind(this),this.boundResizeHandler=this.initializeSlides.bind(this)}static get styles(){return[super.styles,E]}async firstUpdated(){this.initializeSlides(),this.drag&&this.addDragListener()}connectedCallback(){window.addEventListener("resize",this.boundResizeHandler,!1),this.setIconWidth(),super.connectedCallback()}disconnectedCallback(){window.removeEventListener("resize",this.boundResizeHandler),this.removeScrollListener(),super.disconnectedCallback()}addDragListener(){let t=this.container,i=this.navLeft,e=this.navRight;this.isDown=!1;let s=0,l=0,o=!1;t.addEventListener("mousedown",h=>{this.isDown=!0,t.style.setProperty("scroll-snap-type","unset"),t.classList.add("mouse-active"),this.navigation!=="inline"&&this.navigation!=="none"&&(i.classList.add("hidden"),e.classList.add("hidden")),o=!1,s=h.pageX-t.offsetLeft,l=t.scrollLeft}),t.addEventListener("mouseleave",()=>{this.isDown&&(this.isDown=!1,o=!1,this.handleDragEnd())}),t.addEventListener("mouseup",()=>{this.isDown=!1,o&&(o=!1,this.handleDragEnd())}),t.addEventListener("mousemove",h=>{if(!this.isDown)return;h.preventDefault();let L=h.pageX-t.offsetLeft-s;this.container.scrollTo({left:l-L}),o=!0})}handleDragEnd(){let t=this.container,i=this.navLeft,e=this.navRight;this.navigation!=="inline"&&this.navigation!=="none"&&(i.classList.remove("hidden"),e.classList.remove("hidden"));let s=t.scrollLeft,l=t.scrollTop;t.style.removeProperty("scroll-snap-type");let o=t.scrollLeft,h=t.scrollTop;t.style.setProperty("scroll-snap-type","unset"),t.scrollTo({left:s,top:l,behavior:"auto"}),t.scrollTo({left:o,top:h,behavior:"smooth"}),t.classList.remove("mouse-active"),setTimeout(this.removeMouseActiveProperty.bind(this),300)}removeMouseActiveProperty(){this.container.style.removeProperty("scroll-snap-type")}addScrollListener(){this.container.addEventListener("scroll",this.boundSlideHandler,!1)}removeScrollListener(){this.container.removeEventListener("scroll",this.boundSlideHandler),clearTimeout(this.scrollEndTimer)}handleScroll(){clearTimeout(this.scrollEndTimer),this.scrollEndTimer=setTimeout(this.handleScrollEnd.bind(this),100)}handleScrollEnd(){let t=this.getSlides(),e=[...this.intersectionObserverEntries.values()].find(s=>s.isIntersecting);if(this.loop&&(e==null?void 0:e.target.hasAttribute("data-clone"))){let s=Number(e.target.getAttribute("data-clone"));this.goToSlide(s,"auto");return}e&&(this.activeSlide=t.indexOf(e.target)),this.setLabel()}setLabel(){let t=this.getSlides({excludeClones:!1}),i=this.loop?this.activeSlide+this.slidesShown+this.teaseOffset:this.activeSlide;t.forEach((e,s)=>{s===i+Math.floor(this.slidesShown/2)?e.classList.add("center"):e.classList.remove("center")})}getSlides({excludeClones:t=!0}={}){return this.slides?[...this.slides].filter(i=>!t||!i.hasAttribute("data-clone")):[]}previous(){this.prevEnabled&&this.goToSlide(this.activeSlide-1)}next(){this.nextEnabled&&this.goToSlide(this.activeSlide+1)}goToSlide(t,i="smooth"){let e=this.getSlides(),s=this.getSlides({excludeClones:!1}),l=(t+e.length)%e.length;this.activeSlide=l;let o=Math.min(Math.max(t+(this.loop?this.slidesShown+this.teaseOffset:0),0),s.length),h=s[o];this.container.scrollTo({left:h.offsetLeft+this.scrollOffset,top:h.offsetTop,behavior:i})}setIconWidth(){this.iconSize==="large"?this.iconPx=70:this.iconSize==="small"?this.iconPx=20:this.iconPx=50}handleTeasUpdate(){let t=this.tease===""?"0%":this.tease;this.container.style.setProperty("--tease",t),this.navLeft&&this.navRight&&(this.navLeft.style.setProperty("--tease",t),this.navRight.style.setProperty("--tease",t))}initializeSlides(){this.removeScrollListener(),this.setIconWidth(),this.navigation==="inline"&&(this.scrollOffset=-this.iconPx),this.slidesShown===0&&(this.loop=!1),this.tease!==""?this.teaseOffset=1:this.teaseOffset=0,this.autoplay>0&&(this.autoplayController.stop(),this.autoplay&&this.autoplayController.start(this.autoplay));let t=this.intersectionObserver;this.intersectionObserverEntries.clear();let i=this.getSlides({excludeClones:!1});if(t&&i.forEach(e=>{t.unobserve(e),e.hasAttribute("data-clone")&&e.remove()}),i=this.getSlides({excludeClones:!1}),this.loop){let e=i.slice(-this.slidesShown-this.teaseOffset),s=i.slice(0,this.slidesShown+this.teaseOffset);e.reverse().forEach((l,o)=>{let h=l.cloneNode(!0);h.setAttribute("data-clone",String(i.length-o-1)),this.prepend(h)}),s.forEach((l,o)=>{let h=l.cloneNode(!0);h.setAttribute("data-clone",String(o)),this.append(h)})}i=this.getSlides({excludeClones:!1}),t&&i.forEach(e=>{t.observe(e)}),this.goToSlide(this.activeSlide,"auto"),this.setLabel(),this.handleTeasUpdate(),this.nextEnabled=this.slides!==void 0&&(this.loop||this.activeSlide<this.slides.length-this.slidesShown),this.prevEnabled=this.loop||this.activeSlide>0,this.slideOffset=100/this.slidesShown*Math.floor(this.slidesShown/2)+"%",this.addScrollListener()}render(){return this.slideOffset=100/this.slidesShown*Math.floor(this.slidesShown/2)+"%",m` ${this.navigation!=="none"?m`<scw-link
             class="icon-left"
             design="plain"
             aria-label="left"
-            aria-disabled="${!t}"
-            style="--icon-offset: ${e};
+            aria-disabled="${!this.prevEnabled}"
+            style="--icon-offset: ${this.slideOffset};
             --tease: ${this.tease===""?"0%":this.tease};
             --icon-width:${this.iconPx};"
-            @click=${t?()=>this.previous():null}>
+            @click=${this.prevEnabled?()=>this.previous():null}>
             <scw-icon
               size="${this.iconPx}"
               icon="icon-chevron-left">
@@ -122,22 +122,22 @@ scw-link {
           </scw-link>`:""}
       <div
         style="--slides-shown: ${this.slidesShown};
-        --tease: ${this.tease===""?0:this.tease};
+        --tease: ${this.tease===""?"0%":this.tease};
         --slide-gap:${this.gap};"
         class="slider ${this.center?"center-slider":""}">
         <slot></slot>
       </div>
-      ${this.navigation!=="none"?b`<scw-link
+      ${this.navigation!=="none"?m`<scw-link
             class="icon-right"
             aria-label="right"
             design="plain"
-            aria-disabled="${!i}"
-            style="--icon-offset: ${e};
+            aria-disabled="${!this.nextEnabled}"
+            style="--icon-offset: ${this.slideOffset};
             --tease: ${this.tease===""?"0%":this.tease};
             --icon-width:${this.iconPx};"
-            @click=${i?()=>this.next():null}>
+            @click=${this.nextEnabled?()=>this.next():null}>
             <scw-icon
               size="${this.iconPx}"
               icon="icon-chevron-right">
             </scw-icon>
-          </scw-link>`:""}`}};n([c({type:Boolean,attribute:"loop",reflect:!0})],r.prototype,"loop",2),n([c({type:Number,attribute:"slides-shown",reflect:!1})],r.prototype,"slidesShown",2),n([c({type:Number,attribute:"active-slide",reflect:!0})],r.prototype,"activeSlide",2),n([c({type:Boolean,attribute:"snap",reflect:!0})],r.prototype,"center",2),n([c({type:String,attribute:"nav-style",reflect:!0})],r.prototype,"navigation",2),n([c({type:Boolean,attribute:"drag",reflect:!0})],r.prototype,"drag",2),n([c({type:Boolean,attribute:"scroll",reflect:!0})],r.prototype,"scrollable",2),n([c({type:String,attribute:"tease",reflect:!0})],r.prototype,"tease",2),n([c({type:String,attribute:"gap",reflect:!0})],r.prototype,"gap",2),n([c({type:Number,attribute:"autoplay",reflect:!1})],r.prototype,"autoplay",2),n([c({type:String,attribute:"icon-size",reflect:!1})],r.prototype,"iconSize",2),n([g(".slider")],r.prototype,"container",2),n([g(".icon-left")],r.prototype,"navLeft",2),n([g(".icon-right")],r.prototype,"navRight",2),n([v("loop",{waitUntilFirstUpdate:!0}),v("slidesShown",{waitUntilFirstUpdate:!0}),v("navigation",{waitUntilFirstUpdate:!0}),v("iconSize",{waitUntilFirstUpdate:!0})],r.prototype,"initializeSlides",1);export{r as default};
+          </scw-link>`:""}`}};n([c({type:Boolean,attribute:"loop",reflect:!0})],r.prototype,"loop",2),n([c({type:Number,attribute:"slides-shown",reflect:!1})],r.prototype,"slidesShown",2),n([c({type:Number,attribute:"active-slide",reflect:!0})],r.prototype,"activeSlide",2),n([c({type:Boolean,attribute:"snap",reflect:!0})],r.prototype,"center",2),n([c({type:String,attribute:"nav-style",reflect:!0})],r.prototype,"navigation",2),n([c({type:Boolean,attribute:"drag",reflect:!0})],r.prototype,"drag",2),n([c({type:Boolean,attribute:"scroll",reflect:!0})],r.prototype,"scrollable",2),n([c({type:String,attribute:"tease",reflect:!1})],r.prototype,"tease",2),n([c({type:String,attribute:"gap",reflect:!0})],r.prototype,"gap",2),n([c({type:Number,attribute:"autoplay",reflect:!1})],r.prototype,"autoplay",2),n([c({type:String,attribute:"icon-size",reflect:!1})],r.prototype,"iconSize",2),n([g(".slider")],r.prototype,"container",2),n([g(".icon-left")],r.prototype,"navLeft",2),n([g(".icon-right")],r.prototype,"navRight",2),n([p("tease",{waitUntilFirstUpdate:!0})],r.prototype,"handleTeasUpdate",1),n([p("loop",{waitUntilFirstUpdate:!0}),p("slidesShown",{waitUntilFirstUpdate:!0}),p("navigation",{waitUntilFirstUpdate:!0}),p("iconSize",{waitUntilFirstUpdate:!0})],r.prototype,"initializeSlides",1);export{r as default};

package/dist-node/scw-slider/scw-slider.js

@@ -1,4 +1,4 @@
-var E=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(f,a,t,i)=>{for(var e=i>1?void 0:i?x(a,t):a,s=f.length-1,l;s>=0;s--)(l=f[s])&&(e=(i?l(a,t,e):l(e))||e);return i&&e&&E(a,t,e),e};import{html as b,isServer as z}from"lit";import{property as c,query as g}from"lit/decorators.js";import{LitElement as k,html as T}from"lit";import{property as p,state as M}from"lit/decorators.js";import{css as O}from"lit-element/lit-element.js";var y=O`
+var w=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(f,a,t,i)=>{for(var e=i>1?void 0:i?x(a,t):a,s=f.length-1,l;s>=0;s--)(l=f[s])&&(e=(i?l(a,t,e):l(e))||e);return i&&e&&w(a,t,e),e};import{html as b,isServer as U}from"lit";import{property as c,query as g}from"lit/decorators.js";import{LitElement as T,html as k}from"lit";import{property as v,state as M}from"lit/decorators.js";import{css as O}from"lit-element/lit-element.js";var y=O`
 :host {
   /* scw element */
   position: relative;
@@ -14,9 +14,9 @@ var E=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(f,a,t,i
 
 :host([warning]) {
   outline: 2px solid red !important;
-}`;var u=class{constructor(a,t){this._element=a,this._callback=t,this.observe()}observe(){if(this.disconnect(),this._element){let a={characterData:!0,childList:!0,attributes:!1,subtree:!0};this._mutationObserver=new MutationObserver(()=>this._callback()),this._mutationObserver.observe(this._element,a)}}disconnect(){!this._mutationObserver||this._mutationObserver.disconnect()}};var d=class extends k{constructor(){super(...arguments);this.ariaLabel="";this.ariaDisabled="false";this.isLink=!1;this.dynamic=!1;this.element="component"}disconnectedCallback(){super.disconnectedCallback(),this._lightDomMutationObserver&&this._lightDomMutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.dynamic&&(this._lightDomMutationObserver=new u(this,()=>{this.domMutated()}))}domMutated(){}warn(t){this._lastWarning||(this._lastWarning=t,this.setAttribute("warning",t),this.setAttribute("title",`[ERROR]: ${t}`))}clearWarnings(){this._lastWarning=void 0,this.removeAttribute("warning"),this.removeAttribute("title")}render(){return T`
+}`;var u=class{constructor(a,t){this._element=a,this._callback=t,this.observe()}observe(){if(this.disconnect(),this._element){let a={characterData:!0,childList:!0,attributes:!1,subtree:!0};this._mutationObserver=new MutationObserver(()=>this._callback()),this._mutationObserver.observe(this._element,a)}}disconnect(){!this._mutationObserver||this._mutationObserver.disconnect()}};var d=class extends T{constructor(){super(...arguments);this.ariaLabel="";this.ariaDisabled="false";this.isLink=!1;this.dynamic=!1;this.element="component"}disconnectedCallback(){super.disconnectedCallback(),this._lightDomMutationObserver&&this._lightDomMutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.dynamic&&(this._lightDomMutationObserver=new u(this,()=>{this.domMutated()}))}domMutated(){}warn(t){this._lastWarning||(this._lastWarning=t,this.setAttribute("warning",t),this.setAttribute("title",`[ERROR]: ${t}`))}clearWarnings(){this._lastWarning=void 0,this.removeAttribute("warning"),this.removeAttribute("title")}render(){return k`
       <slot></slot>
-    `}};d.styles=y,n([p({type:String,reflect:!0,attribute:"aria-label"})],d.prototype,"ariaLabel",2),n([p({type:String,attribute:"aria-disabled"})],d.prototype,"ariaDisabled",2),n([p({type:Boolean,reflect:!0,attribute:"is-link"})],d.prototype,"isLink",2),n([p({type:Boolean})],d.prototype,"dynamic",2),n([p({type:String,reflect:!0})],d.prototype,"element",2),n([M()],d.prototype,"_lastWarning",2);import{css as I}from"lit-element/lit-element.js";var L=I`
+    `}};d.styles=y,n([v({type:String,reflect:!0,attribute:"aria-label"})],d.prototype,"ariaLabel",2),n([v({type:String,attribute:"aria-disabled"})],d.prototype,"ariaDisabled",2),n([v({type:Boolean,reflect:!0,attribute:"is-link"})],d.prototype,"isLink",2),n([v({type:Boolean})],d.prototype,"dynamic",2),n([v({type:String,reflect:!0})],d.prototype,"element",2),n([M()],d.prototype,"_lastWarning",2);import{css as I}from"lit-element/lit-element.js";var E=I`
 :host {
   display: flex;
   flex-direction: row;
@@ -86,7 +86,7 @@ var E=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(f,a,t,i
 
 scw-link {
   width: var(--icon-width);
-  z-index: 10;
+  z-index: 1;
 }
 
 :host([scroll]) .slider {
@@ -106,15 +106,15 @@ scw-link {
 
 :host([snap]) .slider {
   scroll-snap-type: x mandatory;
-}`;function v(f,a){return(t,i)=>{let{update:e}=t;a=Object.assign({waitUntilFirstUpdate:!1},a),t.update=function(s){if(s.has(f)){let l=s.get(f),o=this[f];l!==o&&a&&(!a.waitUntilFirstUpdate||this.hasUpdated)&&this[i].call(this,l,o)}e.call(this,s)}}}var m=class{constructor(a,t){this.timerId=0;this.interval=0;this.paused=!1;this.stopped=!0;a.addController(this),this.host=a,this.playCallback=t}hostConnected(){this.host.addEventListener("mouseenter",this.pause.bind(this)),this.host.addEventListener("mouseleave",this.play.bind(this)),this.host.addEventListener("focusin",this.pause.bind(this)),this.host.addEventListener("focusout",this.play.bind(this)),this.host.addEventListener("touchstart",this.pause.bind(this)),this.host.addEventListener("touchend",this.play.bind(this))}hostDisconnected(){this.stop(),this.host.removeEventListener("mouseenter",this.pause.bind(this)),this.host.removeEventListener("mouseleave",this.play.bind(this)),this.host.removeEventListener("focusin",this.pause.bind(this)),this.host.removeEventListener("focusout",this.play.bind(this)),this.host.removeEventListener("touchstart",this.pause.bind(this)),this.host.removeEventListener("touchend",this.play.bind(this))}start(a){this.stop(),this.interval=a,this.stopped=!1,this.timerId=window.setInterval(()=>{this.paused||this.playCallback()},a)}stop(){clearInterval(this.timerId),this.stopped=!0}pause(){this.paused=!0,this.host.requestUpdate()}play(){clearTimeout(this.autoplayTimer),this.autoplayTimer=setTimeout(()=>{this.paused=!1,this.host.requestUpdate()},this.interval)}};var r=class extends d{constructor(){super();this.loop=!1;this.slidesShown=1;this.activeSlide=0;this.center=!1;this.navigation="none";this.drag=!1;this.scrollable=!1;this.tease="";this.gap="0px";this.autoplay=0;this.iconSize="medium";this.teaseOffset=0;this.scrollOffset=0;this.iconPx=0;this.isDown=!1;this.intersectionObserverEntries=new Map;this.autoplayController=new m(this,()=>this.next());if(this.element="slider",!z){this.slides=this.getElementsByTagName("scw-slider-item");let t=new IntersectionObserver(i=>{i.forEach(e=>{this.intersectionObserverEntries.set(e.target,e);let s=e.target;s.toggleAttribute("inert",!e.isIntersecting),s.classList.toggle("shown",e.isIntersecting),s.setAttribute("aria-hidden",e.isIntersecting?"false":"true")})},{root:this,threshold:.8});this.intersectionObserver=t,t.takeRecords().forEach(i=>{this.intersectionObserverEntries.set(i.target,i)})}this.boundSlideHandler=this.handleScroll.bind(this),this.boundResizeHandler=this.initializeSlides.bind(this)}static get styles(){return[super.styles,L]}async firstUpdated(){this.initializeSlides(),this.drag&&this.addDragListener()}connectedCallback(){window.addEventListener("resize",this.boundResizeHandler,!1),this.setIconWidth(),super.connectedCallback()}disconnectedCallback(){window.removeEventListener("resize",this.boundResizeHandler),this.removeScrollListener(),super.disconnectedCallback()}addDragListener(){let t=this.container,i=this.navLeft,e=this.navRight;this.isDown=!1;let s=0,l=0,o=!1;t.addEventListener("mousedown",h=>{this.isDown=!0,t.style.setProperty("scroll-snap-type","unset"),t.classList.add("mouse-active"),this.navigation!=="inline"&&this.navigation!=="none"&&(i.classList.add("hidden"),e.classList.add("hidden")),o=!1,s=h.pageX-t.offsetLeft,l=t.scrollLeft}),t.addEventListener("mouseleave",()=>{this.isDown&&(this.isDown=!1,o=!1,this.handleDragEnd())}),t.addEventListener("mouseup",()=>{this.isDown=!1,o&&(o=!1,this.handleDragEnd())}),t.addEventListener("mousemove",h=>{if(!this.isDown)return;h.preventDefault();let w=h.pageX-t.offsetLeft-s;this.container.scrollTo({left:l-w}),o=!0})}handleDragEnd(){let t=this.container,i=this.navLeft,e=this.navRight;this.navigation!=="inline"&&this.navigation!=="none"&&(i.classList.remove("hidden"),e.classList.remove("hidden"));let s=t.scrollLeft,l=t.scrollTop;t.style.removeProperty("scroll-snap-type");let o=t.scrollLeft,h=t.scrollTop;t.style.setProperty("scroll-snap-type","unset"),t.scrollTo({left:s,top:l,behavior:"auto"}),t.scrollTo({left:o,top:h,behavior:"smooth"}),t.classList.remove("mouse-active"),setTimeout(this.removeMouseActiveProperty.bind(this),300)}removeMouseActiveProperty(){this.container.style.removeProperty("scroll-snap-type")}addScrollListener(){this.container.addEventListener("scroll",this.boundSlideHandler,!1)}removeScrollListener(){this.container.removeEventListener("scroll",this.boundSlideHandler),clearTimeout(this.scrollEndTimer)}handleScroll(){clearTimeout(this.scrollEndTimer),this.scrollEndTimer=setTimeout(this.handleScrollEnd.bind(this),100)}handleScrollEnd(){let t=this.getSlides(),e=[...this.intersectionObserverEntries.values()].find(s=>s.isIntersecting);if(this.loop&&(e==null?void 0:e.target.hasAttribute("data-clone"))){let s=Number(e.target.getAttribute("data-clone"));this.goToSlide(s,"auto");return}e&&(this.activeSlide=t.indexOf(e.target)),this.setLabel()}setLabel(){let t=this.getSlides({excludeClones:!1}),i=this.loop?this.activeSlide+this.slidesShown+this.teaseOffset:this.activeSlide;t.forEach((e,s)=>{s===i+Math.floor(this.slidesShown/2)?e.classList.add("center"):e.classList.remove("center")})}getSlides({excludeClones:t=!0}={}){return this.slides?[...this.slides].filter(i=>!t||!i.hasAttribute("data-clone")):[]}previous(){(this.loop||this.activeSlide>0)&&this.goToSlide(this.activeSlide-1)}next(){this.slides&&(this.loop||this.activeSlide<this.slides.length-this.slidesShown)&&this.goToSlide(this.activeSlide+1)}goToSlide(t,i="smooth"){let e=this.getSlides(),s=this.getSlides({excludeClones:!1}),l=(t+e.length)%e.length;this.activeSlide=l;let o=Math.min(Math.max(t+(this.loop?this.slidesShown+this.teaseOffset:0),0),s.length),h=s[o];this.container.scrollTo({left:h.offsetLeft+this.scrollOffset,top:h.offsetTop,behavior:i})}setIconWidth(){this.iconSize==="large"?this.iconPx=70:this.iconSize==="small"?this.iconPx=20:this.iconPx=50}initializeSlides(){this.removeScrollListener(),this.setIconWidth(),this.navigation==="inline"&&(this.scrollOffset=-this.iconPx),this.slidesShown===0&&(this.loop=!1),this.tease!==""?this.teaseOffset=1:this.teaseOffset=0,this.autoplay>0&&(this.autoplayController.stop(),this.autoplay&&this.autoplayController.start(this.autoplay));let t=this.intersectionObserver;this.intersectionObserverEntries.clear();let i=this.getSlides({excludeClones:!1});if(t&&i.forEach(e=>{t.unobserve(e),e.hasAttribute("data-clone")&&e.remove()}),i=this.getSlides({excludeClones:!1}),this.loop){let e=i.slice(-this.slidesShown-this.teaseOffset),s=i.slice(0,this.slidesShown+this.teaseOffset);e.reverse().forEach((l,o)=>{let h=l.cloneNode(!0);h.setAttribute("data-clone",String(i.length-o-1)),this.prepend(h)}),s.forEach((l,o)=>{let h=l.cloneNode(!0);h.setAttribute("data-clone",String(o)),this.append(h)})}i=this.getSlides({excludeClones:!1}),t&&i.forEach(e=>{t.observe(e)}),this.goToSlide(this.activeSlide,"auto"),this.setLabel(),this.addScrollListener()}render(){let t=this.loop||this.activeSlide>0,i=this.slides&&(this.loop||this.activeSlide<this.slides.length-this.slidesShown),e=100/this.slidesShown*Math.floor(this.slidesShown/2)+"%";return b` ${this.navigation!=="none"?b`<scw-link
+}`;function p(f,a){return(t,i)=>{let{update:e}=t;a=Object.assign({waitUntilFirstUpdate:!1},a),t.update=function(s){if(s.has(f)){let l=s.get(f),o=this[f];l!==o&&a&&(!a.waitUntilFirstUpdate||this.hasUpdated)&&this[i].call(this,l,o)}e.call(this,s)}}}var m=class{constructor(a,t){this.timerId=0;this.interval=0;this.paused=!1;this.stopped=!0;a.addController(this),this.host=a,this.playCallback=t}hostConnected(){this.host.addEventListener("mouseenter",this.pause.bind(this)),this.host.addEventListener("mouseleave",this.play.bind(this)),this.host.addEventListener("focusin",this.pause.bind(this)),this.host.addEventListener("focusout",this.play.bind(this)),this.host.addEventListener("touchstart",this.pause.bind(this)),this.host.addEventListener("touchend",this.play.bind(this))}hostDisconnected(){this.stop(),this.host.removeEventListener("mouseenter",this.pause.bind(this)),this.host.removeEventListener("mouseleave",this.play.bind(this)),this.host.removeEventListener("focusin",this.pause.bind(this)),this.host.removeEventListener("focusout",this.play.bind(this)),this.host.removeEventListener("touchstart",this.pause.bind(this)),this.host.removeEventListener("touchend",this.play.bind(this))}start(a){this.stop(),this.interval=a,this.stopped=!1,this.timerId=window.setInterval(()=>{this.paused||this.playCallback()},a)}stop(){clearInterval(this.timerId),this.stopped=!0}pause(){this.paused=!0,this.host.requestUpdate()}play(){clearTimeout(this.autoplayTimer),this.autoplayTimer=setTimeout(()=>{this.paused=!1,this.host.requestUpdate()},this.interval)}};var r=class extends d{constructor(){super();this.loop=!1;this.slidesShown=1;this.activeSlide=0;this.center=!1;this.navigation="none";this.drag=!1;this.scrollable=!1;this.tease="";this.gap="0px";this.autoplay=0;this.iconSize="medium";this.teaseOffset=0;this.scrollOffset=0;this.iconPx=0;this.isDown=!1;this.nextEnabled=!1;this.prevEnabled=!1;this.slideOffset="0%";this.intersectionObserverEntries=new Map;this.autoplayController=new m(this,()=>this.next());if(this.element="slider",!U){this.slides=this.getElementsByTagName("scw-slider-item");let t=new IntersectionObserver(i=>{i.forEach(e=>{this.intersectionObserverEntries.set(e.target,e);let s=e.target;s.toggleAttribute("inert",!e.isIntersecting),s.classList.toggle("shown",e.isIntersecting),s.setAttribute("aria-hidden",e.isIntersecting?"false":"true")})},{root:this,threshold:.8});this.intersectionObserver=t,t.takeRecords().forEach(i=>{this.intersectionObserverEntries.set(i.target,i)})}this.slideOffset=100/this.slidesShown*Math.floor(this.slidesShown/2)+"%",this.setIconWidth(),this.boundSlideHandler=this.handleScroll.bind(this),this.boundResizeHandler=this.initializeSlides.bind(this)}static get styles(){return[super.styles,E]}async firstUpdated(){this.initializeSlides(),this.drag&&this.addDragListener()}connectedCallback(){window.addEventListener("resize",this.boundResizeHandler,!1),this.setIconWidth(),super.connectedCallback()}disconnectedCallback(){window.removeEventListener("resize",this.boundResizeHandler),this.removeScrollListener(),super.disconnectedCallback()}addDragListener(){let t=this.container,i=this.navLeft,e=this.navRight;this.isDown=!1;let s=0,l=0,o=!1;t.addEventListener("mousedown",h=>{this.isDown=!0,t.style.setProperty("scroll-snap-type","unset"),t.classList.add("mouse-active"),this.navigation!=="inline"&&this.navigation!=="none"&&(i.classList.add("hidden"),e.classList.add("hidden")),o=!1,s=h.pageX-t.offsetLeft,l=t.scrollLeft}),t.addEventListener("mouseleave",()=>{this.isDown&&(this.isDown=!1,o=!1,this.handleDragEnd())}),t.addEventListener("mouseup",()=>{this.isDown=!1,o&&(o=!1,this.handleDragEnd())}),t.addEventListener("mousemove",h=>{if(!this.isDown)return;h.preventDefault();let L=h.pageX-t.offsetLeft-s;this.container.scrollTo({left:l-L}),o=!0})}handleDragEnd(){let t=this.container,i=this.navLeft,e=this.navRight;this.navigation!=="inline"&&this.navigation!=="none"&&(i.classList.remove("hidden"),e.classList.remove("hidden"));let s=t.scrollLeft,l=t.scrollTop;t.style.removeProperty("scroll-snap-type");let o=t.scrollLeft,h=t.scrollTop;t.style.setProperty("scroll-snap-type","unset"),t.scrollTo({left:s,top:l,behavior:"auto"}),t.scrollTo({left:o,top:h,behavior:"smooth"}),t.classList.remove("mouse-active"),setTimeout(this.removeMouseActiveProperty.bind(this),300)}removeMouseActiveProperty(){this.container.style.removeProperty("scroll-snap-type")}addScrollListener(){this.container.addEventListener("scroll",this.boundSlideHandler,!1)}removeScrollListener(){this.container.removeEventListener("scroll",this.boundSlideHandler),clearTimeout(this.scrollEndTimer)}handleScroll(){clearTimeout(this.scrollEndTimer),this.scrollEndTimer=setTimeout(this.handleScrollEnd.bind(this),100)}handleScrollEnd(){let t=this.getSlides(),e=[...this.intersectionObserverEntries.values()].find(s=>s.isIntersecting);if(this.loop&&(e==null?void 0:e.target.hasAttribute("data-clone"))){let s=Number(e.target.getAttribute("data-clone"));this.goToSlide(s,"auto");return}e&&(this.activeSlide=t.indexOf(e.target)),this.setLabel()}setLabel(){let t=this.getSlides({excludeClones:!1}),i=this.loop?this.activeSlide+this.slidesShown+this.teaseOffset:this.activeSlide;t.forEach((e,s)=>{s===i+Math.floor(this.slidesShown/2)?e.classList.add("center"):e.classList.remove("center")})}getSlides({excludeClones:t=!0}={}){return this.slides?[...this.slides].filter(i=>!t||!i.hasAttribute("data-clone")):[]}previous(){this.prevEnabled&&this.goToSlide(this.activeSlide-1)}next(){this.nextEnabled&&this.goToSlide(this.activeSlide+1)}goToSlide(t,i="smooth"){let e=this.getSlides(),s=this.getSlides({excludeClones:!1}),l=(t+e.length)%e.length;this.activeSlide=l;let o=Math.min(Math.max(t+(this.loop?this.slidesShown+this.teaseOffset:0),0),s.length),h=s[o];this.container.scrollTo({left:h.offsetLeft+this.scrollOffset,top:h.offsetTop,behavior:i})}setIconWidth(){this.iconSize==="large"?this.iconPx=70:this.iconSize==="small"?this.iconPx=20:this.iconPx=50}handleTeasUpdate(){let t=this.tease===""?"0%":this.tease;this.container.style.setProperty("--tease",t),this.navLeft&&this.navRight&&(this.navLeft.style.setProperty("--tease",t),this.navRight.style.setProperty("--tease",t))}initializeSlides(){this.removeScrollListener(),this.setIconWidth(),this.navigation==="inline"&&(this.scrollOffset=-this.iconPx),this.slidesShown===0&&(this.loop=!1),this.tease!==""?this.teaseOffset=1:this.teaseOffset=0,this.autoplay>0&&(this.autoplayController.stop(),this.autoplay&&this.autoplayController.start(this.autoplay));let t=this.intersectionObserver;this.intersectionObserverEntries.clear();let i=this.getSlides({excludeClones:!1});if(t&&i.forEach(e=>{t.unobserve(e),e.hasAttribute("data-clone")&&e.remove()}),i=this.getSlides({excludeClones:!1}),this.loop){let e=i.slice(-this.slidesShown-this.teaseOffset),s=i.slice(0,this.slidesShown+this.teaseOffset);e.reverse().forEach((l,o)=>{let h=l.cloneNode(!0);h.setAttribute("data-clone",String(i.length-o-1)),this.prepend(h)}),s.forEach((l,o)=>{let h=l.cloneNode(!0);h.setAttribute("data-clone",String(o)),this.append(h)})}i=this.getSlides({excludeClones:!1}),t&&i.forEach(e=>{t.observe(e)}),this.goToSlide(this.activeSlide,"auto"),this.setLabel(),this.handleTeasUpdate(),this.nextEnabled=this.slides!==void 0&&(this.loop||this.activeSlide<this.slides.length-this.slidesShown),this.prevEnabled=this.loop||this.activeSlide>0,this.slideOffset=100/this.slidesShown*Math.floor(this.slidesShown/2)+"%",this.addScrollListener()}render(){return this.slideOffset=100/this.slidesShown*Math.floor(this.slidesShown/2)+"%",b` ${this.navigation!=="none"?b`<scw-link
             class="icon-left"
             design="plain"
             aria-label="left"
-            aria-disabled="${!t}"
-            style="--icon-offset: ${e};
+            aria-disabled="${!this.prevEnabled}"
+            style="--icon-offset: ${this.slideOffset};
             --tease: ${this.tease===""?"0%":this.tease};
             --icon-width:${this.iconPx};"
-            @click=${t?()=>this.previous():null}>
+            @click=${this.prevEnabled?()=>this.previous():null}>
             <scw-icon
               size="${this.iconPx}"
               icon="icon-chevron-left">
@@ -122,7 +122,7 @@ scw-link {
           </scw-link>`:""}
       <div
         style="--slides-shown: ${this.slidesShown};
-        --tease: ${this.tease===""?0:this.tease};
+        --tease: ${this.tease===""?"0%":this.tease};
         --slide-gap:${this.gap};"
         class="slider ${this.center?"center-slider":""}">
         <slot></slot>
@@ -131,13 +131,13 @@ scw-link {
             class="icon-right"
             aria-label="right"
             design="plain"
-            aria-disabled="${!i}"
-            style="--icon-offset: ${e};
+            aria-disabled="${!this.nextEnabled}"
+            style="--icon-offset: ${this.slideOffset};
             --tease: ${this.tease===""?"0%":this.tease};
             --icon-width:${this.iconPx};"
-            @click=${i?()=>this.next():null}>
+            @click=${this.nextEnabled?()=>this.next():null}>
             <scw-icon
               size="${this.iconPx}"
               icon="icon-chevron-right">
             </scw-icon>
-          </scw-link>`:""}`}};n([c({type:Boolean,attribute:"loop",reflect:!0})],r.prototype,"loop",2),n([c({type:Number,attribute:"slides-shown",reflect:!1})],r.prototype,"slidesShown",2),n([c({type:Number,attribute:"active-slide",reflect:!0})],r.prototype,"activeSlide",2),n([c({type:Boolean,attribute:"snap",reflect:!0})],r.prototype,"center",2),n([c({type:String,attribute:"nav-style",reflect:!0})],r.prototype,"navigation",2),n([c({type:Boolean,attribute:"drag",reflect:!0})],r.prototype,"drag",2),n([c({type:Boolean,attribute:"scroll",reflect:!0})],r.prototype,"scrollable",2),n([c({type:String,attribute:"tease",reflect:!0})],r.prototype,"tease",2),n([c({type:String,attribute:"gap",reflect:!0})],r.prototype,"gap",2),n([c({type:Number,attribute:"autoplay",reflect:!1})],r.prototype,"autoplay",2),n([c({type:String,attribute:"icon-size",reflect:!1})],r.prototype,"iconSize",2),n([g(".slider")],r.prototype,"container",2),n([g(".icon-left")],r.prototype,"navLeft",2),n([g(".icon-right")],r.prototype,"navRight",2),n([v("loop",{waitUntilFirstUpdate:!0}),v("slidesShown",{waitUntilFirstUpdate:!0}),v("navigation",{waitUntilFirstUpdate:!0}),v("iconSize",{waitUntilFirstUpdate:!0})],r.prototype,"initializeSlides",1);customElements.define("scw-slider",r);
+          </scw-link>`:""}`}};n([c({type:Boolean,attribute:"loop",reflect:!0})],r.prototype,"loop",2),n([c({type:Number,attribute:"slides-shown",reflect:!1})],r.prototype,"slidesShown",2),n([c({type:Number,attribute:"active-slide",reflect:!0})],r.prototype,"activeSlide",2),n([c({type:Boolean,attribute:"snap",reflect:!0})],r.prototype,"center",2),n([c({type:String,attribute:"nav-style",reflect:!0})],r.prototype,"navigation",2),n([c({type:Boolean,attribute:"drag",reflect:!0})],r.prototype,"drag",2),n([c({type:Boolean,attribute:"scroll",reflect:!0})],r.prototype,"scrollable",2),n([c({type:String,attribute:"tease",reflect:!1})],r.prototype,"tease",2),n([c({type:String,attribute:"gap",reflect:!0})],r.prototype,"gap",2),n([c({type:Number,attribute:"autoplay",reflect:!1})],r.prototype,"autoplay",2),n([c({type:String,attribute:"icon-size",reflect:!1})],r.prototype,"iconSize",2),n([g(".slider")],r.prototype,"container",2),n([g(".icon-left")],r.prototype,"navLeft",2),n([g(".icon-right")],r.prototype,"navRight",2),n([p("tease",{waitUntilFirstUpdate:!0})],r.prototype,"handleTeasUpdate",1),n([p("loop",{waitUntilFirstUpdate:!0}),p("slidesShown",{waitUntilFirstUpdate:!0}),p("navigation",{waitUntilFirstUpdate:!0}),p("iconSize",{waitUntilFirstUpdate:!0})],r.prototype,"initializeSlides",1);customElements.define("scw-slider",r);