scb-wc-test 0.1.229 → 0.1.231
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 +38 -17
- package/package.json +2 -2
- package/scb-app-bar/scb-app-bar.d.ts +5 -0
- package/scb-app-bar/scb-app-bar.js +137 -67
- package/scb-wc-test.bundle.js +437 -416
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as z,n as p,i as $,x as d,t as A}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-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-list/scb-list.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(i,a,s){try{customElements.get(i)||e(i,a,s)}catch(o){var h=String(o||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var T=Object.defineProperty,k=Object.getOwnPropertyDescriptor,v=t=>{throw TypeError(t)},c=(t,e,i,a)=>{for(var s=a>1?void 0:a?k(e,i):e,h=t.length-1,o;h>=0;h--)(o=t[h])&&(s=(a?o(e,i,s):o(s))||s);return a&&s&&T(e,i,s),s},E=(t,e,i)=>e.has(t)||v("Cannot "+i),O=(t,e,i)=>e.has(t)?v("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),r=(t,e,i)=>(E(t,e,"access private method"),i),n,g,f,m,b,y,u;let l=class extends ${constructor(){super(...arguments),O(this,n),this.title="",this.type="default",this.position="default",this.searchSupportingText="",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.__titleResizeRaf=0}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<"u"&&(this.__titleResizeObserver=new ResizeObserver(()=>r(this,n,g).call(this)))}disconnectedCallback(){this.__titleResizeRaf&&(cancelAnimationFrame(this.__titleResizeRaf),this.__titleResizeRaf=0),this.__titleResizeObserver?.disconnect(),this.__titleResizeObserver=void 0,super.disconnectedCallback()}handleActionsSlotChange(t){t.target.assignedElements({flatten:!0}).forEach(a=>{if(a.tagName==="SCB-BUTTON"){const s=a;s.hasAttribute("size")||s.setAttribute("size","small")}}),r(this,n,g).call(this)}handleAvatarSlotChange(t){t.target.assignedElements({flatten:!0}).forEach(a=>{a.tagName==="SCB-AVATAR"&&a.setAttribute("size","small")}),r(this,n,g).call(this)}firstUpdated(){r(this,n,u).call(this),r(this,n,f).call(this)}updated(t){t.has("title")&&this.dispatchEvent(new CustomEvent("title-changed",{detail:{title:this.title},bubbles:!0,composed:!0})),t.has("position")&&this.dispatchEvent(new CustomEvent("position-changed",{detail:{position:this.position},bubbles:!0,composed:!0})),t.has("type")&&(this.dispatchEvent(new CustomEvent("type-changed",{detail:{type:this.type},bubbles:!0,composed:!0})),r(this,n,f).call(this)),t.has("searchSupportingText")&&this.dispatchEvent(new CustomEvent("search-supporting-text-changed",{detail:{searchSupportingText:this.searchSupportingText},bubbles:!0,composed:!0})),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&r(this,n,u).call(this)}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}render(){switch(this.type){case"small-flexible":return d`
|
|
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
|
-
<slot name="leading"></slot>
|
|
4
|
+
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
5
5
|
</div>
|
|
6
6
|
<h1 class="headline">${this.title}</h1>
|
|
7
7
|
<div class="trailing">
|
|
8
|
-
<slot name="trailing"></slot>
|
|
8
|
+
<slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
9
9
|
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
10
10
|
</div>
|
|
11
11
|
</header>
|
|
12
|
-
`;case"medium-flexible":return
|
|
12
|
+
`;case"medium-flexible":return d`
|
|
13
13
|
<header class="medium-flexible ${this.position=="bottom"?"position-bottom":this.position=="top"?"position-top":""}" role="banner" aria-label="Medium flexible app bar">
|
|
14
14
|
<div class="action-elements">
|
|
15
15
|
<div>
|
|
16
|
-
<slot name="leading"></slot>
|
|
16
|
+
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
17
17
|
</div>
|
|
18
18
|
<div>
|
|
19
|
-
<slot name="trailing"></slot>
|
|
19
|
+
<slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
20
20
|
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
21
21
|
</div>
|
|
22
22
|
</div>
|
|
23
23
|
<h1 class="headline">${this.title}</h1>
|
|
24
24
|
</header>
|
|
25
|
-
`;case"large-flexible":return
|
|
25
|
+
`;case"large-flexible":return d`
|
|
26
26
|
<header class="large-flexible ${this.position=="bottom"?"position-bottom":this.position=="top"?"position-top":""}" role="banner" aria-label="Large flexible app bar">
|
|
27
27
|
<div class="action-elements">
|
|
28
28
|
<div style="">
|
|
29
|
-
<slot name="leading"></slot>
|
|
29
|
+
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
30
30
|
</div>
|
|
31
31
|
<div style="">
|
|
32
|
-
<slot name="trailing"></slot>
|
|
32
|
+
<slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
33
33
|
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
34
34
|
</div>
|
|
35
35
|
</div>
|
|
36
36
|
<h1 class="headline">${this.title}</h1>
|
|
37
37
|
</header>
|
|
38
|
-
`;case"search":return
|
|
38
|
+
`;case"search":return d`
|
|
39
39
|
<header class="search ${this.position=="bottom"?"position-bottom":this.position=="top"?"position-top":""}" role="banner" aria-label="Search app bar">
|
|
40
40
|
<div class="leading">
|
|
41
|
-
<slot name="leading"></slot>
|
|
41
|
+
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
42
42
|
</div>
|
|
43
43
|
<div class="search-container">
|
|
44
44
|
<scb-search supporting-text=${this.searchSupportingText}></scb-search>
|
|
45
45
|
</div>
|
|
46
46
|
<div class="trailing">
|
|
47
|
-
<slot name="trailing"></slot>
|
|
47
|
+
<slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
48
48
|
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
49
49
|
</div>
|
|
50
50
|
</header>
|
|
51
|
-
`;default:return
|
|
51
|
+
`;default:return d`
|
|
52
52
|
<header class="default ${this.position=="bottom"?"position-bottom":this.position=="top"?"position-top":""}" role="banner" aria-label="Small app bar">
|
|
53
53
|
<div class="leading">
|
|
54
|
-
<slot name="leading"></slot>
|
|
54
|
+
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
55
55
|
</div>
|
|
56
56
|
<h1 class="headline">${this.title}</h1>
|
|
57
57
|
<div class="trailing">
|
|
58
|
-
<slot name="trailing"></slot>
|
|
58
|
+
<slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
59
59
|
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
60
60
|
</div>
|
|
61
61
|
</header>
|
|
62
|
-
`}}};
|
|
62
|
+
`}}};n=new WeakSet;g=function(){this.type==="default"&&(this.__titleResizeRaf||(this.__titleResizeRaf=requestAnimationFrame(()=>{this.__titleResizeRaf=0,r(this,n,y).call(this)})))};f=function(){this.__titleResizeObserver?.disconnect();const t=this.shadowRoot?.querySelector("header");if(t&&t.style.removeProperty("--scb-app-bar-title-max-width"),this.type!=="default"||!this.__titleResizeObserver)return;const e=this.shadowRoot?.querySelector("header.default");if(!e)return;const i=e.querySelector(".leading"),a=e.querySelector(".trailing");!i||!a||(this.__titleResizeObserver.observe(e),this.__titleResizeObserver.observe(i),this.__titleResizeObserver.observe(a),r(this,n,g).call(this))};m=function(t){if(!t)return 0;const e=parseFloat(t);return Number.isFinite(e)?e:0};b=function(t){const e=getComputedStyle(t);return r(this,n,m).call(this,e.columnGap||e.gap)};y=function(){const t=this.shadowRoot?.querySelector("header.default");if(!t)return;const e=t.querySelector(".leading"),i=t.querySelector(".trailing");if(!e||!i)return;const a=t.getBoundingClientRect(),s=e.getBoundingClientRect(),h=i.getBoundingClientRect(),o=getComputedStyle(t),_=r(this,n,m).call(this,o.paddingInlineStart||o.paddingLeft),x=r(this,n,m).call(this,o.paddingInlineEnd||o.paddingRight),S=Math.max(0,a.width-_-x),R=Math.max(s.width,h.width),C=Math.max(r(this,n,b).call(this,e),r(this,n,b).call(this,i)),w=Math.max(0,S-R*2-C*2);t.style.setProperty("--scb-app-bar-title-max-width",`${w}px`)};u=function(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,i=this.mapSpacingToken(this.spacingBottom)??t,a=this.mapSpacingToken(this.spacingLeft),s=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-app-bar-spacing-block-start",e):this.style.removeProperty("--scb-app-bar-spacing-block-start"),i?this.style.setProperty("--scb-app-bar-spacing-block-end",i):this.style.removeProperty("--scb-app-bar-spacing-block-end"),a?this.style.setProperty("--scb-app-bar-spacing-inline-start",a):this.style.removeProperty("--scb-app-bar-spacing-inline-start"),s?this.style.setProperty("--scb-app-bar-spacing-inline-end",s):this.style.removeProperty("--scb-app-bar-spacing-inline-end")};l.styles=[z`
|
|
63
63
|
:host {
|
|
64
64
|
display: block;
|
|
65
65
|
font-family: var(--brand, Inter);
|
|
@@ -110,6 +110,19 @@ import{a as b,n as o,i as f,x as c,t as v}from"../../vendor/vendor.js";import"..
|
|
|
110
110
|
right: 0;
|
|
111
111
|
z-index: 100;
|
|
112
112
|
}
|
|
113
|
+
header.default .trailing {
|
|
114
|
+
margin-inline-start: auto;
|
|
115
|
+
}
|
|
116
|
+
header.default .headline {
|
|
117
|
+
position: absolute;
|
|
118
|
+
inset-inline-start: 50%;
|
|
119
|
+
inset-block-start: 50%;
|
|
120
|
+
transform: translate(-50%, -50%);
|
|
121
|
+
max-width: var(--scb-app-bar-title-max-width, 100%);
|
|
122
|
+
overflow: hidden;
|
|
123
|
+
text-overflow: ellipsis;
|
|
124
|
+
white-space: nowrap;
|
|
125
|
+
}
|
|
113
126
|
.headline {
|
|
114
127
|
flex: 1 1 auto;
|
|
115
128
|
text-align: center;
|
|
@@ -155,9 +168,17 @@ import{a as b,n as o,i as f,x as c,t as v}from"../../vendor/vendor.js";import"..
|
|
|
155
168
|
.trailing{
|
|
156
169
|
display: flex;
|
|
157
170
|
align-items: center;
|
|
171
|
+
gap: var(--spacing-2);
|
|
158
172
|
}
|
|
159
173
|
.leading {
|
|
160
174
|
display: flex;
|
|
161
175
|
align-items: center;
|
|
176
|
+
gap: var(--spacing-2);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.action-elements > div {
|
|
180
|
+
display: flex;
|
|
181
|
+
align-items: center;
|
|
182
|
+
gap: var(--spacing-2);
|
|
162
183
|
}
|
|
163
|
-
`];
|
|
184
|
+
`];c([p({type:String,reflect:!0})],l.prototype,"title",2);c([p({type:String,reflect:!0})],l.prototype,"type",2);c([p({type:String,reflect:!0})],l.prototype,"position",2);c([p({type:String,attribute:"search-supporting-text",reflect:!0})],l.prototype,"searchSupportingText",2);c([p({type:String,reflect:!0})],l.prototype,"spacing",2);c([p({type:String,attribute:"spacing-top",reflect:!0})],l.prototype,"spacingTop",2);c([p({type:String,attribute:"spacing-bottom",reflect:!0})],l.prototype,"spacingBottom",2);c([p({type:String,attribute:"spacing-left",reflect:!0})],l.prototype,"spacingLeft",2);c([p({type:String,attribute:"spacing-right",reflect:!0})],l.prototype,"spacingRight",2);l=c([A("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.231",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -378,5 +378,5 @@
|
|
|
378
378
|
},
|
|
379
379
|
"./mvc/*": "./mvc/*"
|
|
380
380
|
},
|
|
381
|
-
"buildHash": "
|
|
381
|
+
"buildHash": "C620801FA0B847F38E902184080B927199BE3DF0D836F37D4BA5E314CFD031E8"
|
|
382
382
|
}
|
|
@@ -10,7 +10,12 @@ export declare class ScbAppBar extends LitElement {
|
|
|
10
10
|
spacingBottom: undefined;
|
|
11
11
|
spacingLeft: undefined;
|
|
12
12
|
spacingRight: undefined;
|
|
13
|
+
private __titleResizeObserver?;
|
|
14
|
+
private __titleResizeRaf;
|
|
13
15
|
static styles: import('lit').CSSResult[];
|
|
16
|
+
connectedCallback(): void;
|
|
17
|
+
disconnectedCallback(): void;
|
|
18
|
+
private handleActionsSlotChange;
|
|
14
19
|
private handleAvatarSlotChange;
|
|
15
20
|
protected firstUpdated(): void;
|
|
16
21
|
protected updated(changed: Map<string, unknown>): void;
|
|
@@ -1,30 +1,46 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as
|
|
1
|
+
import { css as A, LitElement as $, html as d } from "lit";
|
|
2
|
+
import { property as c, customElement as T } from "lit/decorators.js";
|
|
3
3
|
import "../scb-icon-button/scb-icon-button.js";
|
|
4
|
+
import "../scb-button/scb-button.js";
|
|
4
5
|
import "../scb-search/scb-search.js";
|
|
5
6
|
import "../scb-avatar/scb-avatar.js";
|
|
6
|
-
var
|
|
7
|
+
var k = Object.defineProperty, E = Object.getOwnPropertyDescriptor, y = (t) => {
|
|
7
8
|
throw TypeError(t);
|
|
8
|
-
},
|
|
9
|
-
for (var
|
|
10
|
-
(
|
|
11
|
-
return
|
|
12
|
-
},
|
|
13
|
-
let
|
|
9
|
+
}, p = (t, e, i, a) => {
|
|
10
|
+
for (var s = a > 1 ? void 0 : a ? E(e, i) : e, h = t.length - 1, o; h >= 0; h--)
|
|
11
|
+
(o = t[h]) && (s = (a ? o(e, i, s) : o(s)) || s);
|
|
12
|
+
return a && s && k(e, i, s), s;
|
|
13
|
+
}, O = (t, e, i) => e.has(t) || y("Cannot " + i), P = (t, e, i) => e.has(t) ? y("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), l = (t, e, i) => (O(t, e, "access private method"), i), n, g, f, m, b, x, u;
|
|
14
|
+
let r = class extends $ {
|
|
14
15
|
constructor() {
|
|
15
|
-
super(...arguments),
|
|
16
|
+
super(...arguments), P(this, n), this.title = "", this.type = "default", this.position = "default", this.searchSupportingText = "", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.__titleResizeRaf = 0;
|
|
17
|
+
}
|
|
18
|
+
connectedCallback() {
|
|
19
|
+
super.connectedCallback(), typeof ResizeObserver < "u" && (this.__titleResizeObserver = new ResizeObserver(() => l(this, n, g).call(this)));
|
|
20
|
+
}
|
|
21
|
+
disconnectedCallback() {
|
|
22
|
+
var t;
|
|
23
|
+
this.__titleResizeRaf && (cancelAnimationFrame(this.__titleResizeRaf), this.__titleResizeRaf = 0), (t = this.__titleResizeObserver) == null || t.disconnect(), this.__titleResizeObserver = void 0, super.disconnectedCallback();
|
|
24
|
+
}
|
|
25
|
+
handleActionsSlotChange(t) {
|
|
26
|
+
t.target.assignedElements({ flatten: !0 }).forEach((a) => {
|
|
27
|
+
if (a.tagName === "SCB-BUTTON") {
|
|
28
|
+
const s = a;
|
|
29
|
+
s.hasAttribute("size") || s.setAttribute("size", "small");
|
|
30
|
+
}
|
|
31
|
+
}), l(this, n, g).call(this);
|
|
16
32
|
}
|
|
17
33
|
handleAvatarSlotChange(t) {
|
|
18
|
-
t.target.assignedElements({ flatten: !0 }).forEach((
|
|
19
|
-
|
|
20
|
-
});
|
|
34
|
+
t.target.assignedElements({ flatten: !0 }).forEach((a) => {
|
|
35
|
+
a.tagName === "SCB-AVATAR" && a.setAttribute("size", "small");
|
|
36
|
+
}), l(this, n, g).call(this);
|
|
21
37
|
}
|
|
22
38
|
firstUpdated() {
|
|
23
|
-
|
|
39
|
+
l(this, n, u).call(this), l(this, n, f).call(this);
|
|
24
40
|
}
|
|
25
41
|
// Sänd förändrings-event när egenskaper uppdateras
|
|
26
42
|
updated(t) {
|
|
27
|
-
t.has("title") && this.dispatchEvent(new CustomEvent("title-changed", { detail: { title: this.title }, bubbles: !0, composed: !0 })), t.has("position") && this.dispatchEvent(new CustomEvent("position-changed", { detail: { position: this.position }, bubbles: !0, composed: !0 })), t.has("type") && this.dispatchEvent(new CustomEvent("type-changed", { detail: { type: this.type }, bubbles: !0, composed: !0 })), t.has("searchSupportingText") && this.dispatchEvent(new CustomEvent("search-supporting-text-changed", { detail: { searchSupportingText: this.searchSupportingText }, bubbles: !0, composed: !0 })), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom") || t.has("spacingLeft") || t.has("spacingRight")) &&
|
|
43
|
+
t.has("title") && this.dispatchEvent(new CustomEvent("title-changed", { detail: { title: this.title }, bubbles: !0, composed: !0 })), t.has("position") && this.dispatchEvent(new CustomEvent("position-changed", { detail: { position: this.position }, bubbles: !0, composed: !0 })), t.has("type") && (this.dispatchEvent(new CustomEvent("type-changed", { detail: { type: this.type }, bubbles: !0, composed: !0 })), l(this, n, f).call(this)), t.has("searchSupportingText") && this.dispatchEvent(new CustomEvent("search-supporting-text-changed", { detail: { searchSupportingText: this.searchSupportingText }, bubbles: !0, composed: !0 })), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom") || t.has("spacingLeft") || t.has("spacingRight")) && l(this, n, u).call(this);
|
|
28
44
|
}
|
|
29
45
|
// Mappar spacing-värden till tokens eller fria CSS-värden.
|
|
30
46
|
mapSpacingToken(t) {
|
|
@@ -36,27 +52,27 @@ let a = class extends v {
|
|
|
36
52
|
render() {
|
|
37
53
|
switch (this.type) {
|
|
38
54
|
case "small-flexible":
|
|
39
|
-
return
|
|
55
|
+
return d`
|
|
40
56
|
<header class="small-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Small app bar">
|
|
41
57
|
<div class="leading">
|
|
42
|
-
<slot name="leading"></slot>
|
|
58
|
+
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
43
59
|
</div>
|
|
44
60
|
<h1 class="headline">${this.title}</h1>
|
|
45
61
|
<div class="trailing">
|
|
46
|
-
<slot name="trailing"></slot>
|
|
62
|
+
<slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
47
63
|
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
48
64
|
</div>
|
|
49
65
|
</header>
|
|
50
66
|
`;
|
|
51
67
|
case "medium-flexible":
|
|
52
|
-
return
|
|
68
|
+
return d`
|
|
53
69
|
<header class="medium-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Medium flexible app bar">
|
|
54
70
|
<div class="action-elements">
|
|
55
71
|
<div>
|
|
56
|
-
<slot name="leading"></slot>
|
|
72
|
+
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
57
73
|
</div>
|
|
58
74
|
<div>
|
|
59
|
-
<slot name="trailing"></slot>
|
|
75
|
+
<slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
60
76
|
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
61
77
|
</div>
|
|
62
78
|
</div>
|
|
@@ -64,14 +80,14 @@ let a = class extends v {
|
|
|
64
80
|
</header>
|
|
65
81
|
`;
|
|
66
82
|
case "large-flexible":
|
|
67
|
-
return
|
|
83
|
+
return d`
|
|
68
84
|
<header class="large-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Large flexible app bar">
|
|
69
85
|
<div class="action-elements">
|
|
70
86
|
<div style="">
|
|
71
|
-
<slot name="leading"></slot>
|
|
87
|
+
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
72
88
|
</div>
|
|
73
89
|
<div style="">
|
|
74
|
-
<slot name="trailing"></slot>
|
|
90
|
+
<slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
75
91
|
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
76
92
|
</div>
|
|
77
93
|
</div>
|
|
@@ -79,29 +95,29 @@ let a = class extends v {
|
|
|
79
95
|
</header>
|
|
80
96
|
`;
|
|
81
97
|
case "search":
|
|
82
|
-
return
|
|
98
|
+
return d`
|
|
83
99
|
<header class="search ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Search app bar">
|
|
84
100
|
<div class="leading">
|
|
85
|
-
<slot name="leading"></slot>
|
|
101
|
+
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
86
102
|
</div>
|
|
87
103
|
<div class="search-container">
|
|
88
104
|
<scb-search supporting-text=${this.searchSupportingText}></scb-search>
|
|
89
105
|
</div>
|
|
90
106
|
<div class="trailing">
|
|
91
|
-
<slot name="trailing"></slot>
|
|
107
|
+
<slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
92
108
|
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
93
109
|
</div>
|
|
94
110
|
</header>
|
|
95
111
|
`;
|
|
96
112
|
default:
|
|
97
|
-
return
|
|
113
|
+
return d`
|
|
98
114
|
<header class="default ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Small app bar">
|
|
99
115
|
<div class="leading">
|
|
100
|
-
<slot name="leading"></slot>
|
|
116
|
+
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
101
117
|
</div>
|
|
102
118
|
<h1 class="headline">${this.title}</h1>
|
|
103
119
|
<div class="trailing">
|
|
104
|
-
<slot name="trailing"></slot>
|
|
120
|
+
<slot name="trailing" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
105
121
|
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
106
122
|
</div>
|
|
107
123
|
</header>
|
|
@@ -109,13 +125,46 @@ let a = class extends v {
|
|
|
109
125
|
}
|
|
110
126
|
}
|
|
111
127
|
};
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
128
|
+
n = /* @__PURE__ */ new WeakSet();
|
|
129
|
+
g = function() {
|
|
130
|
+
this.type === "default" && (this.__titleResizeRaf || (this.__titleResizeRaf = requestAnimationFrame(() => {
|
|
131
|
+
this.__titleResizeRaf = 0, l(this, n, x).call(this);
|
|
132
|
+
})));
|
|
133
|
+
};
|
|
134
|
+
f = function() {
|
|
135
|
+
var s, h, o;
|
|
136
|
+
(s = this.__titleResizeObserver) == null || s.disconnect();
|
|
137
|
+
const t = (h = this.shadowRoot) == null ? void 0 : h.querySelector("header");
|
|
138
|
+
if (t && t.style.removeProperty("--scb-app-bar-title-max-width"), this.type !== "default" || !this.__titleResizeObserver) return;
|
|
139
|
+
const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("header.default");
|
|
140
|
+
if (!e) return;
|
|
141
|
+
const i = e.querySelector(".leading"), a = e.querySelector(".trailing");
|
|
142
|
+
!i || !a || (this.__titleResizeObserver.observe(e), this.__titleResizeObserver.observe(i), this.__titleResizeObserver.observe(a), l(this, n, g).call(this));
|
|
143
|
+
};
|
|
144
|
+
m = function(t) {
|
|
145
|
+
if (!t) return 0;
|
|
146
|
+
const e = parseFloat(t);
|
|
147
|
+
return Number.isFinite(e) ? e : 0;
|
|
148
|
+
};
|
|
149
|
+
b = function(t) {
|
|
150
|
+
const e = getComputedStyle(t);
|
|
151
|
+
return l(this, n, m).call(this, e.columnGap || e.gap);
|
|
152
|
+
};
|
|
153
|
+
x = function() {
|
|
154
|
+
var v;
|
|
155
|
+
const t = (v = this.shadowRoot) == null ? void 0 : v.querySelector("header.default");
|
|
156
|
+
if (!t) return;
|
|
157
|
+
const e = t.querySelector(".leading"), i = t.querySelector(".trailing");
|
|
158
|
+
if (!e || !i) return;
|
|
159
|
+
const a = t.getBoundingClientRect(), s = e.getBoundingClientRect(), h = i.getBoundingClientRect(), o = getComputedStyle(t), S = l(this, n, m).call(this, o.paddingInlineStart || o.paddingLeft), _ = l(this, n, m).call(this, o.paddingInlineEnd || o.paddingRight), R = Math.max(0, a.width - S - _), C = Math.max(s.width, h.width), w = Math.max(l(this, n, b).call(this, e), l(this, n, b).call(this, i)), z = Math.max(0, R - C * 2 - w * 2);
|
|
160
|
+
t.style.setProperty("--scb-app-bar-title-max-width", `${z}px`);
|
|
116
161
|
};
|
|
117
|
-
|
|
118
|
-
|
|
162
|
+
u = function() {
|
|
163
|
+
const t = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop) ?? t, i = this.mapSpacingToken(this.spacingBottom) ?? t, a = this.mapSpacingToken(this.spacingLeft), s = this.mapSpacingToken(this.spacingRight);
|
|
164
|
+
e ? this.style.setProperty("--scb-app-bar-spacing-block-start", e) : this.style.removeProperty("--scb-app-bar-spacing-block-start"), i ? this.style.setProperty("--scb-app-bar-spacing-block-end", i) : this.style.removeProperty("--scb-app-bar-spacing-block-end"), a ? this.style.setProperty("--scb-app-bar-spacing-inline-start", a) : this.style.removeProperty("--scb-app-bar-spacing-inline-start"), s ? this.style.setProperty("--scb-app-bar-spacing-inline-end", s) : this.style.removeProperty("--scb-app-bar-spacing-inline-end");
|
|
165
|
+
};
|
|
166
|
+
r.styles = [
|
|
167
|
+
A`
|
|
119
168
|
:host {
|
|
120
169
|
display: block;
|
|
121
170
|
font-family: var(--brand, Inter);
|
|
@@ -166,6 +215,19 @@ a.styles = [
|
|
|
166
215
|
right: 0;
|
|
167
216
|
z-index: 100;
|
|
168
217
|
}
|
|
218
|
+
header.default .trailing {
|
|
219
|
+
margin-inline-start: auto;
|
|
220
|
+
}
|
|
221
|
+
header.default .headline {
|
|
222
|
+
position: absolute;
|
|
223
|
+
inset-inline-start: 50%;
|
|
224
|
+
inset-block-start: 50%;
|
|
225
|
+
transform: translate(-50%, -50%);
|
|
226
|
+
max-width: var(--scb-app-bar-title-max-width, 100%);
|
|
227
|
+
overflow: hidden;
|
|
228
|
+
text-overflow: ellipsis;
|
|
229
|
+
white-space: nowrap;
|
|
230
|
+
}
|
|
169
231
|
.headline {
|
|
170
232
|
flex: 1 1 auto;
|
|
171
233
|
text-align: center;
|
|
@@ -211,43 +273,51 @@ a.styles = [
|
|
|
211
273
|
.trailing{
|
|
212
274
|
display: flex;
|
|
213
275
|
align-items: center;
|
|
276
|
+
gap: var(--spacing-2);
|
|
214
277
|
}
|
|
215
278
|
.leading {
|
|
216
279
|
display: flex;
|
|
217
280
|
align-items: center;
|
|
281
|
+
gap: var(--spacing-2);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.action-elements > div {
|
|
285
|
+
display: flex;
|
|
286
|
+
align-items: center;
|
|
287
|
+
gap: var(--spacing-2);
|
|
218
288
|
}
|
|
219
289
|
`
|
|
220
290
|
];
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
],
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
],
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
],
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
],
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
],
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
],
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
],
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
],
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
],
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
],
|
|
291
|
+
p([
|
|
292
|
+
c({ type: String, reflect: !0 })
|
|
293
|
+
], r.prototype, "title", 2);
|
|
294
|
+
p([
|
|
295
|
+
c({ type: String, reflect: !0 })
|
|
296
|
+
], r.prototype, "type", 2);
|
|
297
|
+
p([
|
|
298
|
+
c({ type: String, reflect: !0 })
|
|
299
|
+
], r.prototype, "position", 2);
|
|
300
|
+
p([
|
|
301
|
+
c({ type: String, attribute: "search-supporting-text", reflect: !0 })
|
|
302
|
+
], r.prototype, "searchSupportingText", 2);
|
|
303
|
+
p([
|
|
304
|
+
c({ type: String, reflect: !0 })
|
|
305
|
+
], r.prototype, "spacing", 2);
|
|
306
|
+
p([
|
|
307
|
+
c({ type: String, attribute: "spacing-top", reflect: !0 })
|
|
308
|
+
], r.prototype, "spacingTop", 2);
|
|
309
|
+
p([
|
|
310
|
+
c({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
311
|
+
], r.prototype, "spacingBottom", 2);
|
|
312
|
+
p([
|
|
313
|
+
c({ type: String, attribute: "spacing-left", reflect: !0 })
|
|
314
|
+
], r.prototype, "spacingLeft", 2);
|
|
315
|
+
p([
|
|
316
|
+
c({ type: String, attribute: "spacing-right", reflect: !0 })
|
|
317
|
+
], r.prototype, "spacingRight", 2);
|
|
318
|
+
r = p([
|
|
319
|
+
T("scb-app-bar")
|
|
320
|
+
], r);
|
|
251
321
|
export {
|
|
252
|
-
|
|
322
|
+
r as ScbAppBar
|
|
253
323
|
};
|