scb-wc-test 0.1.138 → 0.1.140
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-calendar-card/scb-calendar-card.js +1 -1
- package/mvc/components/scb-card/scb-card.js +47 -49
- package/mvc/components/scb-horizontal-scroller/scb-horizontal-scroller.js +12 -11
- package/mvc/components/scb-keyfigure-card/scb-keyfigure-card.js +1 -1
- package/package.json +2 -2
- package/scb-calendar-card/scb-calendar-card.js +11 -11
- package/scb-card/scb-card.d.ts +1 -0
- package/scb-card/scb-card.js +202 -194
- package/scb-horizontal-scroller/scb-horizontal-scroller.d.ts +2 -0
- package/scb-horizontal-scroller/scb-horizontal-scroller.js +63 -55
- package/scb-keyfigure-card/scb-keyfigure-card.js +1 -1
- package/scb-wc-test.bundle.js +367 -368
|
@@ -25,7 +25,7 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as v,n as a,i as b,x
|
|
|
25
25
|
${this.supportingText?d`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
26
26
|
</div>
|
|
27
27
|
</div>
|
|
28
|
-
|
|
28
|
+
${this.cardHref?d`<md-focus-ring></md-focus-ring>`:""}
|
|
29
29
|
`}__applyInnerSizing(){const e=this.renderRoot.querySelector(".calendar-card");if(!e)return;this.width&&this.width.trim()!==""?(e.style.inlineSize="100%",e.style.maxInlineSize="100%"):(e.style.removeProperty("inline-size"),e.style.removeProperty("max-inline-size")),this.height&&this.height.trim()!==""||this.sizing==="stretch"?e.style.blockSize="100%":e.style.removeProperty("block-size"),this.maxHeight&&this.maxHeight.trim()!==""?e.style.maxBlockSize="100%":e.style.removeProperty("max-block-size")}_onKeyDown(e){(e.key==="Enter"||e.key===" ")&&this.cardHref&&(window.open(this.cardHref,"_self"),e.preventDefault())}_handleHrefNavigation(){this.cardHref&&(this.cardHrefNav==="tab"?window.open(this.cardHref,"_blank"):this.cardHrefNav==="window"?window.open(this.cardHref,"_blank","noopener,noreferrer,width=800,height=600"):window.open(this.cardHref,"_self"))}mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}updated(e){e.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),e.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),e.has("minWidth")&&(this.minWidth?this.style.minInlineSize=this.minWidth:this.style.removeProperty("min-inline-size")),e.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),e.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),e.has("minHeight")&&(this.minHeight?this.style.minBlockSize=this.minHeight:this.style.removeProperty("min-block-size")),(e.has("width")||e.has("height")||e.has("maxHeight")||e.has("sizing"))&&this.__applyInnerSizing(),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom"))&&f(this,p,h).call(this)}};p=new WeakSet;h=function(){const e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,s=this.mapSpacingToken(this.spacingBottom)??e;t?this.style.setProperty("--scb-calendar-card-spacing-block-start",t):this.style.removeProperty("--scb-calendar-card-spacing-block-start"),s?this.style.setProperty("--scb-calendar-card-spacing-block-end",s):this.style.removeProperty("--scb-calendar-card-spacing-block-end")};i.__iconLoaded=!1;i.__rippleLoaded=!1;i.styles=v`
|
|
30
30
|
:host {
|
|
31
31
|
display: block;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{_ as g}from"../../vendor/preload-helper.js";import{a as
|
|
2
|
+
import{_ as g}from"../../vendor/preload-helper.js";import{a as y,n,i as f,x as a,t as x}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../scb-link/scb-link.js";import"../scb-avatar/scb-avatar.js";import"../scb-list/scb-list-item.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(s,c,o){try{customElements.get(s)||t(s,c,o)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var $=Object.defineProperty,_=Object.getOwnPropertyDescriptor,v=i=>{throw TypeError(i)},r=(i,t,s,c)=>{for(var o=c>1?void 0:c?_(t,s):t,l=i.length-1,d;l>=0;l--)(d=i[l])&&(o=(c?d(t,s,o):d(o))||o);return c&&o&&$(t,s,o),o},z=(i,t,s)=>t.has(i)||v("Cannot "+s),w=(i,t,s)=>t.has(i)?v("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(i):t.set(i,s),b=(i,t,s)=>(z(i,t,"access private method"),s),m,u;let e=class extends f{constructor(){super(...arguments),w(this,m),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.mediaAlt="",this.mediaSrcset="",this.mediaSizes="",this.mediaLoading="auto",this.mediaDecoding="async",this.mediaFetchPriority="auto",this.mediaFit="cover",this.mediaPosition="center",this.mediaWidth="",this.mediaHeight="",this.mediaAspect="",this.mediaPlaceholder=!1,this.cardHref="",this.title="",this.subtitle="",this.supportingText="",this.commentsText="",this.comments=0,this.likesText="",this.likes=0,this.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.spacing="",this.spacingTop="",this.spacingBottom="",this.__onImgLoad=i=>{const t=i.currentTarget.closest(".media");t&&t.classList.add("is-loaded")},this.__onKeyDown=i=>{const t=(this.cardHref||"").trim();t&&(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),window.location.assign(t))},this.__handleHrefNavigation=i=>{const t=(this.cardHref||"").trim();!t||i.button!==0||i.metaKey||i.ctrlKey||i.altKey||i.shiftKey||i.target?.closest("a, button, input, select, textarea, summary")||window.location.assign(t)}}get __isLinkCard(){if(!(this.cardHref||"").trim())return!1;const t=(this.type||"").toLowerCase();return t==="standard"||t==="social"}__calcAspectWH(i){const t=(i||"").trim();if(!t)return{w:640,h:360};const s=t.includes("/")?t.split("/"):t.includes(":")?t.split(":"):t.includes("x")?t.split("x"):null;if(s&&s.length===2){const o=Number(s[0]),l=Number(s[1]);if(o>0&&l>0)return{w:o,h:l}}const c=Number(t);return isFinite(c)&&c>0?{w:1e3,h:Math.round(1e3/c)}:{w:640,h:360}}__mediaTemplate(){if((this.mediaType||"").toLowerCase()==="avatar")return a`
|
|
3
3
|
<div class="media">
|
|
4
4
|
<slot name="media">
|
|
5
5
|
<scb-avatar variant="icon" label="${this.title}" icon-name="person"></scb-avatar>
|
|
6
6
|
</slot>
|
|
7
7
|
</div>
|
|
8
|
-
`;if(this.mediaHref||this.mediaSrcset){let t=Number(this.mediaWidth)||0,
|
|
9
|
-
<div class="media ${
|
|
8
|
+
`;if(this.mediaHref||this.mediaSrcset){let t=Number(this.mediaWidth)||0,s=Number(this.mediaHeight)||0;const c=(this.mediaAspect||"").trim();if(!t||!s){const h=this.__calcAspectWH(c||"16/9");t||(t=h.w),s||(s=h.h)}const o=`aspect-ratio:${c||`${t}/${s}`};`,l=this.mediaPlaceholder?"has-ph":"",d=this.mediaFit||"cover",p=this.mediaPosition||"center";return a`
|
|
9
|
+
<div class="media ${l}" style="${o}">
|
|
10
10
|
<slot name="media-sources"></slot>
|
|
11
11
|
<img
|
|
12
12
|
src="${this.mediaHref||""}"
|
|
@@ -16,57 +16,55 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as f,n as r,i as y,x
|
|
|
16
16
|
loading="${this.mediaLoading}"
|
|
17
17
|
decoding="${this.mediaDecoding}"
|
|
18
18
|
fetchpriority="${this.mediaFetchPriority}"
|
|
19
|
-
style="object-fit:${
|
|
19
|
+
style="object-fit:${d};object-position:${p};"
|
|
20
20
|
width="${t}"
|
|
21
|
-
height="${
|
|
21
|
+
height="${s}"
|
|
22
22
|
@load=${this.__onImgLoad}
|
|
23
23
|
/>
|
|
24
24
|
</div>
|
|
25
|
-
`}return null}mapSpacingToken(i){if(!i)return;const t=String(i).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}render(){const i=this.variant?`${this.variant.toLowerCase()}`:"",t=this.type==="list"?"vertical":this.direction?this.direction.toLowerCase():"",
|
|
26
|
-
>${this.title}</a
|
|
27
|
-
><md-icon>arrow_forward</md-icon>`:s`<span class="title">${this.title}</span>`,d=()=>this.__mediaTemplate(),l=p=>s`
|
|
25
|
+
`}return null}mapSpacingToken(i){if(!i)return;const t=String(i).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}render(){const i=this.variant?`${this.variant.toLowerCase()}`:"",t=this.type==="list"?"vertical":this.direction?this.direction.toLowerCase():"",s=this.__isLinkCard,c=s?"clickable":"",o=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",l=(h=!1)=>h?a`<span class="title">${this.title}</span><md-icon>arrow_forward</md-icon>`:a`<span class="title">${this.title}</span>`,d=()=>this.__mediaTemplate(),p=h=>a`
|
|
28
26
|
<div
|
|
29
|
-
class="scb-card ${i} ${t} ${
|
|
30
|
-
@click=${
|
|
31
|
-
@keydown=${
|
|
32
|
-
style="cursor:${
|
|
33
|
-
role=${
|
|
34
|
-
tabindex=${
|
|
27
|
+
class="scb-card ${i} ${t} ${c}"
|
|
28
|
+
@click=${s?this.__handleHrefNavigation:null}
|
|
29
|
+
@keydown=${s?this.__onKeyDown:null}
|
|
30
|
+
style="cursor:${s?"pointer":"default"};"
|
|
31
|
+
role=${s?"link":"group"}
|
|
32
|
+
tabindex=${s?"0":void 0}
|
|
35
33
|
aria-label=${this.title||"Kort"}
|
|
36
34
|
>
|
|
37
|
-
${
|
|
35
|
+
${s?a`<md-ripple></md-ripple>`:""}
|
|
38
36
|
${d()}
|
|
39
|
-
${
|
|
37
|
+
${h}
|
|
40
38
|
</div>
|
|
41
|
-
|
|
42
|
-
`;switch(this.type){case"standard":return
|
|
39
|
+
${s?a`<md-focus-ring></md-focus-ring>`:""}
|
|
40
|
+
`;switch(this.type){case"standard":return p(a`
|
|
43
41
|
<div class="full-content">
|
|
44
42
|
<div class="top-content">
|
|
45
|
-
${this.title?
|
|
46
|
-
${this.subtitle?
|
|
47
|
-
${this.supportingText?
|
|
48
|
-
${o?
|
|
43
|
+
${this.title?a`<div class="header">${l(s)}</div>`:""}
|
|
44
|
+
${this.subtitle?a`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
45
|
+
${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
46
|
+
${o?a`<div class="date">${o}</div>`:""}
|
|
49
47
|
</div>
|
|
50
48
|
</div>
|
|
51
|
-
`);case"list":return
|
|
49
|
+
`);case"list":return p(a`
|
|
52
50
|
<div class="full-content">
|
|
53
51
|
<div class="top-content">
|
|
54
|
-
${this.title?
|
|
55
|
-
${this.subtitle?
|
|
56
|
-
${this.supportingText?
|
|
57
|
-
${o?
|
|
52
|
+
${this.title?a`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
53
|
+
${this.subtitle?a`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
54
|
+
${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
55
|
+
${o?a`<div class="date">${o}</div>`:""}
|
|
58
56
|
</div>
|
|
59
57
|
<div class="content list">
|
|
60
58
|
<slot></slot>
|
|
61
59
|
</div>
|
|
62
60
|
</div>
|
|
63
|
-
`);case"social":return
|
|
61
|
+
`);case"social":return p(a`
|
|
64
62
|
<div class="full-content">
|
|
65
63
|
<div class="top-content">
|
|
66
|
-
${this.title?
|
|
67
|
-
${this.subtitle?
|
|
68
|
-
${this.supportingText?
|
|
69
|
-
${o?
|
|
64
|
+
${this.title?a`<div class="header">${l(s)}</div>`:""}
|
|
65
|
+
${this.subtitle?a`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
66
|
+
${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
67
|
+
${o?a`<div class="date">${o}</div>`:""}
|
|
70
68
|
</div>
|
|
71
69
|
<div class="content">
|
|
72
70
|
<div class="social-metrics">
|
|
@@ -81,40 +79,40 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as f,n as r,i as y,x
|
|
|
81
79
|
</div>
|
|
82
80
|
</div>
|
|
83
81
|
</div>
|
|
84
|
-
`);case"link":return
|
|
82
|
+
`);case"link":return p(a`
|
|
85
83
|
<div class="full-content">
|
|
86
84
|
<div class="top-content">
|
|
87
|
-
${this.title?
|
|
88
|
-
${this.subtitle?
|
|
89
|
-
${this.supportingText?
|
|
90
|
-
${o?
|
|
85
|
+
${this.title?a`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
86
|
+
${this.subtitle?a`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
87
|
+
${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
88
|
+
${o?a`<div class="date">${o}</div>`:""}
|
|
91
89
|
</div>
|
|
92
90
|
<div class="content links">
|
|
93
91
|
<slot></slot>
|
|
94
92
|
</div>
|
|
95
93
|
</div>
|
|
96
|
-
`);case"action":return
|
|
94
|
+
`);case"action":return p(a`
|
|
97
95
|
<div class="full-content">
|
|
98
96
|
<div class="top-content">
|
|
99
|
-
${this.title?
|
|
100
|
-
${this.subtitle?
|
|
101
|
-
${this.supportingText?
|
|
102
|
-
${o?
|
|
97
|
+
${this.title?a`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
98
|
+
${this.subtitle?a`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
99
|
+
${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
100
|
+
${o?a`<div class="date">${o}</div>`:""}
|
|
103
101
|
</div>
|
|
104
102
|
<div class="content actions">
|
|
105
103
|
<slot></slot>
|
|
106
104
|
</div>
|
|
107
105
|
</div>
|
|
108
|
-
`);default:return
|
|
106
|
+
`);default:return p(a`
|
|
109
107
|
<div class="full-content">
|
|
110
108
|
<div class="top-content">
|
|
111
|
-
${this.title?
|
|
112
|
-
${this.subtitle?
|
|
113
|
-
${this.supportingText?
|
|
114
|
-
${o?
|
|
109
|
+
${this.title?a`<div class="header">${l(s)}</div>`:""}
|
|
110
|
+
${this.subtitle?a`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
111
|
+
${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
112
|
+
${o?a`<div class="date">${o}</div>`:""}
|
|
115
113
|
</div>
|
|
116
114
|
</div>
|
|
117
|
-
`)}}updated(i){super.updated(i),i.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),i.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),i.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),i.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),i.has("type")&&(this.type==="list"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")),this.style.setProperty("--scb-card-media-fit",this.mediaFit||"cover"),this.style.setProperty("--scb-card-media-position",this.mediaPosition||"center"),(i.has("spacing")||i.has("spacingTop")||i.has("spacingBottom"))&&b(this,
|
|
115
|
+
`)}}updated(i){super.updated(i),i.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),i.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),i.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),i.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),i.has("type")&&(this.type==="list"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")),this.style.setProperty("--scb-card-media-fit",this.mediaFit||"cover"),this.style.setProperty("--scb-card-media-position",this.mediaPosition||"center"),(i.has("spacing")||i.has("spacingTop")||i.has("spacingBottom"))&&b(this,m,u).call(this)}async firstUpdated(i){e.__iconLoaded||(await g(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),e.__iconLoaded=!0),e.__rippleLoaded||(await g(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),e.__rippleLoaded=!0),b(this,m,u).call(this)}};m=new WeakSet;u=function(){const i=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??i,s=this.mapSpacingToken(this.spacingBottom)??i;t?this.style.setProperty("--scb-card-spacing-block-start",t):this.style.removeProperty("--scb-card-spacing-block-start"),s?this.style.setProperty("--scb-card-spacing-block-end",s):this.style.removeProperty("--scb-card-spacing-block-end")};e.__iconLoaded=!1;e.__rippleLoaded=!1;e.styles=y`
|
|
118
116
|
:host {
|
|
119
117
|
display: block;
|
|
120
118
|
box-sizing: border-box;
|
|
@@ -419,4 +417,4 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as f,n as r,i as y,x
|
|
|
419
417
|
.scb-card.filled .content.list ::slotted(scb-list) {
|
|
420
418
|
--scb-list-bg: var(--md-sys-color-surface-dim);
|
|
421
419
|
}
|
|
422
|
-
`;
|
|
420
|
+
`;r([n({type:String,reflect:!0})],e.prototype,"type",2);r([n({type:String,reflect:!0})],e.prototype,"variant",2);r([n({type:String,reflect:!0})],e.prototype,"direction",2);r([n({type:String,attribute:"media-type"})],e.prototype,"mediaType",2);r([n({type:String,attribute:"media-href"})],e.prototype,"mediaHref",2);r([n({type:String,attribute:"media-alt"})],e.prototype,"mediaAlt",2);r([n({type:String,attribute:"media-srcset"})],e.prototype,"mediaSrcset",2);r([n({type:String,attribute:"media-sizes"})],e.prototype,"mediaSizes",2);r([n({type:String,attribute:"media-loading"})],e.prototype,"mediaLoading",2);r([n({type:String,attribute:"media-decoding"})],e.prototype,"mediaDecoding",2);r([n({type:String,attribute:"media-fetchpriority"})],e.prototype,"mediaFetchPriority",2);r([n({type:String,attribute:"media-fit"})],e.prototype,"mediaFit",2);r([n({type:String,attribute:"media-position"})],e.prototype,"mediaPosition",2);r([n({type:String,attribute:"media-width"})],e.prototype,"mediaWidth",2);r([n({type:String,attribute:"media-height"})],e.prototype,"mediaHeight",2);r([n({type:String,attribute:"media-aspect"})],e.prototype,"mediaAspect",2);r([n({type:Boolean,attribute:"media-placeholder"})],e.prototype,"mediaPlaceholder",2);r([n({type:String,attribute:"card-href",reflect:!0})],e.prototype,"cardHref",2);r([n({type:String,reflect:!0})],e.prototype,"title",2);r([n({type:String,reflect:!0})],e.prototype,"subtitle",2);r([n({type:String,attribute:"supporting-text",reflect:!0})],e.prototype,"supportingText",2);r([n({type:Date,reflect:!0})],e.prototype,"date",2);r([n({type:String,attribute:"social-comments-text",reflect:!0})],e.prototype,"commentsText",2);r([n({type:Number,attribute:"social-comments",reflect:!0})],e.prototype,"comments",2);r([n({type:String,attribute:"social-likes-text",reflect:!0})],e.prototype,"likesText",2);r([n({type:Number,attribute:"social-likes",reflect:!0})],e.prototype,"likes",2);r([n({type:String,reflect:!0})],e.prototype,"sizing",2);r([n({type:String,reflect:!0})],e.prototype,"width",2);r([n({type:String,reflect:!0,attribute:"max-width"})],e.prototype,"maxWidth",2);r([n({type:String,reflect:!0})],e.prototype,"height",2);r([n({type:String,reflect:!0,attribute:"max-height"})],e.prototype,"maxHeight",2);r([n({type:String,reflect:!0})],e.prototype,"spacing",2);r([n({type:String,attribute:"spacing-top",reflect:!0})],e.prototype,"spacingTop",2);r([n({type:String,attribute:"spacing-bottom",reflect:!0})],e.prototype,"spacingBottom",2);e=r([x("scb-card")],e);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as v,n,i as S,x as h,t as w}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 o=customElements.define.bind(customElements);customElements.define=function(l,e,s){try{customElements.get(l)||o(l,e,s)}catch(i){var r=String(i||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var y=Object.defineProperty,m=Object.getOwnPropertyDescriptor,g=t=>{throw TypeError(t)},a=(t,o,l,e)=>{for(var s=e>1?void 0:e?m(o,l):o,r=t.length-1,i;r>=0;r--)(i=t[r])&&(s=(e?i(o,l,s):i(s))||s);return e&&s&&y(o,l,s),s},x=(t,o,l)=>o.has(t)||g("Cannot "+l),L=(t,o,l)=>o.has(t)?g("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(t):o.set(t,l),p=(t,o,l)=>(x(t,o,"access private method"),l),d,b,f;let c=class extends S{constructor(){super(...arguments),L(this,d),this.variant="standard",this.width="100%",this.showScrollbar=!1,this.rightScrollButtonLabel="Scrolla höger",this.leftScrollButtonLabel="Scrolla vänster",this.spacing="",this.spacingTop="",this.spacingBottom="",this.contentFlex=!1,this.internalGap="",this.updateScrollButtons=()=>{this.requestUpdate();const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!t)return;t.scrollLeft>0?this.setAttribute("data-scroll-left",""):this.removeAttribute("data-scroll-left");const o=t;o.scrollLeft+o.clientWidth<o.scrollWidth-1?this.setAttribute("data-scroll-right",""):this.removeAttribute("data-scroll-right")},this.lastScrollLeft=0,this.isScrolling=!1,this.scrollEndTimeout=null,this.handleScroll=()=>{const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");t&&(this.updateScrollButtons(),this.dispatchCustomEvent("scb-scroll",{scrollLeft:t.scrollLeft}),this.isScrolling||(this.isScrolling=!0,this.dispatchCustomEvent("scb-scroll-start",{scrollLeft:t.scrollLeft})),clearTimeout(this.scrollEndTimeout),this.scrollEndTimeout=setTimeout(()=>{this.isScrolling=!1,this.dispatchCustomEvent("scb-scroll-end",{scrollLeft:t.scrollLeft})},120),t.scrollLeft>this.lastScrollLeft?this.dispatchCustomEvent("scb-scroll-right",{scrollLeft:t.scrollLeft}):t.scrollLeft<this.lastScrollLeft&&this.dispatchCustomEvent("scb-scroll-left",{scrollLeft:t.scrollLeft}),this.lastScrollLeft=t.scrollLeft)}}doScrollBy(t){const o=this.shadowRoot?.querySelector(".scb-horizontal-scroller");o&&o.scrollBy({left:t,behavior:"smooth"})}get canScrollLeft(){const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");return t?t.scrollLeft>0:!1}get canScrollRight(){const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(!t)return!1;const o=t;return o.scrollLeft+o.clientWidth<o.scrollWidth-1}connectedCallback(){super.connectedCallback(),this.addEventListener("scroll",this.updateScrollButtons,!0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("scroll",this.updateScrollButtons,!0)}dispatchCustomEvent(t,o={}){this.dispatchEvent(new CustomEvent(t,{detail:o,bubbles:!0,composed:!0}))}firstUpdated(){const t=this.shadowRoot?.querySelector(".scb-horizontal-scroller"),o=this.shadowRoot?.querySelector(".scroll-shadow-left"),l=this.shadowRoot?.querySelector(".scroll-shadow-right"),e=this.shadowRoot?.querySelector("slot");t&&(t.addEventListener("scroll",this.handleScroll),t.addEventListener("wheel",function(r){r.deltaY!==0&&(r.preventDefault(),t.scrollLeft+=r.deltaY)},{passive:!1}));const s=()=>{if(e&&o&&l){const r=e.getBoundingClientRect();o.style.height=`${r.height}px`,l.style.height=`${r.height}px`}};s(),e&&new ResizeObserver(s).observe(e),this.updateComplete.then(()=>{this.updateScrollButtons()}),p(this,d,b).call(this),p(this,d,f).call(this)}updated(t){const o=this.shadowRoot?.querySelector(".scroll-shadow-left"),l=this.shadowRoot?.querySelector(".scroll-shadow-right"),e=this.shadowRoot?.querySelector("slot"),s=this.shadowRoot?.querySelector(".scb-horizontal-scroller");if(s){s.addEventListener("scroll",this.handleScroll),s.addEventListener("wheel",function(u){u.deltaY!==0&&(u.preventDefault(),s.scrollLeft+=u.deltaY)},{passive:!1}),s.scrollLeft>0?this.setAttribute("data-scroll-left",""):this.removeAttribute("data-scroll-left");const i=s;i.scrollLeft+i.clientWidth<i.scrollWidth-1?this.setAttribute("data-scroll-right",""):this.removeAttribute("data-scroll-right")}t.has("width")&&this.style.setProperty("--scb-horizontal-scroller-width",this.width);const r=()=>{if(e&&o&&l){const i=e.getBoundingClientRect();o.style.height=`${i.height}px`,l.style.height=`${i.height}px`}};r(),e&&new ResizeObserver(r).observe(e),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&p(this,d,b).call(this),(t.has("internalGap")||t.has("contentFlex"))&&p(this,d,f).call(this)}mapSpacingToken(t){if(!t)return;const o=String(t).trim();if(o)return/^\d+$/.test(o)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(o,10)))})`:o}render(){const t=this.variant,o=!!(this.canScrollLeft||this.canScrollRight);switch(t){case"inline":return h`
|
|
2
2
|
<div class="scb-horizontal-scroller ${o?"canScroll":""}" tabindex="0">
|
|
3
|
-
${this.variant!="inline"?
|
|
3
|
+
${this.variant!="inline"?h`<div class="scroll-shadow-left"></div>`:""}
|
|
4
4
|
<slot></slot>
|
|
5
5
|
<md-focus-ring inward></md-focus-ring>
|
|
6
|
-
${this.variant!="inline"?
|
|
6
|
+
${this.variant!="inline"?h`<div class="scroll-shadow-right"></div>`:""}
|
|
7
7
|
</div>
|
|
8
|
-
${o?
|
|
8
|
+
${o?h`
|
|
9
9
|
<div class="scroll-buttons">
|
|
10
|
-
${this.canScrollLeft?
|
|
10
|
+
${this.canScrollLeft?h`
|
|
11
11
|
<scb-button
|
|
12
12
|
class="scroll-button-left"
|
|
13
13
|
variant="text"
|
|
@@ -18,7 +18,7 @@ import{a as g,n as h,i as v,x as n,t as S}from"../../vendor/vendor.js";import"..
|
|
|
18
18
|
></scb-button>
|
|
19
19
|
`:""}
|
|
20
20
|
|
|
21
|
-
${this.canScrollRight?
|
|
21
|
+
${this.canScrollRight?h`
|
|
22
22
|
<scb-button
|
|
23
23
|
class="scroll-button-right"
|
|
24
24
|
variant="text"
|
|
@@ -31,8 +31,8 @@ import{a as g,n as h,i as v,x as n,t as S}from"../../vendor/vendor.js";import"..
|
|
|
31
31
|
`:""}
|
|
32
32
|
</div>
|
|
33
33
|
`:""}
|
|
34
|
-
`;default:return
|
|
35
|
-
${this.canScrollLeft?
|
|
34
|
+
`;default:return h`
|
|
35
|
+
${this.canScrollLeft?h`
|
|
36
36
|
<scb-icon-button
|
|
37
37
|
class="scroll-button-left"
|
|
38
38
|
icon="chevron_left"
|
|
@@ -47,7 +47,7 @@ import{a as g,n as h,i as v,x as n,t as S}from"../../vendor/vendor.js";import"..
|
|
|
47
47
|
<md-focus-ring inward></md-focus-ring>
|
|
48
48
|
</div>
|
|
49
49
|
<div class="scroll-shadow-right"></div>
|
|
50
|
-
${this.canScrollRight?
|
|
50
|
+
${this.canScrollRight?h`
|
|
51
51
|
<scb-icon-button
|
|
52
52
|
class="scroll-button-right"
|
|
53
53
|
icon="chevron_right"
|
|
@@ -56,7 +56,7 @@ import{a as g,n as h,i as v,x as n,t as S}from"../../vendor/vendor.js";import"..
|
|
|
56
56
|
@click="${()=>this.doScrollBy(100)}"
|
|
57
57
|
></scb-icon-button>
|
|
58
58
|
`:""}
|
|
59
|
-
`}}};d=new WeakSet;b=function(){const t=this.mapSpacingToken(this.spacing),o=this.mapSpacingToken(this.spacingTop),l=this.mapSpacingToken(this.spacingBottom),e=o??t,s=l??t;e?this.style.setProperty("--scb-horizontal-scroller-spacing-block-start",e):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-start"),s?this.style.setProperty("--scb-horizontal-scroller-spacing-block-end",s):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-end")};c.styles=
|
|
59
|
+
`}}};d=new WeakSet;b=function(){const t=this.mapSpacingToken(this.spacing),o=this.mapSpacingToken(this.spacingTop),l=this.mapSpacingToken(this.spacingBottom),e=o??t,s=l??t;e?this.style.setProperty("--scb-horizontal-scroller-spacing-block-start",e):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-start"),s?this.style.setProperty("--scb-horizontal-scroller-spacing-block-end",s):this.style.removeProperty("--scb-horizontal-scroller-spacing-block-end")};f=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")};c.styles=v`
|
|
60
60
|
:host {
|
|
61
61
|
display: flex;
|
|
62
62
|
position: relative;
|
|
@@ -115,6 +115,7 @@ import{a as g,n as h,i as v,x as n,t as S}from"../../vendor/vendor.js";import"..
|
|
|
115
115
|
}
|
|
116
116
|
:host([content-flex]) .scb-horizontal-scroller slot {
|
|
117
117
|
display: flex;
|
|
118
|
+
gap: var(--scb-horizontal-scroller-internal-gap);
|
|
118
119
|
}
|
|
119
120
|
.scroll-button-left {
|
|
120
121
|
left: 0px;
|
|
@@ -189,4 +190,4 @@ import{a as g,n as h,i as v,x as n,t as S}from"../../vendor/vendor.js";import"..
|
|
|
189
190
|
:host([variant='inline'][show-scrollbar]) {
|
|
190
191
|
gap: var(--spacing-5);
|
|
191
192
|
}
|
|
192
|
-
`;a([
|
|
193
|
+
`;a([n({type:String,reflect:!0})],c.prototype,"variant",2);a([n({type:String,reflect:!0})],c.prototype,"width",2);a([n({type:Boolean,reflect:!0,attribute:"show-scrollbar"})],c.prototype,"showScrollbar",2);a([n({type:String,reflect:!0,attribute:"right-scroll-button-label"})],c.prototype,"rightScrollButtonLabel",2);a([n({type:String,reflect:!0,attribute:"left-scroll-button-label"})],c.prototype,"leftScrollButtonLabel",2);a([n({type:String,reflect:!0})],c.prototype,"spacing",2);a([n({type:String,reflect:!0,attribute:"spacing-top"})],c.prototype,"spacingTop",2);a([n({type:String,reflect:!0,attribute:"spacing-bottom"})],c.prototype,"spacingBottom",2);a([n({type:Boolean,reflect:!0,attribute:"content-flex"})],c.prototype,"contentFlex",2);a([n({type:String,reflect:!0,attribute:"internal-gap"})],c.prototype,"internalGap",2);c=a([w("scb-horizontal-scroller")],c);
|
|
@@ -30,7 +30,7 @@ import{_ as u}from"../../vendor/preload-helper.js";import{a as f,n as a,i as m,x
|
|
|
30
30
|
${this.supportingText?l`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
31
31
|
</div>
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
${e?l`<md-focus-ring></md-focus-ring>`:""}
|
|
34
34
|
`}__applyInnerSizing(){const e=this.renderRoot.querySelector(".scb-keyfigure-card");if(!e)return;this.width&&this.width.trim()!==""?(e.style.inlineSize="100%",e.style.maxInlineSize="100%"):(e.style.removeProperty("inline-size"),e.style.removeProperty("max-inline-size")),this.height&&this.height.trim()!==""||this.sizing==="stretch"?e.style.blockSize="100%":e.style.removeProperty("block-size"),this.maxHeight&&this.maxHeight.trim()!==""?e.style.maxBlockSize="100%":e.style.removeProperty("max-block-size")}updated(e){super.updated(e),e.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),e.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),e.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),e.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),(e.has("width")||e.has("height")||e.has("maxHeight")||e.has("sizing"))&&this.__applyInnerSizing(),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom"))&&g(this,h,d).call(this)}mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}};h=new WeakSet;d=function(){const e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop),r=this.mapSpacingToken(this.spacingBottom),n=t??e,o=r??e;n?this.style.setProperty("--scb-keyfigure-card-spacing-block-start",n):this.style.removeProperty("--scb-keyfigure-card-spacing-block-start"),o?this.style.setProperty("--scb-keyfigure-card-spacing-block-end",o):this.style.removeProperty("--scb-keyfigure-card-spacing-block-end")};i.__iconLoaded=!1;i.__rippleLoaded=!1;i.styles=f`
|
|
35
35
|
:host {
|
|
36
36
|
display: block;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.140",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -365,5 +365,5 @@
|
|
|
365
365
|
},
|
|
366
366
|
"./mvc/*": "./mvc/*"
|
|
367
367
|
},
|
|
368
|
-
"buildHash": "
|
|
368
|
+
"buildHash": "741910E282E5DBDA960C5CC73B40EB7DABDA67533A74320D988DB00B237EB9FF"
|
|
369
369
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { css as u, LitElement as v, html as
|
|
1
|
+
import { css as u, LitElement as v, html as l } from "lit";
|
|
2
2
|
import { property as a, customElement as b } from "lit/decorators.js";
|
|
3
3
|
import "@material/web/focus/md-focus-ring.js";
|
|
4
4
|
var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, f = (e) => {
|
|
5
5
|
throw TypeError(e);
|
|
6
6
|
}, r = (e, t, s, o) => {
|
|
7
|
-
for (var n = o > 1 ? void 0 : o ? w(t, s) : t,
|
|
8
|
-
(
|
|
7
|
+
for (var n = o > 1 ? void 0 : o ? w(t, s) : t, c = e.length - 1, d; c >= 0; c--)
|
|
8
|
+
(d = e[c]) && (n = (o ? d(t, s, n) : d(n)) || n);
|
|
9
9
|
return o && n && x(t, s, n), n;
|
|
10
10
|
}, z = (e, t, s) => t.has(e) || f("Cannot " + s), k = (e, t, s) => t.has(e) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), g = (e, t, s) => (z(e, t, "access private method"), s), p, h;
|
|
11
11
|
let i = class extends v {
|
|
@@ -16,8 +16,8 @@ let i = class extends v {
|
|
|
16
16
|
i.__iconLoaded || (await import("@material/web/icon/icon.js"), i.__iconLoaded = !0), i.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), i.__rippleLoaded = !0), this.__applyInnerSizing(), g(this, p, h).call(this);
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
const e = this.variant ? `${this.variant.toLowerCase()}` : "", t = this.direction ? `${this.direction.toLowerCase()}` : "", s = this.cardHref ? "clickable" : "", o = 1, n = "Jan",
|
|
20
|
-
return
|
|
19
|
+
const e = this.variant ? `${this.variant.toLowerCase()}` : "", t = this.direction ? `${this.direction.toLowerCase()}` : "", s = this.cardHref ? "clickable" : "", o = 1, n = "Jan", c = this.mediaWidth && this.mediaWidth.trim() !== "" ? this.mediaWidth : "", d = this.mediaHeight && this.mediaHeight.trim() !== "" ? this.mediaHeight : "", m = this.mediaAspect && this.mediaAspect.trim() !== "" ? this.mediaAspect : "", y = `${c ? `inline-size:${c};` : ""}${d ? `block-size:${d};` : ""}${m ? `aspect-ratio:${m};` : ""}`;
|
|
20
|
+
return l`
|
|
21
21
|
<div
|
|
22
22
|
class="calendar-card ${t} ${s} ${e}"
|
|
23
23
|
role="${this.cardHref ? "link" : "group"}"
|
|
@@ -27,8 +27,8 @@ let i = class extends v {
|
|
|
27
27
|
@keydown=${this.cardHref ? this._onKeyDown : null}
|
|
28
28
|
style="cursor: ${this.cardHref ? "pointer" : "default"};"
|
|
29
29
|
>
|
|
30
|
-
${this.cardHref ?
|
|
31
|
-
${this.showMedia ?
|
|
30
|
+
${this.cardHref ? l`<md-ripple></md-ripple>` : ""}
|
|
31
|
+
${this.showMedia ? l`
|
|
32
32
|
<div class="media" style="${y}" aria-label="Datum: ${o} ${n}">
|
|
33
33
|
<div class="day">${o}</div>
|
|
34
34
|
<div class="month">${n}</div>
|
|
@@ -37,13 +37,13 @@ let i = class extends v {
|
|
|
37
37
|
<div class="container">
|
|
38
38
|
<div class="header-container">
|
|
39
39
|
<div class="header">${this.title}</div>
|
|
40
|
-
${this.cardHref ?
|
|
40
|
+
${this.cardHref ? l`<md-icon>arrow_forward</md-icon>` : ""}
|
|
41
41
|
</div>
|
|
42
|
-
${this.subtitle ?
|
|
43
|
-
${this.supportingText ?
|
|
42
|
+
${this.subtitle ? l`<div class="subtitle">${this.subtitle}</div>` : ""}
|
|
43
|
+
${this.supportingText ? l`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
44
44
|
</div>
|
|
45
45
|
</div>
|
|
46
|
-
|
|
46
|
+
${this.cardHref ? l`<md-focus-ring></md-focus-ring>` : ""}
|
|
47
47
|
`;
|
|
48
48
|
}
|
|
49
49
|
__applyInnerSizing() {
|