scb-wc-test 0.1.145 → 0.1.146
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-card/scb-card.js +44 -25
- package/package.json +2 -2
- package/scb-card/scb-card.js +74 -49
- package/scb-wc-test.bundle.js +196 -177
|
@@ -1,11 +1,11 @@
|
|
|
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
|
|
2
|
+
import{_ as f}from"../../vendor/preload-helper.js";import{a as k,n as o,i as _,x as a,t as w}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-link/scb-link.js";import"../scb-avatar/scb-avatar.js";import"../scb-list/scb-list-item.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(s,c,n){try{customElements.get(s)||t(s,c,n)}catch(p){var l=String(p||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var z=Object.defineProperty,S=Object.getOwnPropertyDescriptor,x=e=>{throw TypeError(e)},r=(e,t,s,c)=>{for(var n=c>1?void 0:c?S(t,s):t,l=e.length-1,p;l>=0;l--)(p=e[l])&&(n=(c?p(t,s,n):p(n))||n);return c&&n&&z(t,s,n),n},T=(e,t,s)=>t.has(e)||x("Cannot "+s),P=(e,t,s)=>t.has(e)?x("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,s),y=(e,t,s)=>(T(e,t,"access private method"),s),b,g;let i=class extends _{constructor(){super(...arguments),P(this,b),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.mediaAlt="",this.mediaSrcset="",this.mediaSizes="",this.mediaLoading="auto",this.mediaDecoding="async",this.mediaFetchPriority="auto",this.mediaFit="cover",this.mediaPosition="center",this.mediaWidth="",this.mediaHeight="",this.mediaAspect="",this.mediaPlaceholder=!1,this.cardHref="",this.title="",this.subtitle="",this.supportingText="",this.commentsText="",this.comments=0,this.commentsHref="",this.likesText="",this.likes=0,this.hasLiked=!1,this.likesInteractive=!1,this.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.spacing="",this.spacingTop="",this.spacingBottom="",this.__onImgLoad=e=>{const t=e.currentTarget.closest(".media");t&&t.classList.add("is-loaded")},this.__onKeyDown=e=>{const t=(this.cardHref||"").trim();t&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),window.location.assign(t))},this.__handleHrefNavigation=e=>{const t=(this.cardHref||"").trim();!t||e.button!==0||e.metaKey||e.ctrlKey||e.altKey||e.shiftKey||e.target?.closest("a, button, input, select, textarea, summary")||window.location.assign(t)}}get __isLinkCard(){if(!(this.cardHref||"").trim())return!1;const t=(this.type||"").toLowerCase();return t==="standard"||t==="social"}__calcAspectWH(e){const t=(e||"").trim();if(!t)return{w:640,h:360};const s=t.includes("/")?t.split("/"):t.includes(":")?t.split(":"):t.includes("x")?t.split("x"):null;if(s&&s.length===2){const n=Number(s[0]),l=Number(s[1]);if(n>0&&l>0)return{w:n,h:l}}const c=Number(t);return isFinite(c)&&c>0?{w:1e3,h:Math.round(1e3/c)}:{w:640,h:360}}__mediaTemplate(){if((this.mediaType||"").toLowerCase()==="avatar")return a`
|
|
3
3
|
<div class="media">
|
|
4
4
|
<slot name="media">
|
|
5
5
|
<scb-avatar variant="icon" label="${this.title}" icon-name="person"></scb-avatar>
|
|
6
6
|
</slot>
|
|
7
7
|
</div>
|
|
8
|
-
`;if(this.mediaHref||this.mediaSrcset){let t=Number(this.mediaWidth)||0,s=Number(this.mediaHeight)||0;const c=(this.mediaAspect||"").trim();if(!t||!s){const
|
|
8
|
+
`;if(this.mediaHref||this.mediaSrcset){let t=Number(this.mediaWidth)||0,s=Number(this.mediaHeight)||0;const c=(this.mediaAspect||"").trim();if(!t||!s){const h=this.__calcAspectWH(c||"16/9");t||(t=h.w),s||(s=h.h)}const n=`aspect-ratio:${c||`${t}/${s}`};`,l=this.mediaPlaceholder?"has-ph":"",p=this.mediaFit||"cover",m=this.mediaPosition||"center";return a`
|
|
9
9
|
<div class="media ${l}" style="${n}">
|
|
10
10
|
<slot name="media-sources"></slot>
|
|
11
11
|
<img
|
|
@@ -16,13 +16,13 @@ import{_ as v}from"../../vendor/preload-helper.js";import{a as x,n as o,i as $,x
|
|
|
16
16
|
loading="${this.mediaLoading}"
|
|
17
17
|
decoding="${this.mediaDecoding}"
|
|
18
18
|
fetchpriority="${this.mediaFetchPriority}"
|
|
19
|
-
style="object-fit:${
|
|
19
|
+
style="object-fit:${p};object-position:${m};"
|
|
20
20
|
width="${t}"
|
|
21
21
|
height="${s}"
|
|
22
22
|
@load=${this.__onImgLoad}
|
|
23
23
|
/>
|
|
24
24
|
</div>
|
|
25
|
-
`}return null}mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}render(){const e=this.variant?`${this.variant.toLowerCase()}`:"",t=this.type==="list"?"vertical":this.direction?this.direction.toLowerCase():"",s=this.__isLinkCard,c=s?"clickable":"",n=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",l=(
|
|
25
|
+
`}return null}mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}render(){const e=this.variant?`${this.variant.toLowerCase()}`:"",t=this.type==="list"?"vertical":this.direction?this.direction.toLowerCase():"",s=this.__isLinkCard,c=s?"clickable":"",n=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",l=(h=!1)=>h?a`<span class="title">${this.title}</span><md-icon>arrow_forward</md-icon>`:a`<span class="title">${this.title}</span>`,p=()=>this.__mediaTemplate(),m=h=>a`
|
|
26
26
|
<div
|
|
27
27
|
class="scb-card ${e} ${t} ${c}"
|
|
28
28
|
@click=${s?this.__handleHrefNavigation:null}
|
|
@@ -33,11 +33,11 @@ import{_ as v}from"../../vendor/preload-helper.js";import{a as x,n as o,i as $,x
|
|
|
33
33
|
aria-label=${this.title||"Kort"}
|
|
34
34
|
>
|
|
35
35
|
${s?a`<md-ripple></md-ripple>`:""}
|
|
36
|
-
${
|
|
37
|
-
${
|
|
36
|
+
${p()}
|
|
37
|
+
${h}
|
|
38
38
|
</div>
|
|
39
39
|
${s?a`<md-focus-ring></md-focus-ring>`:""}
|
|
40
|
-
`;switch(this.type){case"standard":return
|
|
40
|
+
`;switch(this.type){case"standard":return m(a`
|
|
41
41
|
<div class="full-content">
|
|
42
42
|
<div class="top-content">
|
|
43
43
|
${this.title?a`<div class="header">${l(s)}</div>`:""}
|
|
@@ -46,7 +46,7 @@ import{_ as v}from"../../vendor/preload-helper.js";import{a as x,n as o,i as $,x
|
|
|
46
46
|
${n?a`<div class="date">${n}</div>`:""}
|
|
47
47
|
</div>
|
|
48
48
|
</div>
|
|
49
|
-
`);case"list":return
|
|
49
|
+
`);case"list":return m(a`
|
|
50
50
|
<div class="full-content">
|
|
51
51
|
<div class="top-content">
|
|
52
52
|
${this.title?a`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
@@ -58,7 +58,7 @@ import{_ as v}from"../../vendor/preload-helper.js";import{a as x,n as o,i as $,x
|
|
|
58
58
|
<slot></slot>
|
|
59
59
|
</div>
|
|
60
60
|
</div>
|
|
61
|
-
`);case"social":const
|
|
61
|
+
`);case"social":const h=this.commentsHref,$=d=>{d.stopPropagation()},u=d=>{const v=this.renderRoot?.querySelector(".scb-card");v&&(d?v.classList.add("no-hover"):v.classList.remove("no-hover"))};return m(a`
|
|
62
62
|
<div class="full-content">
|
|
63
63
|
<div class="top-content">
|
|
64
64
|
${this.title?a`<div class="header">${l(s)}</div>`:""}
|
|
@@ -68,26 +68,34 @@ import{_ as v}from"../../vendor/preload-helper.js";import{a as x,n as o,i as $,x
|
|
|
68
68
|
</div>
|
|
69
69
|
<div class="content">
|
|
70
70
|
<div class="social-metrics">
|
|
71
|
-
<span class="comments"
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
<span class="comments"
|
|
72
|
+
@mouseenter=${()=>u(!0)}
|
|
73
|
+
@mouseleave=${()=>u(!1)}
|
|
74
|
+
>
|
|
75
|
+
${h!==""?a`
|
|
76
|
+
<scb-icon-button href="${h}" tabindex="0" @click=${$} variant="standard" icon="comment" aria-label="Gå till kommentarer" tooltip="Gå till kommentarer"></scb-icon-button>
|
|
77
|
+
`:a`
|
|
76
78
|
<md-icon>comment</md-icon>
|
|
77
79
|
`}
|
|
78
|
-
|
|
79
|
-
</span>
|
|
80
|
-
<span class="likes"
|
|
80
|
+
<span>${this.commentsText}: ${this.comments}</span>
|
|
81
|
+
</span>
|
|
82
|
+
<span class="likes"
|
|
83
|
+
@mouseenter=${()=>u(!0)}
|
|
84
|
+
@mouseleave=${()=>u(!1)}
|
|
85
|
+
>
|
|
81
86
|
${this.likesInteractive?a`
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
87
|
+
<scb-icon-button variant="standard" icon="${this.hasLiked,"thumb_up"}" aria-label="${this.likesText||"Gilla"}" tooltip="${this.likesText||"Gilla"}"
|
|
88
|
+
@click=${d=>{d.stopPropagation(),this.dispatchEvent(new CustomEvent("like-click",{bubbles:!0,composed:!0}))}}
|
|
89
|
+
@keydown=${d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),d.stopPropagation(),this.dispatchEvent(new CustomEvent("like-click",{bubbles:!0,composed:!0})))}}
|
|
90
|
+
@hover=${d=>{d.preventDefault(),d.stopPropagation(),this.dispatchEvent(new CustomEvent("like-hover",{bubbles:!0,composed:!0}))}}
|
|
91
|
+
></scb-icon-button>
|
|
92
|
+
`:a`<md-icon>"${this.hasLiked,"thumb_up"}"</md-icon>`}
|
|
85
93
|
<span>${this.likesText}: ${this.likes}</span>
|
|
86
94
|
</span>
|
|
87
95
|
</div>
|
|
88
96
|
</div>
|
|
89
97
|
</div>
|
|
90
|
-
`);case"link":return
|
|
98
|
+
`);case"link":return m(a`
|
|
91
99
|
<div class="full-content">
|
|
92
100
|
<div class="top-content">
|
|
93
101
|
${this.title?a`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
@@ -99,7 +107,7 @@ import{_ as v}from"../../vendor/preload-helper.js";import{a as x,n as o,i as $,x
|
|
|
99
107
|
<slot></slot>
|
|
100
108
|
</div>
|
|
101
109
|
</div>
|
|
102
|
-
`);case"action":return
|
|
110
|
+
`);case"action":return m(a`
|
|
103
111
|
<div class="full-content">
|
|
104
112
|
<div class="top-content">
|
|
105
113
|
${this.title?a`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
@@ -111,7 +119,7 @@ import{_ as v}from"../../vendor/preload-helper.js";import{a as x,n as o,i as $,x
|
|
|
111
119
|
<slot></slot>
|
|
112
120
|
</div>
|
|
113
121
|
</div>
|
|
114
|
-
`);default:return
|
|
122
|
+
`);default:return m(a`
|
|
115
123
|
<div class="full-content">
|
|
116
124
|
<div class="top-content">
|
|
117
125
|
${this.title?a`<div class="header">${l(s)}</div>`:""}
|
|
@@ -120,7 +128,7 @@ import{_ as v}from"../../vendor/preload-helper.js";import{a as x,n as o,i as $,x
|
|
|
120
128
|
${n?a`<div class="date">${n}</div>`:""}
|
|
121
129
|
</div>
|
|
122
130
|
</div>
|
|
123
|
-
`)}}updated(e){super.updated(e),e.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),e.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),e.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),e.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),e.has("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"),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom"))&&
|
|
131
|
+
`)}}updated(e){super.updated(e),e.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),e.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),e.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),e.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),e.has("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"),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom"))&&y(this,b,g).call(this)}async firstUpdated(e){i.__iconLoaded||(await f(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),i.__iconLoaded=!0),i.__rippleLoaded||(await f(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),i.__rippleLoaded=!0),y(this,b,g).call(this)}};b=new WeakSet;g=function(){const e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,s=this.mapSpacingToken(this.spacingBottom)??e;t?this.style.setProperty("--scb-card-spacing-block-start",t):this.style.removeProperty("--scb-card-spacing-block-start"),s?this.style.setProperty("--scb-card-spacing-block-end",s):this.style.removeProperty("--scb-card-spacing-block-end")};i.__iconLoaded=!1;i.__rippleLoaded=!1;i.styles=k`
|
|
124
132
|
:host {
|
|
125
133
|
display: block;
|
|
126
134
|
box-sizing: border-box;
|
|
@@ -137,6 +145,17 @@ import{_ as v}from"../../vendor/preload-helper.js";import{a as x,n as o,i as $,x
|
|
|
137
145
|
margin-block-start: var(--scb-card-spacing-block-start, 0);
|
|
138
146
|
margin-block-end: var(--scb-card-spacing-block-end, 0);
|
|
139
147
|
}
|
|
148
|
+
.scb-card.no-hover,
|
|
149
|
+
.scb-card.no-hover:hover,
|
|
150
|
+
.scb-card.no-hover:active {
|
|
151
|
+
/* Ta bort hover/klick-effekter */
|
|
152
|
+
box-shadow: none !important;
|
|
153
|
+
background: var(--md-sys-color-surface) !important;
|
|
154
|
+
cursor: default !important;
|
|
155
|
+
}
|
|
156
|
+
.scb-card.no-hover md-ripple {
|
|
157
|
+
display: none !important;
|
|
158
|
+
}
|
|
140
159
|
:host([type='standard']) {
|
|
141
160
|
--scb-card-max-w: var(--scb-card-standard-max-w);
|
|
142
161
|
}
|
|
@@ -439,4 +458,4 @@ import{_ as v}from"../../vendor/preload-helper.js";import{a as x,n as o,i as $,x
|
|
|
439
458
|
.scb-card.filled .content.list ::slotted(scb-list) {
|
|
440
459
|
--scb-list-bg: var(--md-sys-color-surface-dim);
|
|
441
460
|
}
|
|
442
|
-
`;r([o({type:String,reflect:!0})],i.prototype,"type",2);r([o({type:String,reflect:!0})],i.prototype,"variant",2);r([o({type:String,reflect:!0})],i.prototype,"direction",2);r([o({type:String,attribute:"media-type"})],i.prototype,"mediaType",2);r([o({type:String,attribute:"media-href"})],i.prototype,"mediaHref",2);r([o({type:String,attribute:"media-alt"})],i.prototype,"mediaAlt",2);r([o({type:String,attribute:"media-srcset"})],i.prototype,"mediaSrcset",2);r([o({type:String,attribute:"media-sizes"})],i.prototype,"mediaSizes",2);r([o({type:String,attribute:"media-loading"})],i.prototype,"mediaLoading",2);r([o({type:String,attribute:"media-decoding"})],i.prototype,"mediaDecoding",2);r([o({type:String,attribute:"media-fetchpriority"})],i.prototype,"mediaFetchPriority",2);r([o({type:String,attribute:"media-fit"})],i.prototype,"mediaFit",2);r([o({type:String,attribute:"media-position"})],i.prototype,"mediaPosition",2);r([o({type:String,attribute:"media-width"})],i.prototype,"mediaWidth",2);r([o({type:String,attribute:"media-height"})],i.prototype,"mediaHeight",2);r([o({type:String,attribute:"media-aspect"})],i.prototype,"mediaAspect",2);r([o({type:Boolean,attribute:"media-placeholder"})],i.prototype,"mediaPlaceholder",2);r([o({type:String,attribute:"card-href",reflect:!0})],i.prototype,"cardHref",2);r([o({type:String,reflect:!0})],i.prototype,"title",2);r([o({type:String,reflect:!0})],i.prototype,"subtitle",2);r([o({type:String,attribute:"supporting-text",reflect:!0})],i.prototype,"supportingText",2);r([o({type:Date,reflect:!0})],i.prototype,"date",2);r([o({type:String,attribute:"social-comments-text",reflect:!0})],i.prototype,"commentsText",2);r([o({type:Number,attribute:"social-comments",reflect:!0})],i.prototype,"comments",2);r([o({type:String,attribute:"social-comments-href",reflect:!0})],i.prototype,"commentsHref",2);r([o({type:String,attribute:"social-likes-text",reflect:!0})],i.prototype,"likesText",2);r([o({type:Number,attribute:"social-likes",reflect:!0})],i.prototype,"likes",2);r([o({type:Boolean,attribute:"social-has-liked",reflect:!0})],i.prototype,"hasLiked",2);r([o({type:Boolean,attribute:"social-likes-interactive",reflect:!0})],i.prototype,"likesInteractive",2);r([o({type:String,reflect:!0})],i.prototype,"sizing",2);r([o({type:String,reflect:!0})],i.prototype,"width",2);r([o({type:String,reflect:!0,attribute:"max-width"})],i.prototype,"maxWidth",2);r([o({type:String,reflect:!0})],i.prototype,"height",2);r([o({type:String,reflect:!0,attribute:"max-height"})],i.prototype,"maxHeight",2);r([o({type:String,reflect:!0})],i.prototype,"spacing",2);r([o({type:String,attribute:"spacing-top",reflect:!0})],i.prototype,"spacingTop",2);r([o({type:String,attribute:"spacing-bottom",reflect:!0})],i.prototype,"spacingBottom",2);i=r([
|
|
461
|
+
`;r([o({type:String,reflect:!0})],i.prototype,"type",2);r([o({type:String,reflect:!0})],i.prototype,"variant",2);r([o({type:String,reflect:!0})],i.prototype,"direction",2);r([o({type:String,attribute:"media-type"})],i.prototype,"mediaType",2);r([o({type:String,attribute:"media-href"})],i.prototype,"mediaHref",2);r([o({type:String,attribute:"media-alt"})],i.prototype,"mediaAlt",2);r([o({type:String,attribute:"media-srcset"})],i.prototype,"mediaSrcset",2);r([o({type:String,attribute:"media-sizes"})],i.prototype,"mediaSizes",2);r([o({type:String,attribute:"media-loading"})],i.prototype,"mediaLoading",2);r([o({type:String,attribute:"media-decoding"})],i.prototype,"mediaDecoding",2);r([o({type:String,attribute:"media-fetchpriority"})],i.prototype,"mediaFetchPriority",2);r([o({type:String,attribute:"media-fit"})],i.prototype,"mediaFit",2);r([o({type:String,attribute:"media-position"})],i.prototype,"mediaPosition",2);r([o({type:String,attribute:"media-width"})],i.prototype,"mediaWidth",2);r([o({type:String,attribute:"media-height"})],i.prototype,"mediaHeight",2);r([o({type:String,attribute:"media-aspect"})],i.prototype,"mediaAspect",2);r([o({type:Boolean,attribute:"media-placeholder"})],i.prototype,"mediaPlaceholder",2);r([o({type:String,attribute:"card-href",reflect:!0})],i.prototype,"cardHref",2);r([o({type:String,reflect:!0})],i.prototype,"title",2);r([o({type:String,reflect:!0})],i.prototype,"subtitle",2);r([o({type:String,attribute:"supporting-text",reflect:!0})],i.prototype,"supportingText",2);r([o({type:Date,reflect:!0})],i.prototype,"date",2);r([o({type:String,attribute:"social-comments-text",reflect:!0})],i.prototype,"commentsText",2);r([o({type:Number,attribute:"social-comments",reflect:!0})],i.prototype,"comments",2);r([o({type:String,attribute:"social-comments-href",reflect:!0})],i.prototype,"commentsHref",2);r([o({type:String,attribute:"social-likes-text",reflect:!0})],i.prototype,"likesText",2);r([o({type:Number,attribute:"social-likes",reflect:!0})],i.prototype,"likes",2);r([o({type:Boolean,attribute:"social-has-liked",reflect:!0})],i.prototype,"hasLiked",2);r([o({type:Boolean,attribute:"social-likes-interactive",reflect:!0})],i.prototype,"likesInteractive",2);r([o({type:String,reflect:!0})],i.prototype,"sizing",2);r([o({type:String,reflect:!0})],i.prototype,"width",2);r([o({type:String,reflect:!0,attribute:"max-width"})],i.prototype,"maxWidth",2);r([o({type:String,reflect:!0})],i.prototype,"height",2);r([o({type:String,reflect:!0,attribute:"max-height"})],i.prototype,"maxHeight",2);r([o({type:String,reflect:!0})],i.prototype,"spacing",2);r([o({type:String,attribute:"spacing-top",reflect:!0})],i.prototype,"spacingTop",2);r([o({type:String,attribute:"spacing-bottom",reflect:!0})],i.prototype,"spacingBottom",2);i=r([w("scb-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.146",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -365,5 +365,5 @@
|
|
|
365
365
|
},
|
|
366
366
|
"./mvc/*": "./mvc/*"
|
|
367
367
|
},
|
|
368
|
-
"buildHash": "
|
|
368
|
+
"buildHash": "65D81FF549BB06C493006DCE9A9832411D328142CA57F9B0D960A8EAAAB3ADC6"
|
|
369
369
|
}
|
package/scb-card/scb-card.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as o, customElement as
|
|
1
|
+
import { css as k, LitElement as z, html as s } from "lit";
|
|
2
|
+
import { property as o, customElement as w } 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-icon-button/scb-icon-button.js";
|
|
7
7
|
import "../scb-link/scb-link.js";
|
|
8
8
|
import "../scb-avatar/scb-avatar.js";
|
|
9
|
-
var
|
|
9
|
+
var _ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, x = (e) => {
|
|
10
10
|
throw TypeError(e);
|
|
11
11
|
}, r = (e, t, a, c) => {
|
|
12
|
-
for (var n = c > 1 ? void 0 : c ?
|
|
13
|
-
(m = e[
|
|
14
|
-
return c && n &&
|
|
15
|
-
},
|
|
16
|
-
let i = class extends
|
|
12
|
+
for (var n = c > 1 ? void 0 : c ? S(t, a) : t, d = e.length - 1, m; d >= 0; d--)
|
|
13
|
+
(m = e[d]) && (n = (c ? m(t, a, n) : m(n)) || n);
|
|
14
|
+
return c && n && _(t, a, n), n;
|
|
15
|
+
}, T = (e, t, a) => t.has(e) || x("Cannot " + a), P = (e, t, a) => t.has(e) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), f = (e, t, a) => (T(e, t, "access private method"), a), b, g;
|
|
16
|
+
let i = class extends z {
|
|
17
17
|
constructor() {
|
|
18
|
-
super(...arguments),
|
|
18
|
+
super(...arguments), P(this, b), this.type = "", this.variant = "", this.direction = "", this.mediaType = "", this.mediaHref = "", this.mediaAlt = "", this.mediaSrcset = "", this.mediaSizes = "", this.mediaLoading = "auto", this.mediaDecoding = "async", this.mediaFetchPriority = "auto", this.mediaFit = "cover", this.mediaPosition = "center", this.mediaWidth = "", this.mediaHeight = "", this.mediaAspect = "", this.mediaPlaceholder = !1, this.cardHref = "", this.title = "", this.subtitle = "", this.supportingText = "", this.commentsText = "", this.comments = 0, this.commentsHref = "", this.likesText = "", this.likes = 0, this.hasLiked = !1, this.likesInteractive = !1, this.sizing = "stretch", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this.__onImgLoad = (e) => {
|
|
19
19
|
const t = e.currentTarget.closest(".media");
|
|
20
20
|
t && t.classList.add("is-loaded");
|
|
21
21
|
}, this.__onKeyDown = (e) => {
|
|
@@ -40,8 +40,8 @@ let i = class extends x {
|
|
|
40
40
|
if (!t) return { w: 640, h: 360 };
|
|
41
41
|
const a = t.includes("/") ? t.split("/") : t.includes(":") ? t.split(":") : t.includes("x") ? t.split("x") : null;
|
|
42
42
|
if (a && a.length === 2) {
|
|
43
|
-
const n = Number(a[0]),
|
|
44
|
-
if (n > 0 &&
|
|
43
|
+
const n = Number(a[0]), d = Number(a[1]);
|
|
44
|
+
if (n > 0 && d > 0) return { w: n, h: d };
|
|
45
45
|
}
|
|
46
46
|
const c = Number(t);
|
|
47
47
|
return isFinite(c) && c > 0 ? { w: 1e3, h: Math.round(1e3 / c) } : { w: 640, h: 360 };
|
|
@@ -59,12 +59,12 @@ let i = class extends x {
|
|
|
59
59
|
let t = Number(this.mediaWidth) || 0, a = Number(this.mediaHeight) || 0;
|
|
60
60
|
const c = (this.mediaAspect || "").trim();
|
|
61
61
|
if (!t || !a) {
|
|
62
|
-
const
|
|
63
|
-
t || (t =
|
|
62
|
+
const p = this.__calcAspectWH(c || "16/9");
|
|
63
|
+
t || (t = p.w), a || (a = p.h);
|
|
64
64
|
}
|
|
65
|
-
const n = `aspect-ratio:${c || `${t}/${a}`};`,
|
|
65
|
+
const n = `aspect-ratio:${c || `${t}/${a}`};`, d = this.mediaPlaceholder ? "has-ph" : "", m = this.mediaFit || "cover", h = this.mediaPosition || "center";
|
|
66
66
|
return s`
|
|
67
|
-
<div class="media ${
|
|
67
|
+
<div class="media ${d}" style="${n}">
|
|
68
68
|
<slot name="media-sources"></slot>
|
|
69
69
|
<img
|
|
70
70
|
src="${this.mediaHref || ""}"
|
|
@@ -74,7 +74,7 @@ let i = class extends x {
|
|
|
74
74
|
loading="${this.mediaLoading}"
|
|
75
75
|
decoding="${this.mediaDecoding}"
|
|
76
76
|
fetchpriority="${this.mediaFetchPriority}"
|
|
77
|
-
style="object-fit:${m};object-position:${
|
|
77
|
+
style="object-fit:${m};object-position:${h};"
|
|
78
78
|
width="${t}"
|
|
79
79
|
height="${a}"
|
|
80
80
|
@load=${this.__onImgLoad}
|
|
@@ -91,7 +91,7 @@ let i = class extends x {
|
|
|
91
91
|
return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
|
|
92
92
|
}
|
|
93
93
|
render() {
|
|
94
|
-
const e = this.variant ? `${this.variant.toLowerCase()}` : "", t = this.type === "list" ? "vertical" : this.direction ? this.direction.toLowerCase() : "", a = this.__isLinkCard, c = a ? "clickable" : "", n = this.date instanceof Date ? this.date.toISOString().slice(0, 10) : this.date || "",
|
|
94
|
+
const e = this.variant ? `${this.variant.toLowerCase()}` : "", t = this.type === "list" ? "vertical" : this.direction ? this.direction.toLowerCase() : "", a = this.__isLinkCard, c = a ? "clickable" : "", n = this.date instanceof Date ? this.date.toISOString().slice(0, 10) : this.date || "", d = (p = !1) => p ? s`<span class="title">${this.title}</span><md-icon>arrow_forward</md-icon>` : s`<span class="title">${this.title}</span>`, m = () => this.__mediaTemplate(), h = (p) => s`
|
|
95
95
|
<div
|
|
96
96
|
class="scb-card ${e} ${t} ${c}"
|
|
97
97
|
@click=${a ? this.__handleHrefNavigation : null}
|
|
@@ -103,16 +103,16 @@ let i = class extends x {
|
|
|
103
103
|
>
|
|
104
104
|
${a ? s`<md-ripple></md-ripple>` : ""}
|
|
105
105
|
${m()}
|
|
106
|
-
${
|
|
106
|
+
${p}
|
|
107
107
|
</div>
|
|
108
108
|
${a ? s`<md-focus-ring></md-focus-ring>` : ""}
|
|
109
109
|
`;
|
|
110
110
|
switch (this.type) {
|
|
111
111
|
case "standard":
|
|
112
|
-
return
|
|
112
|
+
return h(s`
|
|
113
113
|
<div class="full-content">
|
|
114
114
|
<div class="top-content">
|
|
115
|
-
${this.title ? s`<div class="header">${
|
|
115
|
+
${this.title ? s`<div class="header">${d(a)}</div>` : ""}
|
|
116
116
|
${this.subtitle ? s`<div class="sub-label">${this.subtitle}</div>` : ""}
|
|
117
117
|
${this.supportingText ? s`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
118
118
|
${n ? s`<div class="date">${n}</div>` : ""}
|
|
@@ -120,7 +120,7 @@ let i = class extends x {
|
|
|
120
120
|
</div>
|
|
121
121
|
`);
|
|
122
122
|
case "list":
|
|
123
|
-
return
|
|
123
|
+
return h(s`
|
|
124
124
|
<div class="full-content">
|
|
125
125
|
<div class="top-content">
|
|
126
126
|
${this.title ? s`<div class="header"><span class="title">${this.title}</span></div>` : ""}
|
|
@@ -134,37 +134,51 @@ let i = class extends x {
|
|
|
134
134
|
</div>
|
|
135
135
|
`);
|
|
136
136
|
case "social":
|
|
137
|
-
const
|
|
138
|
-
|
|
137
|
+
const p = this.commentsHref, $ = (l) => {
|
|
138
|
+
l.stopPropagation();
|
|
139
|
+
}, u = (l) => {
|
|
140
|
+
var y;
|
|
141
|
+
const v = (y = this.renderRoot) == null ? void 0 : y.querySelector(".scb-card");
|
|
142
|
+
v && (l ? v.classList.add("no-hover") : v.classList.remove("no-hover"));
|
|
139
143
|
};
|
|
140
|
-
return
|
|
144
|
+
return h(s`
|
|
141
145
|
<div class="full-content">
|
|
142
146
|
<div class="top-content">
|
|
143
|
-
${this.title ? s`<div class="header">${
|
|
147
|
+
${this.title ? s`<div class="header">${d(a)}</div>` : ""}
|
|
144
148
|
${this.subtitle ? s`<div class="sub-label">${this.subtitle}</div>` : ""}
|
|
145
149
|
${this.supportingText ? s`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
146
150
|
${n ? s`<div class="date">${n}</div>` : ""}
|
|
147
151
|
</div>
|
|
148
152
|
<div class="content">
|
|
149
153
|
<div class="social-metrics">
|
|
150
|
-
<span class="comments"
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
154
|
+
<span class="comments"
|
|
155
|
+
@mouseenter=${() => u(!0)}
|
|
156
|
+
@mouseleave=${() => u(!1)}
|
|
157
|
+
>
|
|
158
|
+
${p !== "" ? s`
|
|
159
|
+
<scb-icon-button href="${p}" tabindex="0" @click=${$} variant="standard" icon="comment" aria-label="Gå till kommentarer" tooltip="Gå till kommentarer"></scb-icon-button>
|
|
160
|
+
` : s`
|
|
155
161
|
<md-icon>comment</md-icon>
|
|
156
162
|
`}
|
|
157
|
-
|
|
158
|
-
</span>
|
|
159
|
-
<span class="likes"
|
|
163
|
+
<span>${this.commentsText}: ${this.comments}</span>
|
|
164
|
+
</span>
|
|
165
|
+
<span class="likes"
|
|
166
|
+
@mouseenter=${() => u(!0)}
|
|
167
|
+
@mouseleave=${() => u(!1)}
|
|
168
|
+
>
|
|
160
169
|
${this.likesInteractive ? s`
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
170
|
+
<scb-icon-button variant="standard" icon="${this.hasLiked, "thumb_up"}" aria-label="${this.likesText || "Gilla"}" tooltip="${this.likesText || "Gilla"}"
|
|
171
|
+
@click=${(l) => {
|
|
172
|
+
l.stopPropagation(), this.dispatchEvent(new CustomEvent("like-click", { bubbles: !0, composed: !0 }));
|
|
173
|
+
}}
|
|
174
|
+
@keydown=${(l) => {
|
|
175
|
+
(l.key === "Enter" || l.key === " ") && (l.preventDefault(), l.stopPropagation(), this.dispatchEvent(new CustomEvent("like-click", { bubbles: !0, composed: !0 })));
|
|
176
|
+
}}
|
|
177
|
+
@hover=${(l) => {
|
|
178
|
+
l.preventDefault(), l.stopPropagation(), this.dispatchEvent(new CustomEvent("like-hover", { bubbles: !0, composed: !0 }));
|
|
164
179
|
}}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
}}></scb-icon-button>` : s`<md-icon>"${this.hasLiked, "thumb_up"}"</md-icon>`}
|
|
180
|
+
></scb-icon-button>
|
|
181
|
+
` : s`<md-icon>"${this.hasLiked, "thumb_up"}"</md-icon>`}
|
|
168
182
|
<span>${this.likesText}: ${this.likes}</span>
|
|
169
183
|
</span>
|
|
170
184
|
</div>
|
|
@@ -172,7 +186,7 @@ let i = class extends x {
|
|
|
172
186
|
</div>
|
|
173
187
|
`);
|
|
174
188
|
case "link":
|
|
175
|
-
return
|
|
189
|
+
return h(s`
|
|
176
190
|
<div class="full-content">
|
|
177
191
|
<div class="top-content">
|
|
178
192
|
${this.title ? s`<div class="header"><span class="title">${this.title}</span></div>` : ""}
|
|
@@ -186,7 +200,7 @@ let i = class extends x {
|
|
|
186
200
|
</div>
|
|
187
201
|
`);
|
|
188
202
|
case "action":
|
|
189
|
-
return
|
|
203
|
+
return h(s`
|
|
190
204
|
<div class="full-content">
|
|
191
205
|
<div class="top-content">
|
|
192
206
|
${this.title ? s`<div class="header"><span class="title">${this.title}</span></div>` : ""}
|
|
@@ -200,10 +214,10 @@ let i = class extends x {
|
|
|
200
214
|
</div>
|
|
201
215
|
`);
|
|
202
216
|
default:
|
|
203
|
-
return
|
|
217
|
+
return h(s`
|
|
204
218
|
<div class="full-content">
|
|
205
219
|
<div class="top-content">
|
|
206
|
-
${this.title ? s`<div class="header">${
|
|
220
|
+
${this.title ? s`<div class="header">${d(a)}</div>` : ""}
|
|
207
221
|
${this.subtitle ? s`<div class="sub-label">${this.subtitle}</div>` : ""}
|
|
208
222
|
${this.supportingText ? s`<div class="supporting-text">${this.supportingText}</div>` : ""}
|
|
209
223
|
${n ? s`<div class="date">${n}</div>` : ""}
|
|
@@ -213,20 +227,20 @@ let i = class extends x {
|
|
|
213
227
|
}
|
|
214
228
|
}
|
|
215
229
|
updated(e) {
|
|
216
|
-
super.updated(e), e.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), e.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), e.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), e.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), e.has("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"), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom")) &&
|
|
230
|
+
super.updated(e), e.has("width") && (this.width ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), e.has("maxWidth") && (this.maxWidth ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), e.has("height") && (this.height ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), e.has("maxHeight") && (this.maxHeight ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), e.has("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"), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom")) && f(this, b, g).call(this);
|
|
217
231
|
}
|
|
218
232
|
async firstUpdated(e) {
|
|
219
|
-
i.__iconLoaded || (await import("@material/web/icon/icon.js"), i.__iconLoaded = !0), i.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), i.__rippleLoaded = !0),
|
|
233
|
+
i.__iconLoaded || (await import("@material/web/icon/icon.js"), i.__iconLoaded = !0), i.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), i.__rippleLoaded = !0), f(this, b, g).call(this);
|
|
220
234
|
}
|
|
221
235
|
};
|
|
222
|
-
|
|
223
|
-
|
|
236
|
+
b = /* @__PURE__ */ new WeakSet();
|
|
237
|
+
g = function() {
|
|
224
238
|
const e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, a = this.mapSpacingToken(this.spacingBottom) ?? e;
|
|
225
239
|
t ? this.style.setProperty("--scb-card-spacing-block-start", t) : this.style.removeProperty("--scb-card-spacing-block-start"), a ? this.style.setProperty("--scb-card-spacing-block-end", a) : this.style.removeProperty("--scb-card-spacing-block-end");
|
|
226
240
|
};
|
|
227
241
|
i.__iconLoaded = !1;
|
|
228
242
|
i.__rippleLoaded = !1;
|
|
229
|
-
i.styles =
|
|
243
|
+
i.styles = k`
|
|
230
244
|
:host {
|
|
231
245
|
display: block;
|
|
232
246
|
box-sizing: border-box;
|
|
@@ -243,6 +257,17 @@ i.styles = f`
|
|
|
243
257
|
margin-block-start: var(--scb-card-spacing-block-start, 0);
|
|
244
258
|
margin-block-end: var(--scb-card-spacing-block-end, 0);
|
|
245
259
|
}
|
|
260
|
+
.scb-card.no-hover,
|
|
261
|
+
.scb-card.no-hover:hover,
|
|
262
|
+
.scb-card.no-hover:active {
|
|
263
|
+
/* Ta bort hover/klick-effekter */
|
|
264
|
+
box-shadow: none !important;
|
|
265
|
+
background: var(--md-sys-color-surface) !important;
|
|
266
|
+
cursor: default !important;
|
|
267
|
+
}
|
|
268
|
+
.scb-card.no-hover md-ripple {
|
|
269
|
+
display: none !important;
|
|
270
|
+
}
|
|
246
271
|
:host([type='standard']) {
|
|
247
272
|
--scb-card-max-w: var(--scb-card-standard-max-w);
|
|
248
273
|
}
|
|
@@ -658,7 +683,7 @@ r([
|
|
|
658
683
|
o({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
659
684
|
], i.prototype, "spacingBottom", 2);
|
|
660
685
|
i = r([
|
|
661
|
-
|
|
686
|
+
w("scb-card")
|
|
662
687
|
], i);
|
|
663
688
|
export {
|
|
664
689
|
i as ScbCard
|