scb-wc-test 0.1.248 → 0.1.250
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 +91 -140
- package/mvc/components/scb-datepicker/scb-datepicker.js +41 -36
- package/package.json +2 -2
- package/scb-card/scb-card.d.ts +0 -5
- package/scb-card/scb-card.js +116 -195
- package/scb-datepicker/scb-datepicker.d.ts +5 -0
- package/scb-datepicker/scb-datepicker.js +115 -93
- package/scb-wc-test.bundle.js +440 -484
|
@@ -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 x}from"../../vendor/preload-helper.js";import{a as _,n as a,i as z,x as o,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-tooltip/scb-tooltip.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(r,c,n){try{customElements.get(r)||t(r,c,n)}catch(p){var l=String(p||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var S=Object.defineProperty,T=Object.getOwnPropertyDescriptor,$=e=>{throw TypeError(e)},s=(e,t,r,c)=>{for(var n=c>1?void 0:c?T(t,r):t,l=e.length-1,p;l>=0;l--)(p=e[l])&&(n=(c?p(t,r,n):p(n))||n);return c&&n&&S(t,r,n),n},L=(e,t,r)=>t.has(e)||$("Cannot "+r),F=(e,t,r)=>t.has(e)?$("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,r),k=(e,t,r)=>(L(e,t,"access private method"),r),v,g;let i=class extends z{constructor(){super(...arguments),F(this,v),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.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.__onImgLoad=e=>{const t=e.currentTarget.closest(".media");t&&t.classList.add("is-loaded")},this.__onKeyDown=e=>{const t=this.__effectiveHref();(e.key==="Enter"||e.key===" ")&&t&&(e.preventDefault(),this.__navigate(t,e))},this.__handleHrefNavigation=e=>{const t=this.__effectiveHref();t&&(e.target.closest("a")||this.__navigate(t,e))}}get likeButton(){return this.type!=="social"?null:this.renderRoot.querySelector(".likes scb-icon-button")}__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 n=Number(r[0]),l=Number(r[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}}__noWrapText(e){return(e??"").replace(/ /g," ").replace(/-/g,"‑")}__dispatchLikeEvent(e,t){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,detail:t})),this.dispatchEvent(new CustomEvent(e.replace("-",""),{bubbles:!0,composed:!0,detail:t}))}__dispatchCardNavigate(e,t){const r={href:e,originalEvent:t},c=new CustomEvent("card-navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:r});if(this.dispatchEvent(c),c.defaultPrevented)return!1;const n=new CustomEvent("cardnavigate",{bubbles:!0,composed:!0,cancelable:!0,detail:r});return this.dispatchEvent(n),!n.defaultPrevented}__effectiveHref(){return this.cardHref||this.href}__navigate(e,t){e&&this.__dispatchCardNavigate(e,t)&&window.open(e,"_self")}__mediaTemplate(){if((this.mediaType||"").toLowerCase()==="avatar")return o`
|
|
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 t=Number(this.mediaWidth)||0,r=Number(this.mediaHeight)||0;const c=(this.mediaAspect||"").trim();if(!t||!r){const h=this.__calcAspectWH(c||"16/9");t||(t=h.w),r||(r=h.h)}const n=`aspect-ratio:${c||`${t}/${r}`};`,l=this.mediaPlaceholder?"has-ph":"",p=this.mediaFit||"cover",m=this.mediaPosition||"center";return o`
|
|
9
|
+
<div class="media ${l}" style="${n}">
|
|
10
10
|
<slot name="media-sources"></slot>
|
|
11
11
|
<img
|
|
12
12
|
src="${this.mediaHref||""}"
|
|
@@ -16,164 +16,140 @@ import{_ as $}from"../../vendor/preload-helper.js";import{a as S,n as a,i as w,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:${m};"
|
|
20
|
+
width="${t}"
|
|
21
|
+
height="${r}"
|
|
22
22
|
@load=${this.__onImgLoad}
|
|
23
23
|
/>
|
|
24
24
|
</div>
|
|
25
|
-
`}return null}mapSpacingToken(
|
|
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():"",r=this.__effectiveHref(),c=r?"clickable":"",n=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",l=(h=!1)=>h?o`<a class="title" href="${r}" tabindex="-1"
|
|
26
26
|
>${this.title}</a
|
|
27
|
-
><md-icon>arrow_forward</md-icon>`:
|
|
27
|
+
><md-icon>arrow_forward</md-icon>`:o`<span class="title">${this.title}</span>`,p=()=>this.__mediaTemplate(),m=h=>o`
|
|
28
28
|
<div
|
|
29
|
-
class="scb-card ${
|
|
30
|
-
@click=${
|
|
31
|
-
@keydown=${
|
|
32
|
-
style="cursor:${
|
|
33
|
-
role=${
|
|
34
|
-
tabindex=${
|
|
35
|
-
aria-label=${this.title||
|
|
29
|
+
class="scb-card ${e} ${t} ${c}"
|
|
30
|
+
@click=${r?this.__handleHrefNavigation:null}
|
|
31
|
+
@keydown=${r?this.__onKeyDown:null}
|
|
32
|
+
style="cursor:${r?"pointer":"default"};"
|
|
33
|
+
role=${r?"link":"group"}
|
|
34
|
+
tabindex=${r?"0":"-1"}
|
|
35
|
+
aria-label=${this.title||"Kort"}
|
|
36
36
|
>
|
|
37
|
-
${o
|
|
38
|
-
${
|
|
39
|
-
${
|
|
37
|
+
${r?o`<md-ripple></md-ripple>`:""}
|
|
38
|
+
${p()}
|
|
39
|
+
${h}
|
|
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 m(o`
|
|
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?o`<div class="header">${l(!!r)}</div>`:""}
|
|
46
|
+
${this.subtitle?o`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
47
|
+
${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
48
|
+
${n?o`<div class="date">${n}</div>`:""}
|
|
49
49
|
</div>
|
|
50
50
|
</div>
|
|
51
|
-
`);case"list":return
|
|
51
|
+
`);case"list":return m(o`
|
|
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?o`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
55
|
+
${this.subtitle?o`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
56
|
+
${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
57
|
+
${n?o`<div class="date">${n}</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 h=this.commentsHref,f=d=>{d.stopPropagation()},u=d=>{const b=this.renderRoot?.querySelector(".scb-card");b&&(d?b.classList.add("no-hover"):b.classList.remove("no-hover"))},y=o`
|
|
64
|
+
<span class="likes" title=""
|
|
65
|
+
@mouseenter=${()=>u(!0)}
|
|
66
|
+
@mouseleave=${()=>u(!1)}
|
|
67
|
+
>
|
|
68
|
+
<scb-icon-button
|
|
69
|
+
id="like-button"
|
|
70
|
+
variant="standard"
|
|
71
|
+
icon="thumb_up"
|
|
72
|
+
?icon-filled=${this.hasLiked} // boolean attribute binding
|
|
73
|
+
aria-label="${this.likesText||"Gilla"}"
|
|
74
|
+
@click=${d=>{d.stopPropagation(),this.hasLiked=!this.hasLiked,this.__dispatchLikeEvent("like-click",{hasLiked:this.hasLiked,likes:this.likes})}}
|
|
75
|
+
@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}))}}
|
|
76
|
+
@hover=${d=>{d.preventDefault(),d.stopPropagation(),this.__dispatchLikeEvent("like-hover",{hasLiked:this.hasLiked,likes:this.likes})}}
|
|
77
|
+
></scb-icon-button>
|
|
78
|
+
<span class="social-text">${this.likesText?`${this.likesText}: `:""}${this.likes}</span>
|
|
79
|
+
</span>
|
|
80
|
+
`;return m(o`
|
|
64
81
|
<div class="full-content">
|
|
65
82
|
<div class="top-content">
|
|
66
|
-
${this.title?
|
|
67
|
-
${this.subtitle?
|
|
68
|
-
${this.supportingText?
|
|
69
|
-
${
|
|
83
|
+
${this.title?o`<div class="header">${l(!!r)}</div>`:""}
|
|
84
|
+
${this.subtitle?o`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
85
|
+
${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
86
|
+
${n?o`<div class="date">${n}</div>`:""}
|
|
70
87
|
</div>
|
|
71
88
|
<div class="content">
|
|
72
89
|
<div class="social-metrics">
|
|
73
|
-
${this.author?
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<span
|
|
85
|
-
class="comments"
|
|
86
|
-
@mouseenter=${()=>u(!0)}
|
|
87
|
-
@mouseleave=${()=>u(!1)}
|
|
88
|
-
>
|
|
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
|
-
`}
|
|
101
|
-
<span class="social-text">${this.commentsText}: ${this.comments}</span>
|
|
102
|
-
</span>
|
|
103
|
-
<span
|
|
104
|
-
class="likes"
|
|
90
|
+
${this.author?o`
|
|
91
|
+
<a
|
|
92
|
+
class="author social-text"
|
|
93
|
+
href="${this.authorHref||"#"}"
|
|
94
|
+
tabindex="0"
|
|
95
|
+
@click=${f}
|
|
96
|
+
@mouseenter=${()=>u(!0)}
|
|
97
|
+
@mouseleave=${()=>u(!1)}
|
|
98
|
+
>${this.authorText}</a>
|
|
99
|
+
`:""}
|
|
100
|
+
<span class="comments"
|
|
105
101
|
@mouseenter=${()=>u(!0)}
|
|
106
102
|
@mouseleave=${()=>u(!1)}
|
|
107
103
|
>
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
icon
|
|
112
|
-
|
|
113
|
-
|
|
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>`}
|
|
104
|
+
${h!==""?o`
|
|
105
|
+
<scb-icon-button href="${h}" tabindex="0" @click=${f} variant="standard" icon="comment" aria-label="Gå till kommentarer"></scb-icon-button>
|
|
106
|
+
`:o`
|
|
107
|
+
<md-icon>comment</md-icon>
|
|
108
|
+
`}
|
|
109
|
+
<span class="social-text">${this.commentsText?`${this.commentsText}: `:""}${this.comments}</span>
|
|
129
110
|
</span>
|
|
111
|
+
${this.likesHoverContent?o`
|
|
112
|
+
<scb-tooltip variant="rich" for="like-button" supporting-text=${this.__noWrapText(this.likesHoverContent)} trigger="hover" position="right">
|
|
113
|
+
${y}
|
|
114
|
+
</scb-tooltip>
|
|
115
|
+
`:y}
|
|
130
116
|
</div>
|
|
131
117
|
</div>
|
|
132
118
|
</div>
|
|
133
|
-
`);case"link":return
|
|
119
|
+
`);case"link":return m(o`
|
|
134
120
|
<div class="full-content">
|
|
135
121
|
<div class="top-content">
|
|
136
|
-
${this.title?
|
|
137
|
-
${this.subtitle?
|
|
138
|
-
${this.supportingText?
|
|
139
|
-
${
|
|
122
|
+
${this.title?o`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
123
|
+
${this.subtitle?o`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
124
|
+
${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
125
|
+
${n?o`<div class="date">${n}</div>`:""}
|
|
140
126
|
</div>
|
|
141
127
|
<div class="content links">
|
|
142
128
|
<slot></slot>
|
|
143
129
|
</div>
|
|
144
130
|
</div>
|
|
145
|
-
`);case"action":return
|
|
131
|
+
`);case"action":return m(o`
|
|
146
132
|
<div class="full-content">
|
|
147
133
|
<div class="top-content">
|
|
148
|
-
${this.title?
|
|
149
|
-
${this.subtitle?
|
|
150
|
-
${this.supportingText?
|
|
151
|
-
${
|
|
134
|
+
${this.title?o`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
135
|
+
${this.subtitle?o`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
136
|
+
${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
137
|
+
${n?o`<div class="date">${n}</div>`:""}
|
|
152
138
|
</div>
|
|
153
139
|
<div class="content actions">
|
|
154
140
|
<slot></slot>
|
|
155
141
|
</div>
|
|
156
142
|
</div>
|
|
157
|
-
`);
|
|
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`
|
|
143
|
+
`);default:return m(o`
|
|
168
144
|
<div class="full-content">
|
|
169
145
|
<div class="top-content">
|
|
170
|
-
${this.title?
|
|
171
|
-
${this.subtitle?
|
|
172
|
-
${this.supportingText?
|
|
173
|
-
${
|
|
146
|
+
${this.title?o`<div class="header">${l(!!r)}</div>`:""}
|
|
147
|
+
${this.subtitle?o`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
148
|
+
${this.supportingText?o`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
149
|
+
${n?o`<div class="date">${n}</div>`:""}
|
|
174
150
|
</div>
|
|
175
151
|
</div>
|
|
176
|
-
`)}}updated(
|
|
152
|
+
`)}}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")||e.has("spacingLeft")||e.has("spacingRight"))&&k(this,v,g).call(this)}async firstUpdated(e){i.__iconLoaded||(await x(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),i.__iconLoaded=!0),i.__rippleLoaded||(await x(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),i.__rippleLoaded=!0),k(this,v,g).call(this)}};v=new WeakSet;g=function(){const e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,r=this.mapSpacingToken(this.spacingBottom)??e,c=this.mapSpacingToken(this.spacingLeft),n=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-card-spacing-block-start",t):this.style.removeProperty("--scb-card-spacing-block-start"),r?this.style.setProperty("--scb-card-spacing-block-end",r):this.style.removeProperty("--scb-card-spacing-block-end"),c?this.style.setProperty("--scb-card-spacing-inline-start",c):this.style.removeProperty("--scb-card-spacing-inline-start"),n?this.style.setProperty("--scb-card-spacing-inline-end",n):this.style.removeProperty("--scb-card-spacing-inline-end")};i.__iconLoaded=!1;i.__rippleLoaded=!1;i.styles=_`
|
|
177
153
|
:host {
|
|
178
154
|
display: block;
|
|
179
155
|
box-sizing: border-box;
|
|
@@ -221,9 +197,6 @@ import{_ as $}from"../../vendor/preload-helper.js";import{a as S,n as a,i as w,x
|
|
|
221
197
|
:host([type='action']) {
|
|
222
198
|
--scb-card-max-w: var(--scb-card-action-max-w, none);
|
|
223
199
|
}
|
|
224
|
-
:host([type='container']) {
|
|
225
|
-
--scb-card-max-w: var(--scb-card-container-max-w, none);
|
|
226
|
-
}
|
|
227
200
|
|
|
228
201
|
:host([height]) .scb-card,
|
|
229
202
|
:host([max-height]) .scb-card,
|
|
@@ -296,9 +269,6 @@ import{_ as $}from"../../vendor/preload-helper.js";import{a as S,n as a,i as w,x
|
|
|
296
269
|
.scb-card.filled {
|
|
297
270
|
background: var(--md-sys-color-surface-dim, #F9F8EF);
|
|
298
271
|
}
|
|
299
|
-
.scb-card.filled-alternative {
|
|
300
|
-
background: var(--md-sys-color-surface-container, #EEF3FF);
|
|
301
|
-
}
|
|
302
272
|
.scb-card.vertical {
|
|
303
273
|
flex-direction: column;
|
|
304
274
|
}
|
|
@@ -373,23 +343,7 @@ import{_ as $}from"../../vendor/preload-helper.js";import{a as S,n as a,i as w,x
|
|
|
373
343
|
}
|
|
374
344
|
|
|
375
345
|
.full-content {
|
|
376
|
-
padding
|
|
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));
|
|
346
|
+
padding: var(--spacing-7, 24px) var(--spacing-6, 20px);
|
|
393
347
|
}
|
|
394
348
|
.top-content {
|
|
395
349
|
display: flex;
|
|
@@ -535,13 +489,10 @@ import{_ as $}from"../../vendor/preload-helper.js";import{a as S,n as a,i as w,x
|
|
|
535
489
|
margin-block-start: var(--spacing-3, 8px);
|
|
536
490
|
}
|
|
537
491
|
|
|
538
|
-
.scb-card:not(.filled)
|
|
492
|
+
.scb-card:not(.filled) .content.list ::slotted(scb-list) {
|
|
539
493
|
--scb-list-bg: var(--md-sys-color-surface, #FFFFFF);
|
|
540
494
|
}
|
|
541
495
|
.scb-card.filled .content.list ::slotted(scb-list) {
|
|
542
496
|
--scb-list-bg: var(--md-sys-color-surface-dim, #F9F8EF);
|
|
543
497
|
}
|
|
544
|
-
|
|
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);
|
|
498
|
+
`;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);i=s([w("scb-card")],i);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as v,r as h,n as w,i as _,x as c,t as b}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.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,a,r){try{customElements.get(s)||t(s,a,r)}catch(o){var i=String(o||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,p=(e,t,s,a)=>{for(var r=a>1?void 0:a?y(t,s):t,i=e.length-1,o;i>=0;i--)(o=e[i])&&(r=(a?o(t,s,r):o(r))||r);return a&&r&&f(t,s,r),r};let l=class extends _{constructor(){super(...arguments),this._currentDate=new Date,this._selectedDate=null,this._showMonthDropdown=!1,this._showYearDropdown=!1,this.variant="date",this.lang="sv",this.selectedValue="",this.open=!0,this._selectedHour=0,this._selectedMinute=0,this._viewportMargin=8,this._popupOffset=4,this._onWindowReposition=()=>{this._positionPopupWithinViewport()},this._monthNames=[this.lang=="sv"?"Januari":"January",this.lang=="sv"?"Februari":"February",this.lang=="sv"?"Mars":"March",(this.lang=="sv","April"),this.lang=="sv"?"Maj":"May",this.lang=="sv"?"Juni":"June",this.lang=="sv"?"Juli":"July",this.lang=="sv"?"Augusti":"August",(this.lang=="sv","September"),this.lang=="sv"?"Oktober":"October",(this.lang=="sv","November"),(this.lang=="sv","December")],this._outsideClickHandler=e=>{this.open&&(e.composedPath().includes(this)||this._close())},this._prevMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();t===0?this._currentDate=new Date(e-1,11,1):this._currentDate=new Date(e,t-1,1)},this._prevYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e-1,t,1)},this._nextMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();t===11?this._currentDate=new Date(e+1,0,1):this._currentDate=new Date(e,t+1,1)},this._nextYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e+1,t,1)},this._onTimeChange=e=>{const t=e.target.value,[s,a]=t.split(":"),r=parseInt(s,10),i=parseInt(a,10);this._selectedHour=isNaN(r)?0:Math.max(0,Math.min(23,r)),this._selectedMinute=isNaN(i)?0:Math.max(0,Math.min(59,i)),this._fireDateTimeChange()},this._close=()=>{this.open=!1,this.dispatchEvent(new CustomEvent("datepicker-closed",{bubbles:!0,composed:!0}))}}_positionPopupWithinViewport(){if(!this.open)return;const e=this.parentElement?.getBoundingClientRect(),t=this.renderRoot.querySelector(".datepicker-popup");if(!e||!t)return;const s=window.innerWidth,a=window.innerHeight,r=Math.max(220,s-this._viewportMargin*2),i=Math.min(t.offsetWidth||380,r),o=t.offsetHeight||420,d=Math.min(Math.max(e.left,this._viewportMargin),s-this._viewportMargin-i)-e.left,u=a-e.bottom-this._viewportMargin,m=e.top-this._viewportMargin,g=u<o+this._popupOffset&&m>u;this.style.setProperty("--scb-datepicker-computed-width",`${i}px`),this.style.setProperty("--scb-datepicker-translate-x",`${d}px`),g?(this.style.setProperty("--scb-datepicker-top","auto"),this.style.setProperty("--scb-datepicker-bottom",`calc(100% + ${this._popupOffset}px)`),this.style.setProperty("--scb-datepicker-max-height",`${Math.max(0,m-this._popupOffset)}px`)):(this.style.setProperty("--scb-datepicker-top",`calc(100% + ${this._popupOffset}px)`),this.style.setProperty("--scb-datepicker-bottom","auto"),this.style.setProperty("--scb-datepicker-max-height",`${Math.max(0,u-this._popupOffset)}px`))}updated(e){if(super.updated(e),this.open?(window.addEventListener("mousedown",this._outsideClickHandler),window.addEventListener("resize",this._onWindowReposition,{passive:!0}),window.addEventListener("scroll",this._onWindowReposition,{passive:!0,capture:!0}),requestAnimationFrame(()=>this._positionPopupWithinViewport())):(window.removeEventListener("mousedown",this._outsideClickHandler),window.removeEventListener("resize",this._onWindowReposition),window.removeEventListener("scroll",this._onWindowReposition,!0)),e.has("selectedValue")&&this.selectedValue){const t=new Date(this.selectedValue);isNaN(t.getTime())||(this._selectedDate=t,this._currentDate=new Date(t.getFullYear(),t.getMonth(),1),this.variant==="datetime-local"&&(this._selectedHour=t.getHours(),this._selectedMinute=t.getMinutes()))}this.open&&requestAnimationFrame(()=>this._positionPopupWithinViewport())}disconnectedCallback(){window.removeEventListener("mousedown",this._outsideClickHandler),window.removeEventListener("resize",this._onWindowReposition),window.removeEventListener("scroll",this._onWindowReposition,!0),super.disconnectedCallback()}render(){if(!this.open)return c``;const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth(),s=new Date,a=this._getMonthDays(e,t),r=Array.from({length:101},(o,n)=>s.getFullYear()-50+n),i=this.variant==="datetime-local"&&!this._showMonthDropdown&&!this._showYearDropdown;return c`
|
|
2
2
|
<div class="datepicker-popup popup">
|
|
3
3
|
<div class="header">
|
|
4
4
|
<div class="month-selector ${this._showMonthDropdown?"open":""} ${this._showYearDropdown?"disable":""}">
|
|
@@ -8,7 +8,7 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
8
8
|
tabindex=${this._showYearDropdown?-1:0}
|
|
9
9
|
class="dropdown-selected"
|
|
10
10
|
@click=${()=>this._toggleMonthDropdown()}
|
|
11
|
-
@keydown=${
|
|
11
|
+
@keydown=${o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this._toggleMonthDropdown())}}
|
|
12
12
|
>
|
|
13
13
|
${this._monthNames[t].slice(0,3)}
|
|
14
14
|
<md-icon>arrow_drop_down</md-icon>
|
|
@@ -25,7 +25,7 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
25
25
|
tabindex=${this._showMonthDropdown?-1:0}
|
|
26
26
|
class="dropdown-selected"
|
|
27
27
|
@click=${()=>this._toggleYearDropdown()}
|
|
28
|
-
@keydown=${
|
|
28
|
+
@keydown=${o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this._toggleYearDropdown())}}
|
|
29
29
|
>
|
|
30
30
|
${e}
|
|
31
31
|
<md-icon>arrow_drop_down</md-icon>
|
|
@@ -36,43 +36,43 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
36
36
|
<scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang=="sv"?"Nästa år":"Next year"}></scb-icon-button>
|
|
37
37
|
</div>
|
|
38
38
|
</div>
|
|
39
|
-
${this._showMonthDropdown||this._showYearDropdown?
|
|
39
|
+
${this._showMonthDropdown||this._showYearDropdown?c`<scb-divider></scb-divider>`:""}
|
|
40
40
|
<div class="datepicker-content" style="position:relative;">
|
|
41
|
-
${this._showMonthDropdown?
|
|
41
|
+
${this._showMonthDropdown?c`
|
|
42
42
|
<div class="dropdown-list">
|
|
43
|
-
${this._monthNames.map((
|
|
43
|
+
${this._monthNames.map((o,n)=>c`
|
|
44
44
|
<div
|
|
45
|
-
@keydown=${
|
|
45
|
+
@keydown=${d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),this._onMonthChangeCustom(n))}}
|
|
46
46
|
tabindex="0"
|
|
47
|
-
class="dropdown-item${
|
|
48
|
-
@click=${()=>this._onMonthChangeCustom(
|
|
49
|
-
id=${
|
|
47
|
+
class="dropdown-item${n===t?" selected":""}"
|
|
48
|
+
@click=${()=>this._onMonthChangeCustom(n)}
|
|
49
|
+
id=${n===t?"selected-month":""}
|
|
50
50
|
>
|
|
51
|
-
${
|
|
52
|
-
${
|
|
51
|
+
${n===t?c`<md-icon>check</md-icon>`:""}
|
|
52
|
+
${o}
|
|
53
53
|
<md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
|
|
54
54
|
</div>
|
|
55
55
|
`)}
|
|
56
56
|
</div>
|
|
57
57
|
`:""}
|
|
58
|
-
${this._showYearDropdown?
|
|
58
|
+
${this._showYearDropdown?c`
|
|
59
59
|
<div class="dropdown-list">
|
|
60
|
-
${
|
|
60
|
+
${r.map(o=>c`
|
|
61
61
|
<div
|
|
62
|
-
@keydown=${
|
|
62
|
+
@keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._onYearChangeCustom(o))}}
|
|
63
63
|
tabindex="0"
|
|
64
|
-
class="dropdown-item${
|
|
65
|
-
@click=${()=>this._onYearChangeCustom(
|
|
66
|
-
id=${
|
|
64
|
+
class="dropdown-item${o===e?" selected":""}"
|
|
65
|
+
@click=${()=>this._onYearChangeCustom(o)}
|
|
66
|
+
id=${o===e?"selected-year":""}
|
|
67
67
|
>
|
|
68
|
-
${
|
|
69
|
-
${
|
|
68
|
+
${o===e?c`<md-icon>check</md-icon>`:""}
|
|
69
|
+
${o}
|
|
70
70
|
<md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
|
|
71
71
|
</div>
|
|
72
72
|
`)}
|
|
73
73
|
</div>
|
|
74
74
|
`:""}
|
|
75
|
-
${!this._showMonthDropdown&&!this._showYearDropdown?
|
|
75
|
+
${!this._showMonthDropdown&&!this._showYearDropdown?c`
|
|
76
76
|
<div class="datepicker-calendar">
|
|
77
77
|
<table>
|
|
78
78
|
<thead>
|
|
@@ -81,19 +81,19 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
81
81
|
</tr>
|
|
82
82
|
</thead>
|
|
83
83
|
<tbody>
|
|
84
|
-
${a.map(
|
|
84
|
+
${a.map(o=>c`
|
|
85
85
|
<tr>
|
|
86
|
-
${
|
|
86
|
+
${o.map(n=>n?c`
|
|
87
87
|
<td>
|
|
88
88
|
<div
|
|
89
|
-
@keydown=${
|
|
89
|
+
@keydown=${d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),this._selectDate(n))}}
|
|
90
90
|
role="button"
|
|
91
91
|
tabindex="0"
|
|
92
|
-
class="day${this._isToday(
|
|
93
|
-
@click=${()=>this._selectDate(
|
|
94
|
-
>${
|
|
92
|
+
class="day${this._isToday(n,s)?" today":""}${this._isSelected(n)?" selected":""}"
|
|
93
|
+
@click=${()=>this._selectDate(n)}
|
|
94
|
+
>${n.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
|
|
95
95
|
</td>
|
|
96
|
-
`:
|
|
96
|
+
`:c`<td></td>`)}
|
|
97
97
|
</tr>
|
|
98
98
|
`)}
|
|
99
99
|
</tbody>
|
|
@@ -101,7 +101,7 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
101
101
|
</div>
|
|
102
102
|
`:""}
|
|
103
103
|
</div>
|
|
104
|
-
${
|
|
104
|
+
${i?c`
|
|
105
105
|
<div style="padding: 0 24px;">
|
|
106
106
|
<label style="display:flex;align-items:center;gap:8px;">
|
|
107
107
|
<span>${this.lang=="sv"?"Tid:":"Time:"}</span>
|
|
@@ -110,24 +110,27 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
110
110
|
</div>
|
|
111
111
|
`:""}
|
|
112
112
|
<div class="datepicker-footer">
|
|
113
|
-
${!this._showMonthDropdown&&!this._showYearDropdown?
|
|
113
|
+
${!this._showMonthDropdown&&!this._showYearDropdown?c`
|
|
114
114
|
<scb-button variant="text" label=${this.lang=="sv"?"Stäng":"Close"} @click=${this._close}></scb-button>
|
|
115
115
|
`:""}
|
|
116
116
|
</div>
|
|
117
117
|
</div>
|
|
118
|
-
`}_getMonthDays(e,t){const
|
|
118
|
+
`}_getMonthDays(e,t){const s=new Date(Date.UTC(e,t,1)),a=new Date(Date.UTC(e,t+1,0)),r=[];let i=[],o=s.getUTCDay(),n=o===0?6:o-1;for(let d=0;d<n;d++)i.push(null);for(let d=1;d<=a.getUTCDate();d++){const u=new Date(Date.UTC(e,t,d));i.push(u),i.length===7&&(r.push(i),i=[])}if(i.length){for(;i.length<7;)i.push(null);r.push(i)}return r}_toggleMonthDropdown(){this._showMonthDropdown=!this._showMonthDropdown,this._showMonthDropdown&&(this._showYearDropdown=!1,setTimeout(()=>{const e=this.renderRoot.querySelector("#selected-month");e&&e.scrollIntoView({block:"center"})},0))}_toggleYearDropdown(){this._showYearDropdown=!this._showYearDropdown,this._showYearDropdown&&(this._showMonthDropdown=!1,setTimeout(()=>{const e=this.renderRoot.querySelector("#selected-year");e&&e.scrollIntoView({block:"center"})},0))}_onMonthChangeCustom(e){const t=this._currentDate.getFullYear();this._currentDate=new Date(t,e,1),this._showMonthDropdown=!1}_onYearChangeCustom(e){const t=this._currentDate.getMonth();this._currentDate=new Date(e,t,1),this._showYearDropdown=!1}_isToday(e,t){return e.getDate()===t.getDate()&&e.getMonth()===t.getMonth()&&e.getFullYear()===t.getFullYear()}_isSelected(e){return this._selectedDate&&e.getDate()===this._selectedDate.getDate()&&e.getMonth()===this._selectedDate.getMonth()&&e.getFullYear()===this._selectedDate.getFullYear()}_selectDate(e){if(this._selectedDate=e,this.variant==="datetime-local"){const t=new Date(e);t.setHours(this._selectedHour??0,this._selectedMinute??0,0,0),this._selectedHour=t.getHours(),this._selectedMinute=t.getMinutes();const s=r=>r.toString().padStart(2,"0"),a=`${t.getFullYear()}-${s(t.getMonth()+1)}-${s(t.getDate())} ${s(t.getHours())}:${s(t.getMinutes())}`;this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:a},bubbles:!0,composed:!0}))}else{const t=e.toISOString().slice(0,10);this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:t},bubbles:!0,composed:!0}))}}_fireDateTimeChange(){if(this.variant==="datetime-local"&&this._selectedDate){const e=new Date(this._selectedDate);e.setHours(this._selectedHour??0,this._selectedMinute??0,0,0);const t=a=>a.toString().padStart(2,"0"),s=`${e.getFullYear()}-${t(e.getMonth()+1)}-${t(e.getDate())} ${t(e.getHours())}:${t(e.getMinutes())}`;this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:s},bubbles:!0,composed:!0}))}}};l.styles=[v`
|
|
119
119
|
:host {
|
|
120
120
|
--scb-datepicker-width: 380px;
|
|
121
121
|
--scb-datepicker-z-index: 1100;
|
|
122
|
+
--scb-datepicker-viewport-margin: 8px;
|
|
122
123
|
--scb-datepicker-offset: var(--spacing-2, 4px);
|
|
123
|
-
max-width: var(--scb-datepicker-width);
|
|
124
|
+
max-width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
|
|
124
125
|
font-family: var(--brand-font);
|
|
125
126
|
color: var(--md-sys-color-on-surface);
|
|
126
127
|
display: block;
|
|
127
128
|
position: absolute;
|
|
128
|
-
top: calc(100% + var(--scb-datepicker-offset));
|
|
129
|
+
top: var(--scb-datepicker-top, calc(100% + var(--scb-datepicker-offset)));
|
|
130
|
+
bottom: var(--scb-datepicker-bottom, auto);
|
|
129
131
|
left: 0;
|
|
130
|
-
width:
|
|
132
|
+
width: var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));
|
|
133
|
+
transform: translateX(var(--scb-datepicker-translate-x, 0px));
|
|
131
134
|
z-index: var(--scb-datepicker-z-index);
|
|
132
135
|
}
|
|
133
136
|
.month-selector, .year-selector {
|
|
@@ -195,8 +198,10 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
195
198
|
background: var(--md-sys-color-surface);
|
|
196
199
|
border-radius: var(--md-sys-shape-corner-small);
|
|
197
200
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
|
|
198
|
-
max-width:
|
|
201
|
+
max-width: 100%;
|
|
199
202
|
width: 100%;
|
|
203
|
+
max-height: var(--scb-datepicker-max-height, 80vh);
|
|
204
|
+
overflow: auto;
|
|
200
205
|
font-family: var(--brand-font);
|
|
201
206
|
}
|
|
202
207
|
.datepicker-content{
|
|
@@ -288,4 +293,4 @@ import{a as m,r as p,n as u,i as w,x as d,t as _}from"../../vendor/vendor.js";im
|
|
|
288
293
|
.close-datepicker:hover {
|
|
289
294
|
background: var(--md-sys-color-primary-container, #e3f2fd);
|
|
290
295
|
}
|
|
291
|
-
`];
|
|
296
|
+
`];p([h()],l.prototype,"_currentDate",2);p([h()],l.prototype,"_selectedDate",2);p([h()],l.prototype,"_showMonthDropdown",2);p([h()],l.prototype,"_showYearDropdown",2);p([w({type:String})],l.prototype,"variant",2);p([w({type:String})],l.prototype,"lang",2);p([w({type:String})],l.prototype,"selectedValue",2);p([w({type:Boolean})],l.prototype,"open",2);p([h()],l.prototype,"_selectedHour",2);p([h()],l.prototype,"_selectedMinute",2);l=p([b("scb-datepicker")],l);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.250",
|
|
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": "2F1D68AB500855BFB1740AD8AB0DE8B1476E257668D1C91951853FF1828397F2"
|
|
386
386
|
}
|