@universal-material/web 3.5.7 → 3.5.8
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/app-bar/top-app-bar.d.ts +3 -16
- package/app-bar/top-app-bar.d.ts.map +1 -1
- package/app-bar/top-app-bar.js +22 -29
- package/app-bar/top-app-bar.js.map +1 -1
- package/app-bar/top-app-bar.styles.d.ts.map +1 -1
- package/app-bar/top-app-bar.styles.js +15 -16
- package/app-bar/top-app-bar.styles.js.map +1 -1
- package/custom-elements.json +8646 -8678
- package/package.json +1 -1
- package/vscode.html-custom-data.json +90 -94
package/app-bar/top-app-bar.d.ts
CHANGED
|
@@ -3,18 +3,8 @@ import { HTMLTemplateResult, LitElement } from 'lit';
|
|
|
3
3
|
export declare class UmTopAppBar extends LitElement {
|
|
4
4
|
#private;
|
|
5
5
|
static styles: import("lit").CSSResult[];
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
*
|
|
9
|
-
* _Note:_ Readonly
|
|
10
|
-
*/
|
|
11
|
-
hasLeadingIcon: boolean;
|
|
12
|
-
/**
|
|
13
|
-
* Whether the app bar has trailing icon or not
|
|
14
|
-
*
|
|
15
|
-
* _Note:_ Readonly
|
|
16
|
-
*/
|
|
17
|
-
hasTrailingIcon: boolean;
|
|
6
|
+
private _hasLeadingIcon;
|
|
7
|
+
private _hasTrailingIcon;
|
|
18
8
|
position: 'fixed' | 'absolute' | 'static';
|
|
19
9
|
size: 'small' | 'medium' | 'large';
|
|
20
10
|
headline: string;
|
|
@@ -29,15 +19,12 @@ export declare class UmTopAppBar extends LitElement {
|
|
|
29
19
|
private containerSizeObserver;
|
|
30
20
|
private scrollContainerElement;
|
|
31
21
|
private getScrollContainer;
|
|
32
|
-
private handleLeadingIconSlotChange;
|
|
33
|
-
private handleTrailingIconSlotChange;
|
|
34
22
|
render(): HTMLTemplateResult;
|
|
35
23
|
protected updated(_changedProperties: PropertyValues): void;
|
|
36
24
|
firstUpdated(changedProperties: PropertyValues): void;
|
|
37
25
|
connectedCallback(): void;
|
|
38
26
|
disconnectedCallback(): void;
|
|
39
|
-
private static
|
|
40
|
-
private setContentHeightProperty;
|
|
27
|
+
private static _getScrollTop;
|
|
41
28
|
}
|
|
42
29
|
declare global {
|
|
43
30
|
interface HTMLElementTagNameMap {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"top-app-bar.d.ts","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAOpE,qBACa,WAAY,SAAQ,UAAU;;IACzC,OAAgB,MAAM,4BAAwB;
|
|
1
|
+
{"version":3,"file":"top-app-bar.d.ts","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAOpE,qBACa,WAAY,SAAQ,UAAU;;IACzC,OAAgB,MAAM,4BAAwB;IAErC,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,gBAAgB,CAAS;IAG1C,QAAQ,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAGpD,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAEjC,QAAQ,SAAM;IAE1B,IACI,eAAe,IAAI,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAE5D;IAED,IAAI,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,EAShE;IAEQ,iBAAiB,UAAS;IAGnC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAE5B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAe;IACxD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAe;IAEpE,OAAO,CAAC,qBAAqB,CAA+B;IAE5D,OAAO,CAAC,sBAAsB,CAGd;IAEhB,OAAO,CAAC,kBAAkB;IAyBjB,MAAM,IAAI,kBAAkB;cA0ClB,OAAO,CAAC,kBAAkB,EAAE,cAAc;IAKpD,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAO9C,iBAAiB;IAMjB,oBAAoB;IAgC7B,OAAO,CAAC,MAAM,CAAC,aAAa;CAe7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
|
package/app-bar/top-app-bar.js
CHANGED
|
@@ -2,25 +2,15 @@ var _a;
|
|
|
2
2
|
var UmTopAppBar_1;
|
|
3
3
|
import { __decorate } from "tslib";
|
|
4
4
|
import { html, LitElement, nothing } from 'lit';
|
|
5
|
-
import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';
|
|
5
|
+
import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';
|
|
6
6
|
import { classMap } from 'lit/directives/class-map.js';
|
|
7
7
|
import { styles as baseStyles } from '../shared/base.styles';
|
|
8
8
|
import { styles } from './top-app-bar.styles.js';
|
|
9
9
|
let UmTopAppBar = class UmTopAppBar extends LitElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments);
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
*
|
|
15
|
-
* _Note:_ Readonly
|
|
16
|
-
*/
|
|
17
|
-
this.hasLeadingIcon = false;
|
|
18
|
-
/**
|
|
19
|
-
* Whether the app bar has trailing icon or not
|
|
20
|
-
*
|
|
21
|
-
* _Note:_ Readonly
|
|
22
|
-
*/
|
|
23
|
-
this.hasTrailingIcon = false;
|
|
12
|
+
this._hasLeadingIcon = false;
|
|
13
|
+
this._hasTrailingIcon = false;
|
|
24
14
|
this.position = 'fixed';
|
|
25
15
|
this.size = 'small';
|
|
26
16
|
this.headline = '';
|
|
@@ -30,7 +20,7 @@ let UmTopAppBar = class UmTopAppBar extends LitElement {
|
|
|
30
20
|
this.#updateScroll = () => {
|
|
31
21
|
const container = this.scrollContainerElement ?? window;
|
|
32
22
|
const extendedContentHeight = Math.max(this._extendedContent?.offsetHeight ?? 0, 0);
|
|
33
|
-
const scrollTop = UmTopAppBar_1.
|
|
23
|
+
const scrollTop = UmTopAppBar_1._getScrollTop(container);
|
|
34
24
|
this.containerScrolled = scrollTop > extendedContentHeight;
|
|
35
25
|
this._headlineElement.style.opacity = scrollTop >= extendedContentHeight ? '1' : '0';
|
|
36
26
|
if (extendedContentHeight === 0) {
|
|
@@ -66,11 +56,11 @@ let UmTopAppBar = class UmTopAppBar extends LitElement {
|
|
|
66
56
|
}
|
|
67
57
|
return document.getElementById(idOrElement);
|
|
68
58
|
}
|
|
69
|
-
handleLeadingIconSlotChange() {
|
|
70
|
-
this.
|
|
59
|
+
#handleLeadingIconSlotChange() {
|
|
60
|
+
this._hasLeadingIcon = this.assignedLeadingIcons.length > 0;
|
|
71
61
|
}
|
|
72
|
-
handleTrailingIconSlotChange() {
|
|
73
|
-
this.
|
|
62
|
+
#handleTrailingIconSlotChange() {
|
|
63
|
+
this._hasTrailingIcon = this.assignedTrailingIcons.length > 0;
|
|
74
64
|
}
|
|
75
65
|
render() {
|
|
76
66
|
const extendedContent = html `
|
|
@@ -81,6 +71,9 @@ let UmTopAppBar = class UmTopAppBar extends LitElement {
|
|
|
81
71
|
const containerClasses = classMap({
|
|
82
72
|
[this.position]: true,
|
|
83
73
|
[this.size]: true,
|
|
74
|
+
scrolled: this.containerScrolled,
|
|
75
|
+
'has-leading-icon': this._hasLeadingIcon,
|
|
76
|
+
'has-trailing-icon': this._hasTrailingIcon,
|
|
84
77
|
});
|
|
85
78
|
const appBarSpacing = this.position !== 'static'
|
|
86
79
|
? html `<div class="spacing"></div>`
|
|
@@ -90,7 +83,7 @@ let UmTopAppBar = class UmTopAppBar extends LitElement {
|
|
|
90
83
|
<div class="container ${containerClasses}" part="container">
|
|
91
84
|
<div class="content" part="content">
|
|
92
85
|
<div class="icon leading-icon" part="icon leading">
|
|
93
|
-
<slot name="leading-icon" @slotchange="${this
|
|
86
|
+
<slot name="leading-icon" @slotchange="${this.#handleLeadingIconSlotChange}"></slot>
|
|
94
87
|
</div>
|
|
95
88
|
<div class="headline" part="headline">
|
|
96
89
|
<slot>
|
|
@@ -99,7 +92,7 @@ let UmTopAppBar = class UmTopAppBar extends LitElement {
|
|
|
99
92
|
</div>
|
|
100
93
|
|
|
101
94
|
<div class="icon trailing-icon" part="icon trailing">
|
|
102
|
-
<slot name="trailing-icon" @slotchange="${this
|
|
95
|
+
<slot name="trailing-icon" @slotchange="${this.#handleTrailingIconSlotChange}"></slot>
|
|
103
96
|
</div>
|
|
104
97
|
</div>
|
|
105
98
|
<slot name="additional-content"></slot>
|
|
@@ -113,9 +106,9 @@ let UmTopAppBar = class UmTopAppBar extends LitElement {
|
|
|
113
106
|
}
|
|
114
107
|
firstUpdated(changedProperties) {
|
|
115
108
|
super.firstUpdated(changedProperties);
|
|
116
|
-
this.containerSizeObserver = new ResizeObserver(() => this
|
|
109
|
+
this.containerSizeObserver = new ResizeObserver(() => this.#setContentHeightProperty());
|
|
117
110
|
this.containerSizeObserver.observe(this._container);
|
|
118
|
-
this
|
|
111
|
+
this.#setContentHeightProperty();
|
|
119
112
|
}
|
|
120
113
|
connectedCallback() {
|
|
121
114
|
super.connectedCallback();
|
|
@@ -127,7 +120,7 @@ let UmTopAppBar = class UmTopAppBar extends LitElement {
|
|
|
127
120
|
this.containerSizeObserver = null;
|
|
128
121
|
}
|
|
129
122
|
#updateScroll;
|
|
130
|
-
static
|
|
123
|
+
static _getScrollTop(container) {
|
|
131
124
|
if (typeof container.scrollY === 'number') {
|
|
132
125
|
return container.scrollY;
|
|
133
126
|
}
|
|
@@ -136,16 +129,16 @@ let UmTopAppBar = class UmTopAppBar extends LitElement {
|
|
|
136
129
|
}
|
|
137
130
|
return document.body.scrollTop;
|
|
138
131
|
}
|
|
139
|
-
setContentHeightProperty() {
|
|
132
|
+
#setContentHeightProperty() {
|
|
140
133
|
this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);
|
|
141
134
|
}
|
|
142
135
|
};
|
|
143
136
|
__decorate([
|
|
144
|
-
|
|
145
|
-
], UmTopAppBar.prototype, "
|
|
137
|
+
state()
|
|
138
|
+
], UmTopAppBar.prototype, "_hasLeadingIcon", void 0);
|
|
146
139
|
__decorate([
|
|
147
|
-
|
|
148
|
-
], UmTopAppBar.prototype, "
|
|
140
|
+
state()
|
|
141
|
+
], UmTopAppBar.prototype, "_hasTrailingIcon", void 0);
|
|
149
142
|
__decorate([
|
|
150
143
|
property({ reflect: true })
|
|
151
144
|
], UmTopAppBar.prototype, "position", void 0);
|
|
@@ -159,7 +152,7 @@ __decorate([
|
|
|
159
152
|
property({ reflect: true })
|
|
160
153
|
], UmTopAppBar.prototype, "scrollContainer", null);
|
|
161
154
|
__decorate([
|
|
162
|
-
|
|
155
|
+
state()
|
|
163
156
|
], UmTopAppBar.prototype, "containerScrolled", void 0);
|
|
164
157
|
__decorate([
|
|
165
158
|
queryAssignedElements({ slot: 'leading-icon', flatten: true })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"top-app-bar.js","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.ts"],"names":[],"mappings":";;;AAEA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAG1C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAGL;;;;WAIG;QAEH,mBAAc,GAAG,KAAK,CAAC;QAEvB;;;;WAIG;QAEH,oBAAe,GAAG,KAAK,CAAC;QAGxB,aAAQ,GAAoC,OAAO,CAAC;QAGpD,SAAI,GAAiC,OAAO,CAAC;QAEjC,aAAQ,GAAG,EAAE,CAAC;QAmB1B,sBAAiB,GAAG,KAAK,CAAC;QAYlB,0BAAqB,GAA0B,IAAI,CAAC;QAEpD,2BAAsB,GAGnB,IAAI,CAAC;QA2FP,kBAAa,GAAG,GAAG,EAAE;YAC5B,MAAM,SAAS,GAAG,IAAI,CAAC,sBAAsB,IAAI,MAAM,CAAC;YAExD,MAAM,qBAAqB,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,YAAY,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;YAEpF,MAAM,SAAS,GAAG,aAAW,CAAC,YAAY,CAAC,SAAgB,CAAC,CAAC;YAE7D,IAAI,CAAC,iBAAiB,GAAG,SAAS,GAAG,qBAAqB,CAAC;YAE3D,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,IAAI,qBAAqB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;YAErF,IAAI,qBAAqB,KAAK,CAAC,EAAE,CAAC;gBAChC,OAAO;YACT,CAAC;YAED,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,GAAG,CAAC;YAE9D,IAAI,SAAS,GAAG,YAAY,EAAE,CAAC;gBAC7B,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;gBAC1C,OAAO;YACT,CAAC;YAED,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,GAAG,SAAS,GAAG,YAAY,GAAG,EAAE,CAAC;QAC1E,CAAC,CAAC;IAiBJ,CAAC;;aA/LiB,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;IA2B9C,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAChE,CAAC;IAED,IAAI,eAAe,CAAC,WAA6C;QAC/D,IAAI,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAE/E,IAAI,WAAW,KAAK,MAAM,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAE,CAAC;QACpE,IAAI,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC9E,CAAC;IAsBO,kBAAkB,CAAC,WAA6C;QAMtE,IAAI,WAAW,YAAY,WAAW,EAAE,CAAC;YACvC,OAAO,WAAW,CAAC;QACrB,CAAC;QAED,IAAI,WAAW,KAAK,QAAQ,EAAE,CAAC;YAC7B,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,OAAO,QAAQ,CAAC,cAAc,CAAC,WAAY,CAAE,CAAC;IAChD,CAAC;IAEO,2BAA2B;QACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC7D,CAAC;IAEO,4BAA4B;QAClC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/D,CAAC;IAEQ,MAAM;QACb,MAAM,eAAe,GAAG,IAAI,CAAA;;wCAEQ,IAAI,CAAC,QAAQ;;KAEhD,CAAC;QAEF,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI;YACrB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;SAClB,CAAC,CAAC;QAEH,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ;YAC9C,CAAC,CAAC,IAAI,CAAA,6BAA6B;YACnC,CAAC,CAAC,OAAO,CAAC;QAEZ,OAAO,IAAI,CAAA;QACP,aAAa;8BACS,gBAAgB;;;qDAGO,IAAI,CAAC,2BAA2B;;;;sBAI/D,IAAI,CAAC,QAAQ;;;;;sDAKmB,IAAI,CAAC,4BAA4B;;;;;QAK/E,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;KACpD,CAAC;IACJ,CAAC;IAEkB,OAAO,CAAC,kBAAkC;QAC3D,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAClC,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEQ,YAAY,CAAC,iBAAiC;QACrD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,qBAAqB,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC,CAAC;QACvF,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAClC,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,IAAI,QAAQ,CAAC;IAC1D,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,qBAAsB,CAAC,UAAU,EAAE,CAAC;QACzC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;IACpC,CAAC;IAEQ,aAAa,CAuBpB;IAEM,MAAM,CAAC,YAAY,CAAC,SAA+B;QACzD,IAAI,OAAO,SAAS,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAC1C,OAAO,SAAS,CAAC,OAAO,CAAC;QAC3B,CAAC;QAED,IAAI,OAAO,SAAS,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;YAC5C,OAAO,SAAS,CAAC,SAAS,CAAC;QAC7B,CAAC;QAED,OAAO,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;IACjC,CAAC;IAEO,wBAAwB;QAC9B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,IAAI,CAAC,CAAC;IACnF,CAAC;;AAtLD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnD;AAQvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACnD;AAGxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACwB;AAGpD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACiB;AAEjC;IAAX,QAAQ,EAAE;6CAAe;AAG1B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAG3B;AAcD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAClD;AAGT;IADhB,qBAAqB,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACT;AAGrC;IADhB,qBAAqB,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACT;AAEX;IAA3C,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC;+CAA2C;AACxB;IAA5C,KAAK,CAAC,mBAAmB,CAAC;qDAAiD;AACvC;IAApC,KAAK,CAAC,WAAW,CAAC;qDAAiD;AAtDzD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAgMvB","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { styles } from './top-app-bar.styles.js';\n\n@customElement('u-top-app-bar')\nexport class UmTopAppBar extends LitElement {\n static override styles = [baseStyles, styles];\n\n /**\n * Whether the app bar has leading icon or not\n *\n * _Note:_ Readonly\n */\n @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })\n hasLeadingIcon = false;\n\n /**\n * Whether the app bar has trailing icon or not\n *\n * _Note:_ Readonly\n */\n @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })\n hasTrailingIcon = false;\n\n @property({ reflect: true })\n position: 'fixed' | 'absolute' | 'static' = 'fixed';\n\n @property({ reflect: true })\n size: 'small' | 'medium' | 'large' = 'small';\n\n @property() headline = '';\n\n @property({ reflect: true })\n get scrollContainer(): 'none' | 'window' | string | undefined {\n return this.attributes.getNamedItem('scrollContainer')?.value;\n }\n\n set scrollContainer(idOrElement: string | HTMLElement | undefined) {\n this.scrollContainerElement?.removeEventListener('scroll', this.#updateScroll);\n\n if (idOrElement === 'none') {\n return;\n }\n\n this.scrollContainerElement = this.getScrollContainer(idOrElement)!;\n this.scrollContainerElement?.addEventListener('scroll', this.#updateScroll);\n }\n\n @property({ type: Boolean, attribute: 'container-scrolled', reflect: true })\n containerScrolled = false;\n\n @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n private readonly assignedLeadingIcons!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'trailing-icon', flatten: true })\n private readonly assignedTrailingIcons!: HTMLElement[];\n\n @query('.container', true) private readonly _container!: HTMLElement;\n @query('.extended-content') private readonly _extendedContent!: HTMLElement;\n @query('.headline') private readonly _headlineElement!: HTMLElement;\n\n private containerSizeObserver: ResizeObserver | null = null;\n\n private scrollContainerElement: {\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n } | null = null;\n\n private getScrollContainer(idOrElement: string | HTMLElement | undefined):\n | {\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n }\n | undefined {\n if (idOrElement instanceof HTMLElement) {\n return idOrElement;\n }\n\n if (idOrElement === 'window') {\n return window;\n }\n\n return document.getElementById(idOrElement!)!;\n }\n\n private handleLeadingIconSlotChange() {\n this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n }\n\n private handleTrailingIconSlotChange() {\n this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n }\n\n override render(): HTMLTemplateResult {\n const extendedContent = html`\n <div class=\"extended-content\" part=\"extended-content\">\n <slot name=\"extended-content\">${this.headline}</slot>\n </div>\n `;\n\n const containerClasses = classMap({\n [this.position]: true,\n [this.size]: true,\n });\n\n const appBarSpacing = this.position !== 'static'\n ? html`<div class=\"spacing\"></div>`\n : nothing;\n\n return html`\n ${appBarSpacing}\n <div class=\"container ${containerClasses}\" part=\"container\">\n <div class=\"content\" part=\"content\">\n <div class=\"icon leading-icon\" part=\"icon leading\">\n <slot name=\"leading-icon\" @slotchange=\"${this.handleLeadingIconSlotChange}\"></slot>\n </div>\n <div class=\"headline\" part=\"headline\">\n <slot>\n <span>${this.headline}</span>\n </slot>\n </div>\n\n <div class=\"icon trailing-icon\" part=\"icon trailing\">\n <slot name=\"trailing-icon\" @slotchange=\"${this.handleTrailingIconSlotChange}\"></slot>\n </div>\n </div>\n <slot name=\"additional-content\"></slot>\n </div>\n ${this.size !== 'small' ? extendedContent : nothing}\n `;\n }\n\n protected override updated(_changedProperties: PropertyValues) {\n super.updated(_changedProperties);\n this.#updateScroll();\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n this.containerSizeObserver = new ResizeObserver(() => this.setContentHeightProperty());\n this.containerSizeObserver.observe(this._container);\n this.setContentHeightProperty();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.scrollContainer = this.scrollContainer || 'window';\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.containerSizeObserver!.disconnect();\n this.containerSizeObserver = null;\n }\n\n readonly #updateScroll = () => {\n const container = this.scrollContainerElement ?? window;\n\n const extendedContentHeight = Math.max(this._extendedContent?.offsetHeight ?? 0, 0);\n\n const scrollTop = UmTopAppBar.getScrollTop(container as any);\n\n this.containerScrolled = scrollTop > extendedContentHeight;\n\n this._headlineElement.style.opacity = scrollTop >= extendedContentHeight ? '1' : '0';\n\n if (extendedContentHeight === 0) {\n return;\n }\n\n const scrollOffset = this._extendedContent.offsetHeight * 0.7;\n\n if (scrollTop > scrollOffset) {\n this._extendedContent.style.opacity = '0';\n return;\n }\n\n this._extendedContent.style.opacity = 1 - scrollTop / scrollOffset + '';\n };\n\n private static getScrollTop(container: HTMLElement & Window): number {\n if (typeof container.scrollY === 'number') {\n return container.scrollY;\n }\n\n if (typeof container.scrollTop === 'number') {\n return container.scrollTop;\n }\n\n return document.body.scrollTop;\n }\n\n private setContentHeightProperty() {\n this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-top-app-bar': UmTopAppBar;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"top-app-bar.js","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { styles } from './top-app-bar.styles.js';\n\n@customElement('u-top-app-bar')\nexport class UmTopAppBar extends LitElement {\n static override styles = [baseStyles, styles];\n\n @state() private _hasLeadingIcon = false;\n @state() private _hasTrailingIcon = false;\n\n @property({ reflect: true })\n position: 'fixed' | 'absolute' | 'static' = 'fixed';\n\n @property({ reflect: true })\n size: 'small' | 'medium' | 'large' = 'small';\n\n @property() headline = '';\n\n @property({ reflect: true })\n get scrollContainer(): 'none' | 'window' | string | undefined {\n return this.attributes.getNamedItem('scrollContainer')?.value;\n }\n\n set scrollContainer(idOrElement: string | HTMLElement | undefined) {\n this.scrollContainerElement?.removeEventListener('scroll', this.#updateScroll);\n\n if (idOrElement === 'none') {\n return;\n }\n\n this.scrollContainerElement = this.getScrollContainer(idOrElement)!;\n this.scrollContainerElement?.addEventListener('scroll', this.#updateScroll);\n }\n\n @state() containerScrolled = false;\n\n @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n private readonly assignedLeadingIcons!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'trailing-icon', flatten: true })\n private readonly assignedTrailingIcons!: HTMLElement[];\n\n @query('.container', true) private readonly _container!: HTMLElement;\n @query('.extended-content') private readonly _extendedContent!: HTMLElement;\n @query('.headline') private readonly _headlineElement!: HTMLElement;\n\n private containerSizeObserver: ResizeObserver | null = null;\n\n private scrollContainerElement: {\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n } | null = null;\n\n private getScrollContainer(idOrElement: string | HTMLElement | undefined):\n | {\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n }\n | undefined {\n if (idOrElement instanceof HTMLElement) {\n return idOrElement;\n }\n\n if (idOrElement === 'window') {\n return window;\n }\n\n return document.getElementById(idOrElement!)!;\n }\n\n #handleLeadingIconSlotChange() {\n this._hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n }\n\n #handleTrailingIconSlotChange() {\n this._hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n }\n\n override render(): HTMLTemplateResult {\n const extendedContent = html`\n <div class=\"extended-content\" part=\"extended-content\">\n <slot name=\"extended-content\">${this.headline}</slot>\n </div>\n `;\n\n const containerClasses = classMap({\n [this.position]: true,\n [this.size]: true,\n scrolled: this.containerScrolled,\n 'has-leading-icon': this._hasLeadingIcon,\n 'has-trailing-icon': this._hasTrailingIcon,\n });\n\n const appBarSpacing = this.position !== 'static'\n ? html`<div class=\"spacing\"></div>`\n : nothing;\n\n return html`\n ${appBarSpacing}\n <div class=\"container ${containerClasses}\" part=\"container\">\n <div class=\"content\" part=\"content\">\n <div class=\"icon leading-icon\" part=\"icon leading\">\n <slot name=\"leading-icon\" @slotchange=\"${this.#handleLeadingIconSlotChange}\"></slot>\n </div>\n <div class=\"headline\" part=\"headline\">\n <slot>\n <span>${this.headline}</span>\n </slot>\n </div>\n\n <div class=\"icon trailing-icon\" part=\"icon trailing\">\n <slot name=\"trailing-icon\" @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>\n </div>\n </div>\n <slot name=\"additional-content\"></slot>\n </div>\n ${this.size !== 'small' ? extendedContent : nothing}\n `;\n }\n\n protected override updated(_changedProperties: PropertyValues) {\n super.updated(_changedProperties);\n this.#updateScroll();\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n this.containerSizeObserver = new ResizeObserver(() => this.#setContentHeightProperty());\n this.containerSizeObserver.observe(this._container);\n this.#setContentHeightProperty();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.scrollContainer = this.scrollContainer || 'window';\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.containerSizeObserver!.disconnect();\n this.containerSizeObserver = null;\n }\n\n readonly #updateScroll = () => {\n const container = this.scrollContainerElement ?? window;\n\n const extendedContentHeight = Math.max(this._extendedContent?.offsetHeight ?? 0, 0);\n\n const scrollTop = UmTopAppBar._getScrollTop(container as any);\n\n this.containerScrolled = scrollTop > extendedContentHeight;\n\n this._headlineElement.style.opacity = scrollTop >= extendedContentHeight ? '1' : '0';\n\n if (extendedContentHeight === 0) {\n return;\n }\n\n const scrollOffset = this._extendedContent.offsetHeight * 0.7;\n\n if (scrollTop > scrollOffset) {\n this._extendedContent.style.opacity = '0';\n return;\n }\n\n this._extendedContent.style.opacity = 1 - scrollTop / scrollOffset + '';\n };\n\n private static _getScrollTop(container: HTMLElement & Window): number {\n if (typeof container.scrollY === 'number') {\n return container.scrollY;\n }\n\n if (typeof container.scrollTop === 'number') {\n return container.scrollTop;\n }\n\n return document.body.scrollTop;\n }\n\n #setContentHeightProperty() {\n this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-top-app-bar': UmTopAppBar;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"top-app-bar.styles.d.ts","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"top-app-bar.styles.d.ts","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiHlB,CAAC"}
|
|
@@ -4,21 +4,8 @@ export const styles = css `
|
|
|
4
4
|
display: block;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
:host(:not([has-leading-icon])) .leading-icon {
|
|
12
|
-
display: none;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
:host(:not([has-trailing-icon])) .trailing-icon {
|
|
16
|
-
display: none;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
slot[name=leading-icon],
|
|
20
|
-
slot[name=trailing-icon] {
|
|
21
|
-
display: inline-flex;
|
|
7
|
+
.leading-icon,
|
|
8
|
+
.trailing-icon {
|
|
22
9
|
align-items: center;
|
|
23
10
|
gap: var(--u-top-app-bar-icons-gap, 8px);
|
|
24
11
|
}
|
|
@@ -33,6 +20,18 @@ export const styles = css `
|
|
|
33
20
|
transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);
|
|
34
21
|
}
|
|
35
22
|
|
|
23
|
+
.scrolled {
|
|
24
|
+
background-color: var(--u-top-app-bar-constrast-bg-color, var(--u-color-surface-container, rgb(243, 237, 247)));
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.has-leading-icon .leading-icon {
|
|
28
|
+
display: inline-flex;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.has-trailing-icon .trailing-icon {
|
|
32
|
+
display: inline-flex;
|
|
33
|
+
}
|
|
34
|
+
|
|
36
35
|
.absolute {
|
|
37
36
|
position: absolute;
|
|
38
37
|
}
|
|
@@ -101,7 +100,7 @@ export const styles = css `
|
|
|
101
100
|
font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400)));
|
|
102
101
|
margin-inline: var(--u-headline-margin, 16px);
|
|
103
102
|
}
|
|
104
|
-
|
|
103
|
+
.has-leading-icon .headline {
|
|
105
104
|
margin-inline-start: 0;
|
|
106
105
|
}
|
|
107
106
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"top-app-bar.styles.js","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"top-app-bar.styles.js","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n display: block;\n }\n\n .leading-icon,\n .trailing-icon {\n align-items: center;\n gap: var(--u-top-app-bar-icons-gap, 8px);\n }\n\n slot[name=leading-icon]::slotted(u-icon-button) {\n color: inherit;\n }\n\n .container {\n background-color: var(--u-top-app-bar-bg-color, var(--u-color-body, var(--u-color-surface, rgb(254, 247, 255))));\n color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n }\n\n .scrolled {\n background-color: var(--u-top-app-bar-constrast-bg-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n }\n\n .has-leading-icon .leading-icon {\n display: inline-flex;\n }\n\n .has-trailing-icon .trailing-icon {\n display: inline-flex;\n }\n\n .absolute {\n position: absolute;\n }\n\n .fixed {\n position: fixed;\n inset-inline: 0;\n inset-block-start: 0;\n inset-inline-start: var(--u-app-bar-offset, 0);\n }\n\n .absolute,\n .fixed {\n z-index: var(--u-fixed-app-bar-z-index, 1010);\n }\n\n .spacing {\n padding-top: var(--_content-height);\n }\n\n .extended-content {\n display: flex;\n align-items: flex-end;\n padding-inline: var(--u-extended-content-inline-padding, 16px);\n }\n\n .medium + .extended-content {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-extended-content-medium-line-height, var(--u-headline-s-line-height, 2rem));\n font-size: var(--u-extended-content-medium-font-size, var(--u-headline-s-font-size, 1.5rem));\n letter-spacing: var(--u-extended-content-medium-letter-spacing, var(--u-headline-s-letter-spacing, 0rem));\n font-weight: var(--u-extended-content-medium-font-weight, var(--u-headline-s-font-weight, var(--u-font-weight-regular, 400)));\n height: var(--u-extended-content-medium-height, 3.5rem);\n padding-bottom: var(--u-extended-content-medium-padding-bottom, 24px);\n }\n\n .large + .extended-content {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-extended-content-large-line-height, var(--u-headline-m-line-height, 2.25rem));\n font-size: var(--u-extended-content-large-font-size, var(--u-headline-m-font-size, 1.75rem));\n letter-spacing: var(--u-extended-content-large-letter-spacing, var(--u-headline-m-letter-spacing, 0rem));\n font-weight: var(--u-extended-content-large-font-weight, var(--u-headline-m-font-weight, var(--u-font-weight-regular, 400)));\n height: var(--u-extended-content-medium-large, 6rem);\n padding-bottom: var(--u-extended-content-large-padding-bottom, 28px);\n }\n\n .content {\n display: flex;\n align-items: center;\n background-color: inherit;\n transition: inherit;\n min-height: var(--u-top-app-bar-min-height, 56px);\n }\n @media (min-width: 840px) {\n .content {\n min-height: var(--u-top-app-bar-extended-min-height, 64px);\n }\n }\n\n .headline {\n overflow: hidden;\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-top-app-bar-headline-line-height, var(--u-title-l-line-height, 1.75rem));\n font-size: var(--u-top-app-bar-headline-font-size, var(--u-title-l-font-size, 1.375rem));\n letter-spacing: var(--u-top-app-bar-headline-letter-spacing, var(--u-title-l-letter-spacing, 0rem));\n font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400)));\n margin-inline: var(--u-headline-margin, 16px);\n }\n .has-leading-icon .headline {\n margin-inline-start: 0;\n }\n\n .leading-icon {\n margin-inline: var(--u-leading-icon-margin, 8px);\n }\n\n .trailing-icon {\n padding-inline: var(--u-trailing-icon-margin, 8px);\n margin-inline-start: auto;\n }\n`;\n"]}
|