scb-wc-test 0.1.230 → 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 +20 -7
- package/package.json +2 -2
- package/scb-app-bar/scb-app-bar.d.ts +4 -0
- package/scb-app-bar/scb-app-bar.js +106 -53
- package/scb-wc-test.bundle.js +419 -406
|
@@ -1,4 +1,4 @@
|
|
|
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
4
|
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
@@ -9,7 +9,7 @@ import{a as b,n as l,i as f,x as c,t as v}from"../../vendor/vendor.js";import"..
|
|
|
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>
|
|
@@ -22,7 +22,7 @@ import{a as b,n as l,i as f,x as c,t as v}from"../../vendor/vendor.js";import"..
|
|
|
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="">
|
|
@@ -35,7 +35,7 @@ import{a as b,n as l,i as f,x as c,t as v}from"../../vendor/vendor.js";import"..
|
|
|
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
41
|
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
@@ -48,7 +48,7 @@ import{a as b,n as l,i as f,x as c,t as v}from"../../vendor/vendor.js";import"..
|
|
|
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
54
|
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
@@ -59,7 +59,7 @@ import{a as b,n as l,i as f,x as c,t as v}from"../../vendor/vendor.js";import"..
|
|
|
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 l,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;
|
|
@@ -168,4 +181,4 @@ import{a as b,n as l,i as f,x as c,t as v}from"../../vendor/vendor.js";import"..
|
|
|
168
181
|
align-items: center;
|
|
169
182
|
gap: var(--spacing-2);
|
|
170
183
|
}
|
|
171
|
-
`];
|
|
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,11 @@ 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;
|
|
14
18
|
private handleActionsSlotChange;
|
|
15
19
|
private handleAvatarSlotChange;
|
|
16
20
|
protected firstUpdated(): void;
|
|
@@ -1,19 +1,26 @@
|
|
|
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
4
|
import "../scb-button/scb-button.js";
|
|
5
5
|
import "../scb-search/scb-search.js";
|
|
6
6
|
import "../scb-avatar/scb-avatar.js";
|
|
7
|
-
var
|
|
7
|
+
var k = Object.defineProperty, E = Object.getOwnPropertyDescriptor, y = (t) => {
|
|
8
8
|
throw TypeError(t);
|
|
9
|
-
},
|
|
10
|
-
for (var s = a > 1 ? void 0 : a ?
|
|
11
|
-
(
|
|
12
|
-
return a && s &&
|
|
13
|
-
},
|
|
14
|
-
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 $ {
|
|
15
15
|
constructor() {
|
|
16
|
-
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();
|
|
17
24
|
}
|
|
18
25
|
handleActionsSlotChange(t) {
|
|
19
26
|
t.target.assignedElements({ flatten: !0 }).forEach((a) => {
|
|
@@ -21,19 +28,19 @@ let n = class extends v {
|
|
|
21
28
|
const s = a;
|
|
22
29
|
s.hasAttribute("size") || s.setAttribute("size", "small");
|
|
23
30
|
}
|
|
24
|
-
});
|
|
31
|
+
}), l(this, n, g).call(this);
|
|
25
32
|
}
|
|
26
33
|
handleAvatarSlotChange(t) {
|
|
27
34
|
t.target.assignedElements({ flatten: !0 }).forEach((a) => {
|
|
28
35
|
a.tagName === "SCB-AVATAR" && a.setAttribute("size", "small");
|
|
29
|
-
});
|
|
36
|
+
}), l(this, n, g).call(this);
|
|
30
37
|
}
|
|
31
38
|
firstUpdated() {
|
|
32
|
-
|
|
39
|
+
l(this, n, u).call(this), l(this, n, f).call(this);
|
|
33
40
|
}
|
|
34
41
|
// Sänd förändrings-event när egenskaper uppdateras
|
|
35
42
|
updated(t) {
|
|
36
|
-
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);
|
|
37
44
|
}
|
|
38
45
|
// Mappar spacing-värden till tokens eller fria CSS-värden.
|
|
39
46
|
mapSpacingToken(t) {
|
|
@@ -45,7 +52,7 @@ let n = class extends v {
|
|
|
45
52
|
render() {
|
|
46
53
|
switch (this.type) {
|
|
47
54
|
case "small-flexible":
|
|
48
|
-
return
|
|
55
|
+
return d`
|
|
49
56
|
<header class="small-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Small app bar">
|
|
50
57
|
<div class="leading">
|
|
51
58
|
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
@@ -58,7 +65,7 @@ let n = class extends v {
|
|
|
58
65
|
</header>
|
|
59
66
|
`;
|
|
60
67
|
case "medium-flexible":
|
|
61
|
-
return
|
|
68
|
+
return d`
|
|
62
69
|
<header class="medium-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Medium flexible app bar">
|
|
63
70
|
<div class="action-elements">
|
|
64
71
|
<div>
|
|
@@ -73,7 +80,7 @@ let n = class extends v {
|
|
|
73
80
|
</header>
|
|
74
81
|
`;
|
|
75
82
|
case "large-flexible":
|
|
76
|
-
return
|
|
83
|
+
return d`
|
|
77
84
|
<header class="large-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Large flexible app bar">
|
|
78
85
|
<div class="action-elements">
|
|
79
86
|
<div style="">
|
|
@@ -88,7 +95,7 @@ let n = class extends v {
|
|
|
88
95
|
</header>
|
|
89
96
|
`;
|
|
90
97
|
case "search":
|
|
91
|
-
return
|
|
98
|
+
return d`
|
|
92
99
|
<header class="search ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Search app bar">
|
|
93
100
|
<div class="leading">
|
|
94
101
|
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
@@ -103,7 +110,7 @@ let n = class extends v {
|
|
|
103
110
|
</header>
|
|
104
111
|
`;
|
|
105
112
|
default:
|
|
106
|
-
return
|
|
113
|
+
return d`
|
|
107
114
|
<header class="default ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Small app bar">
|
|
108
115
|
<div class="leading">
|
|
109
116
|
<slot name="leading" @slotchange=${this.handleActionsSlotChange}></slot>
|
|
@@ -118,13 +125,46 @@ let n = class extends v {
|
|
|
118
125
|
}
|
|
119
126
|
}
|
|
120
127
|
};
|
|
121
|
-
|
|
128
|
+
n = /* @__PURE__ */ new WeakSet();
|
|
122
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`);
|
|
161
|
+
};
|
|
162
|
+
u = function() {
|
|
123
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);
|
|
124
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");
|
|
125
165
|
};
|
|
126
|
-
|
|
127
|
-
|
|
166
|
+
r.styles = [
|
|
167
|
+
A`
|
|
128
168
|
:host {
|
|
129
169
|
display: block;
|
|
130
170
|
font-family: var(--brand, Inter);
|
|
@@ -175,6 +215,19 @@ n.styles = [
|
|
|
175
215
|
right: 0;
|
|
176
216
|
z-index: 100;
|
|
177
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
|
+
}
|
|
178
231
|
.headline {
|
|
179
232
|
flex: 1 1 auto;
|
|
180
233
|
text-align: center;
|
|
@@ -235,36 +288,36 @@ n.styles = [
|
|
|
235
288
|
}
|
|
236
289
|
`
|
|
237
290
|
];
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
],
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
],
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
],
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
],
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
],
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
],
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
],
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
],
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
],
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
],
|
|
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);
|
|
268
321
|
export {
|
|
269
|
-
|
|
322
|
+
r as ScbAppBar
|
|
270
323
|
};
|