scu-web-components 0.0.75 → 0.0.76

package/dist/chunks/chunk.CNHRIY7W.js

@@ -1,211 +0,0 @@
-import{b as i}from"./chunk.K5LAHA72.js";import{a as o,b as n,e as s}from"./chunk.Z3Y57KL7.js";import{f as r}from"./chunk.PE5ZEEQ2.js";var l=o`
-.card {
-  height: 100%;
-}
-
-.image {
-  background-color: rgba(0, 0, 0, 0);
-  border-radius: 8px 8px 8px 8px;
-  align-self: stretch;
-  display: block;
-  width: 100%;
-  overflow: hidden;
-}
-
-.content {
-  background-color: rgba(0, 0, 0, 0);
-  align-self: stretch;
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: var(--scw-spacing-2);
-  padding-bottom: var(--scw-spacing-2);
-  height: 100%;
-}
-.content > *:not(:last-child) {
-  margin-bottom: var(--scw-spacing-1);
-  --margin-bottom: var( --scw-spacing-1 );
-}
-.content .super-heading {
-  text-align: LEFT;
-  font: var(--scw-type-text-font);
-  color: var(--scw-color-grey-02);
-  align-self: stretch;
-}
-.content .heading {
-  text-align: LEFT;
-  font: var(--scw-type-text-bold-07-font);
-  color: var(--scw-color-grey-02);
-  align-self: stretch;
-}
-.content .date {
-  text-align: LEFT;
-  font: 400 1rem/1.5rem "Proxima Nova";
-  color: var(--scw-color-grey-02);
-  align-self: stretch;
-}
-.content .tags {
-  text-align: LEFT;
-  font: 400 1rem/1.5rem "Proxima Nova";
-  color: var(--scw-color-primary-04);
-  align-self: stretch;
-  display: block;
-}
-.content .tags a {
-  color: inherit;
-  text-decoration: none;
-}
-.content .body {
-  text-align: LEFT;
-  font: var(--scw-type-text-font);
-  color: var(--scw-color-grey-02);
-  align-self: stretch;
-  flex: 1;
-  display: block;
-}
-.content .links {
-  background-color: rgba(0, 0, 0, 0);
-  align-self: stretch;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-.content .links > *:not(:last-child) {
-  margin-right: calc(var(--scw-spacing-1) * 0.8);
-  --margin-right: calc( var( --scw-spacing-1 ) * 0.8 );
-}
-
-.border {
-  background-color: var(--scw-color-grey-10);
-  border-radius: 8px 8px 8px 8px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--scw-color-grey-092);
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  overflow: hidden;
-}
-.border > *:not(:last-child) {
-  margin-bottom: 0px;
-  --margin-bottom: 0px;
-}
-.border .content {
-  background-color: rgba(0, 0, 0, 0);
-  align-self: stretch;
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding-left: var(--scw-spacing-2);
-  padding-right: var(--scw-spacing-2);
-  padding-top: var(--scw-spacing-2);
-  padding-bottom: var(--scw-spacing-2);
-}
-.border .content > *:not(:last-child) {
-  margin-bottom: var(--scw-spacing-1);
-  --margin-bottom: var( --scw-spacing-1 );
-}
-
-.horizontal {
-  background-color: rgba(0, 0, 0, 0);
-  border-radius: 8px 8px 8px 8px;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-.horizontal > *:not(:last-child) {
-  margin-right: 0px;
-  --margin-right: 0px;
-}
-.horizontal .image {
-  background-color: rgba(0, 0, 0, 0);
-  border-radius: 8px 8px 8px 8px;
-  display: inline-block;
-  width: auto;
-  align-self: initial;
-}
-.horizontal .content {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding-left: var(--scw-spacing-2);
-  padding-right: 0px;
-  padding-top: var(--scw-spacing-2);
-  padding-bottom: var(--scw-spacing-2);
-  background-color: rgba(0, 0, 0, 0);
-  flex: 1;
-  padding-right: var(--scw-spacing-2);
-}
-.horizontal .content > *:not(:last-child) {
-  margin-bottom: var(--scw-spacing-1);
-  --margin-bottom: var( --scw-spacing-1 );
-}
-.horizontal .border .content {
-  background-color: rgba(0, 0, 0, 0);
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding-left: var(--scw-spacing-2);
-  padding-right: var(--scw-spacing-2);
-  padding-top: var(--scw-spacing-2);
-  padding-bottom: var(--scw-spacing-2);
-}
-.horizontal .border .content > *:not(:last-child) {
-  margin-bottom: var(--scw-spacing-1);
-  --margin-bottom: var( --scw-spacing-1 );
-}
-
-.border .image {
-  border-radius: 0;
-}`;var t=class extends s{constructor(){super();this.align="vertical";this.tags=[];this.element="card"}static get styles(){return[super.styles,l]}renderLink(e,a,d="solid"){return e&&a?i`
-        <scw-link
-          href="${a}"
-          aria-label="${e}"
-          design="${d}">
-        </scw-link>
-      `:i``}renderTags(){return i` ${this.tags.length!==0?i`<div class="tags">
-          ${this.tags.map((e,a)=>i` ${this.tagUrl&&this.tagUrl[a]?i`
-                    <a href="${this.tagUrl[a]}"
-                      >${e}${a+1<this.tagUrl.length?", ":""}
-                    </a>
-                  `:""}`)}
-        </div>`:""}`}render(){return i` <div class="card ${this.border?"border":""} ${this.align}">
-      <slot
-        class="image"
-        name="image"></slot>
-      <div class="content">
-        ${this.superHeading?i` <div class="super-heading">${this.superHeading}</div>`:""}
-        ${this.heading?i` <div class="heading">${this.heading}</div>`:""}
-        ${this.date?i` <div class="date">${this.date}</div>`:""}
-        ${this.renderTags()}
-        <slot class="body"></slot>
-        ${this.primaryLink||this.secondaryLink?i` <div class="links">
-              ${this.renderLink(this.primaryLabel,this.primaryLink)}
-              ${this.renderLink(this.secondaryLabel,this.secondaryLink,"outlined")}
-            </div>`:""}
-      </div>
-    </div>`}};r([n()],t.prototype,"heading",2),r([n()],t.prototype,"date",2),r([n({type:Boolean,attribute:"show-border"})],t.prototype,"border",2),r([n({type:String,attribute:"align"})],t.prototype,"align",2),r([n({type:String,attribute:"super-heading"})],t.prototype,"superHeading",2),r([n({type:String,attribute:"primary-cta-link"})],t.prototype,"primaryLink",2),r([n({type:String,attribute:"primary-cta-label"})],t.prototype,"primaryLabel",2),r([n({type:String,attribute:"secondary-cta-link"})],t.prototype,"secondaryLink",2),r([n({type:String,attribute:"secondary-cta-label"})],t.prototype,"secondaryLabel",2),r([n({type:Array,attribute:"tag-name"})],t.prototype,"tags",2),r([n({type:Array,attribute:"tag-url"})],t.prototype,"tagUrl",2);export{t as a};

package/dist/chunks/chunk.CZ5UYOQC.js

@@ -1,83 +0,0 @@
-import{a as p,d as u}from"./chunk.AYSS3H27.js";import{a as d,b as s}from"./chunk.K5LAHA72.js";import{a as f}from"./chunk.UXNK7KZZ.js";import{a as o}from"./chunk.WKH73SBC.js";import{a as n,b as l,c}from"./chunk.Z3Y57KL7.js";import{f as i}from"./chunk.PE5ZEEQ2.js";var h=n`
-:host {
-  display: block;
-}
-
-.input-field {
-  width: 100%;
-  position: relative;
-}
-.input-field .placeholder {
-  text-align: LEFT;
-  font: var(--scw-type-text-04-font);
-  color: var(--scw-color-grey);
-  flex: 1;
-  padding: var(--scw-input-padding, calc(var(--scw-spacing-1) * 0.9) calc(var(--scw-spacing-1) * 1.5) calc(var(--scw-spacing-1) * 0.9) calc(var(--scw-spacing-1) * 1.5));
-  z-index: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.input-field .placeholder[scw-hide] {
-  display: none;
-}
-.input-field select {
-  text-align: LEFT;
-  font: var(--scw-type-text-04-font);
-  color: var(--scw-color-grey-02);
-  flex: 1;
-  padding: var(--scw-input-padding, calc(var(--scw-spacing-1) * 0.9) calc(var(--scw-spacing-1) * 1.5) calc(var(--scw-spacing-1) * 0.9) calc(var(--scw-spacing-1) * 1.5));
-  width: calc( 100% - calc(var(--scw-spacing-1) * 1.5) );
-  min-height: var(--scw-min-height, 32px);
-  box-sizing: border-box;
-  border: 0;
-  background-color: rgba(0, 0, 0, 0);
-  z-index: 2;
-  position: relative;
-}
-.input-field select:focus {
-  outline: none;
-}
-
-:host([aria-disabled=true]) textarea {
-  text-align: LEFT;
-  font: var(--scw-type-text-04-font);
-  color: var(--scw-color-grey-07);
-  flex: 1;
-}`;var e=class extends u{constructor(){super();this._options=[];this.type="text";this.element="input";let t=p();this.scwInputLayout=d(`scw-${"input-layout"}${t}`),this.processOptions()}static get styles(){return[super.styles,h]}connectedCallback(){super.connectedCallback()}domMutated(){super.domMutated(),this.processOptions()}processOptions(){let t=this.querySelectorAll(":scope > option"),v=Array.from(t).map(a=>{let r=a.value;return s`
-          <option
-            value=${r}
-            ?selected=${r===this.value}>
-            ${a.textContent}
-          </option>`});this._options=[s`
-      <option
-        value=""
-        ?selected=${this.value===""}>
-      </option>`,...v]}_focusHandler(){this.focused=!0}_blurHandler(){this.focused=!1,this.validate()}_valueChangeHandler(t){t.target&&(this.value=t.target.value,o("scw-value-change",this))}checkForSubmit(t){t.key==="Enter"&&o("scw-submit-intent",this)}render(){return s`
-      <${this.scwInputLayout}
-        .label=${this.ariaLabel}
-        .feedback=${this.feedback}
-        aria-disabled=${this.ariaDisabled==="true"?"true":"false"}
-        ?focused=${this.focused}
-        ?invalid=${this.invalid}>
-        <div 
-          class="input-field">
-          <select
-            ?readonly=${this.readOnly}
-            @keyup=${this.checkForSubmit}
-            @focus=${this._focusHandler}
-            @blur=${this._blurHandler}
-            @change=${this._valueChangeHandler}>
-            ${this._options}
-          </select>
-          <div 
-            class="placeholder"
-            ?scw-hide=${!!this.value}>
-            ${this.placeholder}
-          </div>
-        </div>
-      </${this.scwInputLayout}>
-      <slot name="validation"></slot>
-    `}};i([c()],e.prototype,"_options",2),i([l({type:f})],e.prototype,"type",2);export{e as a};

package/dist/chunks/chunk.DGDMEIOX.js

@@ -1,148 +0,0 @@
-import{a as e,b as i,e as s}from"./chunk.Z3Y57KL7.js";import{a as o}from"./chunk.G2G2TPJK.js";import{f as t}from"./chunk.PE5ZEEQ2.js";var a=e`
-:host {
-  background-color: rgba(0, 0, 0, 0);
-  align-self: stretch;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-:host > *:not(:last-child) {
-  margin-bottom: calc(var(--scw-spacing-1) * 0.6);
-  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
-}
-:host .input-label {
-  background-color: rgba(0, 0, 0, 0);
-  align-self: stretch;
-  text-align: LEFT;
-  font: var(--scw-type-text-font);
-  color: var(--scw-color-grey-02);
-}
-:host .input-field {
-  background-color: rgba(0, 0, 0, 0);
-  border-radius: 6px 6px 6px 6px;
-  align-self: stretch;
-  flex: 1;
-}
-:host .input-feedback {
-  background-color: rgba(0, 0, 0, 0);
-  align-self: stretch;
-  text-align: LEFT;
-  font: var(--scw-type-text-04-font);
-  color: var(--scw-color-error);
-}
-
-:host .input-field {
-  background-color: rgba(0, 0, 0, 0);
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  padding-left: 0px;
-  padding-right: var(--scw-spacing-1);
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-:host .input-field > *:not(:last-child) {
-  margin-right: 0px;
-  --margin-right: 0px;
-}
-:host .input-field .input-text {
-  background-color: rgba(0, 0, 0, 0);
-  align-self: stretch;
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding-left: calc(var(--scw-spacing-1) * 1.5);
-  padding-right: calc(var(--scw-spacing-1) * 1.5);
-  padding-top: calc(var(--scw-spacing-1) * 0.9);
-  padding-bottom: calc(var(--scw-spacing-1) * 0.9);
-  padding: 0;
-}
-:host .input-field .input-text > *:not(:last-child) {
-  margin-bottom: var(--scw-spacing-1);
-  --margin-bottom: var( --scw-spacing-1 );
-}
-:host .input-field .right-icon-2 {
-  background-color: rgba(0, 0, 0, 0);
-}
-:host .input-field .right-icon {
-  background-color: rgba(0, 0, 0, 0);
-}
-
-:host .input-field {
-  background-color: var(--scw-color-grey-10);
-  border-radius: 6px 6px 6px 6px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--scw-color-grey-09);
-  align-self: stretch;
-}
-
-:host([aria-disabled=true]) .input-field {
-  background-color: var(--scw-color-grey-092);
-  border-radius: 6px 6px 6px 6px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--scw-color-grey-09);
-  align-self: stretch;
-}
-
-:host([invalid]) .input-field {
-  background-color: var(--scw-color-grey-095);
-  border-radius: 6px 6px 6px 6px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--scw-color-error);
-  align-self: stretch;
-}
-
-:host([focused]) .input-field {
-  background-color: var(--scw-color-grey-095);
-  border-radius: 6px 6px 6px 6px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--scw-color-grey-08);
-  box-shadow: var(--scw-effect-focus-shadow);
-  align-self: stretch;
-}
-
-::slotted(*) {
-  width: 100%;
-}`;var r=class extends s{constructor(){super();this.hideLabel=!1;this.hideFeedback=!1;this.element="input-layout"}static get styles(){return[super.styles,a]}render(){return o`
-      ${this.hideLabel?"":o`
-            <div class="input-label">
-              ${this.label}
-            </div>`}
-      <div class="input-field">
-        <div class="input-text">
-          <slot></slot>
-        </div>
-        ${this.right2Icon?o`
-            <scw-icon
-              class="right-icon-2"
-              .icon="${this.right2Icon}"
-              size="32"
-              aria-label="Clear Input"
-              link>
-            </scw-icon>`:""}
-        ${this.rightIcon?o`
-            <scw-icon
-              class="right-icon"
-              .icon="${this.rightIcon}"
-              size="32"
-              aria-label="Show Password"
-              link>
-            </scw-icon>`:""}
-      </div>
-      ${this.hideFeedback?"":o`
-            <div class="input-feedback">
-              ${this.feedback}&nbsp;
-            </div>`}
-    `}};t([i({type:String})],r.prototype,"label",2),t([i({type:String})],r.prototype,"feedback",2),t([i({type:String,attribute:"hide-label"})],r.prototype,"hideLabel",2),t([i({type:String,attribute:"hide-feedback"})],r.prototype,"hideFeedback",2),t([i({type:String,attribute:"right-icon"})],r.prototype,"rightIcon",2),t([i({type:String,attribute:"right-2-icon"})],r.prototype,"right2Icon",2);export{r as a};

package/dist/chunks/chunk.EPY7GU3Z.js

@@ -1,125 +0,0 @@
-import{a as c}from"./chunk.QHUZYUAT.js";import{a as u,b as r,d as f,e as m}from"./chunk.Z3Y57KL7.js";import{a as p}from"./chunk.G2G2TPJK.js";import{f as o}from"./chunk.PE5ZEEQ2.js";var b=u`
-:host {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-}
-
-.hidden {
-  display: none;
-}
-
-.slider {
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-  min-height: 100%;
-  position: relative;
-  gap: 0;
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none;
-  scroll-padding-inline: var(--tease);
-  padding-inline: var(--tease);
-  width: 100%;
-}
-
-.slider::-webkit-scrollbar {
-  display: none;
-}
-
-.icon-right {
-  right: 0;
-}
-
-::slotted(*) {
-  scroll-snap-align: start;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  display: inline-flex;
-  border: 0;
-  width: auto;
-}
-
-:host([nav-style=inline]) scw-link {
-  position: relative;
-}
-:host([nav-style=inline]) .slider {
-  flex-shrink: 1;
-}
-
-:host([nav-style=absolute]) scw-link {
-  position: absolute;
-  top: 50%;
-  transform: translate(0, -50%);
-}
-
-:host([nav-style=framed]) scw-link {
-  position: absolute;
-  top: 50%;
-  transform: translate(0, -50%);
-}
-:host([nav-style=framed]) .icon-right {
-  right: calc(var(--icon-offset) + (var(--tease)) - var(--icon-width) * 1px / 2);
-}
-:host([nav-style=framed]) .icon-left {
-  left: calc(var(--icon-offset) + (var(--tease)) - var(--icon-width) * 1px / 2);
-}
-
-scw-link {
-  width: var(--icon-width);
-  z-index: 1;
-}
-
-:host([scroll]) .slider {
-  overflow: auto;
-}
-
-:host([slides-shown]) .slider {
-  --slide-size: calc(
-    (100% - (var(--slides-shown) - 1) * var(--slide-gap)) /
-      var(--slides-shown)
-  );
-  gap: var(--slide-gap);
-}
-:host([slides-shown]) .slider ::slotted(*) {
-  flex-basis: var(--slide-size) !important;
-}
-
-:host([snap]) .slider {
-  scroll-snap-type: x mandatory;
-}`;var v=class{constructor(d,e){this.timerId=0;this.interval=0;this.paused=!1;this.stopped=!0;d.addController(this),this.host=d,this.playCallback=e}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(d){this.stop(),this.interval=d,this.stopped=!1,this.timerId=window.setInterval(()=>{this.paused||this.playCallback()},d)}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 n=class extends m{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 v(this,()=>this.next());if(this.element="slider",!!1){this.slides=this.getElementsByTagName("scw-slider-item");let e=new IntersectionObserver(s=>{s.forEach(t=>{this.intersectionObserverEntries.set(t.target,t);let i=t.target;i.toggleAttribute("inert",!t.isIntersecting),i.classList.toggle("shown",t.isIntersecting),i.setAttribute("aria-hidden",t.isIntersecting?"false":"true")})},{root:this,threshold:.8});this.intersectionObserver=e,e.takeRecords().forEach(s=>{this.intersectionObserverEntries.set(s.target,s)})}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,b]}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 e=this.container,s=this.navLeft,t=this.navRight;this.isDown=!1;let i=0,h=0,a=!1;e.addEventListener("mousedown",l=>{this.isDown=!0,e.style.setProperty("scroll-snap-type","unset"),e.classList.add("mouse-active"),this.navigation!=="inline"&&this.navigation!=="none"&&(s.classList.add("hidden"),t.classList.add("hidden")),a=!1,i=l.pageX-e.offsetLeft,h=e.scrollLeft}),e.addEventListener("mouseleave",()=>{this.isDown&&(this.isDown=!1,a=!1,this.handleDragEnd())}),e.addEventListener("mouseup",()=>{this.isDown=!1,a&&(a=!1,this.handleDragEnd())}),e.addEventListener("mousemove",l=>{if(!this.isDown)return;l.preventDefault();let y=l.pageX-e.offsetLeft-i;this.container.scrollTo({left:h-y}),a=!0})}handleDragEnd(){let e=this.container,s=this.navLeft,t=this.navRight;this.navigation!=="inline"&&this.navigation!=="none"&&(s.classList.remove("hidden"),t.classList.remove("hidden"));let i=e.scrollLeft,h=e.scrollTop;e.style.removeProperty("scroll-snap-type");let a=e.scrollLeft,l=e.scrollTop;e.style.setProperty("scroll-snap-type","unset"),e.scrollTo({left:i,top:h,behavior:"auto"}),e.scrollTo({left:a,top:l,behavior:"smooth"}),e.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 e=this.getSlides(),t=[...this.intersectionObserverEntries.values()].find(i=>i.isIntersecting);if(this.loop&&(t==null?void 0:t.target.hasAttribute("data-clone"))){let i=Number(t.target.getAttribute("data-clone"));this.goToSlide(i,"auto");return}t&&(this.activeSlide=e.indexOf(t.target)),this.setLabel()}setLabel(){let e=this.getSlides({excludeClones:!1}),s=this.loop?this.activeSlide+this.slidesShown+this.teaseOffset:this.activeSlide;e.forEach((t,i)=>{i===s+Math.floor(this.slidesShown/2)?t.classList.add("center"):t.classList.remove("center")})}getSlides({excludeClones:e=!0}={}){return this.slides?[...this.slides].filter(s=>!e||!s.hasAttribute("data-clone")):[]}previous(){this.prevEnabled&&this.goToSlide(this.activeSlide-1)}next(){this.nextEnabled&&this.goToSlide(this.activeSlide+1)}goToSlide(e,s="smooth"){let t=this.getSlides(),i=this.getSlides({excludeClones:!1}),h=(e+t.length)%t.length;this.activeSlide=h;let a=Math.min(Math.max(e+(this.loop?this.slidesShown+this.teaseOffset:0),0),i.length),l=i[a];this.container.scrollTo({left:l.offsetLeft+this.scrollOffset,top:l.offsetTop,behavior:s})}setIconWidth(){this.iconSize==="large"?this.iconPx=70:this.iconSize==="small"?this.iconPx=20:this.iconPx=50}handleTeasUpdate(){let e=this.tease===""?"0%":this.tease;this.container.style.setProperty("--tease",e),this.navLeft&&this.navRight&&(this.navLeft.style.setProperty("--tease",e),this.navRight.style.setProperty("--tease",e))}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 e=this.intersectionObserver;this.intersectionObserverEntries.clear();let s=this.getSlides({excludeClones:!1});if(e&&s.forEach(t=>{e.unobserve(t),t.hasAttribute("data-clone")&&t.remove()}),s=this.getSlides({excludeClones:!1}),this.loop){let t=s.slice(-this.slidesShown-this.teaseOffset),i=s.slice(0,this.slidesShown+this.teaseOffset);t.reverse().forEach((h,a)=>{let l=h.cloneNode(!0);l.setAttribute("data-clone",String(s.length-a-1)),this.prepend(l)}),i.forEach((h,a)=>{let l=h.cloneNode(!0);l.setAttribute("data-clone",String(a)),this.append(l)})}s=this.getSlides({excludeClones:!1}),e&&s.forEach(t=>{e.observe(t)}),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)+"%",p` ${this.navigation!=="none"?p`<scw-link
-            class="icon-left"
-            design="plain"
-            aria-label="left"
-            aria-disabled="${!this.prevEnabled}"
-            style="--icon-offset: ${this.slideOffset};
-            --tease: ${this.tease===""?"0%":this.tease};
-            --icon-width:${this.iconPx};"
-            @click=${this.prevEnabled?()=>this.previous():null}>
-            <scw-icon
-              size="${this.iconPx}"
-              icon="icon-chevron-left">
-            </scw-icon>
-          </scw-link>`:""}
-      <div
-        style="--slides-shown: ${this.slidesShown};
-        --tease: ${this.tease===""?"0%":this.tease};
-        --slide-gap:${this.gap};"
-        class="slider ${this.center?"center-slider":""}">
-        <slot></slot>
-      </div>
-      ${this.navigation!=="none"?p`<scw-link
-            class="icon-right"
-            aria-label="right"
-            design="plain"
-            aria-disabled="${!this.nextEnabled}"
-            style="--icon-offset: ${this.slideOffset};
-            --tease: ${this.tease===""?"0%":this.tease};
-            --icon-width:${this.iconPx};"
-            @click=${this.nextEnabled?()=>this.next():null}>
-            <scw-icon
-              size="${this.iconPx}"
-              icon="icon-chevron-right">
-            </scw-icon>
-          </scw-link>`:""}`}};o([r({type:Boolean,attribute:"loop",reflect:!0})],n.prototype,"loop",2),o([r({type:Number,attribute:"slides-shown",reflect:!1})],n.prototype,"slidesShown",2),o([r({type:Number,attribute:"active-slide",reflect:!0})],n.prototype,"activeSlide",2),o([r({type:Boolean,attribute:"snap",reflect:!0})],n.prototype,"center",2),o([r({type:String,attribute:"nav-style",reflect:!0})],n.prototype,"navigation",2),o([r({type:Boolean,attribute:"drag",reflect:!0})],n.prototype,"drag",2),o([r({type:Boolean,attribute:"scroll",reflect:!0})],n.prototype,"scrollable",2),o([r({type:String,attribute:"tease",reflect:!1})],n.prototype,"tease",2),o([r({type:String,attribute:"gap",reflect:!0})],n.prototype,"gap",2),o([r({type:Number,attribute:"autoplay",reflect:!1})],n.prototype,"autoplay",2),o([r({type:String,attribute:"icon-size",reflect:!1})],n.prototype,"iconSize",2),o([f(".slider")],n.prototype,"container",2),o([f(".icon-left")],n.prototype,"navLeft",2),o([f(".icon-right")],n.prototype,"navRight",2),o([c("tease",{waitUntilFirstUpdate:!0})],n.prototype,"handleTeasUpdate",1),o([c("loop",{waitUntilFirstUpdate:!0}),c("slidesShown",{waitUntilFirstUpdate:!0}),c("navigation",{waitUntilFirstUpdate:!0}),c("iconSize",{waitUntilFirstUpdate:!0})],n.prototype,"initializeSlides",1);export{n as a};