scb-wc-test 0.1.38 → 0.1.39
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-app-bar/scb-app-bar.js +30 -20
- package/package.json +2 -2
- package/scb-app-bar/scb-app-bar.d.ts +1 -0
- package/scb-app-bar/scb-app-bar.js +63 -47
- package/scb-wc-test.bundle.js +126 -116
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as h,n as d,i as c,x as r,t as
|
|
1
|
+
import{a as h,n as d,i as c,x as r,t as g}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-search/scb-search.js";import"../scb-avatar/scb-avatar.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-list/scb-list.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 s=customElements.define.bind(customElements);customElements.define=function(i,e,t){try{customElements.get(i)||s(i,e,t)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,p=(a,s,i,e)=>{for(var t=e>1?void 0:e?f(s,i):s,n=a.length-1,o;n>=0;n--)(o=a[n])&&(t=(e?o(s,i,t):o(t))||t);return e&&t&&m(s,i,t),t};let l=class extends c{constructor(){super(...arguments),this.title="App title",this.type="default",this.position="default",this.searchSupportingText=""}handleAvatarSlotChange(a){a.target.assignedElements({flatten:!0}).forEach(e=>{e.tagName==="SCB-AVATAR"&&e.setAttribute("size","small")})}render(){switch(this.type){case"small-flexible":return r`
|
|
2
2
|
<header class="small-flexible ${this.position=="bottom"?"position-bottom":this.position=="top"?"position-top":""}" role="banner" aria-label="Small app bar">
|
|
3
3
|
<div class="leading">
|
|
4
4
|
<slot name="leading"></slot>
|
|
@@ -6,6 +6,7 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
6
6
|
<h1 class="headline">${this.title}</h1>
|
|
7
7
|
<div class="trailing">
|
|
8
8
|
<slot name="trailing"></slot>
|
|
9
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
9
10
|
</div>
|
|
10
11
|
</header>
|
|
11
12
|
`;case"medium-flexible":return r`
|
|
@@ -16,6 +17,7 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
16
17
|
</div>
|
|
17
18
|
<div>
|
|
18
19
|
<slot name="trailing"></slot>
|
|
20
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
19
21
|
</div>
|
|
20
22
|
</div>
|
|
21
23
|
<h1 class="headline">${this.title}</h1>
|
|
@@ -28,6 +30,7 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
28
30
|
</div>
|
|
29
31
|
<div style="">
|
|
30
32
|
<slot name="trailing"></slot>
|
|
33
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
31
34
|
</div>
|
|
32
35
|
</div>
|
|
33
36
|
<h1 class="headline">${this.title}</h1>
|
|
@@ -42,6 +45,7 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
42
45
|
</div>
|
|
43
46
|
<div class="trailing">
|
|
44
47
|
<slot name="trailing"></slot>
|
|
48
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
45
49
|
</div>
|
|
46
50
|
</header>
|
|
47
51
|
`;default:return r`
|
|
@@ -52,38 +56,40 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
52
56
|
<h1 class="headline">${this.title}</h1>
|
|
53
57
|
<div class="trailing">
|
|
54
58
|
<slot name="trailing"></slot>
|
|
59
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
55
60
|
</div>
|
|
56
61
|
</header>
|
|
57
|
-
`}}};
|
|
62
|
+
`}}};l.styles=[h`
|
|
58
63
|
:host {
|
|
59
64
|
display: block;
|
|
60
65
|
position: relative;
|
|
61
66
|
container-type: inline-size;
|
|
62
67
|
container-name: app-bar-container;
|
|
68
|
+
--app-search-height: 64px;
|
|
63
69
|
}
|
|
64
70
|
header {
|
|
65
71
|
background: var(--md-sys-color-surface-container);
|
|
66
72
|
color: var(--md-sys-color-on-surface);
|
|
67
73
|
display: flex;
|
|
68
74
|
align-items: center;
|
|
69
|
-
padding: 0
|
|
75
|
+
padding: 0 var(--spacing-5);
|
|
70
76
|
position: relative;
|
|
71
77
|
z-index: 10;
|
|
72
78
|
transition: height 0.3s;
|
|
73
|
-
min-height:
|
|
79
|
+
min-height: var(--app-search-height);
|
|
74
80
|
}
|
|
75
81
|
header.search {
|
|
76
|
-
height:
|
|
82
|
+
height: var(--app-search-height);
|
|
77
83
|
}
|
|
78
84
|
header.medium-flexible {
|
|
79
85
|
flex-direction: column;
|
|
80
86
|
align-items: flex-start;
|
|
81
|
-
padding:
|
|
87
|
+
padding: var(--spacing-5);
|
|
82
88
|
}
|
|
83
89
|
header.large-flexible {
|
|
84
90
|
flex-direction: column;
|
|
85
91
|
align-items: flex-start;
|
|
86
|
-
padding:
|
|
92
|
+
padding: var(--spacing-5);
|
|
87
93
|
}
|
|
88
94
|
header.position-top {
|
|
89
95
|
position: fixed;
|
|
@@ -102,36 +108,36 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
102
108
|
.headline {
|
|
103
109
|
flex: 1 1 auto;
|
|
104
110
|
text-align: center;
|
|
105
|
-
font-size:
|
|
111
|
+
font-size: var(--md-sys-typescale-title-large-size);
|
|
106
112
|
font-weight: 600;
|
|
107
113
|
margin: 0;
|
|
108
114
|
}
|
|
109
115
|
header.small-flexible .headline {
|
|
110
116
|
text-align: left;
|
|
111
|
-
margin-left:
|
|
117
|
+
margin-left: var(--spacing-5);
|
|
112
118
|
}
|
|
113
119
|
header.medium-flexible .headline {
|
|
114
|
-
font-size:
|
|
115
|
-
line-height: 30px;
|
|
120
|
+
font-size: var(--md-sys-typescale-headline-small-size);
|
|
121
|
+
line-height: 30px; /* denna variabel finns inte, men sätts i figma.. --md-sys-typescale-headline-small-Line-Height2 */
|
|
116
122
|
font-weight: 700;
|
|
117
|
-
letter-spacing: -
|
|
123
|
+
letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
|
|
118
124
|
text-align: left;
|
|
119
|
-
margin:
|
|
125
|
+
margin: var(--spacing-3) 0 0 var(--spacing-3);
|
|
120
126
|
}
|
|
121
127
|
header.large-flexible .headline {
|
|
122
|
-
font-size:
|
|
128
|
+
font-size: var(--md-sys-typescale-headline-medium-size);
|
|
123
129
|
font-weight: 700;
|
|
124
|
-
line-height:
|
|
125
|
-
letter-spacing: -
|
|
130
|
+
line-height: var(--md-sys-typescale-headline-medium-Line-Height);
|
|
131
|
+
letter-spacing: var(--md-sys-typescale-headline-medium-Tracking);
|
|
126
132
|
text-align: left;
|
|
127
|
-
margin:
|
|
133
|
+
margin: var(--spacing-8) 0 0 var(--spacing-3);
|
|
128
134
|
}
|
|
129
135
|
.search-container {
|
|
130
136
|
flex: 1 1 auto;
|
|
131
137
|
display: flex;
|
|
132
138
|
align-items: center;
|
|
133
139
|
justify-content: center;
|
|
134
|
-
padding: 0
|
|
140
|
+
padding: 0 var(--spacing-3);
|
|
135
141
|
}
|
|
136
142
|
.action-elements {
|
|
137
143
|
width: 100%;
|
|
@@ -139,6 +145,10 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
139
145
|
flex-direction: row;
|
|
140
146
|
justify-content: space-between;
|
|
141
147
|
align-items: center;
|
|
142
|
-
margin-bottom:
|
|
148
|
+
margin-bottom: var(--spacing-3);
|
|
143
149
|
}
|
|
144
|
-
|
|
150
|
+
.trailing{
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
}
|
|
154
|
+
`];p([d({type:String})],l.prototype,"title",2);p([d({type:String})],l.prototype,"type",2);p([d({type:String,reflect:!0})],l.prototype,"position",2);p([d({type:String,attribute:"search-supporting-text"})],l.prototype,"searchSupportingText",2);l=p([g("scb-app-bar")],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.39",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -274,5 +274,5 @@
|
|
|
274
274
|
},
|
|
275
275
|
"./mvc/*": "./mvc/*"
|
|
276
276
|
},
|
|
277
|
-
"buildHash": "
|
|
277
|
+
"buildHash": "2C1846EA39456D3AE1571C5E6FE2686DD477CB967A49BA6B4A0E42437C7B60DF"
|
|
278
278
|
}
|
|
@@ -1,20 +1,26 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as
|
|
1
|
+
import { css as d, LitElement as c, html as s } from "lit";
|
|
2
|
+
import { property as r, customElement as g } from "lit/decorators.js";
|
|
3
3
|
import "../scb-icon-button/scb-icon-button.js";
|
|
4
4
|
import "../scb-search/scb-search.js";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
import "../scb-avatar/scb-avatar.js";
|
|
6
|
+
var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (n, a, o, e) => {
|
|
7
|
+
for (var t = e > 1 ? void 0 : e ? v(a, o) : a, p = n.length - 1, h; p >= 0; p--)
|
|
8
|
+
(h = n[p]) && (t = (e ? h(a, o, t) : h(t)) || t);
|
|
9
|
+
return e && t && m(a, o, t), t;
|
|
9
10
|
};
|
|
10
|
-
let
|
|
11
|
+
let i = class extends c {
|
|
11
12
|
constructor() {
|
|
12
13
|
super(...arguments), this.title = "App title", this.type = "default", this.position = "default", this.searchSupportingText = "";
|
|
13
14
|
}
|
|
15
|
+
handleAvatarSlotChange(n) {
|
|
16
|
+
n.target.assignedElements({ flatten: !0 }).forEach((e) => {
|
|
17
|
+
e.tagName === "SCB-AVATAR" && e.setAttribute("size", "small");
|
|
18
|
+
});
|
|
19
|
+
}
|
|
14
20
|
render() {
|
|
15
21
|
switch (this.type) {
|
|
16
22
|
case "small-flexible":
|
|
17
|
-
return
|
|
23
|
+
return s`
|
|
18
24
|
<header class="small-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Small app bar">
|
|
19
25
|
<div class="leading">
|
|
20
26
|
<slot name="leading"></slot>
|
|
@@ -22,11 +28,12 @@ let t = class extends c {
|
|
|
22
28
|
<h1 class="headline">${this.title}</h1>
|
|
23
29
|
<div class="trailing">
|
|
24
30
|
<slot name="trailing"></slot>
|
|
31
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
25
32
|
</div>
|
|
26
33
|
</header>
|
|
27
34
|
`;
|
|
28
35
|
case "medium-flexible":
|
|
29
|
-
return
|
|
36
|
+
return s`
|
|
30
37
|
<header class="medium-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Medium flexible app bar">
|
|
31
38
|
<div class="action-elements">
|
|
32
39
|
<div>
|
|
@@ -34,13 +41,14 @@ let t = class extends c {
|
|
|
34
41
|
</div>
|
|
35
42
|
<div>
|
|
36
43
|
<slot name="trailing"></slot>
|
|
44
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
37
45
|
</div>
|
|
38
46
|
</div>
|
|
39
47
|
<h1 class="headline">${this.title}</h1>
|
|
40
48
|
</header>
|
|
41
49
|
`;
|
|
42
50
|
case "large-flexible":
|
|
43
|
-
return
|
|
51
|
+
return s`
|
|
44
52
|
<header class="large-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Large flexible app bar">
|
|
45
53
|
<div class="action-elements">
|
|
46
54
|
<div style="">
|
|
@@ -48,13 +56,14 @@ let t = class extends c {
|
|
|
48
56
|
</div>
|
|
49
57
|
<div style="">
|
|
50
58
|
<slot name="trailing"></slot>
|
|
59
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
51
60
|
</div>
|
|
52
61
|
</div>
|
|
53
62
|
<h1 class="headline">${this.title}</h1>
|
|
54
63
|
</header>
|
|
55
64
|
`;
|
|
56
65
|
case "search":
|
|
57
|
-
return
|
|
66
|
+
return s`
|
|
58
67
|
<header class="search ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Search app bar">
|
|
59
68
|
<div class="leading">
|
|
60
69
|
<slot name="leading"></slot>
|
|
@@ -64,11 +73,12 @@ let t = class extends c {
|
|
|
64
73
|
</div>
|
|
65
74
|
<div class="trailing">
|
|
66
75
|
<slot name="trailing"></slot>
|
|
76
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
67
77
|
</div>
|
|
68
78
|
</header>
|
|
69
79
|
`;
|
|
70
80
|
default:
|
|
71
|
-
return
|
|
81
|
+
return s`
|
|
72
82
|
<header class="default ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Small app bar">
|
|
73
83
|
<div class="leading">
|
|
74
84
|
<slot name="leading"></slot>
|
|
@@ -76,43 +86,45 @@ let t = class extends c {
|
|
|
76
86
|
<h1 class="headline">${this.title}</h1>
|
|
77
87
|
<div class="trailing">
|
|
78
88
|
<slot name="trailing"></slot>
|
|
89
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
79
90
|
</div>
|
|
80
91
|
</header>
|
|
81
92
|
`;
|
|
82
93
|
}
|
|
83
94
|
}
|
|
84
95
|
};
|
|
85
|
-
|
|
86
|
-
|
|
96
|
+
i.styles = [
|
|
97
|
+
d`
|
|
87
98
|
:host {
|
|
88
99
|
display: block;
|
|
89
100
|
position: relative;
|
|
90
101
|
container-type: inline-size;
|
|
91
102
|
container-name: app-bar-container;
|
|
103
|
+
--app-search-height: 64px;
|
|
92
104
|
}
|
|
93
105
|
header {
|
|
94
106
|
background: var(--md-sys-color-surface-container);
|
|
95
107
|
color: var(--md-sys-color-on-surface);
|
|
96
108
|
display: flex;
|
|
97
109
|
align-items: center;
|
|
98
|
-
padding: 0
|
|
110
|
+
padding: 0 var(--spacing-5);
|
|
99
111
|
position: relative;
|
|
100
112
|
z-index: 10;
|
|
101
113
|
transition: height 0.3s;
|
|
102
|
-
min-height:
|
|
114
|
+
min-height: var(--app-search-height);
|
|
103
115
|
}
|
|
104
116
|
header.search {
|
|
105
|
-
height:
|
|
117
|
+
height: var(--app-search-height);
|
|
106
118
|
}
|
|
107
119
|
header.medium-flexible {
|
|
108
120
|
flex-direction: column;
|
|
109
121
|
align-items: flex-start;
|
|
110
|
-
padding:
|
|
122
|
+
padding: var(--spacing-5);
|
|
111
123
|
}
|
|
112
124
|
header.large-flexible {
|
|
113
125
|
flex-direction: column;
|
|
114
126
|
align-items: flex-start;
|
|
115
|
-
padding:
|
|
127
|
+
padding: var(--spacing-5);
|
|
116
128
|
}
|
|
117
129
|
header.position-top {
|
|
118
130
|
position: fixed;
|
|
@@ -131,36 +143,36 @@ t.styles = [
|
|
|
131
143
|
.headline {
|
|
132
144
|
flex: 1 1 auto;
|
|
133
145
|
text-align: center;
|
|
134
|
-
font-size:
|
|
146
|
+
font-size: var(--md-sys-typescale-title-large-size);
|
|
135
147
|
font-weight: 600;
|
|
136
148
|
margin: 0;
|
|
137
149
|
}
|
|
138
150
|
header.small-flexible .headline {
|
|
139
151
|
text-align: left;
|
|
140
|
-
margin-left:
|
|
152
|
+
margin-left: var(--spacing-5);
|
|
141
153
|
}
|
|
142
154
|
header.medium-flexible .headline {
|
|
143
|
-
font-size:
|
|
144
|
-
line-height: 30px;
|
|
155
|
+
font-size: var(--md-sys-typescale-headline-small-size);
|
|
156
|
+
line-height: 30px; /* denna variabel finns inte, men sätts i figma.. --md-sys-typescale-headline-small-Line-Height2 */
|
|
145
157
|
font-weight: 700;
|
|
146
|
-
letter-spacing: -
|
|
158
|
+
letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
|
|
147
159
|
text-align: left;
|
|
148
|
-
margin:
|
|
160
|
+
margin: var(--spacing-3) 0 0 var(--spacing-3);
|
|
149
161
|
}
|
|
150
162
|
header.large-flexible .headline {
|
|
151
|
-
font-size:
|
|
163
|
+
font-size: var(--md-sys-typescale-headline-medium-size);
|
|
152
164
|
font-weight: 700;
|
|
153
|
-
line-height:
|
|
154
|
-
letter-spacing: -
|
|
165
|
+
line-height: var(--md-sys-typescale-headline-medium-Line-Height);
|
|
166
|
+
letter-spacing: var(--md-sys-typescale-headline-medium-Tracking);
|
|
155
167
|
text-align: left;
|
|
156
|
-
margin:
|
|
168
|
+
margin: var(--spacing-8) 0 0 var(--spacing-3);
|
|
157
169
|
}
|
|
158
170
|
.search-container {
|
|
159
171
|
flex: 1 1 auto;
|
|
160
172
|
display: flex;
|
|
161
173
|
align-items: center;
|
|
162
174
|
justify-content: center;
|
|
163
|
-
padding: 0
|
|
175
|
+
padding: 0 var(--spacing-3);
|
|
164
176
|
}
|
|
165
177
|
.action-elements {
|
|
166
178
|
width: 100%;
|
|
@@ -168,25 +180,29 @@ t.styles = [
|
|
|
168
180
|
flex-direction: row;
|
|
169
181
|
justify-content: space-between;
|
|
170
182
|
align-items: center;
|
|
171
|
-
margin-bottom:
|
|
183
|
+
margin-bottom: var(--spacing-3);
|
|
184
|
+
}
|
|
185
|
+
.trailing{
|
|
186
|
+
display: flex;
|
|
187
|
+
align-items: center;
|
|
172
188
|
}
|
|
173
189
|
`
|
|
174
190
|
];
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
],
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
],
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
],
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
],
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
],
|
|
191
|
+
l([
|
|
192
|
+
r({ type: String })
|
|
193
|
+
], i.prototype, "title", 2);
|
|
194
|
+
l([
|
|
195
|
+
r({ type: String })
|
|
196
|
+
], i.prototype, "type", 2);
|
|
197
|
+
l([
|
|
198
|
+
r({ type: String, reflect: !0 })
|
|
199
|
+
], i.prototype, "position", 2);
|
|
200
|
+
l([
|
|
201
|
+
r({ type: String, attribute: "search-supporting-text" })
|
|
202
|
+
], i.prototype, "searchSupportingText", 2);
|
|
203
|
+
i = l([
|
|
204
|
+
g("scb-app-bar")
|
|
205
|
+
], i);
|
|
190
206
|
export {
|
|
191
|
-
|
|
207
|
+
i as ScbAppBar
|
|
192
208
|
};
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -2617,7 +2617,104 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
2617
2617
|
@media (prefers-color-scheme: dark) {
|
|
2618
2618
|
:host { color: var(--md-sys-color-on-surface); }
|
|
2619
2619
|
}
|
|
2620
|
-
`,_t([l({type:String,attribute:"trailing-icon"})],a.ScbSearch.prototype,"trailingIcon",2),_t([l({type:String,attribute:"supporting-text"})],a.ScbSearch.prototype,"supportingText",2),_t([l({type:String})],a.ScbSearch.prototype,"value",2),_t([l({type:String,reflect:!0})],a.ScbSearch.prototype,"size",2),_t([l({type:Boolean,attribute:"full-screen",reflect:!0})],a.ScbSearch.prototype,"fullScreen",2),a.ScbSearch=_t([f("scb-search")],a.ScbSearch);const Fc=Object.freeze(Object.defineProperty({__proto__:null,get ScbSearch(){return a.ScbSearch}},Symbol.toStringTag,{value:"Module"}));var Hc=Object.defineProperty,Nc=Object.getOwnPropertyDescriptor,
|
|
2620
|
+
`,_t([l({type:String,attribute:"trailing-icon"})],a.ScbSearch.prototype,"trailingIcon",2),_t([l({type:String,attribute:"supporting-text"})],a.ScbSearch.prototype,"supportingText",2),_t([l({type:String})],a.ScbSearch.prototype,"value",2),_t([l({type:String,reflect:!0})],a.ScbSearch.prototype,"size",2),_t([l({type:Boolean,attribute:"full-screen",reflect:!0})],a.ScbSearch.prototype,"fullScreen",2),a.ScbSearch=_t([f("scb-search")],a.ScbSearch);const Fc=Object.freeze(Object.defineProperty({__proto__:null,get ScbSearch(){return a.ScbSearch}},Symbol.toStringTag,{value:"Module"}));var Hc=Object.defineProperty,Nc=Object.getOwnPropertyDescriptor,xe=(o,e,t,r)=>{for(var i=r>1?void 0:r?Nc(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Hc(e,t,i),i};a.ScbAvatar=class extends y{constructor(){super(...arguments),this.src="",this.alt="",this.label="",this.size="medium",this.shape="circular",this.iconName="",this.variant="image",this._imgError=!1,this._hasIconSlot=!1,this._onImgLoad=()=>{this._imgError=!1,this.dispatchEvent(new CustomEvent("image-load",{bubbles:!0,composed:!0}))},this._onImgError=()=>{this._imgError=!0,this.dispatchEvent(new CustomEvent("image-error",{bubbles:!0,composed:!0}))},this._onIconSlotChange=e=>{const t=e.currentTarget;this._hasIconSlot=(t.assignedNodes({flatten:!0})||[]).length>0}}async firstUpdated(){this.variant==="icon"&&await Promise.resolve().then(()=>Y)}_initials(){const e=(this.label||this.alt||"").trim();if(!e)return"?";const t=e.split(/\s+/).filter(Boolean);if(t.length===1)return t[0].slice(0,1).toUpperCase();const r=t[0].slice(0,1),i=t[t.length-1].slice(0,1);return(r+i).toUpperCase()}_ariaLabel(){const e=(this.label||this.alt||"").trim();return e||null}render(){const e=this._ariaLabel(),t=this.variant==="image"&&!!this.src&&!this._imgError,r=c`${u}
|
|
2621
|
+
<slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
|
|
2622
|
+
${this._hasIconSlot?u:this.iconName?c`<md-icon aria-hidden="true">${this.iconName}</md-icon>`:c`<div class="fallback" part="fallback">${this._initials()}</div>`}
|
|
2623
|
+
`,i=t?c`<img class="photo" part="image" src=${this.src} alt=${this.alt}
|
|
2624
|
+
@load=${this._onImgLoad} @error=${this._onImgError} />`:c`
|
|
2625
|
+
<slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
|
|
2626
|
+
${this._hasIconSlot?u:this.iconName?c`<md-icon aria-hidden="true">${this.iconName}</md-icon>`:c`<div class="fallback" part="fallback">${this._initials()}</div>`}
|
|
2627
|
+
`;return c`
|
|
2628
|
+
<div class="container" part="container" role="img" aria-label=${e??u}>
|
|
2629
|
+
${this.variant==="icon"?r:i}
|
|
2630
|
+
</div>
|
|
2631
|
+
`}},a.ScbAvatar.styles=b`
|
|
2632
|
+
:host {
|
|
2633
|
+
display: inline-block;
|
|
2634
|
+
vertical-align: middle;
|
|
2635
|
+
--_size: 40px;
|
|
2636
|
+
--_font-size: 16px;
|
|
2637
|
+
--_bg: var(--md-sys-color-primary-fixed-dim, var(--md-sys-color-primary-container));
|
|
2638
|
+
--_fg: var(--md-sys-color-on-primary-fixed, var(--md-sys-color-on-primary-container));
|
|
2639
|
+
--_radius: var(--radius-full, 1000px);
|
|
2640
|
+
--_border: 0 solid transparent;
|
|
2641
|
+
|
|
2642
|
+
font-family: var(--brand-font, Inter, system-ui, sans-serif);
|
|
2643
|
+
color-scheme: light dark;
|
|
2644
|
+
}
|
|
2645
|
+
|
|
2646
|
+
:host([size="small"]) { --_size: 32px; --_font-size: var(--md-sys-typescale-label-medium-size, 14px); }
|
|
2647
|
+
:host([size="medium"]) { --_size: 40px; --_font-size: var(--md-sys-typescale-label-large-size, 16px); }
|
|
2648
|
+
:host([size="large"]) { --_size: 56px; --_font-size: var(--md-sys-typescale-title-large-size, 20px); }
|
|
2649
|
+
|
|
2650
|
+
:host([shape="circular"]) { --_radius: var(--radius-full, 1000px); }
|
|
2651
|
+
:host([shape="rounded"]) { --_radius: var(--radius-s, 8px); }
|
|
2652
|
+
:host([shape="square"]) { --_radius: 0; }
|
|
2653
|
+
|
|
2654
|
+
.container {
|
|
2655
|
+
inline-size: var(--_size);
|
|
2656
|
+
block-size: var(--_size);
|
|
2657
|
+
border-radius: var(--_radius);
|
|
2658
|
+
position: relative;
|
|
2659
|
+
overflow: hidden;
|
|
2660
|
+
user-select: none;
|
|
2661
|
+
line-height: 1;
|
|
2662
|
+
border: var(--_border);
|
|
2663
|
+
display: grid;
|
|
2664
|
+
place-items: center;
|
|
2665
|
+
}
|
|
2666
|
+
|
|
2667
|
+
:host([variant="image"]) .container { background: none; }
|
|
2668
|
+
:host([variant="image"]) img.photo {
|
|
2669
|
+
width: 100%;
|
|
2670
|
+
height: 100%;
|
|
2671
|
+
object-fit: cover;
|
|
2672
|
+
display: block;
|
|
2673
|
+
}
|
|
2674
|
+
|
|
2675
|
+
:host([size="small"]) { --_icon-size: var(--icon-size-small, 24px); }
|
|
2676
|
+
:host([size="medium"]) { --_icon-size: var(--icon-size-medium, 32px); }
|
|
2677
|
+
:host([size="large"]) { --_icon-size: var(--icon-size-large, 40px); }
|
|
2678
|
+
|
|
2679
|
+
:host([variant="icon"]) .container { background: var(--_bg); color: var(--_fg); }
|
|
2680
|
+
|
|
2681
|
+
img.icon {
|
|
2682
|
+
width: var(--_icon-size);
|
|
2683
|
+
height: var(--_icon-size);
|
|
2684
|
+
object-fit: contain;
|
|
2685
|
+
display: block;
|
|
2686
|
+
}
|
|
2687
|
+
|
|
2688
|
+
.fallback {
|
|
2689
|
+
display: grid;
|
|
2690
|
+
place-items: center;
|
|
2691
|
+
width: 100%;
|
|
2692
|
+
height: 100%;
|
|
2693
|
+
font-size: var(--_font-size);
|
|
2694
|
+
font-weight: var(--weight-semibold, 600);
|
|
2695
|
+
letter-spacing: .01em;
|
|
2696
|
+
text-transform: uppercase;
|
|
2697
|
+
color: var(--_fg);
|
|
2698
|
+
background: var(--_bg);
|
|
2699
|
+
}
|
|
2700
|
+
|
|
2701
|
+
:host([variant="image"]) .fallback {
|
|
2702
|
+
color: var(--md-sys-color-on-primary-container);
|
|
2703
|
+
background: var(--md-sys-color-primary-container);
|
|
2704
|
+
}
|
|
2705
|
+
|
|
2706
|
+
::slotted([slot="icon"]) {
|
|
2707
|
+
width: var(--_icon-size);
|
|
2708
|
+
height: var(--_icon-size);
|
|
2709
|
+
line-height: 1;
|
|
2710
|
+
}
|
|
2711
|
+
|
|
2712
|
+
:host(:focus-visible) .container {
|
|
2713
|
+
outline: var(--md-focus-ring-width, 2px) solid var(--md-focus-ring-color, var(--p-40));
|
|
2714
|
+
outline-offset: 2px;
|
|
2715
|
+
border-radius: var(--_radius);
|
|
2716
|
+
}
|
|
2717
|
+
`,xe([l({type:String})],a.ScbAvatar.prototype,"src",2),xe([l({type:String})],a.ScbAvatar.prototype,"alt",2),xe([l({type:String})],a.ScbAvatar.prototype,"label",2),xe([l({type:String,reflect:!0})],a.ScbAvatar.prototype,"size",2),xe([l({type:String,reflect:!0})],a.ScbAvatar.prototype,"shape",2),xe([l({type:String,attribute:"icon-name",reflect:!0})],a.ScbAvatar.prototype,"iconName",2),xe([l({type:String,reflect:!0})],a.ScbAvatar.prototype,"variant",2),xe([w()],a.ScbAvatar.prototype,"_imgError",2),xe([w()],a.ScbAvatar.prototype,"_hasIconSlot",2),a.ScbAvatar=xe([f("scb-avatar")],a.ScbAvatar);var qc=Object.defineProperty,Vc=Object.getOwnPropertyDescriptor,Xt=(o,e,t,r)=>{for(var i=r>1?void 0:r?Vc(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&qc(e,t,i),i};a.ScbAppBar=class extends y{constructor(){super(...arguments),this.title="App title",this.type="default",this.position="default",this.searchSupportingText=""}handleAvatarSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(i=>{i.tagName==="SCB-AVATAR"&&i.setAttribute("size","small")})}render(){switch(this.type){case"small-flexible":return c`
|
|
2621
2718
|
<header class="small-flexible ${this.position=="bottom"?"position-bottom":this.position=="top"?"position-top":""}" role="banner" aria-label="Small app bar">
|
|
2622
2719
|
<div class="leading">
|
|
2623
2720
|
<slot name="leading"></slot>
|
|
@@ -2625,6 +2722,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
2625
2722
|
<h1 class="headline">${this.title}</h1>
|
|
2626
2723
|
<div class="trailing">
|
|
2627
2724
|
<slot name="trailing"></slot>
|
|
2725
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
2628
2726
|
</div>
|
|
2629
2727
|
</header>
|
|
2630
2728
|
`;case"medium-flexible":return c`
|
|
@@ -2635,6 +2733,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
2635
2733
|
</div>
|
|
2636
2734
|
<div>
|
|
2637
2735
|
<slot name="trailing"></slot>
|
|
2736
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
2638
2737
|
</div>
|
|
2639
2738
|
</div>
|
|
2640
2739
|
<h1 class="headline">${this.title}</h1>
|
|
@@ -2647,6 +2746,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
2647
2746
|
</div>
|
|
2648
2747
|
<div style="">
|
|
2649
2748
|
<slot name="trailing"></slot>
|
|
2749
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
2650
2750
|
</div>
|
|
2651
2751
|
</div>
|
|
2652
2752
|
<h1 class="headline">${this.title}</h1>
|
|
@@ -2661,6 +2761,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
2661
2761
|
</div>
|
|
2662
2762
|
<div class="trailing">
|
|
2663
2763
|
<slot name="trailing"></slot>
|
|
2764
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
2664
2765
|
</div>
|
|
2665
2766
|
</header>
|
|
2666
2767
|
`;default:return c`
|
|
@@ -2671,6 +2772,7 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
2671
2772
|
<h1 class="headline">${this.title}</h1>
|
|
2672
2773
|
<div class="trailing">
|
|
2673
2774
|
<slot name="trailing"></slot>
|
|
2775
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
2674
2776
|
</div>
|
|
2675
2777
|
</header>
|
|
2676
2778
|
`}}},a.ScbAppBar.styles=[b`
|
|
@@ -2679,30 +2781,31 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
2679
2781
|
position: relative;
|
|
2680
2782
|
container-type: inline-size;
|
|
2681
2783
|
container-name: app-bar-container;
|
|
2784
|
+
--app-search-height: 64px;
|
|
2682
2785
|
}
|
|
2683
2786
|
header {
|
|
2684
2787
|
background: var(--md-sys-color-surface-container);
|
|
2685
2788
|
color: var(--md-sys-color-on-surface);
|
|
2686
2789
|
display: flex;
|
|
2687
2790
|
align-items: center;
|
|
2688
|
-
padding: 0
|
|
2791
|
+
padding: 0 var(--spacing-5);
|
|
2689
2792
|
position: relative;
|
|
2690
2793
|
z-index: 10;
|
|
2691
2794
|
transition: height 0.3s;
|
|
2692
|
-
min-height:
|
|
2795
|
+
min-height: var(--app-search-height);
|
|
2693
2796
|
}
|
|
2694
2797
|
header.search {
|
|
2695
|
-
height:
|
|
2798
|
+
height: var(--app-search-height);
|
|
2696
2799
|
}
|
|
2697
2800
|
header.medium-flexible {
|
|
2698
2801
|
flex-direction: column;
|
|
2699
2802
|
align-items: flex-start;
|
|
2700
|
-
padding:
|
|
2803
|
+
padding: var(--spacing-5);
|
|
2701
2804
|
}
|
|
2702
2805
|
header.large-flexible {
|
|
2703
2806
|
flex-direction: column;
|
|
2704
2807
|
align-items: flex-start;
|
|
2705
|
-
padding:
|
|
2808
|
+
padding: var(--spacing-5);
|
|
2706
2809
|
}
|
|
2707
2810
|
header.position-top {
|
|
2708
2811
|
position: fixed;
|
|
@@ -2721,36 +2824,36 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
2721
2824
|
.headline {
|
|
2722
2825
|
flex: 1 1 auto;
|
|
2723
2826
|
text-align: center;
|
|
2724
|
-
font-size:
|
|
2827
|
+
font-size: var(--md-sys-typescale-title-large-size);
|
|
2725
2828
|
font-weight: 600;
|
|
2726
2829
|
margin: 0;
|
|
2727
2830
|
}
|
|
2728
2831
|
header.small-flexible .headline {
|
|
2729
2832
|
text-align: left;
|
|
2730
|
-
margin-left:
|
|
2833
|
+
margin-left: var(--spacing-5);
|
|
2731
2834
|
}
|
|
2732
2835
|
header.medium-flexible .headline {
|
|
2733
|
-
font-size:
|
|
2734
|
-
line-height: 30px;
|
|
2836
|
+
font-size: var(--md-sys-typescale-headline-small-size);
|
|
2837
|
+
line-height: 30px; /* denna variabel finns inte, men sätts i figma.. --md-sys-typescale-headline-small-Line-Height2 */
|
|
2735
2838
|
font-weight: 700;
|
|
2736
|
-
letter-spacing: -
|
|
2839
|
+
letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
|
|
2737
2840
|
text-align: left;
|
|
2738
|
-
margin:
|
|
2841
|
+
margin: var(--spacing-3) 0 0 var(--spacing-3);
|
|
2739
2842
|
}
|
|
2740
2843
|
header.large-flexible .headline {
|
|
2741
|
-
font-size:
|
|
2844
|
+
font-size: var(--md-sys-typescale-headline-medium-size);
|
|
2742
2845
|
font-weight: 700;
|
|
2743
|
-
line-height:
|
|
2744
|
-
letter-spacing: -
|
|
2846
|
+
line-height: var(--md-sys-typescale-headline-medium-Line-Height);
|
|
2847
|
+
letter-spacing: var(--md-sys-typescale-headline-medium-Tracking);
|
|
2745
2848
|
text-align: left;
|
|
2746
|
-
margin:
|
|
2849
|
+
margin: var(--spacing-8) 0 0 var(--spacing-3);
|
|
2747
2850
|
}
|
|
2748
2851
|
.search-container {
|
|
2749
2852
|
flex: 1 1 auto;
|
|
2750
2853
|
display: flex;
|
|
2751
2854
|
align-items: center;
|
|
2752
2855
|
justify-content: center;
|
|
2753
|
-
padding: 0
|
|
2856
|
+
padding: 0 var(--spacing-3);
|
|
2754
2857
|
}
|
|
2755
2858
|
.action-elements {
|
|
2756
2859
|
width: 100%;
|
|
@@ -2758,106 +2861,13 @@ var ScbWcTest=function(a){"use strict";var _s;function d(o,e,t,r){var i=argument
|
|
|
2758
2861
|
flex-direction: row;
|
|
2759
2862
|
justify-content: space-between;
|
|
2760
2863
|
align-items: center;
|
|
2761
|
-
margin-bottom:
|
|
2864
|
+
margin-bottom: var(--spacing-3);
|
|
2762
2865
|
}
|
|
2763
|
-
|
|
2764
|
-
|
|
2765
|
-
|
|
2766
|
-
|
|
2767
|
-
|
|
2768
|
-
<slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
|
|
2769
|
-
${this._hasIconSlot?u:this.iconName?c`<md-icon aria-hidden="true">${this.iconName}</md-icon>`:c`<div class="fallback" part="fallback">${this._initials()}</div>`}
|
|
2770
|
-
`;return c`
|
|
2771
|
-
<div class="container" part="container" role="img" aria-label=${e??u}>
|
|
2772
|
-
${this.variant==="icon"?r:i}
|
|
2773
|
-
</div>
|
|
2774
|
-
`}},a.ScbAvatar.styles=b`
|
|
2775
|
-
:host {
|
|
2776
|
-
display: inline-block;
|
|
2777
|
-
vertical-align: middle;
|
|
2778
|
-
--_size: 40px;
|
|
2779
|
-
--_font-size: 16px;
|
|
2780
|
-
--_bg: var(--md-sys-color-primary-fixed-dim, var(--md-sys-color-primary-container));
|
|
2781
|
-
--_fg: var(--md-sys-color-on-primary-fixed, var(--md-sys-color-on-primary-container));
|
|
2782
|
-
--_radius: var(--radius-full, 1000px);
|
|
2783
|
-
--_border: 0 solid transparent;
|
|
2784
|
-
|
|
2785
|
-
font-family: var(--brand-font, Inter, system-ui, sans-serif);
|
|
2786
|
-
color-scheme: light dark;
|
|
2787
|
-
}
|
|
2788
|
-
|
|
2789
|
-
:host([size="small"]) { --_size: 32px; --_font-size: var(--md-sys-typescale-label-medium-size, 14px); }
|
|
2790
|
-
:host([size="medium"]) { --_size: 40px; --_font-size: var(--md-sys-typescale-label-large-size, 16px); }
|
|
2791
|
-
:host([size="large"]) { --_size: 56px; --_font-size: var(--md-sys-typescale-title-large-size, 20px); }
|
|
2792
|
-
|
|
2793
|
-
:host([shape="circular"]) { --_radius: var(--radius-full, 1000px); }
|
|
2794
|
-
:host([shape="rounded"]) { --_radius: var(--radius-s, 8px); }
|
|
2795
|
-
:host([shape="square"]) { --_radius: 0; }
|
|
2796
|
-
|
|
2797
|
-
.container {
|
|
2798
|
-
inline-size: var(--_size);
|
|
2799
|
-
block-size: var(--_size);
|
|
2800
|
-
border-radius: var(--_radius);
|
|
2801
|
-
position: relative;
|
|
2802
|
-
overflow: hidden;
|
|
2803
|
-
user-select: none;
|
|
2804
|
-
line-height: 1;
|
|
2805
|
-
border: var(--_border);
|
|
2806
|
-
display: grid;
|
|
2807
|
-
place-items: center;
|
|
2808
|
-
}
|
|
2809
|
-
|
|
2810
|
-
:host([variant="image"]) .container { background: none; }
|
|
2811
|
-
:host([variant="image"]) img.photo {
|
|
2812
|
-
width: 100%;
|
|
2813
|
-
height: 100%;
|
|
2814
|
-
object-fit: cover;
|
|
2815
|
-
display: block;
|
|
2816
|
-
}
|
|
2817
|
-
|
|
2818
|
-
:host([size="small"]) { --_icon-size: var(--icon-size-small, 24px); }
|
|
2819
|
-
:host([size="medium"]) { --_icon-size: var(--icon-size-medium, 32px); }
|
|
2820
|
-
:host([size="large"]) { --_icon-size: var(--icon-size-large, 40px); }
|
|
2821
|
-
|
|
2822
|
-
:host([variant="icon"]) .container { background: var(--_bg); color: var(--_fg); }
|
|
2823
|
-
|
|
2824
|
-
img.icon {
|
|
2825
|
-
width: var(--_icon-size);
|
|
2826
|
-
height: var(--_icon-size);
|
|
2827
|
-
object-fit: contain;
|
|
2828
|
-
display: block;
|
|
2829
|
-
}
|
|
2830
|
-
|
|
2831
|
-
.fallback {
|
|
2832
|
-
display: grid;
|
|
2833
|
-
place-items: center;
|
|
2834
|
-
width: 100%;
|
|
2835
|
-
height: 100%;
|
|
2836
|
-
font-size: var(--_font-size);
|
|
2837
|
-
font-weight: var(--weight-semibold, 600);
|
|
2838
|
-
letter-spacing: .01em;
|
|
2839
|
-
text-transform: uppercase;
|
|
2840
|
-
color: var(--_fg);
|
|
2841
|
-
background: var(--_bg);
|
|
2842
|
-
}
|
|
2843
|
-
|
|
2844
|
-
:host([variant="image"]) .fallback {
|
|
2845
|
-
color: var(--md-sys-color-on-primary-container);
|
|
2846
|
-
background: var(--md-sys-color-primary-container);
|
|
2847
|
-
}
|
|
2848
|
-
|
|
2849
|
-
::slotted([slot="icon"]) {
|
|
2850
|
-
width: var(--_icon-size);
|
|
2851
|
-
height: var(--_icon-size);
|
|
2852
|
-
line-height: 1;
|
|
2853
|
-
}
|
|
2854
|
-
|
|
2855
|
-
:host(:focus-visible) .container {
|
|
2856
|
-
outline: var(--md-focus-ring-width, 2px) solid var(--md-focus-ring-color, var(--p-40));
|
|
2857
|
-
outline-offset: 2px;
|
|
2858
|
-
border-radius: var(--_radius);
|
|
2859
|
-
}
|
|
2860
|
-
`,xe([l({type:String})],a.ScbAvatar.prototype,"src",2),xe([l({type:String})],a.ScbAvatar.prototype,"alt",2),xe([l({type:String})],a.ScbAvatar.prototype,"label",2),xe([l({type:String,reflect:!0})],a.ScbAvatar.prototype,"size",2),xe([l({type:String,reflect:!0})],a.ScbAvatar.prototype,"shape",2),xe([l({type:String,attribute:"icon-name",reflect:!0})],a.ScbAvatar.prototype,"iconName",2),xe([l({type:String,reflect:!0})],a.ScbAvatar.prototype,"variant",2),xe([w()],a.ScbAvatar.prototype,"_imgError",2),xe([w()],a.ScbAvatar.prototype,"_hasIconSlot",2),a.ScbAvatar=xe([f("scb-avatar")],a.ScbAvatar);/**
|
|
2866
|
+
.trailing{
|
|
2867
|
+
display: flex;
|
|
2868
|
+
align-items: center;
|
|
2869
|
+
}
|
|
2870
|
+
`],Xt([l({type:String})],a.ScbAppBar.prototype,"title",2),Xt([l({type:String})],a.ScbAppBar.prototype,"type",2),Xt([l({type:String,reflect:!0})],a.ScbAppBar.prototype,"position",2),Xt([l({type:String,attribute:"search-supporting-text"})],a.ScbAppBar.prototype,"searchSupportingText",2),a.ScbAppBar=Xt([f("scb-app-bar")],a.ScbAppBar);/**
|
|
2861
2871
|
* @license
|
|
2862
2872
|
* Copyright 2018 Google LLC
|
|
2863
2873
|
* SPDX-License-Identifier: BSD-3-Clause
|