scb-wc 0.1.205 → 0.1.207
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mvc/components/scb-gallery-grid/scb-gallery-grid.js +1 -1
- package/mvc/components/scb-horizontal-scroller/scb-horizontal-scroller.js +2 -2
- package/package.json +2 -2
- package/scb-components/scb-horizontal-scroller/scb-horizontal-scroller.d.ts +1 -0
- package/scb-gallery-grid/scb-gallery-grid.js +1 -1
- package/scb-horizontal-scroller/scb-horizontal-scroller.js +12 -2
- package/scb-wc.bundle.js +10 -3
|
@@ -10,7 +10,7 @@ import{f as E,h as T,m as $,p as y,v as C,y as O}from"../../vendor/vendor.js";im
|
|
|
10
10
|
@scb-overlay-dismiss=${i(m,this)}
|
|
11
11
|
>
|
|
12
12
|
<div class="overlay-dialog">
|
|
13
|
-
<scb-horizontal-scroller show-scrollbar class="overlay-carousel" variant="standard" width="100%" content-flex internal-gap="0">
|
|
13
|
+
<scb-horizontal-scroller show-scrollbar snap class="overlay-carousel" variant="standard" width="100%" content-flex internal-gap="0">
|
|
14
14
|
${o(s,this,G).call(this).map((a,e)=>C`
|
|
15
15
|
<div
|
|
16
16
|
class="overlay-slide ${e===0?"is-active":""}"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../shared/lazy-focus-ring.js","../../vendor/preload-helper.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{f,h as v,m,p as e,v as c,y}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as z}from"../../vendor/preload-helper.js";import{t as s}from"../../vendor/decorate.js";import{renderScbIcon as h}from"../shared/scb-icon-svg.js";(function(){try{var p=typeof globalThis<"u"?globalThis:window;if(!p.__scb_ce_guard_installed__){p.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(t,r,i){try{customElements.get(t)||o(t,r,i)}catch(
|
|
2
|
+
import{f,h as v,m,p as e,v as c,y}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as z}from"../../vendor/preload-helper.js";import{t as s}from"../../vendor/decorate.js";import{renderScbIcon as h}from"../shared/scb-icon-svg.js";(function(){try{var p=typeof globalThis<"u"?globalThis:window;if(!p.__scb_ce_guard_installed__){p.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(t,r,i){try{customElements.get(t)||o(t,r,i)}catch(n){var a=String(n||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var d,b;function g(){return b??(b=z(()=>import("../shared/lazy-focus-ring.js"),__vite__mapDeps([0,1]),import.meta.url)),b}var l=(d=class extends v{constructor(...o){super(...o),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.snap=!1,this._canScrollLeft=!1,this._canScrollRight=!1,this.__scrollLeft=()=>{this.doScrollBy(-this.getScrollStep())},this.__scrollRight=()=>{this.doScrollBy(this.getScrollStep())},this.updateScrollButtons=()=>{const t=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!t){this._canScrollLeft=!1,this._canScrollRight=!1,this.toggleAttribute("data-scroll-left",!1),this.toggleAttribute("data-scroll-right",!1);return}const r=t.scrollLeft>0,i=t.scrollLeft+t.clientWidth<t.scrollWidth-1;this._canScrollLeft=r,this._canScrollRight=i,this.toggleAttribute("data-scroll-left",r),this.toggleAttribute("data-scroll-right",i)},this.lastScrollLeft=0,this.isScrolling=!1,this.scrollEndTimeout=null,this.scrollerEl=null,this.slotEl=null,this.sizeObserver=null,this.resizeRaf=null,this.__onFocusIn=()=>{g().then(({ensureFocusRingReady:t})=>t())},this.__onLazyFocusRingKeydown=t=>{!(t instanceof KeyboardEvent)||t.key!=="Tab"||g().then(({ensureFocusRingOnTab:r})=>r(t))},this.handleScroll=()=>{const t=this.scrollerEl;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 r=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!r||t.deltaY===0)return;const i=r.scrollLeft,a=i>0,n=i+r.clientWidth<r.scrollWidth-1;!a&&!n||(r.scrollLeft+=t.deltaY,r.scrollLeft!==i&&t.preventDefault())}}getScrollStep(){const o=this.scrollerEl||this.shadowRoot?.querySelector(".scb-horizontal-scroller");return o?Math.max(Math.round(o.clientWidth*.8),120):200}doScrollBy(o){this.scrollerEl?.scrollBy({left:o,behavior:"smooth"})}connectedCallback(){super.connectedCallback(),this.addEventListener("focusin",this.__onFocusIn),this.addEventListener("keydown",this.__onLazyFocusRingKeydown),this.style.setProperty("--scb-horizontal-scroller-width",this.width)}disconnectedCallback(){this.removeEventListener("focusin",this.__onFocusIn),this.removeEventListener("keydown",this.__onLazyFocusRingKeydown),this.renderRoot.removeEventListener("focusin",this.__onFocusIn),this.renderRoot.removeEventListener("keydown",this.__onLazyFocusRingKeydown),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(o,t={}){this.dispatchEvent(new CustomEvent(o,{detail:t,bubbles:!0,composed:!0}))}dispatchCustomEventWithAlias(o,t={}){if(this.dispatchCustomEvent(o,t),o.includes("-")){const r=o.replace(/-/g,"");this.dispatchCustomEvent(r,t)}}firstUpdated(){this.renderRoot.addEventListener("focusin",this.__onFocusIn),this.renderRoot.addEventListener("keydown",this.__onLazyFocusRingKeydown),this.scrollerEl=this.shadowRoot?.querySelector(".scb-horizontal-scroller"),this.slotEl=this.shadowRoot?.querySelector("slot"),this.scrollerEl&&(this.scrollerEl.addEventListener("scroll",this.handleScroll),this.scrollerEl.addEventListener("wheel",this.handleWheel,{passive:!1}));const o=()=>{this.resizeRaf===null&&(this.resizeRaf=requestAnimationFrame(()=>{this.resizeRaf=null,this.updateScrollButtons()}))};requestAnimationFrame(()=>{this.updateScrollButtons()}),this.slotEl&&this.slotEl.addEventListener("slotchange",()=>{o()}),this.sizeObserver=new ResizeObserver(()=>{o()}),this.scrollerEl&&this.sizeObserver.observe(this.scrollerEl),this.slotEl&&this.sizeObserver.observe(this.slotEl),this.__applySpacing(),this.__applyInternalGap()}updated(o){o.has("width")&&this.style.setProperty("--scb-horizontal-scroller-width",this.width),(o.has("spacing")||o.has("spacingTop")||o.has("spacingBottom")||o.has("spacingLeft")||o.has("spacingRight"))&&this.__applySpacing(),(o.has("internalGap")||o.has("contentFlex"))&&this.__applyInternalGap()}mapSpacingToken(o){if(!o)return;const t=String(o).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}__applySpacing(){const o=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop),r=this.mapSpacingToken(this.spacingBottom),i=this.mapSpacingToken(this.spacingLeft),a=this.mapSpacingToken(this.spacingRight),n=t??o,u=r??o;n?this.style.setProperty("--scb-horizontal-scroller-spacing-block-start",n):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-start"),u?this.style.setProperty("--scb-horizontal-scroller-spacing-block-end",u):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"),a?this.style.setProperty("--scb-horizontal-scroller-spacing-inline-end",a):this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-end")}__applyInternalGap(){const o=this.mapSpacingToken(this.internalGap);this.contentFlex&&o?this.style.setProperty("--scb-horizontal-scroller-internal-gap",o):this.style.removeProperty("--scb-horizontal-scroller-internal-gap")}render(){const o=this.variant,t=this._canScrollLeft||this._canScrollRight;return o==="inline"?c`
|
|
3
3
|
<div class="scb-horizontal-scroller ${t?"canScroll":""}" tabindex="0">
|
|
4
4
|
<slot></slot>
|
|
5
5
|
<md-focus-ring inward></md-focus-ring>
|
|
@@ -58,4 +58,4 @@ import{f,h as v,m,p as e,v as c,y}from"../../vendor/vendor.js";import"../../vend
|
|
|
58
58
|
${h("chevron_right","scroll-control-icon")}
|
|
59
59
|
</button>
|
|
60
60
|
`:""}
|
|
61
|
-
`}},d.styles=y`:host{display:flex;position:relative;align-items:center;gap:var(--scb-horizontal-scroller-host-gap, var(--spacing-3, 8px));padding:0;overflow:hidden;margin-block-start:var(--scb-horizontal-scroller-spacing-block-start, 0);margin-block-end:var(--scb-horizontal-scroller-spacing-block-end, 0);margin-inline-start:var(--scb-horizontal-scroller-spacing-inline-start, 0);margin-inline-end:var(--scb-horizontal-scroller-spacing-inline-end, 0)}.scb-horizontal-scroller{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;width:100%;--scb-effect-mask-edge-fade-size:var(--scb-horizontal-scroller-edge-fade-size, var(--scale-12, 56px))}:host([data-scroll-left]:not([variant='inline'])) .scb-horizontal-scroller{-webkit-mask-image:var(--scb-effect-mask-horizontal-start);mask-image:var(--scb-effect-mask-horizontal-start)}:host([data-scroll-right]:not([variant='inline'])) .scb-horizontal-scroller{-webkit-mask-image:var(--scb-effect-mask-horizontal-end);mask-image:var(--scb-effect-mask-horizontal-end)}:host([data-scroll-left][data-scroll-right]:not([variant='inline'])) .scb-horizontal-scroller{-webkit-mask-image:var(--scb-effect-mask-horizontal-both);mask-image:var(--scb-effect-mask-horizontal-both)}:host([show-scrollbar]) .scb-horizontal-scroller{scrollbar-width:auto}:host([content-flex]) .scb-horizontal-scroller{display:flex;flex-direction:row;flex:1 1 auto}.scb-horizontal-scroller::-webkit-scrollbar{border-radius:var(--md-sys-shape-corner-large);height:var(--scb-horizontal-scroller-scrollbar-height, var(--spacing-2, 4px));width:var(--scb-horizontal-scroller-scrollbar-width, var(--spacing-3, 8px))}.scb-horizontal-scroller::-webkit-scrollbar-thumb{background:var(--scb-horizontal-scroller-scrollbar-thumb-color, var(--md-sys-color-on-surface));border-radius:var(--md-sys-shape-corner-large);cursor:pointer}.scb-horizontal-scroller::-webkit-scrollbar-track{background:var(--scb-horizontal-scroller-scrollbar-track-color, var(--md-sys-color-secondary-container));border-radius:var(--md-sys-shape-corner-large)}.scb-horizontal-scroller:focus,.scroll-control:focus,.scroll-text-button:focus{outline:0}md-focus-ring{border-radius:var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large))}:host([show-scrollbar]) .scb-horizontal-scroller.canScroll{padding-bottom:var(--scb-horizontal-scroller-scrollbar-padding-block-end, var(--spacing-5, 16px))}slot{display:block;box-sizing:border-box;padding-block:var(--scb-horizontal-scroller-slot-padding-block, var(--spacing-3, 8px));padding-inline:var(--scb-horizontal-scroller-slot-padding-inline, var(--spacing-1, 2px));min-width:var(--scb-horizontal-scroller-width, auto)}:host([content-flex]) .scb-horizontal-scroller slot{display:flex;gap:var(--scb-horizontal-scroller-internal-gap)}.scroll-button-left{left:0;position:absolute;z-index:3}.scroll-button-right{right:2px;position:absolute;z-index:3}.scroll-control,.scroll-text-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:0;font-family:var(--brand-font, var(--brand, "Inter"), sans-serif);font-weight:var(--weight-semibold, 600);cursor:pointer;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:var(--radius-full, 1000px)}.scroll-control{inline-size:var(--scb-horizontal-scroller-control-size, var(--scb-icon-button-container-size, 40px));block-size:var(--scb-horizontal-scroller-control-size, var(--scb-icon-button-container-size, 40px));padding:0;overflow:hidden;background:var(--scb-horizontal-scroller-control-container-color, var(--md-sys-color-secondary-container, var(--p-90)));color:var(--scb-horizontal-scroller-control-content-color, var(--md-sys-color-on-secondary-container, var(--p-30)))}.scroll-text-button{position:relative;min-block-size:calc(var(--scb-typography-label-small-line-height, var(--md-sys-typescale-label-small-line-height, 20px)) + var(--scb-horizontal-scroller-text-padding-block, calc(var(--spacing-4, 12px) - var(--spacing-1, 2px))) + var(--scb-horizontal-scroller-text-padding-block, calc(var(--spacing-4, 12px) - var(--spacing-1, 2px))));gap:var(--scb-horizontal-scroller-text-gap, var(--spacing-3, 8px));padding-block:var(--scb-horizontal-scroller-text-padding-block, calc(var(--spacing-4, 12px) - var(--spacing-1, 2px)));padding-inline:var(--scb-horizontal-scroller-text-padding-inline, var(--spacing-5, 16px));background:0 0;color:var(--scb-horizontal-scroller-text-content-color, var(--md-sys-color-primary, var(--p-40)));font-size:var(--scb-typography-label-small-size, var(--md-sys-typescale-label-small-size, 16px));line-height:var(--scb-typography-label-small-line-height, var(--md-sys-typescale-label-small-line-height, 20px));letter-spacing:var(--scb-typography-label-small-tracking, var(--md-sys-typescale-label-small-tracking, 0))}.scroll-control::before,.scroll-text-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity var(--motion-duration-short, 150ms) var(--motion-easing-standard, ease)}.scroll-control:hover::before,.scroll-text-button:hover::before{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}.scroll-control:active::before,.scroll-text-button:active::before{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}.scroll-control:focus-visible,.scroll-text-button:focus-visible{outline:var(--stroke-border-m, 2px) solid var(--md-focus-ring-color, var(--md-sys-color-primary, var(--p-40)));outline-offset:var(--spacing-1, 2px)}.scroll-control-icon{position:relative;display:inline-block;inline-size:var(--scb-horizontal-scroller-control-icon-size, var(--icon-size-medium, 24px));block-size:var(--scb-horizontal-scroller-control-icon-size, var(--icon-size-medium, 24px));overflow:hidden;font-family:"Material Symbols Outlined";font-size:var(--scb-horizontal-scroller-control-icon-size, var(--icon-size-medium, 24px));line-height:1;text-align:center;white-space:nowrap;text-transform:none;word-wrap:normal;direction:ltr;font-feature-settings:"liga"1;font-variation-settings:"FILL"0,"wght"400,"GRAD"0,"opsz"24;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.scroll-control-icon.scb-svg-icon{fill:currentColor;font:inherit}.scroll-shadow-left,.scroll-shadow-right{position:absolute;top:0;width:5px;bottom:0;pointer-events:none;background:0 0;box-shadow:none;transition:box-shadow .2s;z-index:2}.scroll-shadow-left{left:0}.scroll-shadow-right{right:0}:host([data-scroll-left]) .scroll-shadow-left{background:0 0;box-shadow:12px 0 30px color-mix(in srgb,currentColor 18%,transparent),4px 0 12px color-mix(in srgb,currentColor 12%,transparent)}:host([data-scroll-left]) .scroll-shadow-left::after,:host([data-scroll-right]) .scroll-shadow-right::after{content:"";position:absolute;inset-block:0}:host([data-scroll-right]) .scroll-shadow-right{background:0 0;box-shadow:-12px 0 30px color-mix(in srgb,currentColor 18%,transparent),-4px 0 12px color-mix(in srgb,currentColor 12%,transparent)}:host([variant='inline']){flex-direction:column;align-items:unset;padding:0}:host([variant='inline'][show-scrollbar]){gap:var(--spacing-5)}`,d);s([e({type:String,reflect:!0})],l.prototype,"variant",void 0);s([e({type:String,reflect:!0})],l.prototype,"width",void 0);s([e({type:Boolean,reflect:!0,attribute:"show-scrollbar"})],l.prototype,"showScrollbar",void 0);s([e({type:String,reflect:!0,attribute:"right-scroll-button-label"})],l.prototype,"rightScrollButtonLabel",void 0);s([e({type:String,reflect:!0,attribute:"left-scroll-button-label"})],l.prototype,"leftScrollButtonLabel",void 0);s([e({type:String,reflect:!0})],l.prototype,"spacing",void 0);s([e({type:String,reflect:!0,attribute:"spacing-top"})],l.prototype,"spacingTop",void 0);s([e({type:String,reflect:!0,attribute:"spacing-bottom"})],l.prototype,"spacingBottom",void 0);s([e({type:String,reflect:!0,attribute:"spacing-left"})],l.prototype,"spacingLeft",void 0);s([e({type:String,reflect:!0,attribute:"spacing-right"})],l.prototype,"spacingRight",void 0);s([e({type:Boolean,reflect:!0,attribute:"content-flex"})],l.prototype,"contentFlex",void 0);s([e({type:String,reflect:!0,attribute:"internal-gap"})],l.prototype,"internalGap",void 0);s([f()],l.prototype,"_canScrollLeft",void 0);s([f()],l.prototype,"_canScrollRight",void 0);l=s([m("scb-horizontal-scroller")],l);
|
|
61
|
+
`}},d.styles=y`:host{display:flex;position:relative;align-items:center;gap:var(--scb-horizontal-scroller-host-gap, var(--spacing-3, 8px));padding:0;overflow:hidden;margin-block-start:var(--scb-horizontal-scroller-spacing-block-start, 0);margin-block-end:var(--scb-horizontal-scroller-spacing-block-end, 0);margin-inline-start:var(--scb-horizontal-scroller-spacing-inline-start, 0);margin-inline-end:var(--scb-horizontal-scroller-spacing-inline-end, 0)}.scb-horizontal-scroller{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;width:100%;--scb-effect-mask-edge-fade-size:var(--scb-horizontal-scroller-edge-fade-size, var(--scale-12, 56px))}:host([snap]) .scb-horizontal-scroller{scroll-snap-type:x mandatory}:host([data-scroll-left]:not([variant='inline'])) .scb-horizontal-scroller{-webkit-mask-image:var(--scb-effect-mask-horizontal-start);mask-image:var(--scb-effect-mask-horizontal-start)}:host([data-scroll-right]:not([variant='inline'])) .scb-horizontal-scroller{-webkit-mask-image:var(--scb-effect-mask-horizontal-end);mask-image:var(--scb-effect-mask-horizontal-end)}:host([data-scroll-left][data-scroll-right]:not([variant='inline'])) .scb-horizontal-scroller{-webkit-mask-image:var(--scb-effect-mask-horizontal-both);mask-image:var(--scb-effect-mask-horizontal-both)}:host([show-scrollbar]) .scb-horizontal-scroller{scrollbar-width:auto}:host([content-flex]) .scb-horizontal-scroller{display:flex;flex-direction:row;flex:1 1 auto}.scb-horizontal-scroller::-webkit-scrollbar{border-radius:var(--md-sys-shape-corner-large);height:var(--scb-horizontal-scroller-scrollbar-height, var(--spacing-2, 4px));width:var(--scb-horizontal-scroller-scrollbar-width, var(--spacing-3, 8px))}.scb-horizontal-scroller::-webkit-scrollbar-thumb{background:var(--scb-horizontal-scroller-scrollbar-thumb-color, var(--md-sys-color-on-surface));border-radius:var(--md-sys-shape-corner-large);cursor:pointer}.scb-horizontal-scroller::-webkit-scrollbar-track{background:var(--scb-horizontal-scroller-scrollbar-track-color, var(--md-sys-color-secondary-container));border-radius:var(--md-sys-shape-corner-large)}.scb-horizontal-scroller:focus,.scroll-control:focus,.scroll-text-button:focus{outline:0}md-focus-ring{border-radius:var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large))}:host([show-scrollbar]) .scb-horizontal-scroller.canScroll{padding-bottom:var(--scb-horizontal-scroller-scrollbar-padding-block-end, var(--spacing-5, 16px))}slot{display:block;box-sizing:border-box;padding-block:var(--scb-horizontal-scroller-slot-padding-block, var(--spacing-3, 8px));padding-inline:var(--scb-horizontal-scroller-slot-padding-inline, var(--spacing-1, 2px));min-width:var(--scb-horizontal-scroller-width, auto)}:host([content-flex]) .scb-horizontal-scroller slot{display:flex;gap:var(--scb-horizontal-scroller-internal-gap)}:host([snap]) slot::slotted(*){scroll-snap-align:start;scroll-snap-stop:always}.scroll-button-left{left:0;position:absolute;z-index:3}.scroll-button-right{right:2px;position:absolute;z-index:3}.scroll-control,.scroll-text-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:0;font-family:var(--brand-font, var(--brand, "Inter"), sans-serif);font-weight:var(--weight-semibold, 600);cursor:pointer;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:var(--radius-full, 1000px)}.scroll-control{inline-size:var(--scb-horizontal-scroller-control-size, var(--scb-icon-button-container-size, 40px));block-size:var(--scb-horizontal-scroller-control-size, var(--scb-icon-button-container-size, 40px));padding:0;overflow:hidden;background:var(--scb-horizontal-scroller-control-container-color, var(--md-sys-color-secondary-container, var(--p-90)));color:var(--scb-horizontal-scroller-control-content-color, var(--md-sys-color-on-secondary-container, var(--p-30)))}.scroll-text-button{position:relative;min-block-size:calc(var(--scb-typography-label-small-line-height, var(--md-sys-typescale-label-small-line-height, 20px)) + var(--scb-horizontal-scroller-text-padding-block, calc(var(--spacing-4, 12px) - var(--spacing-1, 2px))) + var(--scb-horizontal-scroller-text-padding-block, calc(var(--spacing-4, 12px) - var(--spacing-1, 2px))));gap:var(--scb-horizontal-scroller-text-gap, var(--spacing-3, 8px));padding-block:var(--scb-horizontal-scroller-text-padding-block, calc(var(--spacing-4, 12px) - var(--spacing-1, 2px)));padding-inline:var(--scb-horizontal-scroller-text-padding-inline, var(--spacing-5, 16px));background:0 0;color:var(--scb-horizontal-scroller-text-content-color, var(--md-sys-color-primary, var(--p-40)));font-size:var(--scb-typography-label-small-size, var(--md-sys-typescale-label-small-size, 16px));line-height:var(--scb-typography-label-small-line-height, var(--md-sys-typescale-label-small-line-height, 20px));letter-spacing:var(--scb-typography-label-small-tracking, var(--md-sys-typescale-label-small-tracking, 0))}.scroll-control::before,.scroll-text-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity var(--motion-duration-short, 150ms) var(--motion-easing-standard, ease)}.scroll-control:hover::before,.scroll-text-button:hover::before{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}.scroll-control:active::before,.scroll-text-button:active::before{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}.scroll-control:focus-visible,.scroll-text-button:focus-visible{outline:var(--stroke-border-m, 2px) solid var(--md-focus-ring-color, var(--md-sys-color-primary, var(--p-40)));outline-offset:var(--spacing-1, 2px)}.scroll-control-icon{position:relative;display:inline-block;inline-size:var(--scb-horizontal-scroller-control-icon-size, var(--icon-size-medium, 24px));block-size:var(--scb-horizontal-scroller-control-icon-size, var(--icon-size-medium, 24px));overflow:hidden;font-family:"Material Symbols Outlined";font-size:var(--scb-horizontal-scroller-control-icon-size, var(--icon-size-medium, 24px));line-height:1;text-align:center;white-space:nowrap;text-transform:none;word-wrap:normal;direction:ltr;font-feature-settings:"liga"1;font-variation-settings:"FILL"0,"wght"400,"GRAD"0,"opsz"24;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.scroll-control-icon.scb-svg-icon{fill:currentColor;font:inherit}.scroll-shadow-left,.scroll-shadow-right{position:absolute;top:0;width:5px;bottom:0;pointer-events:none;background:0 0;box-shadow:none;transition:box-shadow .2s;z-index:2}.scroll-shadow-left{left:0}.scroll-shadow-right{right:0}:host([data-scroll-left]) .scroll-shadow-left{background:0 0;box-shadow:12px 0 30px color-mix(in srgb,currentColor 18%,transparent),4px 0 12px color-mix(in srgb,currentColor 12%,transparent)}:host([data-scroll-left]) .scroll-shadow-left::after,:host([data-scroll-right]) .scroll-shadow-right::after{content:"";position:absolute;inset-block:0}:host([data-scroll-right]) .scroll-shadow-right{background:0 0;box-shadow:-12px 0 30px color-mix(in srgb,currentColor 18%,transparent),-4px 0 12px color-mix(in srgb,currentColor 12%,transparent)}:host([variant='inline']){flex-direction:column;align-items:unset;padding:0}:host([variant='inline'][show-scrollbar]){gap:var(--spacing-5)}`,d);s([e({type:String,reflect:!0})],l.prototype,"variant",void 0);s([e({type:String,reflect:!0})],l.prototype,"width",void 0);s([e({type:Boolean,reflect:!0,attribute:"show-scrollbar"})],l.prototype,"showScrollbar",void 0);s([e({type:String,reflect:!0,attribute:"right-scroll-button-label"})],l.prototype,"rightScrollButtonLabel",void 0);s([e({type:String,reflect:!0,attribute:"left-scroll-button-label"})],l.prototype,"leftScrollButtonLabel",void 0);s([e({type:String,reflect:!0})],l.prototype,"spacing",void 0);s([e({type:String,reflect:!0,attribute:"spacing-top"})],l.prototype,"spacingTop",void 0);s([e({type:String,reflect:!0,attribute:"spacing-bottom"})],l.prototype,"spacingBottom",void 0);s([e({type:String,reflect:!0,attribute:"spacing-left"})],l.prototype,"spacingLeft",void 0);s([e({type:String,reflect:!0,attribute:"spacing-right"})],l.prototype,"spacingRight",void 0);s([e({type:Boolean,reflect:!0,attribute:"content-flex"})],l.prototype,"contentFlex",void 0);s([e({type:String,reflect:!0,attribute:"internal-gap"})],l.prototype,"internalGap",void 0);s([e({type:Boolean,reflect:!0})],l.prototype,"snap",void 0);s([f()],l.prototype,"_canScrollLeft",void 0);s([f()],l.prototype,"_canScrollRight",void 0);l=s([m("scb-horizontal-scroller")],l);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.207",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -455,5 +455,5 @@
|
|
|
455
455
|
"./scb-viz/*": null,
|
|
456
456
|
"./mvc/*": "./mvc/*"
|
|
457
457
|
},
|
|
458
|
-
"buildHash": "
|
|
458
|
+
"buildHash": "B67CBD78104183F22232D9C5F2A2BB5AA767C8B69E00724536893A3B13B2AB15"
|
|
459
459
|
}
|
|
@@ -20,6 +20,7 @@ export declare class ScbHorizontalScroller extends LitElement {
|
|
|
20
20
|
contentFlex: boolean;
|
|
21
21
|
/** Avstånd mellan slottade element när content-flex är aktivt. */
|
|
22
22
|
internalGap: string;
|
|
23
|
+
snap: boolean;
|
|
23
24
|
private _canScrollLeft;
|
|
24
25
|
private _canScrollRight;
|
|
25
26
|
static styles: import('lit').CSSResult;
|
|
@@ -259,7 +259,7 @@ var s = {
|
|
|
259
259
|
@scb-overlay-dismiss=${this.#g}
|
|
260
260
|
>
|
|
261
261
|
<div class="overlay-dialog">
|
|
262
|
-
<scb-horizontal-scroller show-scrollbar class="overlay-carousel" variant="standard" width="100%" content-flex internal-gap="0">
|
|
262
|
+
<scb-horizontal-scroller show-scrollbar snap class="overlay-carousel" variant="standard" width="100%" content-flex internal-gap="0">
|
|
263
263
|
${this.#m().map((e, t) => r`
|
|
264
264
|
<div
|
|
265
265
|
class="overlay-slide ${t === 0 ? "is-active" : ""}"
|
|
@@ -9,7 +9,7 @@ function l() {
|
|
|
9
9
|
}
|
|
10
10
|
var u = class extends n {
|
|
11
11
|
constructor(...e) {
|
|
12
|
-
super(...e), 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.__scrollLeft = () => {
|
|
12
|
+
super(...e), 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.snap = !1, this._canScrollLeft = !1, this._canScrollRight = !1, this.__scrollLeft = () => {
|
|
13
13
|
this.doScrollBy(-this.getScrollStep());
|
|
14
14
|
}, this.__scrollRight = () => {
|
|
15
15
|
this.doScrollBy(this.getScrollStep());
|
|
@@ -64,6 +64,9 @@ var u = class extends n {
|
|
|
64
64
|
width: 100%;
|
|
65
65
|
--scb-effect-mask-edge-fade-size: var(--scb-horizontal-scroller-edge-fade-size, var(--scale-12, 56px));
|
|
66
66
|
}
|
|
67
|
+
:host([snap]) .scb-horizontal-scroller {
|
|
68
|
+
scroll-snap-type: x mandatory;
|
|
69
|
+
}
|
|
67
70
|
:host([data-scroll-left]:not([variant='inline'])) .scb-horizontal-scroller {
|
|
68
71
|
-webkit-mask-image: var(--scb-effect-mask-horizontal-start);
|
|
69
72
|
mask-image: var(--scb-effect-mask-horizontal-start);
|
|
@@ -121,6 +124,10 @@ var u = class extends n {
|
|
|
121
124
|
display: flex;
|
|
122
125
|
gap: var(--scb-horizontal-scroller-internal-gap);
|
|
123
126
|
}
|
|
127
|
+
:host([snap]) slot::slotted(*) {
|
|
128
|
+
scroll-snap-align: start;
|
|
129
|
+
scroll-snap-stop: always;
|
|
130
|
+
}
|
|
124
131
|
.scroll-button-left {
|
|
125
132
|
left: 0px;
|
|
126
133
|
position: absolute;
|
|
@@ -460,6 +467,9 @@ e([o({
|
|
|
460
467
|
type: String,
|
|
461
468
|
reflect: !0,
|
|
462
469
|
attribute: "internal-gap"
|
|
463
|
-
})], u.prototype, "internalGap", void 0), e([
|
|
470
|
+
})], u.prototype, "internalGap", void 0), e([o({
|
|
471
|
+
type: Boolean,
|
|
472
|
+
reflect: !0
|
|
473
|
+
})], u.prototype, "snap", void 0), e([s()], u.prototype, "_canScrollLeft", void 0), e([s()], u.prototype, "_canScrollRight", void 0), u = e([a("scb-horizontal-scroller")], u);
|
|
464
474
|
//#endregion
|
|
465
475
|
export { u as ScbHorizontalScroller };
|
package/scb-wc.bundle.js
CHANGED
|
@@ -10934,7 +10934,7 @@
|
|
|
10934
10934
|
>
|
|
10935
10935
|
<path d=${i}></path>
|
|
10936
10936
|
</svg>
|
|
10937
|
-
`:S}w(),b(),P();var Hd;function Ud(){return Hd??=Promise.resolve().then(()=>(j(),nc)),Hd}var Wd=class extends C{constructor(...e){super(...e),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.__scrollLeft=()=>{this.doScrollBy(-this.getScrollStep())},this.__scrollRight=()=>{this.doScrollBy(this.getScrollStep())},this.updateScrollButtons=()=>{let e=this.scrollerEl||this.shadowRoot?.querySelector(`.scb-horizontal-scroller`);if(!e){this._canScrollLeft=!1,this._canScrollRight=!1,this.toggleAttribute(`data-scroll-left`,!1),this.toggleAttribute(`data-scroll-right`,!1);return}let t=e.scrollLeft>0,n=e.scrollLeft+e.clientWidth<e.scrollWidth-1;this._canScrollLeft=t,this._canScrollRight=n,this.toggleAttribute(`data-scroll-left`,t),this.toggleAttribute(`data-scroll-right`,n)},this.lastScrollLeft=0,this.isScrolling=!1,this.scrollEndTimeout=null,this.scrollerEl=null,this.slotEl=null,this.sizeObserver=null,this.resizeRaf=null,this.__onFocusIn=()=>{Ud().then(({ensureFocusRingReady:e})=>e())},this.__onLazyFocusRingKeydown=e=>{!(e instanceof KeyboardEvent)||e.key!==`Tab`||Ud().then(({ensureFocusRingOnTab:t})=>t(e))},this.handleScroll=()=>{let e=this.scrollerEl;e&&(this.updateScrollButtons(),this.dispatchCustomEventWithAlias(`scb-scroll`,{scrollLeft:e.scrollLeft}),this.isScrolling||(this.isScrolling=!0,this.dispatchCustomEventWithAlias(`scb-scroll-start`,{scrollLeft:e.scrollLeft})),clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=setTimeout(()=>{this.isScrolling=!1,this.dispatchCustomEventWithAlias(`scb-scroll-end`,{scrollLeft:e.scrollLeft})},120),e.scrollLeft>this.lastScrollLeft?this.dispatchCustomEventWithAlias(`scb-scroll-right`,{scrollLeft:e.scrollLeft}):e.scrollLeft<this.lastScrollLeft&&this.dispatchCustomEventWithAlias(`scb-scroll-left`,{scrollLeft:e.scrollLeft}),this.lastScrollLeft=e.scrollLeft)},this.handleWheel=e=>{let t=this.scrollerEl||this.shadowRoot?.querySelector(`.scb-horizontal-scroller`);if(!t||e.deltaY===0)return;let n=t.scrollLeft,r=n>0,i=n+t.clientWidth<t.scrollWidth-1;!r&&!i||(t.scrollLeft+=e.deltaY,t.scrollLeft!==n&&e.preventDefault())}}static{this.styles=p`
|
|
10937
|
+
`:S}w(),b(),P();var Hd;function Ud(){return Hd??=Promise.resolve().then(()=>(j(),nc)),Hd}var Wd=class extends C{constructor(...e){super(...e),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.snap=!1,this._canScrollLeft=!1,this._canScrollRight=!1,this.__scrollLeft=()=>{this.doScrollBy(-this.getScrollStep())},this.__scrollRight=()=>{this.doScrollBy(this.getScrollStep())},this.updateScrollButtons=()=>{let e=this.scrollerEl||this.shadowRoot?.querySelector(`.scb-horizontal-scroller`);if(!e){this._canScrollLeft=!1,this._canScrollRight=!1,this.toggleAttribute(`data-scroll-left`,!1),this.toggleAttribute(`data-scroll-right`,!1);return}let t=e.scrollLeft>0,n=e.scrollLeft+e.clientWidth<e.scrollWidth-1;this._canScrollLeft=t,this._canScrollRight=n,this.toggleAttribute(`data-scroll-left`,t),this.toggleAttribute(`data-scroll-right`,n)},this.lastScrollLeft=0,this.isScrolling=!1,this.scrollEndTimeout=null,this.scrollerEl=null,this.slotEl=null,this.sizeObserver=null,this.resizeRaf=null,this.__onFocusIn=()=>{Ud().then(({ensureFocusRingReady:e})=>e())},this.__onLazyFocusRingKeydown=e=>{!(e instanceof KeyboardEvent)||e.key!==`Tab`||Ud().then(({ensureFocusRingOnTab:t})=>t(e))},this.handleScroll=()=>{let e=this.scrollerEl;e&&(this.updateScrollButtons(),this.dispatchCustomEventWithAlias(`scb-scroll`,{scrollLeft:e.scrollLeft}),this.isScrolling||(this.isScrolling=!0,this.dispatchCustomEventWithAlias(`scb-scroll-start`,{scrollLeft:e.scrollLeft})),clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=setTimeout(()=>{this.isScrolling=!1,this.dispatchCustomEventWithAlias(`scb-scroll-end`,{scrollLeft:e.scrollLeft})},120),e.scrollLeft>this.lastScrollLeft?this.dispatchCustomEventWithAlias(`scb-scroll-right`,{scrollLeft:e.scrollLeft}):e.scrollLeft<this.lastScrollLeft&&this.dispatchCustomEventWithAlias(`scb-scroll-left`,{scrollLeft:e.scrollLeft}),this.lastScrollLeft=e.scrollLeft)},this.handleWheel=e=>{let t=this.scrollerEl||this.shadowRoot?.querySelector(`.scb-horizontal-scroller`);if(!t||e.deltaY===0)return;let n=t.scrollLeft,r=n>0,i=n+t.clientWidth<t.scrollWidth-1;!r&&!i||(t.scrollLeft+=e.deltaY,t.scrollLeft!==n&&e.preventDefault())}}static{this.styles=p`
|
|
10938
10938
|
/*
|
|
10939
10939
|
Designstyrning:
|
|
10940
10940
|
- Gap, fade, slot-padding och scrollbarens defaultvärden kommer från src/tokens/source/sizing.json.
|
|
@@ -10960,6 +10960,9 @@
|
|
|
10960
10960
|
width: 100%;
|
|
10961
10961
|
--scb-effect-mask-edge-fade-size: var(--scb-horizontal-scroller-edge-fade-size, var(--scale-12, 56px));
|
|
10962
10962
|
}
|
|
10963
|
+
:host([snap]) .scb-horizontal-scroller {
|
|
10964
|
+
scroll-snap-type: x mandatory;
|
|
10965
|
+
}
|
|
10963
10966
|
:host([data-scroll-left]:not([variant='inline'])) .scb-horizontal-scroller {
|
|
10964
10967
|
-webkit-mask-image: var(--scb-effect-mask-horizontal-start);
|
|
10965
10968
|
mask-image: var(--scb-effect-mask-horizontal-start);
|
|
@@ -11017,6 +11020,10 @@
|
|
|
11017
11020
|
display: flex;
|
|
11018
11021
|
gap: var(--scb-horizontal-scroller-internal-gap);
|
|
11019
11022
|
}
|
|
11023
|
+
:host([snap]) slot::slotted(*) {
|
|
11024
|
+
scroll-snap-align: start;
|
|
11025
|
+
scroll-snap-stop: always;
|
|
11026
|
+
}
|
|
11020
11027
|
.scroll-button-left {
|
|
11021
11028
|
left: 0px;
|
|
11022
11029
|
position: absolute;
|
|
@@ -11241,7 +11248,7 @@
|
|
|
11241
11248
|
${Vd(`chevron_right`,`scroll-control-icon`)}
|
|
11242
11249
|
</button>
|
|
11243
11250
|
`:``}
|
|
11244
|
-
`}}};N([_({type:String,reflect:!0})],Wd.prototype,`variant`,void 0),N([_({type:String,reflect:!0})],Wd.prototype,`width`,void 0),N([_({type:Boolean,reflect:!0,attribute:`show-scrollbar`})],Wd.prototype,`showScrollbar`,void 0),N([_({type:String,reflect:!0,attribute:`right-scroll-button-label`})],Wd.prototype,`rightScrollButtonLabel`,void 0),N([_({type:String,reflect:!0,attribute:`left-scroll-button-label`})],Wd.prototype,`leftScrollButtonLabel`,void 0),N([_({type:String,reflect:!0})],Wd.prototype,`spacing`,void 0),N([_({type:String,reflect:!0,attribute:`spacing-top`})],Wd.prototype,`spacingTop`,void 0),N([_({type:String,reflect:!0,attribute:`spacing-bottom`})],Wd.prototype,`spacingBottom`,void 0),N([_({type:String,reflect:!0,attribute:`spacing-left`})],Wd.prototype,`spacingLeft`,void 0),N([_({type:String,reflect:!0,attribute:`spacing-right`})],Wd.prototype,`spacingRight`,void 0),N([_({type:Boolean,reflect:!0,attribute:`content-flex`})],Wd.prototype,`contentFlex`,void 0),N([_({type:String,reflect:!0,attribute:`internal-gap`})],Wd.prototype,`internalGap`,void 0),N([v()],Wd.prototype,`_canScrollLeft`,void 0),N([v()],Wd.prototype,`_canScrollRight`,void 0),Wd=N([a(`scb-horizontal-scroller`)],Wd),w(),b(),Cl(),P();var Gd,Kd=class extends C{static{Gd=this}constructor(...e){super(...e),this.open=!1,this.variant=`scrim`,this.isStatic=!1,this.ariaLabel=``,this.__lastTriggerEl=null,this.#r=e=>{this.isStatic||this.#n(e)||this.#t()},this.#a=e=>{if(this.open){if(e.key===`Tab`){this.#o(e);return}e.key===`Escape`&&(this.#i(e)||(e.preventDefault(),e.stopPropagation(),this.#t()))}}}static{this.__instances=new Map}static{this.__docListenerAttached=!1}static __handleDocClick(e){let t=e.composedPath();for(let e of t){if(!(e instanceof Element))continue;let t=e.getAttribute(`data-overlay-open`),n=e.getAttribute(`data-overlay-close`),r=e.getAttribute(`data-overlay-toggle`),i=e.getAttribute(`aria-controls`),a=t||n||r||i;if(!a)continue;let o=Gd.__instances.get(a);if(!o){Gd.__instances.delete(a);continue}(!n||!o.contains(e))&&(o.__lastTriggerEl=e),t?o.#e(!0):n?o.#e(!1):o.#e(!o.open);break}}static __ensureDocListener(){Gd.__docListenerAttached||(document.addEventListener(`click`,Gd.__handleDocClick,!0),Gd.__docListenerAttached=!0)}static __maybeRemoveDocListener(){!Gd.__docListenerAttached||Gd.__instances.size>0||(document.removeEventListener(`click`,Gd.__handleDocClick,!0),Gd.__docListenerAttached=!1)}static{this.styles=p`
|
|
11251
|
+
`}}};N([_({type:String,reflect:!0})],Wd.prototype,`variant`,void 0),N([_({type:String,reflect:!0})],Wd.prototype,`width`,void 0),N([_({type:Boolean,reflect:!0,attribute:`show-scrollbar`})],Wd.prototype,`showScrollbar`,void 0),N([_({type:String,reflect:!0,attribute:`right-scroll-button-label`})],Wd.prototype,`rightScrollButtonLabel`,void 0),N([_({type:String,reflect:!0,attribute:`left-scroll-button-label`})],Wd.prototype,`leftScrollButtonLabel`,void 0),N([_({type:String,reflect:!0})],Wd.prototype,`spacing`,void 0),N([_({type:String,reflect:!0,attribute:`spacing-top`})],Wd.prototype,`spacingTop`,void 0),N([_({type:String,reflect:!0,attribute:`spacing-bottom`})],Wd.prototype,`spacingBottom`,void 0),N([_({type:String,reflect:!0,attribute:`spacing-left`})],Wd.prototype,`spacingLeft`,void 0),N([_({type:String,reflect:!0,attribute:`spacing-right`})],Wd.prototype,`spacingRight`,void 0),N([_({type:Boolean,reflect:!0,attribute:`content-flex`})],Wd.prototype,`contentFlex`,void 0),N([_({type:String,reflect:!0,attribute:`internal-gap`})],Wd.prototype,`internalGap`,void 0),N([_({type:Boolean,reflect:!0})],Wd.prototype,`snap`,void 0),N([v()],Wd.prototype,`_canScrollLeft`,void 0),N([v()],Wd.prototype,`_canScrollRight`,void 0),Wd=N([a(`scb-horizontal-scroller`)],Wd),w(),b(),Cl(),P();var Gd,Kd=class extends C{static{Gd=this}constructor(...e){super(...e),this.open=!1,this.variant=`scrim`,this.isStatic=!1,this.ariaLabel=``,this.__lastTriggerEl=null,this.#r=e=>{this.isStatic||this.#n(e)||this.#t()},this.#a=e=>{if(this.open){if(e.key===`Tab`){this.#o(e);return}e.key===`Escape`&&(this.#i(e)||(e.preventDefault(),e.stopPropagation(),this.#t()))}}}static{this.__instances=new Map}static{this.__docListenerAttached=!1}static __handleDocClick(e){let t=e.composedPath();for(let e of t){if(!(e instanceof Element))continue;let t=e.getAttribute(`data-overlay-open`),n=e.getAttribute(`data-overlay-close`),r=e.getAttribute(`data-overlay-toggle`),i=e.getAttribute(`aria-controls`),a=t||n||r||i;if(!a)continue;let o=Gd.__instances.get(a);if(!o){Gd.__instances.delete(a);continue}(!n||!o.contains(e))&&(o.__lastTriggerEl=e),t?o.#e(!0):n?o.#e(!1):o.#e(!o.open);break}}static __ensureDocListener(){Gd.__docListenerAttached||(document.addEventListener(`click`,Gd.__handleDocClick,!0),Gd.__docListenerAttached=!0)}static __maybeRemoveDocListener(){!Gd.__docListenerAttached||Gd.__instances.size>0||(document.removeEventListener(`click`,Gd.__handleDocClick,!0),Gd.__docListenerAttached=!1)}static{this.styles=p`
|
|
11245
11252
|
:host {
|
|
11246
11253
|
position: fixed;
|
|
11247
11254
|
inset: 0;
|
|
@@ -11436,7 +11443,7 @@
|
|
|
11436
11443
|
@scb-overlay-dismiss=${this.#g}
|
|
11437
11444
|
>
|
|
11438
11445
|
<div class="overlay-dialog">
|
|
11439
|
-
<scb-horizontal-scroller show-scrollbar class="overlay-carousel" variant="standard" width="100%" content-flex internal-gap="0">
|
|
11446
|
+
<scb-horizontal-scroller show-scrollbar snap class="overlay-carousel" variant="standard" width="100%" content-flex internal-gap="0">
|
|
11440
11447
|
${this.#m().map((e,t)=>x`
|
|
11441
11448
|
<div
|
|
11442
11449
|
class="overlay-slide ${t===0?`is-active`:``}"
|