scb-wc-test 0.1.244 → 0.1.245
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 +135 -84
- package/mvc/components/scb-dialog/scb-dialog.js +2 -0
- package/package.json +2 -2
- package/scb-card/scb-card.d.ts +5 -0
- package/scb-card/scb-card.js +188 -107
- package/scb-dialog/scb-dialog.js +2 -0
- package/scb-wc-test.bundle.js +485 -432
|
@@ -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
|
|
2
|
+
import{_ as $}from"../../vendor/preload-helper.js";import{a as S,n as a,i as w,x as r,E as _,t as T}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-tooltip/scb-tooltip.js";import"../scb-list/scb-list-item.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(n,o,c){try{customElements.get(n)||e(n,o,c)}catch(p){var l=String(p||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var P=Object.defineProperty,F=Object.getOwnPropertyDescriptor,z=t=>{throw TypeError(t)},s=(t,e,n,o)=>{for(var c=o>1?void 0:o?F(e,n):e,l=t.length-1,p;l>=0;l--)(p=t[l])&&(c=(o?p(e,n,c):p(c))||c);return o&&c&&P(e,n,c),c},L=(t,e,n)=>e.has(t)||z("Cannot "+n),H=(t,e,n)=>e.has(t)?z("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,n),b=(t,e,n)=>(L(t,e,"access private method"),n),g,y,x;let i=class extends w{constructor(){super(...arguments),H(this,g),this.type="standard",this.variant="standard",this.direction="vertical",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.href="",this.title="",this.subtitle="",this.supportingText="",this.commentsText="",this.comments=0,this.commentsHref="",this.likesText="",this.likes=0,this.likesHoverContent="",this.hasLiked=!1,this.likesInteractive=!1,this.author=!1,this.authorText="",this.authorHref="",this.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.innerPadding=void 0,this.paddingTop=void 0,this.paddingBottom=void 0,this.paddingLeft=void 0,this.paddingRight=void 0,this.__onImgLoad=t=>{const e=t.currentTarget.closest(".media");e&&e.classList.add("is-loaded")},this.__onKeyDown=t=>{const e=this.__effectiveHref();(t.key==="Enter"||t.key===" ")&&e&&(t.preventDefault(),this.__navigate(e,t))},this.__handleHrefNavigation=t=>{const e=this.__effectiveHref();e&&(t.target.closest("a")||this.__navigate(e,t))}}get likeButton(){return this.type!=="social"?null:this.renderRoot.querySelector(".likes scb-icon-button")}__calcAspectWH(t){const e=(t||"").trim();if(!e)return{w:640,h:360};const n=e.includes("/")?e.split("/"):e.includes(":")?e.split(":"):e.includes("x")?e.split("x"):null;if(n&&n.length===2){const c=Number(n[0]),l=Number(n[1]);if(c>0&&l>0)return{w:c,h:l}}const o=Number(e);return isFinite(o)&&o>0?{w:1e3,h:Math.round(1e3/o)}:{w:640,h:360}}__noWrapText(t){return(t??"").replace(/ /g," ").replace(/-/g,"‑")}__dispatchLikeEvent(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e})),this.dispatchEvent(new CustomEvent(t.replace("-",""),{bubbles:!0,composed:!0,detail:e}))}__dispatchCardNavigate(t,e){const n={href:t,originalEvent:e},o=new CustomEvent("card-navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:n});if(this.dispatchEvent(o),o.defaultPrevented)return!1;const c=new CustomEvent("cardnavigate",{bubbles:!0,composed:!0,cancelable:!0,detail:n});return this.dispatchEvent(c),!c.defaultPrevented}__effectiveHref(){return this.cardHref||this.href}__navigate(t,e){t&&this.__dispatchCardNavigate(t,e)&&window.open(t,"_self")}__mediaTemplate(){if((this.mediaType||"").toLowerCase()==="avatar")return r`
|
|
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
|
|
9
|
-
<div class="media ${l}" style="${
|
|
8
|
+
`;if(this.mediaHref||this.mediaSrcset){let e=Number(this.mediaWidth)||0,n=Number(this.mediaHeight)||0;const o=(this.mediaAspect||"").trim();if(!e||!n){const h=this.__calcAspectWH(o||"16/9");e||(e=h.w),n||(n=h.h)}const c=`aspect-ratio:${o||`${e}/${n}`};`,l=this.mediaPlaceholder?"has-ph":"",p=this.mediaFit||"cover",v=this.mediaPosition||"center";return r`
|
|
9
|
+
<div class="media ${l}" style="${c}">
|
|
10
10
|
<slot name="media-sources"></slot>
|
|
11
11
|
<img
|
|
12
12
|
src="${this.mediaHref||""}"
|
|
@@ -16,138 +16,164 @@ import{_ as y}from"../../vendor/preload-helper.js";import{a as _,n as a,i as $,x
|
|
|
16
16
|
loading="${this.mediaLoading}"
|
|
17
17
|
decoding="${this.mediaDecoding}"
|
|
18
18
|
fetchpriority="${this.mediaFetchPriority}"
|
|
19
|
-
style="object-fit:${p};object-position:${
|
|
20
|
-
width="${
|
|
21
|
-
height="${
|
|
19
|
+
style="object-fit:${p};object-position:${v};"
|
|
20
|
+
width="${e}"
|
|
21
|
+
height="${n}"
|
|
22
22
|
@load=${this.__onImgLoad}
|
|
23
23
|
/>
|
|
24
24
|
</div>
|
|
25
|
-
`}return null}mapSpacingToken(
|
|
25
|
+
`}return null}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}render(){const t=this.variant?`${this.variant.toLowerCase()}`:"",e=this.type==="list"||this.type==="container"?"vertical":this.direction?this.direction.toLowerCase():"vertical",n=this.__effectiveHref(),o=(this.type==="standard"||this.type==="social")&&!!n,c=o?"clickable":"",l=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",p=(m=!1)=>m?r`<a class="title" href="${n}" tabindex="-1"
|
|
26
26
|
>${this.title}</a
|
|
27
|
-
><md-icon>arrow_forward</md-icon>`:
|
|
27
|
+
><md-icon>arrow_forward</md-icon>`:r`<span class="title">${this.title}</span>`,v=()=>this.type==="container"?null:this.__mediaTemplate(),h=m=>r`
|
|
28
28
|
<div
|
|
29
|
-
class="scb-card ${
|
|
30
|
-
@click=${
|
|
31
|
-
@keydown=${
|
|
32
|
-
style="cursor:${
|
|
33
|
-
role=${
|
|
34
|
-
tabindex=${
|
|
35
|
-
aria-label=${this.title||"Kort"}
|
|
29
|
+
class="scb-card ${t} ${e} ${c}"
|
|
30
|
+
@click=${o?this.__handleHrefNavigation:null}
|
|
31
|
+
@keydown=${o?this.__onKeyDown:null}
|
|
32
|
+
style="cursor:${o?"pointer":"default"};"
|
|
33
|
+
role=${o?"link":_}
|
|
34
|
+
tabindex=${o?"0":_}
|
|
35
|
+
aria-label=${this.title||this.subtitle||"Kort"}
|
|
36
36
|
>
|
|
37
|
-
${r
|
|
38
|
-
${
|
|
39
|
-
${
|
|
37
|
+
${o?r`<md-ripple></md-ripple>`:""}
|
|
38
|
+
${v()}
|
|
39
|
+
${m}
|
|
40
40
|
</div>
|
|
41
41
|
<md-focus-ring></md-focus-ring>
|
|
42
|
-
`;switch(this.type){case"standard":return
|
|
42
|
+
`;switch(this.type){case"standard":return h(r`
|
|
43
43
|
<div class="full-content">
|
|
44
44
|
<div class="top-content">
|
|
45
|
-
${this.title?
|
|
46
|
-
${this.subtitle?
|
|
47
|
-
${this.supportingText?
|
|
48
|
-
${
|
|
45
|
+
${this.title?r`<div class="header">${p(!!n)}</div>`:""}
|
|
46
|
+
${this.subtitle?r`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
47
|
+
${this.supportingText?r`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
48
|
+
${l?r`<div class="date">${l}</div>`:""}
|
|
49
49
|
</div>
|
|
50
50
|
</div>
|
|
51
|
-
`);case"list":return
|
|
51
|
+
`);case"list":return h(r`
|
|
52
52
|
<div class="full-content">
|
|
53
53
|
<div class="top-content">
|
|
54
|
-
${this.title?
|
|
55
|
-
${this.subtitle?
|
|
56
|
-
${this.supportingText?
|
|
57
|
-
${
|
|
54
|
+
${this.title?r`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
55
|
+
${this.subtitle?r`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
56
|
+
${this.supportingText?r`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
57
|
+
${l?r`<div class="date">${l}</div>`:""}
|
|
58
58
|
</div>
|
|
59
59
|
<div class="content list">
|
|
60
60
|
<slot></slot>
|
|
61
61
|
</div>
|
|
62
62
|
</div>
|
|
63
|
-
`);case"social":const
|
|
63
|
+
`);case"social":const m=this.commentsHref,k=d=>{d.stopPropagation()},u=d=>{const f=this.renderRoot?.querySelector(".scb-card");f&&(d?f.classList.add("no-hover"):f.classList.remove("no-hover"))};return h(r`
|
|
64
64
|
<div class="full-content">
|
|
65
65
|
<div class="top-content">
|
|
66
|
-
${this.title?
|
|
67
|
-
${this.subtitle?
|
|
68
|
-
${this.supportingText?
|
|
69
|
-
${
|
|
66
|
+
${this.title?r`<div class="header">${p(!!n)}</div>`:""}
|
|
67
|
+
${this.subtitle?r`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
68
|
+
${this.supportingText?r`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
69
|
+
${l?r`<div class="date">${l}</div>`:""}
|
|
70
70
|
</div>
|
|
71
71
|
<div class="content">
|
|
72
72
|
<div class="social-metrics">
|
|
73
|
-
${this.author?
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
73
|
+
${this.author?r`
|
|
74
|
+
<a
|
|
75
|
+
class="author social-text"
|
|
76
|
+
href="${this.authorHref||"#"}"
|
|
77
|
+
tabindex="0"
|
|
78
|
+
@click=${k}
|
|
79
|
+
@mouseenter=${()=>u(!0)}
|
|
80
|
+
@mouseleave=${()=>u(!1)}
|
|
81
|
+
>${this.authorText}</a
|
|
82
|
+
>
|
|
83
|
+
`:""}
|
|
84
|
+
<span
|
|
85
|
+
class="comments"
|
|
84
86
|
@mouseenter=${()=>u(!0)}
|
|
85
87
|
@mouseleave=${()=>u(!1)}
|
|
86
88
|
>
|
|
87
|
-
${
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
89
|
+
${m!==""?r`
|
|
90
|
+
<scb-icon-button
|
|
91
|
+
href="${m}"
|
|
92
|
+
tabindex="0"
|
|
93
|
+
@click=${k}
|
|
94
|
+
variant="standard"
|
|
95
|
+
icon="comment"
|
|
96
|
+
aria-label="Gå till kommentarer"
|
|
97
|
+
></scb-icon-button>
|
|
98
|
+
`:r`
|
|
99
|
+
<md-icon>comment</md-icon>
|
|
100
|
+
`}
|
|
92
101
|
<span class="social-text">${this.commentsText}: ${this.comments}</span>
|
|
93
102
|
</span>
|
|
94
|
-
<span
|
|
103
|
+
<span
|
|
104
|
+
class="likes"
|
|
95
105
|
@mouseenter=${()=>u(!0)}
|
|
96
106
|
@mouseleave=${()=>u(!1)}
|
|
97
107
|
>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
108
|
+
<scb-icon-button
|
|
109
|
+
id="like-button"
|
|
110
|
+
variant="standard"
|
|
111
|
+
icon="thumb_up"
|
|
112
|
+
?icon-filled=${this.hasLiked}
|
|
113
|
+
aria-label="${this.likesText||"Gilla"}"
|
|
114
|
+
@click=${d=>{d.stopPropagation(),this.hasLiked=!this.hasLiked,this.__dispatchLikeEvent("like-click",{hasLiked:this.hasLiked,likes:this.likes})}}
|
|
115
|
+
@keydown=${d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),d.stopPropagation(),this.hasLiked=!this.hasLiked,this.__dispatchLikeEvent("like-click",{hasLiked:this.hasLiked,likes:this.likes}))}}
|
|
116
|
+
@hover=${d=>{d.preventDefault(),d.stopPropagation(),this.__dispatchLikeEvent("like-hover",{hasLiked:this.hasLiked,likes:this.likes})}}
|
|
117
|
+
></scb-icon-button>
|
|
118
|
+
${this.likesHoverContent?r`
|
|
119
|
+
<scb-tooltip
|
|
120
|
+
variant="rich"
|
|
121
|
+
for="like-button"
|
|
122
|
+
supporting-text=${this.__noWrapText(this.likesHoverContent)}
|
|
123
|
+
trigger="hover"
|
|
124
|
+
position="right"
|
|
125
|
+
>
|
|
126
|
+
<span class="social-text">${this.likesText}: ${this.likes}</span>
|
|
127
|
+
</scb-tooltip>
|
|
128
|
+
`:r`<span class="social-text">${this.likesText}: ${this.likes}</span>`}
|
|
113
129
|
</span>
|
|
114
130
|
</div>
|
|
115
131
|
</div>
|
|
116
132
|
</div>
|
|
117
|
-
`);case"link":return
|
|
133
|
+
`);case"link":return h(r`
|
|
118
134
|
<div class="full-content">
|
|
119
135
|
<div class="top-content">
|
|
120
|
-
${this.title?
|
|
121
|
-
${this.subtitle?
|
|
122
|
-
${this.supportingText?
|
|
123
|
-
${
|
|
136
|
+
${this.title?r`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
137
|
+
${this.subtitle?r`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
138
|
+
${this.supportingText?r`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
139
|
+
${l?r`<div class="date">${l}</div>`:""}
|
|
124
140
|
</div>
|
|
125
141
|
<div class="content links">
|
|
126
142
|
<slot></slot>
|
|
127
143
|
</div>
|
|
128
144
|
</div>
|
|
129
|
-
`);case"action":return
|
|
145
|
+
`);case"action":return h(r`
|
|
130
146
|
<div class="full-content">
|
|
131
147
|
<div class="top-content">
|
|
132
|
-
${this.title?
|
|
133
|
-
${this.subtitle?
|
|
134
|
-
${this.supportingText?
|
|
135
|
-
${
|
|
148
|
+
${this.title?r`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
149
|
+
${this.subtitle?r`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
150
|
+
${this.supportingText?r`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
151
|
+
${l?r`<div class="date">${l}</div>`:""}
|
|
136
152
|
</div>
|
|
137
153
|
<div class="content actions">
|
|
138
154
|
<slot></slot>
|
|
139
155
|
</div>
|
|
140
156
|
</div>
|
|
141
|
-
`);
|
|
157
|
+
`);case"container":return h(r`
|
|
158
|
+
<div class="container-content ${this.title||this.subtitle?"has-header":""}">
|
|
159
|
+
${this.title||this.subtitle?r`
|
|
160
|
+
<div class="top-content">
|
|
161
|
+
${this.title?r`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
162
|
+
${this.subtitle?r`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
163
|
+
</div>
|
|
164
|
+
`:""}
|
|
165
|
+
<slot></slot>
|
|
166
|
+
</div>
|
|
167
|
+
`);default:return h(r`
|
|
142
168
|
<div class="full-content">
|
|
143
169
|
<div class="top-content">
|
|
144
|
-
${this.title?
|
|
145
|
-
${this.subtitle?
|
|
146
|
-
${this.supportingText?
|
|
147
|
-
${
|
|
170
|
+
${this.title?r`<div class="header">${p(!!n)}</div>`:""}
|
|
171
|
+
${this.subtitle?r`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
172
|
+
${this.supportingText?r`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
173
|
+
${l?r`<div class="date">${l}</div>`:""}
|
|
148
174
|
</div>
|
|
149
175
|
</div>
|
|
150
|
-
`)}}updated(
|
|
176
|
+
`)}}updated(t){super.updated(t),t.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),t.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),t.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),t.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),t.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"),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&b(this,g,y).call(this),(t.has("innerPadding")||t.has("paddingTop")||t.has("paddingBottom")||t.has("paddingLeft")||t.has("paddingRight"))&&b(this,g,x).call(this)}async firstUpdated(t){i.__iconLoaded||(await $(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),i.__iconLoaded=!0),i.__rippleLoaded||(await $(()=>import("../../vendor/vendor-material.js").then(e=>e.r),__vite__mapDeps([0,1]),import.meta.url),i.__rippleLoaded=!0),b(this,g,y).call(this),b(this,g,x).call(this)}};g=new WeakSet;y=function(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,n=this.mapSpacingToken(this.spacingBottom)??t,o=this.mapSpacingToken(this.spacingLeft),c=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-card-spacing-block-start",e):this.style.removeProperty("--scb-card-spacing-block-start"),n?this.style.setProperty("--scb-card-spacing-block-end",n):this.style.removeProperty("--scb-card-spacing-block-end"),o?this.style.setProperty("--scb-card-spacing-inline-start",o):this.style.removeProperty("--scb-card-spacing-inline-start"),c?this.style.setProperty("--scb-card-spacing-inline-end",c):this.style.removeProperty("--scb-card-spacing-inline-end")};x=function(){const t=this.mapSpacingToken(this.innerPadding),e=this.mapSpacingToken(this.paddingTop)??t,n=this.mapSpacingToken(this.paddingBottom)??t,o=this.mapSpacingToken(this.paddingLeft)??t,c=this.mapSpacingToken(this.paddingRight)??t;e?this.style.setProperty("--scb-card-content-padding-block-start",e):this.style.removeProperty("--scb-card-content-padding-block-start"),n?this.style.setProperty("--scb-card-content-padding-block-end",n):this.style.removeProperty("--scb-card-content-padding-block-end"),o?this.style.setProperty("--scb-card-content-padding-inline-start",o):this.style.removeProperty("--scb-card-content-padding-inline-start"),c?this.style.setProperty("--scb-card-content-padding-inline-end",c):this.style.removeProperty("--scb-card-content-padding-inline-end")};i.__iconLoaded=!1;i.__rippleLoaded=!1;i.styles=S`
|
|
151
177
|
:host {
|
|
152
178
|
display: block;
|
|
153
179
|
box-sizing: border-box;
|
|
@@ -195,6 +221,9 @@ import{_ as y}from"../../vendor/preload-helper.js";import{a as _,n as a,i as $,x
|
|
|
195
221
|
:host([type='action']) {
|
|
196
222
|
--scb-card-max-w: var(--scb-card-action-max-w, none);
|
|
197
223
|
}
|
|
224
|
+
:host([type='container']) {
|
|
225
|
+
--scb-card-max-w: var(--scb-card-container-max-w, none);
|
|
226
|
+
}
|
|
198
227
|
|
|
199
228
|
:host([height]) .scb-card,
|
|
200
229
|
:host([max-height]) .scb-card,
|
|
@@ -267,6 +296,9 @@ import{_ as y}from"../../vendor/preload-helper.js";import{a as _,n as a,i as $,x
|
|
|
267
296
|
.scb-card.filled {
|
|
268
297
|
background: var(--md-sys-color-surface-dim, #F9F8EF);
|
|
269
298
|
}
|
|
299
|
+
.scb-card.filled-alternative {
|
|
300
|
+
background: var(--md-sys-color-surface-container, #EEF3FF);
|
|
301
|
+
}
|
|
270
302
|
.scb-card.vertical {
|
|
271
303
|
flex-direction: column;
|
|
272
304
|
}
|
|
@@ -341,7 +373,23 @@ import{_ as y}from"../../vendor/preload-helper.js";import{a as _,n as a,i as $,x
|
|
|
341
373
|
}
|
|
342
374
|
|
|
343
375
|
.full-content {
|
|
344
|
-
padding: var(--
|
|
376
|
+
padding-block-start: var(--scb-card-content-padding-block-start, var(--spacing-7, 24px));
|
|
377
|
+
padding-block-end: var(--scb-card-content-padding-block-end, var(--spacing-7, 24px));
|
|
378
|
+
padding-inline-start: var(--scb-card-content-padding-inline-start, var(--spacing-6, 20px));
|
|
379
|
+
padding-inline-end: var(--scb-card-content-padding-inline-end, var(--spacing-6, 20px));
|
|
380
|
+
}
|
|
381
|
+
.container-content {
|
|
382
|
+
display: flex;
|
|
383
|
+
flex-direction: column;
|
|
384
|
+
gap: var(--scb-card-container-gap, var(--spacing-4, 12px));
|
|
385
|
+
padding-block-start: var(--scb-card-container-padding-block-start, var(--scb-card-content-padding-block-start, var(--spacing-7, 24px)));
|
|
386
|
+
padding-block-end: var(--scb-card-container-padding-block-end, var(--scb-card-content-padding-block-end, var(--spacing-7, 24px)));
|
|
387
|
+
padding-inline-start: var(--scb-card-container-padding-inline-start, var(--scb-card-content-padding-inline-start, var(--spacing-6, 20px)));
|
|
388
|
+
padding-inline-end: var(--scb-card-container-padding-inline-end, var(--scb-card-content-padding-inline-end, var(--spacing-6, 20px)));
|
|
389
|
+
min-inline-size: 0;
|
|
390
|
+
}
|
|
391
|
+
.container-content.has-header {
|
|
392
|
+
gap: var(--scb-card-container-gap-with-header, var(--spacing-5, 16px));
|
|
345
393
|
}
|
|
346
394
|
.top-content {
|
|
347
395
|
display: flex;
|
|
@@ -487,10 +535,13 @@ import{_ as y}from"../../vendor/preload-helper.js";import{a as _,n as a,i as $,x
|
|
|
487
535
|
margin-block-start: var(--spacing-3, 8px);
|
|
488
536
|
}
|
|
489
537
|
|
|
490
|
-
.scb-card:not(.filled) .content.list ::slotted(scb-list) {
|
|
538
|
+
.scb-card:not(.filled):not(.filled-alternative) .content.list ::slotted(scb-list) {
|
|
491
539
|
--scb-list-bg: var(--md-sys-color-surface, #FFFFFF);
|
|
492
540
|
}
|
|
493
541
|
.scb-card.filled .content.list ::slotted(scb-list) {
|
|
494
542
|
--scb-list-bg: var(--md-sys-color-surface-dim, #F9F8EF);
|
|
495
543
|
}
|
|
496
|
-
|
|
544
|
+
.scb-card.filled-alternative .content.list ::slotted(scb-list) {
|
|
545
|
+
--scb-list-bg: var(--md-sys-color-surface-container, #EEF3FF);
|
|
546
|
+
}
|
|
547
|
+
`;s([a({type:String,reflect:!0})],i.prototype,"type",2);s([a({type:String,reflect:!0})],i.prototype,"variant",2);s([a({type:String,reflect:!0})],i.prototype,"direction",2);s([a({type:String,attribute:"media-type"})],i.prototype,"mediaType",2);s([a({type:String,attribute:"media-href"})],i.prototype,"mediaHref",2);s([a({type:String,attribute:"media-alt"})],i.prototype,"mediaAlt",2);s([a({type:String,attribute:"media-srcset"})],i.prototype,"mediaSrcset",2);s([a({type:String,attribute:"media-sizes"})],i.prototype,"mediaSizes",2);s([a({type:String,attribute:"media-loading"})],i.prototype,"mediaLoading",2);s([a({type:String,attribute:"media-decoding"})],i.prototype,"mediaDecoding",2);s([a({type:String,attribute:"media-fetchpriority"})],i.prototype,"mediaFetchPriority",2);s([a({type:String,attribute:"media-fit"})],i.prototype,"mediaFit",2);s([a({type:String,attribute:"media-position"})],i.prototype,"mediaPosition",2);s([a({type:String,attribute:"media-width"})],i.prototype,"mediaWidth",2);s([a({type:String,attribute:"media-height"})],i.prototype,"mediaHeight",2);s([a({type:String,attribute:"media-aspect"})],i.prototype,"mediaAspect",2);s([a({type:Boolean,attribute:"media-placeholder"})],i.prototype,"mediaPlaceholder",2);s([a({type:String,attribute:"card-href",reflect:!0})],i.prototype,"cardHref",2);s([a({type:String,reflect:!0})],i.prototype,"href",2);s([a({type:String,reflect:!0})],i.prototype,"title",2);s([a({type:String,reflect:!0})],i.prototype,"subtitle",2);s([a({type:String,attribute:"supporting-text",reflect:!0})],i.prototype,"supportingText",2);s([a({type:Date,reflect:!0})],i.prototype,"date",2);s([a({type:String,attribute:"social-comments-text",reflect:!0})],i.prototype,"commentsText",2);s([a({type:Number,attribute:"social-comments",reflect:!0})],i.prototype,"comments",2);s([a({type:String,attribute:"social-comments-href",reflect:!0})],i.prototype,"commentsHref",2);s([a({type:String,attribute:"social-likes-text",reflect:!0})],i.prototype,"likesText",2);s([a({type:Number,attribute:"social-likes",reflect:!0})],i.prototype,"likes",2);s([a({type:String,attribute:"social-likes-hover-content",reflect:!0})],i.prototype,"likesHoverContent",2);s([a({type:Boolean,attribute:"social-has-liked",reflect:!0})],i.prototype,"hasLiked",2);s([a({type:Boolean,attribute:"social-likes-interactive",reflect:!0})],i.prototype,"likesInteractive",2);s([a({type:Boolean,attribute:"social-author",reflect:!0})],i.prototype,"author",2);s([a({type:String,attribute:"social-author-text",reflect:!0})],i.prototype,"authorText",2);s([a({type:String,attribute:"social-author-href",reflect:!0})],i.prototype,"authorHref",2);s([a({type:String,reflect:!0})],i.prototype,"sizing",2);s([a({type:String,reflect:!0})],i.prototype,"width",2);s([a({type:String,reflect:!0,attribute:"max-width"})],i.prototype,"maxWidth",2);s([a({type:String,reflect:!0})],i.prototype,"height",2);s([a({type:String,reflect:!0,attribute:"max-height"})],i.prototype,"maxHeight",2);s([a({type:String,reflect:!0})],i.prototype,"spacing",2);s([a({type:String,attribute:"spacing-top",reflect:!0})],i.prototype,"spacingTop",2);s([a({type:String,attribute:"spacing-bottom",reflect:!0})],i.prototype,"spacingBottom",2);s([a({type:String,attribute:"spacing-left",reflect:!0})],i.prototype,"spacingLeft",2);s([a({type:String,attribute:"spacing-right",reflect:!0})],i.prototype,"spacingRight",2);s([a({type:String,attribute:"padding",reflect:!0})],i.prototype,"innerPadding",2);s([a({type:String,attribute:"padding-top",reflect:!0})],i.prototype,"paddingTop",2);s([a({type:String,attribute:"padding-bottom",reflect:!0})],i.prototype,"paddingBottom",2);s([a({type:String,attribute:"padding-left",reflect:!0})],i.prototype,"paddingLeft",2);s([a({type:String,attribute:"padding-right",reflect:!0})],i.prototype,"paddingRight",2);i=s([T("scb-card")],i);
|
|
@@ -199,6 +199,8 @@ import{a as u,n as o,i as h,E as p,x as r,t as m}from"../../vendor/vendor.js";im
|
|
|
199
199
|
margin-left: 0;
|
|
200
200
|
align-self: start;
|
|
201
201
|
justify-self: end;
|
|
202
|
+
margin-top: var(--spacing-negative-2, -4px);
|
|
203
|
+
margin-right: var(--spacing-negative-4, -12px);
|
|
202
204
|
}
|
|
203
205
|
|
|
204
206
|
:host([variant="iframe"]) .content {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.245",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -382,5 +382,5 @@
|
|
|
382
382
|
},
|
|
383
383
|
"./mvc/*": "./mvc/*"
|
|
384
384
|
},
|
|
385
|
-
"buildHash": "
|
|
385
|
+
"buildHash": "2839EB0B3A3EBE3FFF4044BB16F4EB077479E2298321B5737487F964B0C65C5A"
|
|
386
386
|
}
|
package/scb-card/scb-card.d.ts
CHANGED
|
@@ -47,6 +47,11 @@ export declare class ScbCard extends LitElement {
|
|
|
47
47
|
spacingBottom: undefined;
|
|
48
48
|
spacingLeft: undefined;
|
|
49
49
|
spacingRight: undefined;
|
|
50
|
+
innerPadding: undefined;
|
|
51
|
+
paddingTop: undefined;
|
|
52
|
+
paddingBottom: undefined;
|
|
53
|
+
paddingLeft: undefined;
|
|
54
|
+
paddingRight: undefined;
|
|
50
55
|
static styles: import('lit').CSSResult;
|
|
51
56
|
/**
|
|
52
57
|
* Returnerar like-knappen (scb-icon-button) om kortet är av typen 'social'.
|