scb-wc-test 0.1.27 → 0.1.29
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 +6 -4
- package/mvc/components/scb-card/scb-card.js +24 -22
- package/mvc/components/scb-keyfigure-card/scb-keyfigure-card.js +3 -2
- package/package.json +2 -2
- package/scb-calendar-card/scb-calendar-card.js +8 -6
- package/scb-card/scb-card.d.ts +1 -0
- package/scb-card/scb-card.js +63 -51
- package/scb-keyfigure-card/scb-keyfigure-card.js +1 -0
- package/scb-wc-test.bundle.js +22 -17
|
@@ -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 h}from"../../vendor/preload-helper.js";import{a as p,n as r,i as
|
|
2
|
+
import{_ as h}from"../../vendor/preload-helper.js";import{a as p,n as r,i as m,x as c,t as g}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(n,o,a){try{customElements.get(n)||s(n,o,a)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var f=Object.defineProperty,u=Object.getOwnPropertyDescriptor,t=(i,s,n,o)=>{for(var a=o>1?void 0:o?u(s,n):s,l=i.length-1,d;l>=0;l--)(d=i[l])&&(a=(o?d(s,n,a):d(a))||a);return o&&a&&f(s,n,a),a};let e=class extends m{constructor(){super(...arguments),this.variant="default",this.direction="horizontal",this.title="",this.subtitle="",this.supportingText="",this.cardHref="",this.cardHrefNav="",this.showMedia=null,this.width="",this.maxWidth="",this.minWidth="",this.height="",this.maxHeight="",this.minHeight="",this.sizing="stretch"}async firstUpdated(){e.__iconLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(i=>i.i),__vite__mapDeps([0,1]),import.meta.url),e.__iconLoaded=!0),e.__rippleLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(i=>i.r),__vite__mapDeps([0,1]),import.meta.url),e.__rippleLoaded=!0),this.__applyInnerSizing()}render(){const i=this.variant?`${this.variant.toLowerCase()}`:"",s=this.direction?`${this.direction.toLowerCase()}`:"",n=this.cardHref?"clickable":"",o=1,a="Jan";return c`
|
|
3
3
|
<div
|
|
4
4
|
class="calendar-card ${s} ${n} ${i}"
|
|
5
5
|
role="${this.cardHref?"link":"group"}"
|
|
6
6
|
aria-label="${this.title||"Kalenderkort"}"
|
|
7
7
|
tabindex="${this.cardHref?"0":"-1"}"
|
|
8
|
-
@click
|
|
9
|
-
@keydown
|
|
8
|
+
@click=${this.cardHref?this._handleHrefNavigation:null}
|
|
9
|
+
@keydown=${this.cardHref?this._onKeyDown:null}
|
|
10
10
|
style="cursor: ${this.cardHref?"pointer":"default"};"
|
|
11
11
|
>
|
|
12
12
|
${this.cardHref?c`<md-ripple></md-ripple>`:""}
|
|
@@ -141,6 +141,7 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as p,n as r,i as g,x
|
|
|
141
141
|
font-weight: var(--weight-bold, 700);
|
|
142
142
|
line-height: 100%;
|
|
143
143
|
letter-spacing: -0.6px;
|
|
144
|
+
font-variant-numeric: tabular-nums;
|
|
144
145
|
}
|
|
145
146
|
|
|
146
147
|
.media .month {
|
|
@@ -222,5 +223,6 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as p,n as r,i as g,x
|
|
|
222
223
|
|
|
223
224
|
overflow: visible;
|
|
224
225
|
text-overflow: clip;
|
|
226
|
+
font-variant-numeric: tabular-nums;
|
|
225
227
|
}
|
|
226
|
-
`;t([r({type:String,reflect:!0})],e.prototype,"variant",2);t([r({type:String,reflect:!0})],e.prototype,"direction",2);t([r({type:String})],e.prototype,"title",2);t([r({type:String})],e.prototype,"subtitle",2);t([r({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);t([r({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);t([r({type:String,attribute:"card-href-nav"})],e.prototype,"cardHrefNav",2);t([r({type:Boolean,reflect:!0,attribute:"show-media"})],e.prototype,"showMedia",2);t([r({type:String})],e.prototype,"width",2);t([r({type:String,attribute:"max-width"})],e.prototype,"maxWidth",2);t([r({type:String,attribute:"min-width"})],e.prototype,"minWidth",2);t([r({type:String})],e.prototype,"height",2);t([r({type:String,attribute:"max-height"})],e.prototype,"maxHeight",2);t([r({type:String,attribute:"min-height"})],e.prototype,"minHeight",2);t([r({type:String,reflect:!0})],e.prototype,"sizing",2);e=t([
|
|
228
|
+
`;t([r({type:String,reflect:!0})],e.prototype,"variant",2);t([r({type:String,reflect:!0})],e.prototype,"direction",2);t([r({type:String})],e.prototype,"title",2);t([r({type:String})],e.prototype,"subtitle",2);t([r({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);t([r({type:String,attribute:"card-href"})],e.prototype,"cardHref",2);t([r({type:String,attribute:"card-href-nav"})],e.prototype,"cardHrefNav",2);t([r({type:Boolean,reflect:!0,attribute:"show-media"})],e.prototype,"showMedia",2);t([r({type:String})],e.prototype,"width",2);t([r({type:String,attribute:"max-width"})],e.prototype,"maxWidth",2);t([r({type:String,attribute:"min-width"})],e.prototype,"minWidth",2);t([r({type:String})],e.prototype,"height",2);t([r({type:String,attribute:"max-height"})],e.prototype,"maxHeight",2);t([r({type:String,attribute:"min-height"})],e.prototype,"minHeight",2);t([r({type:String,reflect:!0})],e.prototype,"sizing",2);e=t([g("scb-calendar-card")],e);
|
|
@@ -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 m}from"../../vendor/preload-helper.js";import{a as
|
|
2
|
+
import{_ as m}from"../../vendor/preload-helper.js";import{a as b,n as s,i as u,x as i,t as v}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 a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(n,r,l){try{customElements.get(n)||o(n,r,l)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,e=(a,o,n,r)=>{for(var l=r>1?void 0:r?f(o,n):o,c=a.length-1,d;c>=0;c--)(d=a[c])&&(l=(r?d(o,n,l):d(l))||l);return r&&l&&g(o,n,l),l};let t=class extends u{constructor(){super(...arguments),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.subLabel="",this.supportingText="",this.commentsText="",this.comments=0,this.likesText="",this.likes=0,this.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.__onImgLoad=a=>{const o=a.currentTarget.closest(".media");o&&o.classList.add("is-loaded")},this.__onKeyDown=a=>{(a.key==="Enter"||a.key===" ")&&this.cardHref&&(a.preventDefault(),window.open(this.cardHref,"_self"))},this.__handleHrefNavigation=a=>{this.cardHref&&(a.target.closest("a")||window.open(this.cardHref,"_self"))}}__calcAspectWH(a){const o=(a||"").trim();if(!o)return{w:640,h:360};const n=o.includes("/")?o.split("/"):o.includes(":")?o.split(":"):o.includes("x")?o.split("x"):null;if(n&&n.length===2){const l=Number(n[0]),c=Number(n[1]);if(l>0&&c>0)return{w:l,h:c}}const r=Number(o);return isFinite(r)&&r>0?{w:1e3,h:Math.round(1e3/r)}:{w:640,h:360}}__mediaTemplate(){if((this.mediaType||"").toLowerCase()==="avatar")return i`
|
|
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){
|
|
9
|
-
<div class="media ${
|
|
8
|
+
`;if(this.mediaHref||this.mediaSrcset){let o=Number(this.mediaWidth)||0,n=Number(this.mediaHeight)||0;const r=(this.mediaAspect||"").trim();if(!o||!n){const h=this.__calcAspectWH(r||"16/9");o||(o=h.w),n||(n=h.h)}const l=`aspect-ratio:${r||`${o}/${n}`};`,c=this.mediaPlaceholder?"has-ph":"",d=this.mediaFit||"cover",p=this.mediaPosition||"center";return i`
|
|
9
|
+
<div class="media ${c}" style="${l}">
|
|
10
10
|
<!-- Tillåt egna <source>-element via slot om man vill använda <picture> -->
|
|
11
11
|
<slot name="media-sources"></slot>
|
|
12
12
|
<img
|
|
@@ -17,35 +17,37 @@ import{_ as m}from"../../vendor/preload-helper.js";import{a as v,n as s,i as u,x
|
|
|
17
17
|
loading="${this.mediaLoading}"
|
|
18
18
|
decoding="${this.mediaDecoding}"
|
|
19
19
|
fetchpriority="${this.mediaFetchPriority}"
|
|
20
|
-
style="object-fit:${
|
|
21
|
-
width="${
|
|
22
|
-
height="${
|
|
20
|
+
style="object-fit:${d};object-position:${p};"
|
|
21
|
+
width="${o}"
|
|
22
|
+
height="${n}"
|
|
23
23
|
@load=${this.__onImgLoad}
|
|
24
24
|
/>
|
|
25
25
|
</div>
|
|
26
|
-
`}return null}render(){const a=this.variant?`${this.variant.toLowerCase()}`:"",
|
|
26
|
+
`}return null}render(){const a=this.variant?`${this.variant.toLowerCase()}`:"",o=this.type==="list"?"vertical":this.direction?this.direction.toLowerCase():"",n=this.cardHref?"clickable":"",r=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",l=(p=!1)=>p?i`<a class="title" href="${this.cardHref}" tabindex="0">${this.title}</a><md-icon>arrow_forward</md-icon>`:i`<span class="title">${this.title}</span>`,c=()=>this.__mediaTemplate(),d=p=>i`
|
|
27
27
|
<div
|
|
28
|
-
class="scb-card ${a} ${
|
|
28
|
+
class="scb-card ${a} ${o} ${n}"
|
|
29
29
|
@click=${this.cardHref?this.__handleHrefNavigation:null}
|
|
30
30
|
@keydown=${this.cardHref?this.__onKeyDown:null}
|
|
31
31
|
style="cursor:${this.cardHref?"pointer":"default"};"
|
|
32
|
-
|
|
32
|
+
role=${this.cardHref?"link":"group"}
|
|
33
|
+
tabindex=${this.cardHref?"0":"-1"}
|
|
34
|
+
aria-label=${this.title||"Kort"}
|
|
33
35
|
>
|
|
34
36
|
${this.cardHref?i`<md-ripple></md-ripple>`:""}
|
|
35
|
-
${
|
|
36
|
-
${
|
|
37
|
+
${c()}
|
|
38
|
+
${p}
|
|
37
39
|
</div>
|
|
38
40
|
<md-focus-ring></md-focus-ring>
|
|
39
|
-
`;switch(this.type){case"standard":return
|
|
41
|
+
`;switch(this.type){case"standard":return d(i`
|
|
40
42
|
<div class="full-content">
|
|
41
43
|
<div class="top-content">
|
|
42
|
-
${this.title?i`<div class="header">${
|
|
44
|
+
${this.title?i`<div class="header">${l(!!this.cardHref)}</div>`:""}
|
|
43
45
|
${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
|
|
44
46
|
${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
45
47
|
${r?i`<div class="date">${r}</div>`:""}
|
|
46
48
|
</div>
|
|
47
49
|
</div>
|
|
48
|
-
`);case"list":return
|
|
50
|
+
`);case"list":return d(i`
|
|
49
51
|
<div class="full-content">
|
|
50
52
|
<div class="top-content">
|
|
51
53
|
${this.title?i`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
@@ -57,10 +59,10 @@ import{_ as m}from"../../vendor/preload-helper.js";import{a as v,n as s,i as u,x
|
|
|
57
59
|
<slot></slot>
|
|
58
60
|
</div>
|
|
59
61
|
</div>
|
|
60
|
-
`);case"social":return
|
|
62
|
+
`);case"social":return d(i`
|
|
61
63
|
<div class="full-content">
|
|
62
64
|
<div class="top-content">
|
|
63
|
-
${this.title?i`<div class="header">${
|
|
65
|
+
${this.title?i`<div class="header">${l(!!this.cardHref)}</div>`:""}
|
|
64
66
|
${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
|
|
65
67
|
${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
66
68
|
${r?i`<div class="date">${r}</div>`:""}
|
|
@@ -72,7 +74,7 @@ import{_ as m}from"../../vendor/preload-helper.js";import{a as v,n as s,i as u,x
|
|
|
72
74
|
</div>
|
|
73
75
|
</div>
|
|
74
76
|
</div>
|
|
75
|
-
`);case"link":return
|
|
77
|
+
`);case"link":return d(i`
|
|
76
78
|
<div class="full-content">
|
|
77
79
|
<div class="top-content">
|
|
78
80
|
${this.title?i`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
@@ -84,7 +86,7 @@ import{_ as m}from"../../vendor/preload-helper.js";import{a as v,n as s,i as u,x
|
|
|
84
86
|
<slot></slot>
|
|
85
87
|
</div>
|
|
86
88
|
</div>
|
|
87
|
-
`);case"action":return
|
|
89
|
+
`);case"action":return d(i`
|
|
88
90
|
<div class="full-content">
|
|
89
91
|
<div class="top-content">
|
|
90
92
|
${this.title?i`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
@@ -96,16 +98,16 @@ import{_ as m}from"../../vendor/preload-helper.js";import{a as v,n as s,i as u,x
|
|
|
96
98
|
<slot></slot>
|
|
97
99
|
</div>
|
|
98
100
|
</div>
|
|
99
|
-
`);default:return
|
|
101
|
+
`);default:return d(i`
|
|
100
102
|
<div class="full-content">
|
|
101
103
|
<div class="top-content">
|
|
102
|
-
${this.title?i`<div class="header">${
|
|
104
|
+
${this.title?i`<div class="header">${l(!!this.cardHref)}</div>`:""}
|
|
103
105
|
${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
|
|
104
106
|
${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
105
107
|
${r?i`<div class="date">${r}</div>`:""}
|
|
106
108
|
</div>
|
|
107
109
|
</div>
|
|
108
|
-
`)}}updated(a){super.updated(a),a.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),a.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),a.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),a.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),a.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")}async firstUpdated(){t.__iconLoaded||(await m(()=>import("../../vendor/vendor-material.js").then(a=>a.i),__vite__mapDeps([0,1]),import.meta.url),t.__iconLoaded=!0),t.__rippleLoaded||(await m(()=>import("../../vendor/vendor-material.js").then(a=>a.r),__vite__mapDeps([0,1]),import.meta.url),t.__rippleLoaded=!0)}};t.__iconLoaded=!1;t.__rippleLoaded=!1;t.styles=
|
|
110
|
+
`)}}updated(a){super.updated(a),a.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),a.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),a.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),a.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),a.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")}async firstUpdated(){t.__iconLoaded||(await m(()=>import("../../vendor/vendor-material.js").then(a=>a.i),__vite__mapDeps([0,1]),import.meta.url),t.__iconLoaded=!0),t.__rippleLoaded||(await m(()=>import("../../vendor/vendor-material.js").then(a=>a.r),__vite__mapDeps([0,1]),import.meta.url),t.__rippleLoaded=!0)}};t.__iconLoaded=!1;t.__rippleLoaded=!1;t.styles=b`
|
|
109
111
|
:host {
|
|
110
112
|
display: block;
|
|
111
113
|
box-sizing: border-box;
|
|
@@ -352,4 +354,4 @@ import{_ as m}from"../../vendor/preload-helper.js";import{a as v,n as s,i as u,x
|
|
|
352
354
|
.scb-card.filled .content.list ::slotted(scb-list) {
|
|
353
355
|
--scb-list-bg: var(--md-sys-color-surface-dim);
|
|
354
356
|
}
|
|
355
|
-
`;e([s({type:String})],t.prototype,"type",2);e([s({type:String})],t.prototype,"variant",2);e([s({type:String})],t.prototype,"direction",2);e([s({type:String,attribute:"media-type"})],t.prototype,"mediaType",2);e([s({type:String,attribute:"media-href"})],t.prototype,"mediaHref",2);e([s({type:String,attribute:"media-alt"})],t.prototype,"mediaAlt",2);e([s({type:String,attribute:"media-srcset"})],t.prototype,"mediaSrcset",2);e([s({type:String,attribute:"media-sizes"})],t.prototype,"mediaSizes",2);e([s({type:String,attribute:"media-loading"})],t.prototype,"mediaLoading",2);e([s({type:String,attribute:"media-decoding"})],t.prototype,"mediaDecoding",2);e([s({type:String,attribute:"media-fetchpriority"})],t.prototype,"mediaFetchPriority",2);e([s({type:String,attribute:"media-fit"})],t.prototype,"mediaFit",2);e([s({type:String,attribute:"media-position"})],t.prototype,"mediaPosition",2);e([s({type:String,attribute:"media-width"})],t.prototype,"mediaWidth",2);e([s({type:String,attribute:"media-height"})],t.prototype,"mediaHeight",2);e([s({type:String,attribute:"media-aspect"})],t.prototype,"mediaAspect",2);e([s({type:Boolean,attribute:"media-placeholder"})],t.prototype,"mediaPlaceholder",2);e([s({type:String,attribute:"card-href"})],t.prototype,"cardHref",2);e([s({type:String})],t.prototype,"title",2);e([s({type:String,attribute:"sub-label"})],t.prototype,"subLabel",2);e([s({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);e([s({type:Date,reflect:!0})],t.prototype,"date",2);e([s({type:String,attribute:"social-comments-text"})],t.prototype,"commentsText",2);e([s({type:Number,attribute:"social-comments",reflect:!0})],t.prototype,"comments",2);e([s({type:String,attribute:"social-likes-text"})],t.prototype,"likesText",2);e([s({type:Number,attribute:"social-likes",reflect:!0})],t.prototype,"likes",2);e([s({type:String,reflect:!0})],t.prototype,"sizing",2);e([s({type:String,reflect:!0})],t.prototype,"width",2);e([s({type:String,reflect:!0,attribute:"max-width"})],t.prototype,"maxWidth",2);e([s({type:String,reflect:!0})],t.prototype,"height",2);e([s({type:String,reflect:!0,attribute:"max-height"})],t.prototype,"maxHeight",2);t=e([
|
|
357
|
+
`;e([s({type:String})],t.prototype,"type",2);e([s({type:String})],t.prototype,"variant",2);e([s({type:String})],t.prototype,"direction",2);e([s({type:String,attribute:"media-type"})],t.prototype,"mediaType",2);e([s({type:String,attribute:"media-href"})],t.prototype,"mediaHref",2);e([s({type:String,attribute:"media-alt"})],t.prototype,"mediaAlt",2);e([s({type:String,attribute:"media-srcset"})],t.prototype,"mediaSrcset",2);e([s({type:String,attribute:"media-sizes"})],t.prototype,"mediaSizes",2);e([s({type:String,attribute:"media-loading"})],t.prototype,"mediaLoading",2);e([s({type:String,attribute:"media-decoding"})],t.prototype,"mediaDecoding",2);e([s({type:String,attribute:"media-fetchpriority"})],t.prototype,"mediaFetchPriority",2);e([s({type:String,attribute:"media-fit"})],t.prototype,"mediaFit",2);e([s({type:String,attribute:"media-position"})],t.prototype,"mediaPosition",2);e([s({type:String,attribute:"media-width"})],t.prototype,"mediaWidth",2);e([s({type:String,attribute:"media-height"})],t.prototype,"mediaHeight",2);e([s({type:String,attribute:"media-aspect"})],t.prototype,"mediaAspect",2);e([s({type:Boolean,attribute:"media-placeholder"})],t.prototype,"mediaPlaceholder",2);e([s({type:String,attribute:"card-href"})],t.prototype,"cardHref",2);e([s({type:String})],t.prototype,"title",2);e([s({type:String,attribute:"sub-label"})],t.prototype,"subLabel",2);e([s({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);e([s({type:Date,reflect:!0})],t.prototype,"date",2);e([s({type:String,attribute:"social-comments-text"})],t.prototype,"commentsText",2);e([s({type:Number,attribute:"social-comments",reflect:!0})],t.prototype,"comments",2);e([s({type:String,attribute:"social-likes-text"})],t.prototype,"likesText",2);e([s({type:Number,attribute:"social-likes",reflect:!0})],t.prototype,"likes",2);e([s({type:String,reflect:!0})],t.prototype,"sizing",2);e([s({type:String,reflect:!0})],t.prototype,"width",2);e([s({type:String,reflect:!0,attribute:"max-width"})],t.prototype,"maxWidth",2);e([s({type:String,reflect:!0})],t.prototype,"height",2);e([s({type:String,reflect:!0,attribute:"max-height"})],t.prototype,"maxHeight",2);t=e([v("scb-card")],t);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as d,n as a,i as p,x as l,t as
|
|
1
|
+
import{a as d,n as a,i as p,x as l,t as u}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(r,n,o){try{customElements.get(r)||t(r,n,o)}catch(c){var h=String(c||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var y=Object.defineProperty,g=Object.getOwnPropertyDescriptor,s=(e,t,r,n)=>{for(var o=n>1?void 0:n?g(t,r):t,h=e.length-1,c;h>=0;h--)(c=e[h])&&(o=(n?c(t,r,o):c(o))||o);return n&&o&&y(t,r,o),o};let i=class extends p{constructor(){super(...arguments),this.keyfigure=0,this.subLabel="",this.supportingText="",this.cardHref="",this.icon="",this.size="standard",this.unit="",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.sizing="stretch",this.__onKeyDown=e=>{(e.key==="Enter"||e.key===" ")&&this.cardHref&&(e.preventDefault(),window.location.href=this.cardHref)},this.__handleHrefNavigation=e=>{this.cardHref&&(e.target.closest("a")||(window.location.href=this.cardHref))}}formatNumber(e){if(typeof e=="number")return e.toLocaleString("sv-SE").replace(/\u00A0/g," ");const t=Number(e);return Number.isNaN(t)?String(e):t.toLocaleString("sv-SE").replace(/\u00A0/g," ")}render(){const e=!!this.cardHref,t=this.formatNumber(this.keyfigure),r=(this.unit||"").trim(),n=r?`${t} ${r}`:t;return l`
|
|
2
2
|
<div
|
|
3
3
|
class="scb-keyfigure-card ${e?"clickable":""} ${this.size}"
|
|
4
4
|
role=${e?"link":"group"}
|
|
@@ -84,6 +84,7 @@ import{a as d,n as a,i as p,x as l,t as y}from"../../vendor/vendor.js";import"..
|
|
|
84
84
|
inline-size: 100%;
|
|
85
85
|
max-inline-size: 100%;
|
|
86
86
|
overflow: hidden;
|
|
87
|
+
font-variant-numeric: tabular-nums;
|
|
87
88
|
}
|
|
88
89
|
|
|
89
90
|
.scb-keyfigure-card:focus,
|
|
@@ -123,4 +124,4 @@ import{a as d,n as a,i as p,x as l,t as y}from"../../vendor/vendor.js";import"..
|
|
|
123
124
|
line-height: var(--md-sys-typescale-display-medium-line-height);
|
|
124
125
|
letter-spacing: var(--md-sys-typescale-display-medium-tracking);
|
|
125
126
|
}
|
|
126
|
-
`;s([a({attribute:"keyfigure"})],i.prototype,"keyfigure",2);s([a({type:String,attribute:"sub-label"})],i.prototype,"subLabel",2);s([a({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);s([a({type:String,attribute:"card-href"})],i.prototype,"cardHref",2);s([a({type:String})],i.prototype,"icon",2);s([a({type:String})],i.prototype,"size",2);s([a({type:String})],i.prototype,"unit",2);s([a({type:String})],i.prototype,"width",2);s([a({type:String,attribute:"max-width"})],i.prototype,"maxWidth",2);s([a({type:String})],i.prototype,"height",2);s([a({type:String,attribute:"max-height"})],i.prototype,"maxHeight",2);s([a({type:String,reflect:!0})],i.prototype,"sizing",2);i=s([
|
|
127
|
+
`;s([a({attribute:"keyfigure"})],i.prototype,"keyfigure",2);s([a({type:String,attribute:"sub-label"})],i.prototype,"subLabel",2);s([a({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);s([a({type:String,attribute:"card-href"})],i.prototype,"cardHref",2);s([a({type:String})],i.prototype,"icon",2);s([a({type:String})],i.prototype,"size",2);s([a({type:String})],i.prototype,"unit",2);s([a({type:String})],i.prototype,"width",2);s([a({type:String,attribute:"max-width"})],i.prototype,"maxWidth",2);s([a({type:String})],i.prototype,"height",2);s([a({type:String,attribute:"max-height"})],i.prototype,"maxHeight",2);s([a({type:String,reflect:!0})],i.prototype,"sizing",2);i=s([u("scb-keyfigure-card")],i);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.29",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -273,5 +273,5 @@
|
|
|
273
273
|
},
|
|
274
274
|
"./mvc/*": "./mvc/*"
|
|
275
275
|
},
|
|
276
|
-
"buildHash": "
|
|
276
|
+
"buildHash": "44623E3D997AE4EA4B6A3D107EAAC1DF749A4E358B14F8CB39DBE22B45755861"
|
|
277
277
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { css as h, LitElement as c, html as o } from "lit";
|
|
2
|
-
import { property as r, customElement as
|
|
2
|
+
import { property as r, customElement as m } from "lit/decorators.js";
|
|
3
3
|
import "@material/web/focus/md-focus-ring.js";
|
|
4
|
-
var
|
|
4
|
+
var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (i, s, l, n) => {
|
|
5
5
|
for (var a = n > 1 ? void 0 : n ? f(s, l) : s, d = i.length - 1, p; d >= 0; d--)
|
|
6
6
|
(p = i[d]) && (a = (n ? p(s, l, a) : p(a)) || a);
|
|
7
|
-
return n && a &&
|
|
7
|
+
return n && a && g(s, l, a), a;
|
|
8
8
|
};
|
|
9
9
|
let e = class extends c {
|
|
10
10
|
constructor() {
|
|
@@ -21,8 +21,8 @@ let e = class extends c {
|
|
|
21
21
|
role="${this.cardHref ? "link" : "group"}"
|
|
22
22
|
aria-label="${this.title || "Kalenderkort"}"
|
|
23
23
|
tabindex="${this.cardHref ? "0" : "-1"}"
|
|
24
|
-
@click
|
|
25
|
-
@keydown
|
|
24
|
+
@click=${this.cardHref ? this._handleHrefNavigation : null}
|
|
25
|
+
@keydown=${this.cardHref ? this._onKeyDown : null}
|
|
26
26
|
style="cursor: ${this.cardHref ? "pointer" : "default"};"
|
|
27
27
|
>
|
|
28
28
|
${this.cardHref ? o`<md-ripple></md-ripple>` : ""}
|
|
@@ -176,6 +176,7 @@ e.styles = h`
|
|
|
176
176
|
font-weight: var(--weight-bold, 700);
|
|
177
177
|
line-height: 100%;
|
|
178
178
|
letter-spacing: -0.6px;
|
|
179
|
+
font-variant-numeric: tabular-nums;
|
|
179
180
|
}
|
|
180
181
|
|
|
181
182
|
.media .month {
|
|
@@ -257,6 +258,7 @@ e.styles = h`
|
|
|
257
258
|
|
|
258
259
|
overflow: visible;
|
|
259
260
|
text-overflow: clip;
|
|
261
|
+
font-variant-numeric: tabular-nums;
|
|
260
262
|
}
|
|
261
263
|
`;
|
|
262
264
|
t([
|
|
@@ -305,7 +307,7 @@ t([
|
|
|
305
307
|
r({ type: String, reflect: !0 })
|
|
306
308
|
], e.prototype, "sizing", 2);
|
|
307
309
|
e = t([
|
|
308
|
-
|
|
310
|
+
m("scb-calendar-card")
|
|
309
311
|
], e);
|
|
310
312
|
export {
|
|
311
313
|
e as ScbCalendarCard
|
package/scb-card/scb-card.d.ts
CHANGED
|
@@ -34,6 +34,7 @@ export declare class ScbCard extends LitElement {
|
|
|
34
34
|
height: string;
|
|
35
35
|
maxHeight: string;
|
|
36
36
|
static styles: import('lit').CSSResult;
|
|
37
|
+
private __calcAspectWH;
|
|
37
38
|
private __onImgLoad;
|
|
38
39
|
private __mediaTemplate;
|
|
39
40
|
render(): import('lit-html').TemplateResult<1>;
|
package/scb-card/scb-card.js
CHANGED
|
@@ -1,26 +1,38 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as s, customElement as
|
|
1
|
+
import { css as m, LitElement as b, html as i } from "lit";
|
|
2
|
+
import { property as s, customElement as u } from "lit/decorators.js";
|
|
3
3
|
import "@material/web/focus/md-focus-ring.js";
|
|
4
4
|
import "../scb-list/scb-list.js";
|
|
5
5
|
import "../scb-button/scb-button.js";
|
|
6
6
|
import "../scb-link/scb-link.js";
|
|
7
7
|
import "../scb-avatar/scb-avatar.js";
|
|
8
|
-
var
|
|
9
|
-
for (var
|
|
10
|
-
(
|
|
11
|
-
return
|
|
8
|
+
var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, e = (o, r, n, a) => {
|
|
9
|
+
for (var l = a > 1 ? void 0 : a ? g(r, n) : r, d = o.length - 1, c; d >= 0; d--)
|
|
10
|
+
(c = o[d]) && (l = (a ? c(r, n, l) : c(l)) || l);
|
|
11
|
+
return a && l && v(r, n, l), l;
|
|
12
12
|
};
|
|
13
|
-
let t = class extends
|
|
13
|
+
let t = class extends b {
|
|
14
14
|
constructor() {
|
|
15
|
-
super(...arguments), 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.subLabel = "", this.supportingText = "", this.commentsText = "", this.comments = 0, this.likesText = "", this.likes = 0, this.sizing = "stretch", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.__onImgLoad = (
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
}, this.__onKeyDown = (
|
|
19
|
-
(
|
|
20
|
-
}, this.__handleHrefNavigation = (
|
|
21
|
-
this.cardHref && (
|
|
15
|
+
super(...arguments), 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.subLabel = "", this.supportingText = "", this.commentsText = "", this.comments = 0, this.likesText = "", this.likes = 0, this.sizing = "stretch", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.__onImgLoad = (o) => {
|
|
16
|
+
const r = o.currentTarget.closest(".media");
|
|
17
|
+
r && r.classList.add("is-loaded");
|
|
18
|
+
}, this.__onKeyDown = (o) => {
|
|
19
|
+
(o.key === "Enter" || o.key === " ") && this.cardHref && (o.preventDefault(), window.open(this.cardHref, "_self"));
|
|
20
|
+
}, this.__handleHrefNavigation = (o) => {
|
|
21
|
+
this.cardHref && (o.target.closest("a") || window.open(this.cardHref, "_self"));
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
|
+
/* Beräkna fallback-mått från media-aspect. Används endast om width/height saknas. */
|
|
25
|
+
__calcAspectWH(o) {
|
|
26
|
+
const r = (o || "").trim();
|
|
27
|
+
if (!r) return { w: 640, h: 360 };
|
|
28
|
+
const n = r.includes("/") ? r.split("/") : r.includes(":") ? r.split(":") : r.includes("x") ? r.split("x") : null;
|
|
29
|
+
if (n && n.length === 2) {
|
|
30
|
+
const l = Number(n[0]), d = Number(n[1]);
|
|
31
|
+
if (l > 0 && d > 0) return { w: l, h: d };
|
|
32
|
+
}
|
|
33
|
+
const a = Number(r);
|
|
34
|
+
return isFinite(a) && a > 0 ? { w: 1e3, h: Math.round(1e3 / a) } : { w: 640, h: 360 };
|
|
35
|
+
}
|
|
24
36
|
__mediaTemplate() {
|
|
25
37
|
if ((this.mediaType || "").toLowerCase() === "avatar")
|
|
26
38
|
return i`
|
|
@@ -31,9 +43,15 @@ let t = class extends v {
|
|
|
31
43
|
</div>
|
|
32
44
|
`;
|
|
33
45
|
if (this.mediaHref || this.mediaSrcset) {
|
|
34
|
-
|
|
46
|
+
let r = Number(this.mediaWidth) || 0, n = Number(this.mediaHeight) || 0;
|
|
47
|
+
const a = (this.mediaAspect || "").trim();
|
|
48
|
+
if (!r || !n) {
|
|
49
|
+
const h = this.__calcAspectWH(a || "16/9");
|
|
50
|
+
r || (r = h.w), n || (n = h.h);
|
|
51
|
+
}
|
|
52
|
+
const l = `aspect-ratio:${a || `${r}/${n}`};`, d = this.mediaPlaceholder ? "has-ph" : "", c = this.mediaFit || "cover", p = this.mediaPosition || "center";
|
|
35
53
|
return i`
|
|
36
|
-
<div class="media ${
|
|
54
|
+
<div class="media ${d}" style="${l}">
|
|
37
55
|
<!-- Tillåt egna <source>-element via slot om man vill använda <picture> -->
|
|
38
56
|
<slot name="media-sources"></slot>
|
|
39
57
|
<img
|
|
@@ -44,9 +62,9 @@ let t = class extends v {
|
|
|
44
62
|
loading="${this.mediaLoading}"
|
|
45
63
|
decoding="${this.mediaDecoding}"
|
|
46
64
|
fetchpriority="${this.mediaFetchPriority}"
|
|
47
|
-
style="object-fit:${
|
|
48
|
-
width="${
|
|
49
|
-
height="${
|
|
65
|
+
style="object-fit:${c};object-position:${p};"
|
|
66
|
+
width="${r}"
|
|
67
|
+
height="${n}"
|
|
50
68
|
@load=${this.__onImgLoad}
|
|
51
69
|
/>
|
|
52
70
|
</div>
|
|
@@ -55,48 +73,42 @@ let t = class extends v {
|
|
|
55
73
|
return null;
|
|
56
74
|
}
|
|
57
75
|
render() {
|
|
58
|
-
const
|
|
59
|
-
role: "link",
|
|
60
|
-
tabindex: "0",
|
|
61
|
-
"aria-label": this.title || "Kort"
|
|
62
|
-
} : {
|
|
63
|
-
role: "group",
|
|
64
|
-
tabindex: "-1",
|
|
65
|
-
"aria-label": this.title || "Kort"
|
|
66
|
-
}, d = (h) => i`
|
|
76
|
+
const o = this.variant ? `${this.variant.toLowerCase()}` : "", r = this.type === "list" ? "vertical" : this.direction ? this.direction.toLowerCase() : "", n = this.cardHref ? "clickable" : "", a = this.date instanceof Date ? this.date.toISOString().slice(0, 10) : this.date || "", l = (p = !1) => p ? i`<a class="title" href="${this.cardHref}" tabindex="0">${this.title}</a><md-icon>arrow_forward</md-icon>` : i`<span class="title">${this.title}</span>`, d = () => this.__mediaTemplate(), c = (p) => i`
|
|
67
77
|
<div
|
|
68
|
-
class="scb-card ${
|
|
78
|
+
class="scb-card ${o} ${r} ${n}"
|
|
69
79
|
@click=${this.cardHref ? this.__handleHrefNavigation : null}
|
|
70
80
|
@keydown=${this.cardHref ? this.__onKeyDown : null}
|
|
71
81
|
style="cursor:${this.cardHref ? "pointer" : "default"};"
|
|
72
|
-
|
|
82
|
+
role=${this.cardHref ? "link" : "group"}
|
|
83
|
+
tabindex=${this.cardHref ? "0" : "-1"}
|
|
84
|
+
aria-label=${this.title || "Kort"}
|
|
73
85
|
>
|
|
74
86
|
${this.cardHref ? i`<md-ripple></md-ripple>` : ""}
|
|
75
|
-
${
|
|
76
|
-
${
|
|
87
|
+
${d()}
|
|
88
|
+
${p}
|
|
77
89
|
</div>
|
|
78
90
|
<md-focus-ring></md-focus-ring>
|
|
79
91
|
`;
|
|
80
92
|
switch (this.type) {
|
|
81
93
|
case "standard":
|
|
82
|
-
return
|
|
94
|
+
return c(i`
|
|
83
95
|
<div class="full-content">
|
|
84
96
|
<div class="top-content">
|
|
85
|
-
${this.title ? i`<div class="header">${
|
|
97
|
+
${this.title ? i`<div class="header">${l(!!this.cardHref)}</div>` : ""}
|
|
86
98
|
${this.subLabel ? i`<div class="sub-label">${this.subLabel}</div>` : ""}
|
|
87
99
|
${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
88
|
-
${
|
|
100
|
+
${a ? i`<div class="date">${a}</div>` : ""}
|
|
89
101
|
</div>
|
|
90
102
|
</div>
|
|
91
103
|
`);
|
|
92
104
|
case "list":
|
|
93
|
-
return
|
|
105
|
+
return c(i`
|
|
94
106
|
<div class="full-content">
|
|
95
107
|
<div class="top-content">
|
|
96
108
|
${this.title ? i`<div class="header"><span class="title">${this.title}</span></div>` : ""}
|
|
97
109
|
${this.subLabel ? i`<div class="sub-label">${this.subLabel}</div>` : ""}
|
|
98
110
|
${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
99
|
-
${
|
|
111
|
+
${a ? i`<div class="date">${a}</div>` : ""}
|
|
100
112
|
</div>
|
|
101
113
|
<div class="content list">
|
|
102
114
|
<slot></slot>
|
|
@@ -104,13 +116,13 @@ let t = class extends v {
|
|
|
104
116
|
</div>
|
|
105
117
|
`);
|
|
106
118
|
case "social":
|
|
107
|
-
return
|
|
119
|
+
return c(i`
|
|
108
120
|
<div class="full-content">
|
|
109
121
|
<div class="top-content">
|
|
110
|
-
${this.title ? i`<div class="header">${
|
|
122
|
+
${this.title ? i`<div class="header">${l(!!this.cardHref)}</div>` : ""}
|
|
111
123
|
${this.subLabel ? i`<div class="sub-label">${this.subLabel}</div>` : ""}
|
|
112
124
|
${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
113
|
-
${
|
|
125
|
+
${a ? i`<div class="date">${a}</div>` : ""}
|
|
114
126
|
</div>
|
|
115
127
|
<div class="content">
|
|
116
128
|
<div class="social-metrics">
|
|
@@ -121,13 +133,13 @@ let t = class extends v {
|
|
|
121
133
|
</div>
|
|
122
134
|
`);
|
|
123
135
|
case "link":
|
|
124
|
-
return
|
|
136
|
+
return c(i`
|
|
125
137
|
<div class="full-content">
|
|
126
138
|
<div class="top-content">
|
|
127
139
|
${this.title ? i`<div class="header"><span class="title">${this.title}</span></div>` : ""}
|
|
128
140
|
${this.subLabel ? i`<div class="sub-label">${this.subLabel}</div>` : ""}
|
|
129
141
|
${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
130
|
-
${
|
|
142
|
+
${a ? i`<div class="date">${a}</div>` : ""}
|
|
131
143
|
</div>
|
|
132
144
|
<div class="content links">
|
|
133
145
|
<slot></slot>
|
|
@@ -135,13 +147,13 @@ let t = class extends v {
|
|
|
135
147
|
</div>
|
|
136
148
|
`);
|
|
137
149
|
case "action":
|
|
138
|
-
return
|
|
150
|
+
return c(i`
|
|
139
151
|
<div class="full-content">
|
|
140
152
|
<div class="top-content">
|
|
141
153
|
${this.title ? i`<div class="header"><span class="title">${this.title}</span></div>` : ""}
|
|
142
154
|
${this.subLabel ? i`<div class="sub-label">${this.subLabel}</div>` : ""}
|
|
143
155
|
${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
144
|
-
${
|
|
156
|
+
${a ? i`<div class="date">${a}</div>` : ""}
|
|
145
157
|
</div>
|
|
146
158
|
<div class="content actions">
|
|
147
159
|
<slot></slot>
|
|
@@ -149,20 +161,20 @@ let t = class extends v {
|
|
|
149
161
|
</div>
|
|
150
162
|
`);
|
|
151
163
|
default:
|
|
152
|
-
return
|
|
164
|
+
return c(i`
|
|
153
165
|
<div class="full-content">
|
|
154
166
|
<div class="top-content">
|
|
155
|
-
${this.title ? i`<div class="header">${
|
|
167
|
+
${this.title ? i`<div class="header">${l(!!this.cardHref)}</div>` : ""}
|
|
156
168
|
${this.subLabel ? i`<div class="sub-label">${this.subLabel}</div>` : ""}
|
|
157
169
|
${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
158
|
-
${
|
|
170
|
+
${a ? i`<div class="date">${a}</div>` : ""}
|
|
159
171
|
</div>
|
|
160
172
|
</div>
|
|
161
173
|
`);
|
|
162
174
|
}
|
|
163
175
|
}
|
|
164
|
-
updated(
|
|
165
|
-
super.updated(
|
|
176
|
+
updated(o) {
|
|
177
|
+
super.updated(o), o.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), o.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), o.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), o.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), o.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");
|
|
166
178
|
}
|
|
167
179
|
async firstUpdated() {
|
|
168
180
|
t.__iconLoaded || (await import("@material/web/icon/icon.js"), t.__iconLoaded = !0), t.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), t.__rippleLoaded = !0);
|
|
@@ -170,7 +182,7 @@ let t = class extends v {
|
|
|
170
182
|
};
|
|
171
183
|
t.__iconLoaded = !1;
|
|
172
184
|
t.__rippleLoaded = !1;
|
|
173
|
-
t.styles =
|
|
185
|
+
t.styles = m`
|
|
174
186
|
:host {
|
|
175
187
|
display: block;
|
|
176
188
|
box-sizing: border-box;
|
|
@@ -512,7 +524,7 @@ e([
|
|
|
512
524
|
s({ type: String, reflect: !0, attribute: "max-height" })
|
|
513
525
|
], t.prototype, "maxHeight", 2);
|
|
514
526
|
t = e([
|
|
515
|
-
|
|
527
|
+
u("scb-card")
|
|
516
528
|
], t);
|
|
517
529
|
export {
|
|
518
530
|
t as ScbCard
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -2996,8 +2996,8 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
2996
2996
|
role="${this.cardHref?"link":"group"}"
|
|
2997
2997
|
aria-label="${this.title||"Kalenderkort"}"
|
|
2998
2998
|
tabindex="${this.cardHref?"0":"-1"}"
|
|
2999
|
-
@click
|
|
3000
|
-
@keydown
|
|
2999
|
+
@click=${this.cardHref?this._handleHrefNavigation:null}
|
|
3000
|
+
@keydown=${this.cardHref?this._onKeyDown:null}
|
|
3001
3001
|
style="cursor: ${this.cardHref?"pointer":"default"};"
|
|
3002
3002
|
>
|
|
3003
3003
|
${this.cardHref?c`<md-ripple></md-ripple>`:""}
|
|
@@ -3132,6 +3132,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
3132
3132
|
font-weight: var(--weight-bold, 700);
|
|
3133
3133
|
line-height: 100%;
|
|
3134
3134
|
letter-spacing: -0.6px;
|
|
3135
|
+
font-variant-numeric: tabular-nums;
|
|
3135
3136
|
}
|
|
3136
3137
|
|
|
3137
3138
|
.media .month {
|
|
@@ -3213,15 +3214,16 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
3213
3214
|
|
|
3214
3215
|
overflow: visible;
|
|
3215
3216
|
text-overflow: clip;
|
|
3217
|
+
font-variant-numeric: tabular-nums;
|
|
3216
3218
|
}
|
|
3217
|
-
`,K([l({type:String,reflect:!0})],a.ScbCalendarCard.prototype,"variant",2),K([l({type:String,reflect:!0})],a.ScbCalendarCard.prototype,"direction",2),K([l({type:String})],a.ScbCalendarCard.prototype,"title",2),K([l({type:String})],a.ScbCalendarCard.prototype,"subtitle",2),K([l({type:String,attribute:"supporting-text"})],a.ScbCalendarCard.prototype,"supportingText",2),K([l({type:String,attribute:"card-href"})],a.ScbCalendarCard.prototype,"cardHref",2),K([l({type:String,attribute:"card-href-nav"})],a.ScbCalendarCard.prototype,"cardHrefNav",2),K([l({type:Boolean,reflect:!0,attribute:"show-media"})],a.ScbCalendarCard.prototype,"showMedia",2),K([l({type:String})],a.ScbCalendarCard.prototype,"width",2),K([l({type:String,attribute:"max-width"})],a.ScbCalendarCard.prototype,"maxWidth",2),K([l({type:String,attribute:"min-width"})],a.ScbCalendarCard.prototype,"minWidth",2),K([l({type:String})],a.ScbCalendarCard.prototype,"height",2),K([l({type:String,attribute:"max-height"})],a.ScbCalendarCard.prototype,"maxHeight",2),K([l({type:String,attribute:"min-height"})],a.ScbCalendarCard.prototype,"minHeight",2),K([l({type:String,reflect:!0})],a.ScbCalendarCard.prototype,"sizing",2),a.ScbCalendarCard=K([b("scb-calendar-card")],a.ScbCalendarCard);var td=Object.defineProperty,rd=Object.getOwnPropertyDescriptor,E=(o,e,t,r)=>{for(var i=r>1?void 0:r?rd(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&td(e,t,i),i};a.ScbCard=class extends g{constructor(){super(...arguments),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.subLabel="",this.supportingText="",this.commentsText="",this.comments=0,this.likesText="",this.likes=0,this.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.__onImgLoad=e=>{const t=e.currentTarget.closest(".media");t&&t.classList.add("is-loaded")},this.__onKeyDown=e=>{(e.key==="Enter"||e.key===" ")&&this.cardHref&&(e.preventDefault(),window.open(this.cardHref,"_self"))},this.__handleHrefNavigation=e=>{this.cardHref&&(e.target.closest("a")||window.open(this.cardHref,"_self"))}}__mediaTemplate(){if((this.mediaType||"").toLowerCase()==="avatar")return c`
|
|
3219
|
+
`,K([l({type:String,reflect:!0})],a.ScbCalendarCard.prototype,"variant",2),K([l({type:String,reflect:!0})],a.ScbCalendarCard.prototype,"direction",2),K([l({type:String})],a.ScbCalendarCard.prototype,"title",2),K([l({type:String})],a.ScbCalendarCard.prototype,"subtitle",2),K([l({type:String,attribute:"supporting-text"})],a.ScbCalendarCard.prototype,"supportingText",2),K([l({type:String,attribute:"card-href"})],a.ScbCalendarCard.prototype,"cardHref",2),K([l({type:String,attribute:"card-href-nav"})],a.ScbCalendarCard.prototype,"cardHrefNav",2),K([l({type:Boolean,reflect:!0,attribute:"show-media"})],a.ScbCalendarCard.prototype,"showMedia",2),K([l({type:String})],a.ScbCalendarCard.prototype,"width",2),K([l({type:String,attribute:"max-width"})],a.ScbCalendarCard.prototype,"maxWidth",2),K([l({type:String,attribute:"min-width"})],a.ScbCalendarCard.prototype,"minWidth",2),K([l({type:String})],a.ScbCalendarCard.prototype,"height",2),K([l({type:String,attribute:"max-height"})],a.ScbCalendarCard.prototype,"maxHeight",2),K([l({type:String,attribute:"min-height"})],a.ScbCalendarCard.prototype,"minHeight",2),K([l({type:String,reflect:!0})],a.ScbCalendarCard.prototype,"sizing",2),a.ScbCalendarCard=K([b("scb-calendar-card")],a.ScbCalendarCard);var td=Object.defineProperty,rd=Object.getOwnPropertyDescriptor,E=(o,e,t,r)=>{for(var i=r>1?void 0:r?rd(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&td(e,t,i),i};a.ScbCard=class extends g{constructor(){super(...arguments),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.subLabel="",this.supportingText="",this.commentsText="",this.comments=0,this.likesText="",this.likes=0,this.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.__onImgLoad=e=>{const t=e.currentTarget.closest(".media");t&&t.classList.add("is-loaded")},this.__onKeyDown=e=>{(e.key==="Enter"||e.key===" ")&&this.cardHref&&(e.preventDefault(),window.open(this.cardHref,"_self"))},this.__handleHrefNavigation=e=>{this.cardHref&&(e.target.closest("a")||window.open(this.cardHref,"_self"))}}__calcAspectWH(e){const t=(e||"").trim();if(!t)return{w:640,h:360};const r=t.includes("/")?t.split("/"):t.includes(":")?t.split(":"):t.includes("x")?t.split("x"):null;if(r&&r.length===2){const s=Number(r[0]),n=Number(r[1]);if(s>0&&n>0)return{w:s,h:n}}const i=Number(t);return isFinite(i)&&i>0?{w:1e3,h:Math.round(1e3/i)}:{w:640,h:360}}__mediaTemplate(){if((this.mediaType||"").toLowerCase()==="avatar")return c`
|
|
3218
3220
|
<div class="media">
|
|
3219
3221
|
<slot name="media">
|
|
3220
3222
|
<scb-avatar variant="icon" label="${this.title}" icon-name="person"></scb-avatar>
|
|
3221
3223
|
</slot>
|
|
3222
3224
|
</div>
|
|
3223
|
-
`;if(this.mediaHref||this.mediaSrcset){
|
|
3224
|
-
<div class="media ${
|
|
3225
|
+
`;if(this.mediaHref||this.mediaSrcset){let t=Number(this.mediaWidth)||0,r=Number(this.mediaHeight)||0;const i=(this.mediaAspect||"").trim();if(!t||!r){const v=this.__calcAspectWH(i||"16/9");t||(t=v.w),r||(r=v.h)}const s=`aspect-ratio:${i||`${t}/${r}`};`,n=this.mediaPlaceholder?"has-ph":"",h=this.mediaFit||"cover",u=this.mediaPosition||"center";return c`
|
|
3226
|
+
<div class="media ${n}" style="${s}">
|
|
3225
3227
|
<!-- Tillåt egna <source>-element via slot om man vill använda <picture> -->
|
|
3226
3228
|
<slot name="media-sources"></slot>
|
|
3227
3229
|
<img
|
|
@@ -3232,26 +3234,28 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
3232
3234
|
loading="${this.mediaLoading}"
|
|
3233
3235
|
decoding="${this.mediaDecoding}"
|
|
3234
3236
|
fetchpriority="${this.mediaFetchPriority}"
|
|
3235
|
-
style="object-fit:${
|
|
3236
|
-
width="${
|
|
3237
|
-
height="${
|
|
3237
|
+
style="object-fit:${h};object-position:${u};"
|
|
3238
|
+
width="${t}"
|
|
3239
|
+
height="${r}"
|
|
3238
3240
|
@load=${this.__onImgLoad}
|
|
3239
3241
|
/>
|
|
3240
3242
|
</div>
|
|
3241
|
-
`}return null}render(){const e=this.variant?`${this.variant.toLowerCase()}`:"",t=this.type==="list"?"vertical":this.direction?this.direction.toLowerCase():"",r=this.cardHref?"clickable":"",i=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",s=(
|
|
3243
|
+
`}return null}render(){const e=this.variant?`${this.variant.toLowerCase()}`:"",t=this.type==="list"?"vertical":this.direction?this.direction.toLowerCase():"",r=this.cardHref?"clickable":"",i=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",s=(u=!1)=>u?c`<a class="title" href="${this.cardHref}" tabindex="0">${this.title}</a><md-icon>arrow_forward</md-icon>`:c`<span class="title">${this.title}</span>`,n=()=>this.__mediaTemplate(),h=u=>c`
|
|
3242
3244
|
<div
|
|
3243
3245
|
class="scb-card ${e} ${t} ${r}"
|
|
3244
3246
|
@click=${this.cardHref?this.__handleHrefNavigation:null}
|
|
3245
3247
|
@keydown=${this.cardHref?this.__onKeyDown:null}
|
|
3246
3248
|
style="cursor:${this.cardHref?"pointer":"default"};"
|
|
3247
|
-
|
|
3249
|
+
role=${this.cardHref?"link":"group"}
|
|
3250
|
+
tabindex=${this.cardHref?"0":"-1"}
|
|
3251
|
+
aria-label=${this.title||"Kort"}
|
|
3248
3252
|
>
|
|
3249
3253
|
${this.cardHref?c`<md-ripple></md-ripple>`:""}
|
|
3250
3254
|
${n()}
|
|
3251
|
-
${
|
|
3255
|
+
${u}
|
|
3252
3256
|
</div>
|
|
3253
3257
|
<md-focus-ring></md-focus-ring>
|
|
3254
|
-
`;switch(this.type){case"standard":return
|
|
3258
|
+
`;switch(this.type){case"standard":return h(c`
|
|
3255
3259
|
<div class="full-content">
|
|
3256
3260
|
<div class="top-content">
|
|
3257
3261
|
${this.title?c`<div class="header">${s(!!this.cardHref)}</div>`:""}
|
|
@@ -3260,7 +3264,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
3260
3264
|
${i?c`<div class="date">${i}</div>`:""}
|
|
3261
3265
|
</div>
|
|
3262
3266
|
</div>
|
|
3263
|
-
`);case"list":return
|
|
3267
|
+
`);case"list":return h(c`
|
|
3264
3268
|
<div class="full-content">
|
|
3265
3269
|
<div class="top-content">
|
|
3266
3270
|
${this.title?c`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
@@ -3272,7 +3276,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
3272
3276
|
<slot></slot>
|
|
3273
3277
|
</div>
|
|
3274
3278
|
</div>
|
|
3275
|
-
`);case"social":return
|
|
3279
|
+
`);case"social":return h(c`
|
|
3276
3280
|
<div class="full-content">
|
|
3277
3281
|
<div class="top-content">
|
|
3278
3282
|
${this.title?c`<div class="header">${s(!!this.cardHref)}</div>`:""}
|
|
@@ -3287,7 +3291,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
3287
3291
|
</div>
|
|
3288
3292
|
</div>
|
|
3289
3293
|
</div>
|
|
3290
|
-
`);case"link":return
|
|
3294
|
+
`);case"link":return h(c`
|
|
3291
3295
|
<div class="full-content">
|
|
3292
3296
|
<div class="top-content">
|
|
3293
3297
|
${this.title?c`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
@@ -3299,7 +3303,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
3299
3303
|
<slot></slot>
|
|
3300
3304
|
</div>
|
|
3301
3305
|
</div>
|
|
3302
|
-
`);case"action":return
|
|
3306
|
+
`);case"action":return h(c`
|
|
3303
3307
|
<div class="full-content">
|
|
3304
3308
|
<div class="top-content">
|
|
3305
3309
|
${this.title?c`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
@@ -3311,7 +3315,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
3311
3315
|
<slot></slot>
|
|
3312
3316
|
</div>
|
|
3313
3317
|
</div>
|
|
3314
|
-
`);default:return
|
|
3318
|
+
`);default:return h(c`
|
|
3315
3319
|
<div class="full-content">
|
|
3316
3320
|
<div class="top-content">
|
|
3317
3321
|
${this.title?c`<div class="header">${s(!!this.cardHref)}</div>`:""}
|
|
@@ -5085,6 +5089,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
5085
5089
|
inline-size: 100%;
|
|
5086
5090
|
max-inline-size: 100%;
|
|
5087
5091
|
overflow: hidden;
|
|
5092
|
+
font-variant-numeric: tabular-nums;
|
|
5088
5093
|
}
|
|
5089
5094
|
|
|
5090
5095
|
.scb-keyfigure-card:focus,
|