scb-wc-test 0.1.309 → 0.1.311

package/mvc/components/scb-horizontal-scroller/scb-horizontal-scroller.js

@@ -1,4 +1,4 @@
-import{a as v,n as a,r as b,i as S,x as h,t as m}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var l=customElements.define.bind(customElements);customElements.define=function(s,i,r){try{customElements.get(s)||l(s,i,r)}catch(n){var c=String(n||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var y=Object.defineProperty,w=Object.getOwnPropertyDescriptor,g=t=>{throw TypeError(t)},o=(t,l,s,i)=>{for(var r=i>1?void 0:i?w(l,s):l,c=t.length-1,n;c>=0;c--)(n=t[c])&&(r=(i?n(l,s,r):n(r))||r);return i&&r&&y(l,s,r),r},z=(t,l,s)=>l.has(t)||g("Cannot "+s),_=(t,l,s)=>l.has(t)?g("Cannot add the same private member more than once"):l instanceof WeakSet?l.add(t):l.set(t,s),p=(t,l,s)=>(z(t,l,"access private method"),s),d,f,u;let e=class extends S{constructor(){super(...arguments),_(this,d),this.variant="standard",this.width="100%",this.showScrollbar=!1,this.rightScrollButtonLabel="Scrolla höger",this.leftScrollButtonLabel="Scrolla vänster",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.contentFlex=!1,this.internalGap="",this._canScrollLeft=!1,this._canScrollRight=!1,this.updateScrollButtons=()=>{const t=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!t){this._canScrollLeft&&(this._canScrollLeft=!1),this._canScrollRight&&(this._canScrollRight=!1),this.removeAttribute("data-scroll-left"),this.removeAttribute("data-scroll-right");return}const l=t.scrollLeft>0,s=t.scrollLeft+t.clientWidth<t.scrollWidth-1;this._canScrollLeft!==l&&(this._canScrollLeft=l),this._canScrollRight!==s&&(this._canScrollRight=s),l?this.setAttribute("data-scroll-left",""):this.removeAttribute("data-scroll-left"),s?this.setAttribute("data-scroll-right",""):this.removeAttribute("data-scroll-right")},this.lastScrollLeft=0,this.isScrolling=!1,this.scrollEndTimeout=null,this.scrollerEl=null,this.slotEl=null,this.sizeObserver=null,this.resizeRaf=null,this.handleScroll=()=>{const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");t&&(this.updateScrollButtons(),this.dispatchCustomEventWithAlias("scb-scroll",{scrollLeft:t.scrollLeft}),this.isScrolling||(this.isScrolling=!0,this.dispatchCustomEventWithAlias("scb-scroll-start",{scrollLeft:t.scrollLeft})),clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=setTimeout(()=>{this.isScrolling=!1,this.dispatchCustomEventWithAlias("scb-scroll-end",{scrollLeft:t.scrollLeft})},120),t.scrollLeft>this.lastScrollLeft?this.dispatchCustomEventWithAlias("scb-scroll-right",{scrollLeft:t.scrollLeft}):t.scrollLeft<this.lastScrollLeft&&this.dispatchCustomEventWithAlias("scb-scroll-left",{scrollLeft:t.scrollLeft}),this.lastScrollLeft=t.scrollLeft)},this.handleWheel=t=>{const l=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!l||t.deltaY===0)return;const s=l.scrollLeft,i=s>0,r=s+l.clientWidth<l.scrollWidth-1;!i&&!r||(l.scrollLeft+=t.deltaY,l.scrollLeft!==s&&t.preventDefault())}}doScrollBy(t){const l=this.shadowRoot?.querySelector(".scb-horizontal-scroller");l&&l.scrollBy({left:t,behavior:"smooth"})}connectedCallback(){super.connectedCallback(),this.style.setProperty("--scb-horizontal-scroller-width",this.width)}disconnectedCallback(){super.disconnectedCallback(),this.scrollerEl&&(this.scrollerEl.removeEventListener("scroll",this.handleScroll),this.scrollerEl.removeEventListener("wheel",this.handleWheel)),this.sizeObserver&&(this.sizeObserver.disconnect(),this.sizeObserver=null),this.resizeRaf!==null&&(cancelAnimationFrame(this.resizeRaf),this.resizeRaf=null),this.scrollEndTimeout&&(clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=null),this.scrollerEl=null,this.slotEl=null}dispatchCustomEvent(t,l={}){this.dispatchEvent(new CustomEvent(t,{detail:l,bubbles:!0,composed:!0}))}dispatchCustomEventWithAlias(t,l={}){if(this.dispatchCustomEvent(t,l),t.includes("-")){const s=t.replace(/-/g,"");this.dispatchCustomEvent(s,l)}}firstUpdated(){this.scrollerEl=this.shadowRoot?.querySelector(".scb-horizontal-scroller"),this.slotEl=this.shadowRoot?.querySelector("slot");const t=this.shadowRoot?.querySelector(".scroll-shadow-left"),l=this.shadowRoot?.querySelector(".scroll-shadow-right");this.scrollerEl&&(this.scrollerEl.addEventListener("scroll",this.handleScroll),this.scrollerEl.addEventListener("wheel",this.handleWheel,{passive:!1}));const s=()=>{if(this.slotEl&&t&&l){const c=this.slotEl.getBoundingClientRect();t.style.height=`${c.height}px`,l.style.height=`${c.height}px`}},i=()=>{s(),this.updateScrollButtons()},r=()=>{this.resizeRaf===null&&(this.resizeRaf=requestAnimationFrame(()=>{this.resizeRaf=null,i()}))};requestAnimationFrame(()=>{i()}),this.slotEl&&this.slotEl.addEventListener("slotchange",()=>{r()}),this.sizeObserver=new ResizeObserver(()=>{r()}),this.scrollerEl&&this.sizeObserver.observe(this.scrollerEl),this.slotEl&&this.sizeObserver.observe(this.slotEl),p(this,d,f).call(this),p(this,d,u).call(this)}updated(t){t.has("width")&&this.style.setProperty("--scb-horizontal-scroller-width",this.width),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&p(this,d,f).call(this),(t.has("internalGap")||t.has("contentFlex"))&&p(this,d,u).call(this)}mapSpacingToken(t){if(!t)return;const l=String(t).trim();if(l)return/^\d+$/.test(l)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(l,10)))})`:l}render(){const t=this.variant,l=this._canScrollLeft||this._canScrollRight;switch(t){case"inline":return h`
+import{a as v,n as a,r as b,i as S,x as h,t as m}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var l=customElements.define.bind(customElements);customElements.define=function(s,i,r){try{customElements.get(s)||l(s,i,r)}catch(n){var c=String(n||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var y=Object.defineProperty,w=Object.getOwnPropertyDescriptor,g=t=>{throw TypeError(t)},o=(t,l,s,i)=>{for(var r=i>1?void 0:i?w(l,s):l,c=t.length-1,n;c>=0;c--)(n=t[c])&&(r=(i?n(l,s,r):n(r))||r);return i&&r&&y(l,s,r),r},z=(t,l,s)=>l.has(t)||g("Cannot "+s),_=(t,l,s)=>l.has(t)?g("Cannot add the same private member more than once"):l instanceof WeakSet?l.add(t):l.set(t,s),p=(t,l,s)=>(z(t,l,"access private method"),s),d,f,u;let e=class extends S{constructor(){super(...arguments),_(this,d),this.variant="standard",this.width="100%",this.showScrollbar=!1,this.rightScrollButtonLabel="Scrolla höger",this.leftScrollButtonLabel="Scrolla vänster",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.contentFlex=!1,this.internalGap="",this._canScrollLeft=!1,this._canScrollRight=!1,this.updateScrollButtons=()=>{const t=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!t){this._canScrollLeft&&(this._canScrollLeft=!1),this._canScrollRight&&(this._canScrollRight=!1),this.removeAttribute("data-scroll-left"),this.removeAttribute("data-scroll-right");return}const l=t.scrollLeft>0,s=t.scrollLeft+t.clientWidth<t.scrollWidth-1;this._canScrollLeft!==l&&(this._canScrollLeft=l),this._canScrollRight!==s&&(this._canScrollRight=s),l?this.setAttribute("data-scroll-left",""):this.removeAttribute("data-scroll-left"),s?this.setAttribute("data-scroll-right",""):this.removeAttribute("data-scroll-right")},this.lastScrollLeft=0,this.isScrolling=!1,this.scrollEndTimeout=null,this.scrollerEl=null,this.slotEl=null,this.sizeObserver=null,this.resizeRaf=null,this.handleScroll=()=>{const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");t&&(this.updateScrollButtons(),this.dispatchCustomEventWithAlias("scb-scroll",{scrollLeft:t.scrollLeft}),this.isScrolling||(this.isScrolling=!0,this.dispatchCustomEventWithAlias("scb-scroll-start",{scrollLeft:t.scrollLeft})),clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=setTimeout(()=>{this.isScrolling=!1,this.dispatchCustomEventWithAlias("scb-scroll-end",{scrollLeft:t.scrollLeft})},120),t.scrollLeft>this.lastScrollLeft?this.dispatchCustomEventWithAlias("scb-scroll-right",{scrollLeft:t.scrollLeft}):t.scrollLeft<this.lastScrollLeft&&this.dispatchCustomEventWithAlias("scb-scroll-left",{scrollLeft:t.scrollLeft}),this.lastScrollLeft=t.scrollLeft)},this.handleWheel=t=>{const l=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!l||t.deltaY===0)return;const s=l.scrollLeft,i=s>0,r=s+l.clientWidth<l.scrollWidth-1;!i&&!r||(l.scrollLeft+=t.deltaY,l.scrollLeft!==s&&t.preventDefault())}}getScrollStep(){const t=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");return t?Math.max(Math.round(t.clientWidth*.8),120):200}doScrollBy(t){const l=this.shadowRoot?.querySelector(".scb-horizontal-scroller");l&&l.scrollBy({left:t,behavior:"smooth"})}connectedCallback(){super.connectedCallback(),this.style.setProperty("--scb-horizontal-scroller-width",this.width)}disconnectedCallback(){super.disconnectedCallback(),this.scrollerEl&&(this.scrollerEl.removeEventListener("scroll",this.handleScroll),this.scrollerEl.removeEventListener("wheel",this.handleWheel)),this.sizeObserver&&(this.sizeObserver.disconnect(),this.sizeObserver=null),this.resizeRaf!==null&&(cancelAnimationFrame(this.resizeRaf),this.resizeRaf=null),this.scrollEndTimeout&&(clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=null),this.scrollerEl=null,this.slotEl=null}dispatchCustomEvent(t,l={}){this.dispatchEvent(new CustomEvent(t,{detail:l,bubbles:!0,composed:!0}))}dispatchCustomEventWithAlias(t,l={}){if(this.dispatchCustomEvent(t,l),t.includes("-")){const s=t.replace(/-/g,"");this.dispatchCustomEvent(s,l)}}firstUpdated(){this.scrollerEl=this.shadowRoot?.querySelector(".scb-horizontal-scroller"),this.slotEl=this.shadowRoot?.querySelector("slot");const t=this.shadowRoot?.querySelector(".scroll-shadow-left"),l=this.shadowRoot?.querySelector(".scroll-shadow-right");this.scrollerEl&&(this.scrollerEl.addEventListener("scroll",this.handleScroll),this.scrollerEl.addEventListener("wheel",this.handleWheel,{passive:!1}));const s=()=>{if(this.slotEl&&t&&l){const c=this.slotEl.getBoundingClientRect();t.style.height=`${c.height}px`,l.style.height=`${c.height}px`}},i=()=>{s(),this.updateScrollButtons()},r=()=>{this.resizeRaf===null&&(this.resizeRaf=requestAnimationFrame(()=>{this.resizeRaf=null,i()}))};requestAnimationFrame(()=>{i()}),this.slotEl&&this.slotEl.addEventListener("slotchange",()=>{r()}),this.sizeObserver=new ResizeObserver(()=>{r()}),this.scrollerEl&&this.sizeObserver.observe(this.scrollerEl),this.slotEl&&this.sizeObserver.observe(this.slotEl),p(this,d,f).call(this),p(this,d,u).call(this)}updated(t){t.has("width")&&this.style.setProperty("--scb-horizontal-scroller-width",this.width),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&p(this,d,f).call(this),(t.has("internalGap")||t.has("contentFlex"))&&p(this,d,u).call(this)}mapSpacingToken(t){if(!t)return;const l=String(t).trim();if(l)return/^\d+$/.test(l)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(l,10)))})`:l}render(){const t=this.variant,l=this._canScrollLeft||this._canScrollRight;switch(t){case"inline":return h`
           <div class="scb-horizontal-scroller ${l?"canScroll":""}" tabindex="0">
             ${this.variant!="inline"?h`<div class="scroll-shadow-left"></div>`:""}
             <slot></slot>
@@ -14,7 +14,7 @@ import{a as v,n as a,r as b,i as S,x as h,t as m}from"../../vendor/vendor.js";im
                           label="${this.leftScrollButtonLabel}"
                           aria-label="Scrolla vänster"
                           icon="chevron_left"
-                          @click="${()=>this.doScrollBy(-100)}"
+                          @click="${()=>this.doScrollBy(-this.getScrollStep())}"
                         ></scb-button>
                       `:""}
 
@@ -26,7 +26,7 @@ import{a as v,n as a,r as b,i as S,x as h,t as m}from"../../vendor/vendor.js";im
                           aria-label="Scrolla höger"
                           icon="chevron_right"
                           trailing-icon
-                          @click="${()=>this.doScrollBy(100)}"
+                          @click="${()=>this.doScrollBy(this.getScrollStep())}"
                         ></scb-button>
                       `:""}
                 </div>
@@ -38,7 +38,7 @@ import{a as v,n as a,r as b,i as S,x as h,t as m}from"../../vendor/vendor.js";im
                   icon="chevron_left"
                   aria-label="Scrolla vänster"
                   variant="filled-tonal"
-                  @click="${()=>this.doScrollBy(-100)}"
+                  @click="${()=>this.doScrollBy(-this.getScrollStep())}"
                 ></scb-icon-button>
               `:""}
           <div class="scroll-shadow-left"></div>
@@ -53,7 +53,7 @@ import{a as v,n as a,r as b,i as S,x as h,t as m}from"../../vendor/vendor.js";im
                   icon="chevron_right"
                   aria-label="Scrolla höger"
                   variant="filled-tonal"
-                  @click="${()=>this.doScrollBy(100)}"
+                  @click="${()=>this.doScrollBy(this.getScrollStep())}"
                 ></scb-icon-button>
               `:""}
         `}}};d=new WeakSet;f=function(){const t=this.mapSpacingToken(this.spacing),l=this.mapSpacingToken(this.spacingTop),s=this.mapSpacingToken(this.spacingBottom),i=this.mapSpacingToken(this.spacingLeft),r=this.mapSpacingToken(this.spacingRight),c=l??t,n=s??t;c?this.style.setProperty("--scb-horizontal-scroller-spacing-block-start",c):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-start"),n?this.style.setProperty("--scb-horizontal-scroller-spacing-block-end",n):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-end"),i?this.style.setProperty("--scb-horizontal-scroller-spacing-inline-start",i):this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-start"),r?this.style.setProperty("--scb-horizontal-scroller-spacing-inline-end",r):this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-end")};u=function(){const t=this.mapSpacingToken(this.internalGap);this.contentFlex&&t?this.style.setProperty("--scb-horizontal-scroller-internal-gap",t):this.style.removeProperty("--scb-horizontal-scroller-internal-gap")};e.styles=v`