scb-wc-test 0.1.13 → 0.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mvc/components/scb-calendar-card/scb-calendar-card.js +25 -6
- package/mvc/components/scb-card/scb-card.js +80 -55
- package/mvc/components/scb-header/scb-header.js +27 -5
- package/mvc/components/scb-keyfigure-card/scb-keyfigure-card.js +29 -11
- package/mvc/components/scb-search/scb-search.js +4 -4
- package/package.json +2 -2
- package/scb-calendar-card/scb-calendar-card.js +51 -31
- package/scb-card/scb-card.js +143 -117
- package/scb-header/scb-header.js +31 -8
- package/scb-keyfigure-card/scb-keyfigure-card.js +47 -28
- package/scb-search/scb-search.d.ts +4 -0
- package/scb-search/scb-search.js +30 -21
- package/scb-wc-test.bundle.js +170 -86
|
@@ -1,7 +1,7 @@
|
|
|
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 p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x as c,t as g}from"../../vendor/vendor.js";(function(){try{var
|
|
2
|
+
import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x as c,t as g}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(s,n,t){try{customElements.get(s)||o(s,n,t)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,a=(i,o,s,n)=>{for(var t=n>1?void 0:n?v(o,s):o,l=i.length-1,d;l>=0;l--)(d=i[l])&&(t=(n?d(o,s,t):d(t))||t);return n&&t&&u(o,s,t),t};let e=class extends f{constructor(){super(...arguments),this.variant="default",this.direction="horizontal",this.title="",this.subtitle="",this.supportingText="",this.cardHref="",this.cardHrefNav="",this.showMedia=null,this.fullHeight=!1,this.fullWidth=!1,this.stretch=!1}async firstUpdated(){e.__iconLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(i=>i.i),__vite__mapDeps([0,1]),import.meta.url),e.__iconLoaded=!0),e.__rippleLoaded||(await p(()=>import("../../vendor/vendor-material.js").then(i=>i.r),__vite__mapDeps([0,1]),import.meta.url),e.__rippleLoaded=!0)}render(){const i=this.variant?`${this.variant.toLowerCase()}`:"",o=this.direction?`${this.direction.toLowerCase()}`:"",s=this.cardHref?"clickable":"",n=1,t="Jan";return c`
|
|
3
3
|
<div
|
|
4
|
-
class="calendar-card ${
|
|
4
|
+
class="calendar-card ${o} ${s} ${i}"
|
|
5
5
|
role="${this.cardHref?"link":"group"}"
|
|
6
6
|
aria-label="${this.title||"Kalenderkort"}"
|
|
7
7
|
tabindex="${this.cardHref?"0":"-1"}"
|
|
@@ -11,9 +11,9 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x
|
|
|
11
11
|
>
|
|
12
12
|
${this.cardHref?c`<md-ripple></md-ripple>`:""}
|
|
13
13
|
${this.showMedia?c`
|
|
14
|
-
<div class="media" aria-label="Datum: ${n} ${
|
|
14
|
+
<div class="media" aria-label="Datum: ${n} ${t}">
|
|
15
15
|
<div class="day">${n}</div>
|
|
16
|
-
<div class="month">${
|
|
16
|
+
<div class="month">${t}</div>
|
|
17
17
|
</div>`:""}
|
|
18
18
|
<div class="container">
|
|
19
19
|
<div class="header-container">
|
|
@@ -24,8 +24,13 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x
|
|
|
24
24
|
${this.supportingText?c`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
25
25
|
</div>
|
|
26
26
|
</div>
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
<md-focus-ring></md-focus-ring>
|
|
28
|
+
`}_onKeyDown(i){(i.key==="Enter"||i.key===" ")&&this.cardHref&&(window.open(this.cardHref,"_self"),i.preventDefault())}_handleHrefNavigation(){this.cardHref&&(this.cardHrefNav==="tab"?window.open(this.cardHref,"_blank"):this.cardHrefNav==="window"?window.open(this.cardHref,"_blank","noopener,noreferrer,width=800,height=600"):window.open(this.cardHref,"_self"))}};e.__iconLoaded=!1;e.__rippleLoaded=!1;e.styles=h`
|
|
29
|
+
:host {
|
|
30
|
+
display: block;
|
|
31
|
+
position: relative;
|
|
32
|
+
padding: var(--scb-calendar-card-focus-ring-gap, 4px);
|
|
33
|
+
}
|
|
29
34
|
|
|
30
35
|
:host([stretch]) { block-size: 100%; }
|
|
31
36
|
:host([stretch]) .calendar-card { block-size: 100%; }
|
|
@@ -40,6 +45,17 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x
|
|
|
40
45
|
width: 100%;
|
|
41
46
|
}
|
|
42
47
|
|
|
48
|
+
md-focus-ring {
|
|
49
|
+
position: absolute;
|
|
50
|
+
inset: 0;
|
|
51
|
+
pointer-events: none;
|
|
52
|
+
display: none;
|
|
53
|
+
border-radius: var(--scb-calendar-card-focus-ring-radius, var(--radius-large, 16px));
|
|
54
|
+
}
|
|
55
|
+
:host(:focus-within) md-focus-ring {
|
|
56
|
+
display: block;
|
|
57
|
+
}
|
|
58
|
+
|
|
43
59
|
.calendar-card {
|
|
44
60
|
box-sizing: border-box;
|
|
45
61
|
overflow: hidden;
|
|
@@ -57,6 +73,9 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as h,n as r,i as f,x
|
|
|
57
73
|
transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease;
|
|
58
74
|
}
|
|
59
75
|
|
|
76
|
+
.calendar-card:focus,
|
|
77
|
+
.calendar-card:focus-visible { outline: none; }
|
|
78
|
+
|
|
60
79
|
.calendar-card.vertical {
|
|
61
80
|
max-width: var(--scb-calendar-card-max-w, 360px);
|
|
62
81
|
}
|
|
@@ -1,47 +1,49 @@
|
|
|
1
|
-
import{a as p,n as
|
|
2
|
-
<div class="scb-card ${a} ${r} ${
|
|
3
|
-
${this.cardHref?
|
|
4
|
-
${this.mediaHref?
|
|
1
|
+
import{a as p,n as t,i as h,x as i,t as m}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(c,d,l){try{customElements.get(c)||r(c,d,l)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var v=Object.defineProperty,b=Object.getOwnPropertyDescriptor,e=(a,r,c,d)=>{for(var l=d>1?void 0:d?b(r,c):r,n=a.length-1,o;n>=0;n--)(o=a[n])&&(l=(d?o(r,c,l):o(l))||l);return d&&l&&v(r,c,l),l};let s=class extends h{constructor(){super(...arguments),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.cardHref="",this.label="",this.subLabel="",this.supportingText="",this.commentsText="",this.comments=0,this.likesText="",this.likes=0,this.fullHeight=!1,this.fullWidth=!1,this.stretch=!1}render(){const a=this.variant?`${this.variant.toLowerCase()}`:"",r=this.direction?`${this.direction.toLowerCase()}`:"",c=this.cardHref?"clickable":"",d=this.mediaType?`${this.mediaType.toLowerCase()}`:"";switch(this.type){case"standard":return i`
|
|
2
|
+
<div class="scb-card ${a} ${r} ${c}">
|
|
3
|
+
${this.cardHref?i`<md-ripple></md-ripple>`:""}
|
|
4
|
+
${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
|
|
5
5
|
<div class="full-content">
|
|
6
6
|
<div class="top-content">
|
|
7
|
-
${this.label?
|
|
7
|
+
${this.label?i`
|
|
8
8
|
<div class="header">
|
|
9
|
-
${this.cardHref?
|
|
9
|
+
${this.cardHref?i`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
|
|
10
10
|
</div>`:""}
|
|
11
|
-
${this.subLabel?
|
|
12
|
-
${this.supportingText?
|
|
13
|
-
${this.date?
|
|
11
|
+
${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
|
|
12
|
+
${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
13
|
+
${this.date?i`<div class="date">${this.date}</div>`:""}
|
|
14
14
|
</div>
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
<md-focus-ring></md-focus-ring>
|
|
18
|
+
`;case"list":return i`
|
|
19
|
+
<div class="scb-card ${a} vertical ${c}">
|
|
20
|
+
${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
|
|
20
21
|
<div class="full-content">
|
|
21
22
|
<div class="top-content">
|
|
22
|
-
${this.label?
|
|
23
|
-
${this.subLabel?
|
|
24
|
-
${this.supportingText?
|
|
25
|
-
${this.date?
|
|
23
|
+
${this.label?i`<div class="header">${this.label}</div>`:""}
|
|
24
|
+
${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
|
|
25
|
+
${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
26
|
+
${this.date?i`<div class="date">${this.date}</div>`:""}
|
|
26
27
|
</div>
|
|
27
28
|
<div class="content list">
|
|
28
29
|
<slot></slot>
|
|
29
30
|
</div>
|
|
30
31
|
</div>
|
|
31
32
|
</div>
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
${this.
|
|
33
|
+
<md-focus-ring></md-focus-ring>
|
|
34
|
+
`;case"social":return i`
|
|
35
|
+
<div class="scb-card ${a} ${r} ${c}">
|
|
36
|
+
${this.cardHref?i`<md-ripple></md-ripple>`:""}
|
|
37
|
+
${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
|
|
36
38
|
<div class="full-content">
|
|
37
39
|
<div class="top-content">
|
|
38
|
-
${this.label?
|
|
40
|
+
${this.label?i`
|
|
39
41
|
<div class="header">
|
|
40
|
-
${this.cardHref?
|
|
42
|
+
${this.cardHref?i`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
|
|
41
43
|
</div>`:""}
|
|
42
|
-
${this.subLabel?
|
|
43
|
-
${this.supportingText?
|
|
44
|
-
${this.date?
|
|
44
|
+
${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
|
|
45
|
+
${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
46
|
+
${this.date?i`<div class="date">${this.date}</div>`:""}
|
|
45
47
|
</div>
|
|
46
48
|
<div class="content">
|
|
47
49
|
<div class="social-metrics">
|
|
@@ -51,61 +53,67 @@ import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"..
|
|
|
51
53
|
</div>
|
|
52
54
|
</div>
|
|
53
55
|
</div>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
56
|
+
<md-focus-ring></md-focus-ring>
|
|
57
|
+
`;case"link":return i`
|
|
58
|
+
<div class="scb-card ${a} ${r} ${c}">
|
|
59
|
+
${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
|
|
57
60
|
<div class="full-content">
|
|
58
61
|
<div class="top-content">
|
|
59
|
-
${this.label?
|
|
60
|
-
${this.subLabel?
|
|
61
|
-
${this.supportingText?
|
|
62
|
-
${this.date?
|
|
62
|
+
${this.label?i`<div class="header">${this.label}</div>`:""}
|
|
63
|
+
${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
|
|
64
|
+
${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
65
|
+
${this.date?i`<div class="date">${this.date}</div>`:""}
|
|
63
66
|
</div>
|
|
64
67
|
<div class="content links">
|
|
65
68
|
<slot></slot>
|
|
66
69
|
</div>
|
|
67
70
|
</div>
|
|
68
71
|
</div>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
+
<md-focus-ring></md-focus-ring>
|
|
73
|
+
`;case"action":return i`
|
|
74
|
+
<div class="scb-card ${a} ${r} ${c}">
|
|
75
|
+
${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
|
|
72
76
|
<div class="full-content">
|
|
73
77
|
<div class="top-content">
|
|
74
|
-
${this.label?
|
|
75
|
-
${this.subLabel?
|
|
76
|
-
${this.supportingText?
|
|
77
|
-
${this.date?
|
|
78
|
+
${this.label?i`<div class="header">${this.label}</div>`:""}
|
|
79
|
+
${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
|
|
80
|
+
${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
81
|
+
${this.date?i`<div class="date">${this.date}</div>`:""}
|
|
78
82
|
</div>
|
|
79
83
|
<div class="content actions">
|
|
80
84
|
<slot></slot>
|
|
81
85
|
</div>
|
|
82
86
|
</div>
|
|
83
87
|
</div>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
${this.
|
|
88
|
+
<md-focus-ring></md-focus-ring>
|
|
89
|
+
`;default:return i`
|
|
90
|
+
<div class="scb-card ${a} ${r} ${c}">
|
|
91
|
+
${this.cardHref?i`<md-ripple></md-ripple>`:""}
|
|
92
|
+
${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
|
|
88
93
|
<div class="full-content">
|
|
89
94
|
<div class="top-content">
|
|
90
|
-
${this.label?
|
|
95
|
+
${this.label?i`
|
|
91
96
|
<div class="header">
|
|
92
|
-
${this.cardHref?
|
|
97
|
+
${this.cardHref?i`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>`:this.label}
|
|
93
98
|
</div>`:""}
|
|
94
|
-
${this.subLabel?
|
|
95
|
-
${this.supportingText?
|
|
96
|
-
${this.date?
|
|
99
|
+
${this.subLabel?i`<div class="sub-label">${this.subLabel}</div>`:""}
|
|
100
|
+
${this.supportingText?i`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
101
|
+
${this.date?i`<div class="date">${this.date}</div>`:""}
|
|
97
102
|
</div>
|
|
98
103
|
</div>
|
|
99
104
|
</div>
|
|
100
|
-
|
|
105
|
+
<md-focus-ring></md-focus-ring>
|
|
106
|
+
`}}firstUpdated(){if(this.cardHref){const a=this.renderRoot.querySelector(".scb-card");a&&a.addEventListener("click",r=>{r.target.closest("a")||(window.location.href=this.cardHref)})}}};s.styles=p`
|
|
101
107
|
:host {
|
|
102
108
|
--scb-card-max-w: 360px;
|
|
103
109
|
display: block;
|
|
104
110
|
box-sizing: border-box;
|
|
105
|
-
|
|
106
|
-
|
|
111
|
+
position: relative;
|
|
112
|
+
inline-size: 100%;
|
|
113
|
+
min-inline-size: 0;
|
|
107
114
|
max-inline-size: var(--scb-card-max-w);
|
|
108
115
|
height: auto;
|
|
116
|
+
padding: var(--scb-card-focus-ring-gap, 4px);
|
|
109
117
|
}
|
|
110
118
|
:host([type="standard"]) { --scb-card-max-w: var(--scb-card-standard-max-w, 360px); }
|
|
111
119
|
:host([type="list"]) { --scb-card-max-w: var(--scb-card-list-max-w, 360px); }
|
|
@@ -115,13 +123,24 @@ import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"..
|
|
|
115
123
|
|
|
116
124
|
:host([full-width]) { max-inline-size: none; }
|
|
117
125
|
:host([stretch]),
|
|
118
|
-
:host([full-height]) { block-size: 100%; }
|
|
126
|
+
:host([full-height]) { block-size: 100%; }
|
|
119
127
|
|
|
120
128
|
:host([stretch]) .scb-card,
|
|
121
129
|
:host([full-height]) .scb-card {
|
|
122
130
|
block-size: 100%;
|
|
123
131
|
}
|
|
124
132
|
|
|
133
|
+
md-focus-ring {
|
|
134
|
+
position: absolute;
|
|
135
|
+
inset: 0;
|
|
136
|
+
pointer-events: none;
|
|
137
|
+
display: none;
|
|
138
|
+
border-radius: var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large));
|
|
139
|
+
}
|
|
140
|
+
:host(:focus-within) md-focus-ring {
|
|
141
|
+
display: block;
|
|
142
|
+
}
|
|
143
|
+
|
|
125
144
|
.scb-card {
|
|
126
145
|
color: var(--md-sys-color-on-surface);
|
|
127
146
|
display: flex;
|
|
@@ -135,6 +154,12 @@ import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"..
|
|
|
135
154
|
overflow: hidden;
|
|
136
155
|
}
|
|
137
156
|
|
|
157
|
+
/* Stänger av UA-outline, md-focus-ring används som fokusindikator */
|
|
158
|
+
.scb-card:focus,
|
|
159
|
+
.scb-card:focus-visible { outline: none; }
|
|
160
|
+
.scb-card a:focus,
|
|
161
|
+
.scb-card a:focus-visible { outline: none; }
|
|
162
|
+
|
|
138
163
|
.scb-card.outlined { border: 1px solid var(--md-sys-color-outline-variant); }
|
|
139
164
|
.scb-card.filled { background: var(--md-sys-color-surface-dim); }
|
|
140
165
|
.scb-card.vertical { flex-direction: column; }
|
|
@@ -152,7 +177,7 @@ import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"..
|
|
|
152
177
|
display: flex;
|
|
153
178
|
flex-direction: column;
|
|
154
179
|
gap: var(--spacing-3);
|
|
155
|
-
min-inline-size: 0;
|
|
180
|
+
min-inline-size: 0;
|
|
156
181
|
}
|
|
157
182
|
|
|
158
183
|
.header {
|
|
@@ -189,7 +214,7 @@ import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"..
|
|
|
189
214
|
inline-size: 100%;
|
|
190
215
|
max-inline-size: 100%;
|
|
191
216
|
height: auto;
|
|
192
|
-
object-fit: cover;
|
|
217
|
+
object-fit: cover;
|
|
193
218
|
}
|
|
194
219
|
.scb-card img.avatar {
|
|
195
220
|
border-radius: var(--md-sys-shape-corner-full);
|
|
@@ -259,4 +284,4 @@ import{a as p,n as s,i as h,x as t,t as v}from"../../vendor/vendor.js";import"..
|
|
|
259
284
|
.scb-card.filled .content.list ::slotted(scb-list) {
|
|
260
285
|
--scb-list-bg: var(--md-sys-color-surface-dim);
|
|
261
286
|
}
|
|
262
|
-
`;
|
|
287
|
+
`;e([t({type:String})],s.prototype,"type",2);e([t({type:String})],s.prototype,"variant",2);e([t({type:String})],s.prototype,"direction",2);e([t({type:String,attribute:"media-type"})],s.prototype,"mediaType",2);e([t({type:String,attribute:"media-href"})],s.prototype,"mediaHref",2);e([t({type:String,attribute:"card-href"})],s.prototype,"cardHref",2);e([t({type:String})],s.prototype,"label",2);e([t({type:String,attribute:"sub-label"})],s.prototype,"subLabel",2);e([t({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);e([t({type:Date,reflect:!0})],s.prototype,"date",2);e([t({type:String,attribute:"social-comments-text"})],s.prototype,"commentsText",2);e([t({type:Number,attribute:"social-comments",reflect:!0})],s.prototype,"comments",2);e([t({type:String,attribute:"social-likes-text"})],s.prototype,"likesText",2);e([t({type:Number,attribute:"social-likes",reflect:!0})],s.prototype,"likes",2);e([t({type:Boolean,reflect:!0,attribute:"full-height"})],s.prototype,"fullHeight",2);e([t({type:Boolean,reflect:!0,attribute:"full-width"})],s.prototype,"fullWidth",2);e([t({type:Boolean,reflect:!0})],s.prototype,"stretch",2);s=e([m("scb-card")],s);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as f,n as l,r as p,i as x,x as c,E as d,t as S}from"../../vendor/vendor.js";import"../scb-grid/scb-grid-item.js";import"../scb-grid/scb-grid.js";import"../scb-link/scb-link.js";import"../scb-search/scb-search.js";import"../scb-tabs/scb-tabs.js";import"../scb-tabs/scb-secondary-tab.js";import"../scb-drawer/scb-drawer.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"
|
|
1
|
+
import{a as f,n as l,r as p,i as x,x as c,E as d,t as S}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-grid/scb-grid-item.js";import"../scb-grid/scb-grid.js";import"../scb-link/scb-link.js";import"../scb-search/scb-search.js";import"../scb-tabs/scb-tabs.js";import"../scb-tabs/scb-secondary-tab.js";import"../scb-drawer/scb-drawer.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-list/scb-list.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.js";import"../scb-tabs/scb-primary-tab.js";import"../scb-divider/scb-divider.js";import"../scb-drawer/scb-drawer-item.js";import"../scb-drawer/scb-drawer-section.js";import"../scb-drawer/scb-sub-drawer.js";import"../scb-tooltip/scb-tooltip.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,i,o){try{customElements.get(s)||t(s,i,o)}catch(n){var h=String(n||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var C=Object.defineProperty,M=Object.getOwnPropertyDescriptor,a=(e,t,s,i)=>{for(var o=i>1?void 0:i?M(t,s):t,h=e.length-1,n;h>=0;h--)(n=e[h])&&(o=(i?n(t,s,o):n(o))||o);return i&&o&&C(t,s,o),o};const _={fromAttribute:e=>e==null?!0:!/^(false|0|off|no)$/i.test(e),toAttribute:e=>String(!!e)};let r=class extends x{constructor(){super(...arguments),this.maxWidth="1440px",this.logoText="Statistikmyndigheten",this.logoHref="/",this.banner=!1,this.tabs=[],this.activeTab=0,this.utilityItems=[],this.showDrawer=!0,this.showSearch=!0,this.includeUtilityInDrawer=!1,this._drawerId="main-drawer",this._drawerMounted=!1,this._drawerExpanded=!1,this._searchId="header-search",this._slotTabs=[],this._slotUtils=[],this._slotMenu=[],this._measureScheduled=!1,this._scheduleMeasure=()=>{this._measureScheduled||(this._measureScheduled=!0,requestAnimationFrame(()=>{this._measureScheduled=!1,this._measure()}))},this._onWindowResize=()=>{this._scheduleMeasure()},this._onDrawerSelect=e=>{this.dispatchEvent(new CustomEvent("drawer-select",{detail:e.detail,bubbles:!0,composed:!0})),this._closeDrawerNow()},this._collapsed=!1,this._unlockAtWidth=0,this._hideLogoText=!1,this._logoTextUnlockAt=0,this._harvestPending=!1,this._harvest=()=>{const e=this._slotEl;if(!e)return;const t=e.assignedElements({flatten:!0}),s=[],i=[],o=[],h=n=>({label:n.getAttribute("label")??"",href:n.getAttribute("href")??void 0,icon:n.getAttribute("icon")??void 0});for(const n of t){const u=n.tagName.toLowerCase();if(u==="scb-header-tab"){s.push({label:n.getAttribute("label")??"",href:n.getAttribute("href")??"#"});continue}if(u==="scb-header-utility"){i.push({label:n.getAttribute("label")??"",href:n.getAttribute("href")??"#",target:n.getAttribute("target")??void 0});continue}if(u==="scb-header-drawer-group"){const b={label:n.getAttribute("label")??"",icon:n.getAttribute("icon")??void 0,children:[]};n.querySelectorAll("scb-header-drawer-item").forEach(m=>b.children.push(h(m))),o.push(b);continue}u==="scb-header-drawer-item"&&o.push(h(n))}this._slotTabs=s,this._slotUtils=i,this._slotMenu=o,queueMicrotask(()=>{this.updateComplete.then(()=>{this._applyActiveToTabs(),this._scheduleMeasure()})})},this._measure=()=>{const e=this._top,t=this._logoGroup;if(!e||!t)return;const s=window.innerWidth,i=e.clientWidth,o=this._overflows(this._util),h=this._overflows(this._tabsEl),n=s<this.BP_MD||o||h;this._collapsed?!n&&i>=this._unlockAtWidth&&this._setCollapsed(!1):n&&(this._unlockAtWidth=i+this._HYST,this._setCollapsed(!0));let u=!1;if(this.showSearch&&s>=this.BP_SM&&s<this.BP_MD&&this._searchWrap){const m=getComputedStyle(this._searchWrap),y=Math.max(this._num(m.minWidth,this._tokenPx("--scb-header-search-min",320)),this._tokenPx("--scb-header-search-min",320)),g=this._num(getComputedStyle(e).gap,this._tokenPx("--spacing-7",24)),w=this.showDrawer&&(s<this.BP_MD||this._collapsed)?this._menuBtn?.getBoundingClientRect().width||this._tokenPx("--icon-size-large",48):0;u=t.getBoundingClientRect().width+g+y+g+w+8>i+.5}this._setHideSearch(u);let b=!1;if(this.showDrawer&&(s<this.BP_MD||this._collapsed)&&!this._visible(this._util)&&!this._visible(this._searchWrap)){const m=this._num(getComputedStyle(e).gap,this._tokenPx("--spacing-7",24)),y=this._menuBtn?.getBoundingClientRect().width||this._tokenPx("--icon-size-large",48),g=(this._logoGroup?.getBoundingClientRect().width||0)+m+y;this._hideLogoText?b=!(i>=this._logoTextUnlockAt):g>i+.5&&(b=!0,this._logoTextUnlockAt=i+this._HYST)}else b=!1,this._logoTextUnlockAt=0;this._setHideLogoText(b)},this._onMenuClick=async e=>{e.preventDefault(),e.stopPropagation(),this.showDrawer&&(this.dispatchEvent(new CustomEvent("menu-click",{bubbles:!0,composed:!0})),await this._ensureDrawerMounted(),await r._nextFrame(),await r._nextFrame(),this._openDrawerNow())},this._onSearchClick=e=>{const t=this._searchEl;if(t?.submit&&typeof t.submit=="function"){t.submit();return}const s=t?.value??void 0;this.dispatchEvent(new CustomEvent("search-click",{detail:{value:s},bubbles:!0,composed:!0})),t?.focus?.()},this._onTabsChange=e=>{const s=e?.detail?.activeTabIndex??e.target?.activeTabIndex??0;this.activeTab=s;const o=(this._slotTabs.length?this._slotTabs:this.tabs)[s]?.href??"";this.dispatchEvent(new CustomEvent("tab-change",{detail:{index:s,href:o},bubbles:!0,composed:!0}))}}get _HYST(){return this._tokenPx("--spacing-11",64)}get BP_SM(){return this._tokenPx("--bp-sm",r.BP_SM_DEFAULT)}get BP_MD(){return this._tokenPx("--bp-md",r.BP_MD_DEFAULT)}_scheduleHarvest(){this._harvestPending||(this._harvestPending=!0,queueMicrotask(()=>{this._harvestPending=!1,this._harvest()}))}get _slotEl(){return this.shadowRoot?.querySelector("slot#data-slot")??null}get _top(){return this.renderRoot.querySelector(".top-row")}get _util(){return this.renderRoot.querySelector(".utility")}get _tabsEl(){return this.renderRoot.querySelector("scb-tabs")}get _logoGroup(){return this.renderRoot.querySelector(".logo-wrap")||this.renderRoot.querySelector(".logo-group")}get _searchWrap(){return this.renderRoot.querySelector(".search")}get _menuBtn(){return this.renderRoot.querySelector(".menu-trigger")}get _searchEl(){return this.renderRoot.querySelector(`#${this._searchId}`)}_attachSlotObservers(){this._slotMo?.disconnect();const e=new MutationObserver(t=>{this._scheduleHarvest()});this._slotMo=e,e.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["label","href","icon","target"]})}_setCollapsed(e){this._collapsed!==e&&(this._collapsed=e,e?this.setAttribute("data-collapsed",""):this.removeAttribute("data-collapsed"))}_setHideSearch(e){e?this.setAttribute("data-hide-search",""):this.removeAttribute("data-hide-search")}_setHideLogoText(e){this._hideLogoText!==e&&(this._hideLogoText=e,e?this.setAttribute("data-hide-logo-text",""):this.removeAttribute("data-hide-logo-text"))}_num(e,t){const s=Number.parseFloat(String(e??"").trim());return Number.isFinite(s)?s:t}_tokenPx(e,t){const s=getComputedStyle(this);return this._num(s.getPropertyValue(e),t)}_visible(e){return e?getComputedStyle(e).display!=="none":!1}_overflows(e){return!e||!this._visible(e)?!1:e.scrollWidth>e.clientWidth+1}firstUpdated(){this.updateComplete.then(()=>{this._harvest(),this._attachSlotObservers()});const e=this._top;e&&(this._ro=new ResizeObserver(()=>this._scheduleMeasure()),this._ro.observe(e)),window.addEventListener("resize",this._onWindowResize,{passive:!0});const t=this._menuBtn,s=()=>this._ensureDrawerMounted();t?.addEventListener("pointerenter",s,{once:!0}),t?.addEventListener("focusin",s,{once:!0}),t?.addEventListener("touchstart",s,{once:!0,passive:!0})}updated(e){e.has("searchMax")&&this.style.setProperty("--scb-header-search-max",this.searchMax??"480px"),e.has("searchMin")&&this.style.setProperty("--scb-header-search-min",this.searchMin??"320px"),e.has("searchHeight")&&(this.searchHeight&&this.searchHeight.trim()?this.style.setProperty("--scb-search-height",this.searchHeight.trim()):this.style.removeProperty("--scb-search-height")),(e.has("utilityItems")||e.has("tabs")||e.has("logoText")||e.has("activeTab")||e.has("_slotTabs")||e.has("_slotUtils")||e.has("_slotMenu")||e.has("showDrawer")||e.has("showSearch")||e.has("searchMax")||e.has("searchMin"))&&this.updateComplete.then(()=>{this._scheduleMeasure(),this._applyActiveToTabs()})}disconnectedCallback(){this._ro?.disconnect(),this._slotMo?.disconnect(),window.removeEventListener("resize",this._onWindowResize),super.disconnectedCallback()}async _ensureDrawerMounted(){this._drawerMounted||(this._drawerMounted=!0,await this.updateComplete)}_openDrawerNow(){const e=this.renderRoot.querySelector(`#${this._drawerId}`);e&&(e.open=!0,e.setAttribute("open",""),e.show?.(),e.openDrawer?.(),this._drawerExpanded=!0,this._syncMenuBtnAria(),this.dispatchEvent(new CustomEvent("drawer-open",{bubbles:!0,composed:!0})))}_closeDrawerNow(){const e=this.renderRoot.querySelector(`#${this._drawerId}`);e&&(e.open=!1),this._drawerExpanded=!1,this._syncMenuBtnAria(),this.dispatchEvent(new CustomEvent("drawer-close",{bubbles:!0,composed:!0}))}_syncMenuBtnAria(){const e=this.renderRoot.querySelector(".menu-trigger");e&&e.setAttribute("aria-expanded",String(this._drawerExpanded))}_applyActiveToTabs(){const e=this._tabsEl;if(!e)return;e.activeTabIndex=this.activeTab,e.querySelectorAll("scb-secondary-tab").forEach((s,i)=>{s.selected=i===this.activeTab})}_renderDrawerNodes(e){return!e||e.length===0?c``:c`${e.map(t=>{const s=Array.isArray(t.children)&&t.children.length>0;return c`
|
|
2
2
|
<scb-drawer-item
|
|
3
3
|
label=${t.label}
|
|
4
4
|
?selected=${!1}
|
|
@@ -28,9 +28,12 @@ import{a as f,n as l,r as p,i as x,x as c,E as d,t as S}from"../../vendor/vendor
|
|
|
28
28
|
<scb-grid cols-compact="4" cols-medium="8" cols-expanded="12" max-width=${this.maxWidth} gap="0">
|
|
29
29
|
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
|
|
30
30
|
<div class="top-row">
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
<div class="logo-wrap">
|
|
32
|
+
<a class="logo-group" href=${this.logoHref} aria-label="Gå till startsidan">
|
|
33
|
+
${this._renderLogo()} <span class="logo-text">${this.logoText}</span>
|
|
34
|
+
</a>
|
|
35
|
+
<md-focus-ring></md-focus-ring>
|
|
36
|
+
</div>
|
|
34
37
|
|
|
35
38
|
<div class="actions">
|
|
36
39
|
<nav class="utility" aria-label="Funktionslänkar">
|
|
@@ -129,8 +132,27 @@ import{a as f,n as l,r as p,i as x,x as c,E as d,t as S}from"../../vendor/vendor
|
|
|
129
132
|
}
|
|
130
133
|
|
|
131
134
|
.top-row { display:flex; align-items:center; gap:var(--spacing-7,24px); padding-block:var(--spacing-7,24px); min-width:0; }
|
|
135
|
+
|
|
136
|
+
.logo-wrap {
|
|
137
|
+
display:inline-block;
|
|
138
|
+
position:relative;
|
|
139
|
+
padding: var(--scb-header-logo-focus-ring-gap, 4px);
|
|
140
|
+
border-radius: var(--scb-header-logo-focus-ring-radius, var(--md-sys-shape-corner-small, 4px));
|
|
141
|
+
}
|
|
142
|
+
.logo-wrap md-focus-ring {
|
|
143
|
+
position:absolute;
|
|
144
|
+
inset:0;
|
|
145
|
+
pointer-events:none;
|
|
146
|
+
display:none;
|
|
147
|
+
border-radius: inherit;
|
|
148
|
+
}
|
|
149
|
+
.logo-wrap:focus-within md-focus-ring { display:block; }
|
|
150
|
+
|
|
132
151
|
.logo-group { display:inline-flex; align-items:center; gap:var(--spacing-5,16px); text-decoration:none; color:inherit; flex-shrink:0; min-width:0; }
|
|
152
|
+
.logo-group:focus,
|
|
153
|
+
.logo-group:focus-visible { outline: none; }
|
|
133
154
|
.logo-group svg { width:var(--scb-header-logo-w); height:var(--scb-header-logo-h); display:block; color:var(--md-sys-color-on-surface); }
|
|
155
|
+
|
|
134
156
|
.logo-text{
|
|
135
157
|
font-family: var(--brand-font, Inter), sans-serif;
|
|
136
158
|
font-size: var(--md-sys-typescale-body-medium-size, 1rem);
|
|
@@ -241,4 +263,4 @@ import{a as f,n as l,r as p,i as x,x as c,E as d,t as S}from"../../vendor/vendor
|
|
|
241
263
|
:host([data-hide-logo-text]) .logo-text {
|
|
242
264
|
display: none;
|
|
243
265
|
}
|
|
244
|
-
`;r._nextFrame=()=>new Promise(e=>requestAnimationFrame(()=>e()));a([l({type:String,attribute:"max-width"})],r.prototype,"maxWidth",2);a([l({type:String,attribute:"logo-text"})],r.prototype,"logoText",2);a([l({type:String,attribute:"logo-href"})],r.prototype,"logoHref",2);a([l({type:Boolean,reflect:!0})],r.prototype,"banner",2);a([l({type:String,attribute:"banner-label"})],r.prototype,"bannerLabel",2);a([l({attribute:"tabs",converter:r._JSON_ARRAY})],r.prototype,"tabs",2);a([l({type:Number,attribute:"active-tab"})],r.prototype,"activeTab",2);a([l({attribute:"utility-items",converter:r._JSON_ARRAY})],r.prototype,"utilityItems",2);a([l({type:String,attribute:"search-placeholder"})],r.prototype,"searchPlaceholder",2);a([l({type:String,attribute:"drawer-label"})],r.prototype,"drawerLabel",2);a([l({type:String,attribute:"drawer-sub-label"})],r.prototype,"drawerSubLabel",2);a([l({type:String,attribute:"drawer-section-label"})],r.prototype,"drawerSectionLabel",2);a([l({type:String,attribute:"drawer-search-placeholder"})],r.prototype,"drawerSearchPlaceholder",2);a([l({attribute:"menu-data",converter:r._JSON_ARRAY})],r.prototype,"menuData",2);a([l({attribute:"show-drawer",reflect:!0,converter:
|
|
266
|
+
`;r._nextFrame=()=>new Promise(e=>requestAnimationFrame(()=>e()));a([l({type:String,attribute:"max-width"})],r.prototype,"maxWidth",2);a([l({type:String,attribute:"logo-text"})],r.prototype,"logoText",2);a([l({type:String,attribute:"logo-href"})],r.prototype,"logoHref",2);a([l({type:Boolean,reflect:!0})],r.prototype,"banner",2);a([l({type:String,attribute:"banner-label"})],r.prototype,"bannerLabel",2);a([l({attribute:"tabs",converter:r._JSON_ARRAY})],r.prototype,"tabs",2);a([l({type:Number,attribute:"active-tab"})],r.prototype,"activeTab",2);a([l({attribute:"utility-items",converter:r._JSON_ARRAY})],r.prototype,"utilityItems",2);a([l({type:String,attribute:"search-placeholder"})],r.prototype,"searchPlaceholder",2);a([l({type:String,attribute:"drawer-label"})],r.prototype,"drawerLabel",2);a([l({type:String,attribute:"drawer-sub-label"})],r.prototype,"drawerSubLabel",2);a([l({type:String,attribute:"drawer-section-label"})],r.prototype,"drawerSectionLabel",2);a([l({type:String,attribute:"drawer-search-placeholder"})],r.prototype,"drawerSearchPlaceholder",2);a([l({attribute:"menu-data",converter:r._JSON_ARRAY})],r.prototype,"menuData",2);a([l({attribute:"show-drawer",reflect:!0,converter:_})],r.prototype,"showDrawer",2);a([l({attribute:"show-search",reflect:!0,converter:_})],r.prototype,"showSearch",2);a([l({attribute:"include-utility-in-drawer",reflect:!0,converter:_})],r.prototype,"includeUtilityInDrawer",2);a([l({type:String,attribute:"search-max"})],r.prototype,"searchMax",2);a([l({type:String,attribute:"search-min"})],r.prototype,"searchMin",2);a([l({type:String,attribute:"search-height"})],r.prototype,"searchHeight",2);a([p()],r.prototype,"_drawerId",2);a([p()],r.prototype,"_drawerMounted",2);a([p()],r.prototype,"_drawerExpanded",2);a([p()],r.prototype,"_searchId",2);a([p()],r.prototype,"_slotTabs",2);a([p()],r.prototype,"_slotUtils",2);a([p()],r.prototype,"_slotMenu",2);a([p()],r.prototype,"_collapsed",2);a([p()],r.prototype,"_hideLogoText",2);r=a([S("scb-header")],r);
|
|
@@ -1,39 +1,43 @@
|
|
|
1
|
-
import{a as u,n as s,i as p,x as
|
|
1
|
+
import{a as u,n as s,i as p,x as n,t as g}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(l,o,a){try{customElements.get(l)||i(l,o,a)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,r=(e,i,l,o)=>{for(var a=o>1?void 0:o?y(i,l):i,c=e.length-1,d;c>=0;c--)(d=e[c])&&(a=(o?d(i,l,a):d(a))||a);return o&&a&&f(i,l,a),a};let t=class extends p{constructor(){super(...arguments),this.keyfigure=0,this.subLabel="",this.supportingText="",this.cardHref="",this.icon="",this.size="standard",this.unit="",this.fullHeight=!1,this.fullWidth=!1,this.stretch=!1}formatNumber(e){if(typeof e=="number")return e.toLocaleString("sv-SE").replace(/\u00A0/g," ");const i=Number(e);return Number.isNaN(i)?String(e):i.toLocaleString("sv-SE").replace(/\u00A0/g," ")}render(){const e=!!this.cardHref,i=this.formatNumber(this.keyfigure);return n`
|
|
2
2
|
<div
|
|
3
3
|
class="scb-keyfigure-card ${e?"clickable":""} ${this.size}"
|
|
4
4
|
role=${e?"link":"group"}
|
|
5
5
|
tabindex=${e?"0":"-1"}
|
|
6
6
|
aria-label=${this.subLabel||""}
|
|
7
7
|
>
|
|
8
|
-
${e?
|
|
9
|
-
${this.icon?
|
|
8
|
+
${e?n`<md-ripple></md-ripple>`:""}
|
|
9
|
+
${this.icon?n`<md-icon>${this.icon}</md-icon>`:""}
|
|
10
10
|
|
|
11
|
-
${this.keyfigure!==void 0&&this.keyfigure!==null&&this.keyfigure!==""?
|
|
11
|
+
${this.keyfigure!==void 0&&this.keyfigure!==null&&this.keyfigure!==""?n`
|
|
12
12
|
<div class="keyfigure">
|
|
13
13
|
<span class="value">
|
|
14
|
-
${
|
|
14
|
+
${i}${this.unit?n`<span class="unit">${this.unit}</span>`:""}
|
|
15
15
|
</span>
|
|
16
|
-
${e?
|
|
16
|
+
${e?n`<md-icon>arrow_forward</md-icon>`:""}
|
|
17
17
|
</div>
|
|
18
18
|
`:""}
|
|
19
19
|
|
|
20
|
-
${this.subLabel?
|
|
20
|
+
${this.subLabel?n`
|
|
21
21
|
<div class="sub-label">
|
|
22
|
-
${e?
|
|
22
|
+
${e?n`<a href="${this.cardHref}" tabindex="-1">${this.subLabel}</a>`:this.subLabel}
|
|
23
23
|
</div>
|
|
24
24
|
`:""}
|
|
25
25
|
|
|
26
|
-
${this.supportingText?
|
|
26
|
+
${this.supportingText?n`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
27
27
|
</div>
|
|
28
|
-
|
|
28
|
+
|
|
29
|
+
<md-focus-ring></md-focus-ring>
|
|
30
|
+
`}firstUpdated(){if(this.cardHref){const e=this.renderRoot.querySelector(".scb-keyfigure-card");e&&(e.addEventListener("click",i=>{i.target.closest("a")||(window.location.href=this.cardHref)}),e.addEventListener("keydown",i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),window.location.href=this.cardHref)}))}}};t.styles=u`
|
|
29
31
|
:host { --scb-keyfigure-card-max-w: var(--scb-card-max-w, 360px); }
|
|
30
32
|
|
|
31
33
|
:host {
|
|
32
34
|
display: block;
|
|
33
35
|
box-sizing: border-box;
|
|
36
|
+
position: relative;
|
|
34
37
|
inline-size: 100%;
|
|
35
38
|
min-inline-size: 0;
|
|
36
39
|
max-inline-size: var(--scb-keyfigure-card-max-w);
|
|
40
|
+
padding: var(--scb-keyfigure-card-focus-ring-gap, 4px);
|
|
37
41
|
}
|
|
38
42
|
:host([full-width]) { max-inline-size: none; }
|
|
39
43
|
:host([stretch]), :host([full-height]) { block-size: 100%; }
|
|
@@ -43,6 +47,17 @@ import{a as u,n as s,i as p,x as l,t as g}from"../../vendor/vendor.js";import"..
|
|
|
43
47
|
block-size: 100%;
|
|
44
48
|
}
|
|
45
49
|
|
|
50
|
+
md-focus-ring {
|
|
51
|
+
position: absolute;
|
|
52
|
+
inset: 0;
|
|
53
|
+
pointer-events: none;
|
|
54
|
+
display: none;
|
|
55
|
+
border-radius: var(--scb-keyfigure-card-focus-ring-radius, var(--md-sys-shape-corner-large));
|
|
56
|
+
}
|
|
57
|
+
:host(:focus-within) md-focus-ring {
|
|
58
|
+
display: block;
|
|
59
|
+
}
|
|
60
|
+
|
|
46
61
|
.scb-keyfigure-card {
|
|
47
62
|
color: var(--md-sys-color-on-surface);
|
|
48
63
|
display: flex;
|
|
@@ -58,6 +73,9 @@ import{a as u,n as s,i as p,x as l,t as g}from"../../vendor/vendor.js";import"..
|
|
|
58
73
|
overflow: hidden;
|
|
59
74
|
}
|
|
60
75
|
|
|
76
|
+
.scb-keyfigure-card:focus { outline: none; }
|
|
77
|
+
.scb-keyfigure-card:focus-visible { outline: none; }
|
|
78
|
+
|
|
61
79
|
.keyfigure {
|
|
62
80
|
display: flex;
|
|
63
81
|
justify-content: space-between;
|
|
@@ -92,4 +110,4 @@ import{a as u,n as s,i as p,x as l,t as g}from"../../vendor/vendor.js";import"..
|
|
|
92
110
|
line-height: var(--md-sys-typescale-display-medium-line-height);
|
|
93
111
|
letter-spacing: var(--md-sys-typescale-display-medium-tracking);
|
|
94
112
|
}
|
|
95
|
-
`;r([s({attribute:"keyfigure"})],
|
|
113
|
+
`;r([s({attribute:"keyfigure"})],t.prototype,"keyfigure",2);r([s({type:String,attribute:"sub-label"})],t.prototype,"subLabel",2);r([s({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);r([s({type:String,attribute:"card-href"})],t.prototype,"cardHref",2);r([s({type:String})],t.prototype,"icon",2);r([s({type:String})],t.prototype,"size",2);r([s({type:String})],t.prototype,"unit",2);r([s({type:Boolean,reflect:!0,attribute:"full-height"})],t.prototype,"fullHeight",2);r([s({type:Boolean,reflect:!0,attribute:"full-width"})],t.prototype,"fullWidth",2);r([s({type:Boolean,reflect:!0})],t.prototype,"stretch",2);t=r([g("scb-keyfigure-card")],t);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as y,n as
|
|
1
|
+
import{a as y,n as d,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";import"../scb-list/scb-list.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.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(s,n,i){try{customElements.get(s)||e(s,n,i)}catch(o){var r=String(o||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var A=Object.defineProperty,I=Object.getOwnPropertyDescriptor,l=(t,e,s,n)=>{for(var i=n>1?void 0:n?I(e,s):e,r=t.length-1,o;r>=0;r--)(o=t[r])&&(i=(n?o(e,s,i):o(i))||i);return n&&i&&A(e,s,i),i};let S=0,a=class extends x{constructor(){super(...arguments),this.supportingText="Hinted search text",this.value="",this.size="default",this.fullScreen=!1,this._inputFocused=!1,this._visibleSuggestions=0,this._activeIndex=-1,this._listboxId=`scb-search-listbox-${++S}`,this._kbMode=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&this._updateInputRingVisibility())},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&this._updateInputRingVisibility()},this._listScrollHandler=()=>{const t=this._getActiveItem();this._kbMode&&t&&this._positionOptionRing(t)}}connectedCallback(){super.connectedCallback(),this._onWindowResize=this._onWindowResize.bind(this),window.addEventListener("resize",this._onWindowResize,{passive:!0}),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0)}disconnectedCallback(){const t=this._inputEl();t&&this._boundNativeKeydown&&t.removeEventListener("keydown",this._boundNativeKeydown,!0),this._detachListScrollListener(),window.removeEventListener("resize",this._onWindowResize),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0),super.disconnectedCallback()}firstUpdated(){this._ensureListboxA11y(),this._updateComboboxA11y();const t=this._inputEl();t&&(this._boundNativeKeydown=e=>this._handleKey(e),t.addEventListener("keydown",this._boundNativeKeydown,!0))}updated(){this._ensureListboxA11y(),this._updateComboboxA11y(),this._attachListScrollListener()}render(){const t=(this.value??"").trim().length>0,e=this._inputFocused&&t&&this._hasSuggestions;return u`
|
|
2
2
|
<div class="ripple-wrapper">
|
|
3
3
|
<md-icon class="leading">${t?"arrow_back":"search"}</md-icon>
|
|
4
4
|
|
|
@@ -32,7 +32,7 @@ import{a as y,n as h,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
|
|
|
32
32
|
</scb-list>
|
|
33
33
|
<md-focus-ring id="optionRing" class="option-ring"></md-focus-ring>
|
|
34
34
|
`:b}
|
|
35
|
-
`}submit(){const t=this._getActiveItem(),e={value:this.value};t&&(e.active=this._itemPayload(t)),this.dispatchEvent(new CustomEvent("scb-search-submit",{detail:e,bubbles:!0,composed:!0}))}get _hasSuggestions(){return this._visibleSuggestions>=0?this._visibleSuggestions>0:Array.from(this.getElementsByTagName("scb-list-item")).some(e=>!e.hasAttribute("hidden")&&e.style.display!=="none")}_onSlotChange(){this._filterSuggestions(this.value)}_onInput(t){const e=t.target;this.value=e.value,this._filterSuggestions(this.value),this._activeIndex=-1,this._kbMode=!1,this._updateComboboxA11y(),this.dispatchEvent(new CustomEvent("scb-search-input",{detail:{value:this.value},bubbles:!0,composed:!0}))}_onFocus(){this._inputFocused=!0,this._filterSuggestions(this.value),this._updateComboboxA11y(),this.requestUpdate()}_onBlur(){setTimeout(()=>{this._inputFocused=!1,this._activeIndex=-1,this._kbMode=!1,this._updateComboboxA11y(),this._hideOptionRing(),this.requestUpdate()},100)}_handleKey(t){if(!this._inputEl())return;const s=this._getVisibleItems(),n=(this.value??"").trim().length>0,i=this._inputFocused&&n&&s.length>0,r=t.key,o=t.keyCode,
|
|
35
|
+
`}submit(){const t=this._getActiveItem(),e={value:this.value};t&&(e.active=this._itemPayload(t)),this.dispatchEvent(new CustomEvent("scb-search-submit",{detail:e,bubbles:!0,composed:!0}))}get _hasSuggestions(){return this._visibleSuggestions>=0?this._visibleSuggestions>0:Array.from(this.getElementsByTagName("scb-list-item")).some(e=>!e.hasAttribute("hidden")&&e.style.display!=="none")}_onSlotChange(){this._filterSuggestions(this.value)}_onInput(t){const e=t.target;this.value=e.value,this._filterSuggestions(this.value),this._activeIndex=-1,this._kbMode=!1,this._updateComboboxA11y(),this.dispatchEvent(new CustomEvent("scb-search-input",{detail:{value:this.value},bubbles:!0,composed:!0}))}_onFocus(){this._inputFocused=!0,this._updateInputRingVisibility(),this._filterSuggestions(this.value),this._updateComboboxA11y(),this.requestUpdate()}_onBlur(){setTimeout(()=>{this._inputFocused=!1,this._activeIndex=-1,this._kbMode=!1,this._updateInputRingVisibility(),this._updateComboboxA11y(),this._hideOptionRing(),this.requestUpdate()},100)}_updateInputRingVisibility(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))}_handleKey(t){if(!this._inputEl())return;const s=this._getVisibleItems(),n=(this.value??"").trim().length>0,i=this._inputFocused&&n&&s.length>0,r=t.key,o=t.keyCode,c=r==="ArrowDown"||r==="Down"||o===40,h=r==="ArrowUp"||r==="Up"||o===38,g=r==="Home"||o===36,v=r==="End"||o===35,_=r==="Enter"||o===13,f=r==="Escape"||r==="Esc"||o===27;if(c){if(!i)return;t.preventDefault(),this._kbMode=!0,this._moveActive(s,1);return}if(h){if(!i)return;t.preventDefault(),this._kbMode=!0,this._moveActive(s,-1);return}if(g){if(!i)return;t.preventDefault(),this._kbMode=!0,this._activeIndex=s.length?0:-1,this._updateComboboxA11y(),this._scrollActiveIntoView();return}if(v){if(!i)return;t.preventDefault(),this._kbMode=!0,this._activeIndex=s.length?s.length-1:-1,this._updateComboboxA11y(),this._scrollActiveIntoView();return}if(_){if(!i){this.submit();return}t.preventDefault();const p=this._getActiveItem();if(p){const m=p.getAttribute("label")||"";this.value=m,this.dispatchEvent(new CustomEvent("scb-search-submit",{detail:{value:this.value,active:this._itemPayload(p)},bubbles:!0,composed:!0})),this._visibleSuggestions=0,this._activeIndex=-1,this._kbMode=!1,this._hideOptionRing(),this.requestUpdate()}else this.submit();return}if(f){t.preventDefault(),this._clearInput();return}}_clearInput(){this.value="",this._activeIndex=-1,this._kbMode=!1;const t=this._inputEl();t?.focus(),t&&(t.value=""),this._filterSuggestions(""),this._updateComboboxA11y(),this._hideOptionRing(),this.dispatchEvent(new CustomEvent("scb-search-clear",{bubbles:!0,composed:!0}))}_filterSuggestions(t){const e=(t??"").trim().toLowerCase(),s=Array.from(this.querySelectorAll("scb-list-item"));let n=0;for(const i of s){const r=(i.getAttribute("label")||"").toLowerCase(),o=(i.getAttribute("supporting-text")||"").toLowerCase(),c=`${r} ${o}`.trim();e!==""&&c.includes(e)?(i.removeAttribute("hidden"),n++):i.setAttribute("hidden",""),this._ensureOptionA11y(i)}this._visibleSuggestions=n,this._activeIndex>=n&&(this._activeIndex=-1),this._updateComboboxA11y(),this.requestUpdate()}_inputEl(){return this.renderRoot?.querySelector("#searchInput")??null}_listEl(){return this.renderRoot?.querySelector("scb-list.suggestion-list")??null}_ringEl(){return this.renderRoot?.querySelector("#optionRing")??null}_getVisibleItems(){return Array.from(this.querySelectorAll("scb-list-item")).filter(e=>!e.hasAttribute("hidden")&&e.style.display!=="none")}_getActiveItem(){const t=this._getVisibleItems();return this._activeIndex<0||this._activeIndex>=t.length?null:t[this._activeIndex]??null}_moveActive(t,e){if(!t.length){this._activeIndex=-1,this._updateComboboxA11y(),this._hideOptionRing();return}let s=this._activeIndex+e;this._activeIndex===-1?s=e>0?0:t.length-1:(s<0&&(s=0),s>=t.length&&(s=t.length-1)),this._activeIndex=s,this._updateComboboxA11y(),this._scrollActiveIntoView()}_scrollActiveIntoView(){const t=this._getActiveItem();t&&t.scrollIntoView({block:"nearest"})}_itemPayload(t){return{label:t.getAttribute("label")||"",supportingText:t.getAttribute("supporting-text")||"",href:t.getAttribute("href")||"",type:t.getAttribute("type")||"",id:t.id||""}}_ensureListboxA11y(){const t=this._listEl();t&&(t.id||(t.id=this._listboxId),t.setAttribute("role","listbox"),t.setAttribute("aria-label","Sökförslag")),Array.from(this.querySelectorAll("scb-list-item")).forEach(s=>this._ensureOptionA11y(s))}_ensureOptionA11y(t){t.id||(t.id=`${this._listboxId}-opt-${Math.random().toString(36).slice(2,8)}`),t.setAttribute("role","option"),t.setAttribute("tabindex","-1")}_updateComboboxA11y(){const t=this._inputEl();if(!t)return;const e=this._getVisibleItems(),s=(this.value??"").trim().length>0,n=this._inputFocused&&s&&e.length>0;t.setAttribute("role","combobox"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-controls",this._listboxId),t.setAttribute("aria-expanded",String(n));const i=n?this._getActiveItem():null;i?.id?t.setAttribute("aria-activedescendant",i.id):t.removeAttribute("aria-activedescendant"),this._kbMode&&i&&n?this._positionOptionRing(i):this._hideOptionRing()}_positionOptionRing(t){const e=this._ringEl(),s=this._listEl();if(!e||!s)return;const n=this.getBoundingClientRect(),i=t.getBoundingClientRect(),r=i.top-n.top,o=i.left-n.left,c=i.width,h=i.height;e.style.top=`${r}px`,e.style.left=`${o}px`,e.style.width=`${c}px`,e.style.height=`${h}px`,e.setAttribute("data-show","true")}_hideOptionRing(){const t=this._ringEl();t&&t.removeAttribute("data-show")}_onWindowResize(){const t=this._getActiveItem();this._kbMode&&t&&this._positionOptionRing(t)}_attachListScrollListener(){const t=this._listEl();!t||this._listWithHandler===t||(this._detachListScrollListener(),t.addEventListener("scroll",this._listScrollHandler,{passive:!0}),this._listWithHandler=t)}_detachListScrollListener(){this._listWithHandler&&(this._listWithHandler.removeEventListener("scroll",this._listScrollHandler),this._listWithHandler=void 0)}};a.styles=y`
|
|
36
36
|
:host {
|
|
37
37
|
display: flex;
|
|
38
38
|
flex-direction: column;
|
|
@@ -89,7 +89,7 @@ import{a as y,n as h,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
|
|
|
89
89
|
border-radius: var(--scb-search-radius);
|
|
90
90
|
z-index: 4;
|
|
91
91
|
}
|
|
92
|
-
.ripple-wrapper
|
|
92
|
+
.ripple-wrapper[data-kb-focus="true"] md-focus-ring.input-ring { display: block; }
|
|
93
93
|
input.with-list ~ md-focus-ring.input-ring {
|
|
94
94
|
border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
|
|
95
95
|
}
|
|
@@ -219,4 +219,4 @@ import{a as y,n as h,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
|
|
|
219
219
|
@media (prefers-color-scheme: dark) {
|
|
220
220
|
:host { color: var(--md-sys-color-on-surface); }
|
|
221
221
|
}
|
|
222
|
-
`;
|
|
222
|
+
`;l([d({type:String,attribute:"trailing-icon"})],a.prototype,"trailingIcon",2);l([d({type:String,attribute:"supporting-text"})],a.prototype,"supportingText",2);l([d({type:String})],a.prototype,"value",2);l([d({type:String,reflect:!0})],a.prototype,"size",2);l([d({type:Boolean,attribute:"full-screen",reflect:!0})],a.prototype,"fullScreen",2);a=l([w("scb-search")],a);
|