scb-wc-test 0.1.27 → 0.1.28
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 +15 -15
- 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 +52 -34
- package/scb-keyfigure-card/scb-keyfigure-card.js +1 -0
- package/scb-wc-test.bundle.js +11 -8
|
@@ -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,y=Object.getOwnPropertyDescriptor,e=(a,o,n,r)=>{for(var l=r>1?void 0:r?y(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,29 +17,29 @@ 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=(h=!1)=>h?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=this.cardHref?{role:"link",tabindex:"0","aria-label":this.title||"Kort"}:{role:"group",tabindex:"-1","aria-label":this.title||"Kort"},p=h=>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
|
+
...=${d}
|
|
33
33
|
>
|
|
34
34
|
${this.cardHref?i`<md-ripple></md-ripple>`:""}
|
|
35
|
-
${
|
|
35
|
+
${c()}
|
|
36
36
|
${h}
|
|
37
37
|
</div>
|
|
38
38
|
<md-focus-ring></md-focus-ring>
|
|
39
39
|
`;switch(this.type){case"standard":return p(i`
|
|
40
40
|
<div class="full-content">
|
|
41
41
|
<div class="top-content">
|
|
42
|
-
${this.title?i`<div class="header">${
|
|
42
|
+
${this.title?i`<div class="header">${l(!!this.cardHref)}</div>`:""}
|
|
43
43
|
${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
|
|
44
44
|
${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
45
45
|
${r?i`<div class="date">${r}</div>`:""}
|
|
@@ -60,7 +60,7 @@ import{_ as m}from"../../vendor/preload-helper.js";import{a as v,n as s,i as u,x
|
|
|
60
60
|
`);case"social":return p(i`
|
|
61
61
|
<div class="full-content">
|
|
62
62
|
<div class="top-content">
|
|
63
|
-
${this.title?i`<div class="header">${
|
|
63
|
+
${this.title?i`<div class="header">${l(!!this.cardHref)}</div>`:""}
|
|
64
64
|
${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
|
|
65
65
|
${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
66
66
|
${r?i`<div class="date">${r}</div>`:""}
|
|
@@ -99,13 +99,13 @@ import{_ as m}from"../../vendor/preload-helper.js";import{a as v,n as s,i as u,x
|
|
|
99
99
|
`);default:return p(i`
|
|
100
100
|
<div class="full-content">
|
|
101
101
|
<div class="top-content">
|
|
102
|
-
${this.title?i`<div class="header">${
|
|
102
|
+
${this.title?i`<div class="header">${l(!!this.cardHref)}</div>`:""}
|
|
103
103
|
${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
|
|
104
104
|
${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
105
105
|
${r?i`<div class="date">${r}</div>`:""}
|
|
106
106
|
</div>
|
|
107
107
|
</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=
|
|
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=b`
|
|
109
109
|
:host {
|
|
110
110
|
display: block;
|
|
111
111
|
box-sizing: border-box;
|
|
@@ -352,4 +352,4 @@ import{_ as m}from"../../vendor/preload-helper.js";import{a as v,n as s,i as u,x
|
|
|
352
352
|
.scb-card.filled .content.list ::slotted(scb-list) {
|
|
353
353
|
--scb-list-bg: var(--md-sys-color-surface-dim);
|
|
354
354
|
}
|
|
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([
|
|
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([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.28",
|
|
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": "C2E2EB23CCBC07D2654EF22B334876E144F7BE9010550ED9D311D82ED75F3F5A"
|
|
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
|
-
(p =
|
|
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, c = o.length - 1, p; c >= 0; c--)
|
|
10
|
+
(p = o[c]) && (l = (a ? p(r, n, l) : p(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]), c = Number(n[1]);
|
|
31
|
+
if (l > 0 && c > 0) return { w: l, h: c };
|
|
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}`};`, c = this.mediaPlaceholder ? "has-ph" : "", p = this.mediaFit || "cover", d = this.mediaPosition || "center";
|
|
35
53
|
return i`
|
|
36
|
-
<div class="media ${
|
|
54
|
+
<div class="media ${c}" 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:${p};object-position:${d};"
|
|
66
|
+
width="${r}"
|
|
67
|
+
height="${n}"
|
|
50
68
|
@load=${this.__onImgLoad}
|
|
51
69
|
/>
|
|
52
70
|
</div>
|
|
@@ -55,7 +73,7 @@ let t = class extends v {
|
|
|
55
73
|
return null;
|
|
56
74
|
}
|
|
57
75
|
render() {
|
|
58
|
-
const
|
|
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 = (h = !1) => h ? 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(), p = this.cardHref ? {
|
|
59
77
|
role: "link",
|
|
60
78
|
tabindex: "0",
|
|
61
79
|
"aria-label": this.title || "Kort"
|
|
@@ -65,7 +83,7 @@ let t = class extends v {
|
|
|
65
83
|
"aria-label": this.title || "Kort"
|
|
66
84
|
}, d = (h) => i`
|
|
67
85
|
<div
|
|
68
|
-
class="scb-card ${
|
|
86
|
+
class="scb-card ${o} ${r} ${n}"
|
|
69
87
|
@click=${this.cardHref ? this.__handleHrefNavigation : null}
|
|
70
88
|
@keydown=${this.cardHref ? this.__onKeyDown : null}
|
|
71
89
|
style="cursor:${this.cardHref ? "pointer" : "default"};"
|
|
@@ -82,10 +100,10 @@ let t = class extends v {
|
|
|
82
100
|
return d(i`
|
|
83
101
|
<div class="full-content">
|
|
84
102
|
<div class="top-content">
|
|
85
|
-
${this.title ? i`<div class="header">${
|
|
103
|
+
${this.title ? i`<div class="header">${l(!!this.cardHref)}</div>` : ""}
|
|
86
104
|
${this.subLabel ? i`<div class="sub-label">${this.subLabel}</div>` : ""}
|
|
87
105
|
${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
88
|
-
${
|
|
106
|
+
${a ? i`<div class="date">${a}</div>` : ""}
|
|
89
107
|
</div>
|
|
90
108
|
</div>
|
|
91
109
|
`);
|
|
@@ -96,7 +114,7 @@ let t = class extends v {
|
|
|
96
114
|
${this.title ? i`<div class="header"><span class="title">${this.title}</span></div>` : ""}
|
|
97
115
|
${this.subLabel ? i`<div class="sub-label">${this.subLabel}</div>` : ""}
|
|
98
116
|
${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
99
|
-
${
|
|
117
|
+
${a ? i`<div class="date">${a}</div>` : ""}
|
|
100
118
|
</div>
|
|
101
119
|
<div class="content list">
|
|
102
120
|
<slot></slot>
|
|
@@ -107,10 +125,10 @@ let t = class extends v {
|
|
|
107
125
|
return d(i`
|
|
108
126
|
<div class="full-content">
|
|
109
127
|
<div class="top-content">
|
|
110
|
-
${this.title ? i`<div class="header">${
|
|
128
|
+
${this.title ? i`<div class="header">${l(!!this.cardHref)}</div>` : ""}
|
|
111
129
|
${this.subLabel ? i`<div class="sub-label">${this.subLabel}</div>` : ""}
|
|
112
130
|
${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
113
|
-
${
|
|
131
|
+
${a ? i`<div class="date">${a}</div>` : ""}
|
|
114
132
|
</div>
|
|
115
133
|
<div class="content">
|
|
116
134
|
<div class="social-metrics">
|
|
@@ -127,7 +145,7 @@ let t = class extends v {
|
|
|
127
145
|
${this.title ? i`<div class="header"><span class="title">${this.title}</span></div>` : ""}
|
|
128
146
|
${this.subLabel ? i`<div class="sub-label">${this.subLabel}</div>` : ""}
|
|
129
147
|
${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
130
|
-
${
|
|
148
|
+
${a ? i`<div class="date">${a}</div>` : ""}
|
|
131
149
|
</div>
|
|
132
150
|
<div class="content links">
|
|
133
151
|
<slot></slot>
|
|
@@ -141,7 +159,7 @@ let t = class extends v {
|
|
|
141
159
|
${this.title ? i`<div class="header"><span class="title">${this.title}</span></div>` : ""}
|
|
142
160
|
${this.subLabel ? i`<div class="sub-label">${this.subLabel}</div>` : ""}
|
|
143
161
|
${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
144
|
-
${
|
|
162
|
+
${a ? i`<div class="date">${a}</div>` : ""}
|
|
145
163
|
</div>
|
|
146
164
|
<div class="content actions">
|
|
147
165
|
<slot></slot>
|
|
@@ -152,17 +170,17 @@ let t = class extends v {
|
|
|
152
170
|
return d(i`
|
|
153
171
|
<div class="full-content">
|
|
154
172
|
<div class="top-content">
|
|
155
|
-
${this.title ? i`<div class="header">${
|
|
173
|
+
${this.title ? i`<div class="header">${l(!!this.cardHref)}</div>` : ""}
|
|
156
174
|
${this.subLabel ? i`<div class="sub-label">${this.subLabel}</div>` : ""}
|
|
157
175
|
${this.supportingText ? i`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
158
|
-
${
|
|
176
|
+
${a ? i`<div class="date">${a}</div>` : ""}
|
|
159
177
|
</div>
|
|
160
178
|
</div>
|
|
161
179
|
`);
|
|
162
180
|
}
|
|
163
181
|
}
|
|
164
|
-
updated(
|
|
165
|
-
super.updated(
|
|
182
|
+
updated(o) {
|
|
183
|
+
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
184
|
}
|
|
167
185
|
async firstUpdated() {
|
|
168
186
|
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 +188,7 @@ let t = class extends v {
|
|
|
170
188
|
};
|
|
171
189
|
t.__iconLoaded = !1;
|
|
172
190
|
t.__rippleLoaded = !1;
|
|
173
|
-
t.styles =
|
|
191
|
+
t.styles = m`
|
|
174
192
|
:host {
|
|
175
193
|
display: block;
|
|
176
194
|
box-sizing: border-box;
|
|
@@ -512,7 +530,7 @@ e([
|
|
|
512
530
|
s({ type: String, reflect: !0, attribute: "max-height" })
|
|
513
531
|
], t.prototype, "maxHeight", 2);
|
|
514
532
|
t = e([
|
|
515
|
-
|
|
533
|
+
u("scb-card")
|
|
516
534
|
], t);
|
|
517
535
|
export {
|
|
518
536
|
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,9 +3234,9 @@ 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>
|
|
@@ -5085,6 +5087,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
5085
5087
|
inline-size: 100%;
|
|
5086
5088
|
max-inline-size: 100%;
|
|
5087
5089
|
overflow: hidden;
|
|
5090
|
+
font-variant-numeric: tabular-nums;
|
|
5088
5091
|
}
|
|
5089
5092
|
|
|
5090
5093
|
.scb-keyfigure-card:focus,
|