@fluid-topics/ft-infinite-scroll 0.3.6 → 0.3.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.
|
@@ -16,24 +16,36 @@ export declare type VisibleItems<T> = {
|
|
|
16
16
|
export declare class VisibleItemsChangeEvent<T> extends CustomEvent<VisibleItems<T>> {
|
|
17
17
|
constructor(indexes: Array<number>, items: Array<T>);
|
|
18
18
|
}
|
|
19
|
+
export declare class ScrolledToTargetEvent extends Event {
|
|
20
|
+
constructor();
|
|
21
|
+
}
|
|
19
22
|
export declare class FtInfiniteScroll<T> extends FtLitElement implements FtInfiniteScrollProperties<T> {
|
|
20
23
|
static styles: import("lit").CSSResult;
|
|
21
24
|
items: Array<T>;
|
|
22
25
|
renderItem: (item: T, index: number) => TemplateResult | string;
|
|
23
26
|
scrollToItem?: T;
|
|
24
27
|
scrollToIndex?: number;
|
|
25
|
-
|
|
28
|
+
internalScroll: boolean;
|
|
26
29
|
visibleItems: Array<number>;
|
|
27
|
-
|
|
30
|
+
internalScrollable?: HTMLDivElement;
|
|
31
|
+
itemsContainer: HTMLDivElement;
|
|
28
32
|
scrolledToTarget: boolean;
|
|
33
|
+
private firstScrollableParent?;
|
|
34
|
+
private alreadyRenderedIndexes;
|
|
35
|
+
private get scrollable();
|
|
29
36
|
protected render(): TemplateResult<1>;
|
|
30
37
|
private renderItemContainer;
|
|
38
|
+
private scrollDebouncer;
|
|
31
39
|
resetScroll(): void;
|
|
40
|
+
private scrollToTarget;
|
|
41
|
+
private getOffset;
|
|
32
42
|
appendItems(...items: Array<T>): void;
|
|
33
43
|
prependItems(...items: Array<T>): void;
|
|
34
44
|
private onVisibilityChange;
|
|
35
45
|
private intersectionObserver;
|
|
36
46
|
connectedCallback(): void;
|
|
47
|
+
private triggerFindScrollableParent;
|
|
48
|
+
private findScrollableParent;
|
|
37
49
|
private onResize;
|
|
38
50
|
private resizeObserver;
|
|
39
51
|
private onMutation;
|
|
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
import { css, html } from "lit";
|
|
8
8
|
import { property, query, state } from "lit/decorators.js";
|
|
9
9
|
import { repeat } from "lit/directives/repeat.js";
|
|
10
|
-
import { FtCssVariableFactory, FtLitElement, isSafari } from "@fluid-topics/ft-wc-utils";
|
|
10
|
+
import { Debouncer, FtCssVariableFactory, FtLitElement, isSafari } from "@fluid-topics/ft-wc-utils";
|
|
11
11
|
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
12
12
|
export const FtInfiniteScrollCssVariables = {
|
|
13
13
|
padding: FtCssVariableFactory.create("--ft-infinite-scroll-padding", "SIZE", "0"),
|
|
@@ -22,20 +22,27 @@ export class VisibleItemsChangeEvent extends CustomEvent {
|
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
-
|
|
25
|
+
export class ScrolledToTargetEvent extends Event {
|
|
26
|
+
constructor() {
|
|
27
|
+
super("scrolled-to-target");
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
const last = (arr) => (arr !== null && arr !== void 0 ? arr : [])[(arr !== null && arr !== void 0 ? arr : []).length - 1];
|
|
26
31
|
export class FtInfiniteScroll extends FtLitElement {
|
|
27
32
|
constructor() {
|
|
28
33
|
super(...arguments);
|
|
29
34
|
this.items = [];
|
|
30
35
|
this.renderItem = () => html ``;
|
|
31
|
-
this.
|
|
36
|
+
this.internalScroll = false;
|
|
32
37
|
this.visibleItems = [];
|
|
33
38
|
this.scrolledToTarget = false;
|
|
39
|
+
this.alreadyRenderedIndexes = new Set();
|
|
40
|
+
this.scrollDebouncer = new Debouncer(5);
|
|
34
41
|
this.onVisibilityChange = (items) => {
|
|
35
|
-
const newItems = items.filter(item => item.
|
|
42
|
+
const newItems = items.filter(item => item.intersectionRect.height > 1)
|
|
36
43
|
.map(item => +item.target.attributes.getNamedItem("data-item-index").value)
|
|
37
44
|
.filter(index => !this.visibleItems.includes(index));
|
|
38
|
-
const itemsToRemove = items.filter(item =>
|
|
45
|
+
const itemsToRemove = items.filter(item => item.intersectionRect.height <= 1)
|
|
39
46
|
.map(item => +item.target.attributes.getNamedItem("data-item-index").value)
|
|
40
47
|
.filter(index => this.visibleItems.includes(index));
|
|
41
48
|
const stillVisible = [...this.visibleItems].filter(index => !itemsToRemove.includes(index));
|
|
@@ -43,37 +50,49 @@ export class FtInfiniteScroll extends FtLitElement {
|
|
|
43
50
|
};
|
|
44
51
|
this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange);
|
|
45
52
|
this.onResize = (resizables) => {
|
|
53
|
+
this.triggerFindScrollableParent();
|
|
46
54
|
let diff = 0;
|
|
55
|
+
resizables = resizables.sort((a, b) => a.contentRect.top - b.contentRect.top);
|
|
47
56
|
for (const resizable of resizables) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
57
|
+
const index = +resizable.target.parentElement.getAttribute("data-item-index");
|
|
58
|
+
const oldHeight = resizable.target.parentElement.clientHeight;
|
|
59
|
+
const newHeight = resizable.contentRect.height;
|
|
60
|
+
if (this.alreadyRenderedIndexes.has(index)) {
|
|
51
61
|
resizable.target.parentElement.style.height = newHeight + "px";
|
|
52
|
-
diff += resizable.target.parentElement
|
|
62
|
+
diff += this.scrollable && this.getOffset(resizable.target.parentElement) < this.scrollable.scrollTop + diff ? newHeight - oldHeight : 0;
|
|
53
63
|
}
|
|
54
64
|
}
|
|
55
|
-
if (isSafari) {
|
|
56
|
-
this.scrollable.scrollTop
|
|
65
|
+
if (this.scrollable && isSafari) {
|
|
66
|
+
this.scrollable.scrollTop += diff;
|
|
57
67
|
}
|
|
58
68
|
};
|
|
59
69
|
this.resizeObserver = new ResizeObserver(this.onResize);
|
|
60
70
|
this.onMutation = () => {
|
|
61
|
-
[...this.
|
|
71
|
+
[...this.itemsContainer.children].forEach((item) => {
|
|
62
72
|
this.intersectionObserver.observe(item);
|
|
63
73
|
this.resizeObserver.observe(item.children.item(0));
|
|
64
74
|
});
|
|
65
75
|
};
|
|
66
76
|
this.mutationObserver = new MutationObserver(this.onMutation);
|
|
67
77
|
}
|
|
78
|
+
get scrollable() {
|
|
79
|
+
return this.internalScroll ? this.internalScrollable : this.firstScrollableParent;
|
|
80
|
+
}
|
|
68
81
|
render() {
|
|
69
82
|
return html `
|
|
70
|
-
<div class="scrollable"
|
|
83
|
+
<div class="items-container ${this.internalScroll ? "scrollable" : ""}"
|
|
84
|
+
tabindex="-1"
|
|
85
|
+
@find-scrollable-parent=${this.findScrollableParent}>
|
|
71
86
|
${repeat(this.items, (item, index) => this.renderItemContainer(item, index))}
|
|
72
87
|
</div>
|
|
73
88
|
`;
|
|
74
89
|
}
|
|
75
90
|
renderItemContainer(item, index) {
|
|
76
|
-
const isVisible = this.scrolledToTarget &&
|
|
91
|
+
const isVisible = this.scrolledToTarget && this.visibleItems.includes(index);
|
|
92
|
+
const isRendered = this.alreadyRenderedIndexes.has(index) || (this.scrolledToTarget && (index >= this.visibleItems[0] - 1 && index <= last(this.visibleItems) + 1));
|
|
93
|
+
if (isRendered) {
|
|
94
|
+
this.alreadyRenderedIndexes.add(index);
|
|
95
|
+
}
|
|
77
96
|
const renderItem = () => {
|
|
78
97
|
const rendered = this.renderItem(item, index);
|
|
79
98
|
if (typeof rendered === "string") {
|
|
@@ -85,22 +104,52 @@ export class FtInfiniteScroll extends FtLitElement {
|
|
|
85
104
|
<div id="item-${index}"
|
|
86
105
|
class="item-container"
|
|
87
106
|
data-item-index="${index}">
|
|
88
|
-
<div class="resizable ${isVisible ? "visible" : ""}">
|
|
89
|
-
${
|
|
107
|
+
<div class="resizable ${isVisible ? "visible" : ""} ${isRendered ? "rendered" : ""}">
|
|
108
|
+
${isRendered ? renderItem() : null}
|
|
90
109
|
</div>
|
|
91
110
|
</div>
|
|
92
111
|
`;
|
|
93
112
|
}
|
|
94
113
|
resetScroll() {
|
|
95
|
-
var _a;
|
|
96
114
|
this.intersectionObserver.disconnect();
|
|
97
115
|
this.resizeObserver.disconnect();
|
|
98
116
|
this.visibleItems = [];
|
|
99
|
-
this.internalScrollToIndex = (_a = this.scrollToIndex) !== null && _a !== void 0 ? _a : (this.scrollToItem ? this.items.indexOf(this.scrollToItem) : 0);
|
|
100
|
-
if (this.internalScrollToIndex < 0 || this.internalScrollToIndex >= this.items.length) {
|
|
101
|
-
this.internalScrollToIndex = 0;
|
|
102
|
-
}
|
|
103
117
|
this.scrolledToTarget = false;
|
|
118
|
+
this.scrollDebouncer.run(() => {
|
|
119
|
+
var _a, _b;
|
|
120
|
+
let internalScrollToIndex = (_a = this.scrollToIndex) !== null && _a !== void 0 ? _a : (this.scrollToItem ? this.items.indexOf(this.scrollToItem) : -1);
|
|
121
|
+
if (internalScrollToIndex >= this.items.length) {
|
|
122
|
+
internalScrollToIndex = -1;
|
|
123
|
+
}
|
|
124
|
+
let target = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`#item-${internalScrollToIndex}`);
|
|
125
|
+
this.scrollToTarget(target);
|
|
126
|
+
this.onMutation();
|
|
127
|
+
setTimeout(() => {
|
|
128
|
+
this.scrolledToTarget = true;
|
|
129
|
+
}, 10);
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
scrollToTarget(target) {
|
|
133
|
+
var _a;
|
|
134
|
+
if (target) {
|
|
135
|
+
let index = +((_a = target.getAttribute("data-item-index")) !== null && _a !== void 0 ? _a : "0");
|
|
136
|
+
if (this.scrollable) {
|
|
137
|
+
this.scrollable.scrollTop = index > 0 ? this.getOffset(target) + 1 : 0;
|
|
138
|
+
}
|
|
139
|
+
else {
|
|
140
|
+
target.scrollIntoView({ block: "start" });
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
getOffset(target) {
|
|
145
|
+
var _a;
|
|
146
|
+
let offset = 0;
|
|
147
|
+
let el = target;
|
|
148
|
+
while (el && el.offsetParent !== this.scrollable.offsetParent) {
|
|
149
|
+
offset += el.offsetTop;
|
|
150
|
+
el = el.offsetParent;
|
|
151
|
+
}
|
|
152
|
+
return offset + ((_a = el === null || el === void 0 ? void 0 : el.offsetTop) !== null && _a !== void 0 ? _a : 0) - this.scrollable.offsetTop;
|
|
104
153
|
}
|
|
105
154
|
appendItems(...items) {
|
|
106
155
|
this.items = [...this.items, ...items];
|
|
@@ -111,12 +160,29 @@ export class FtInfiniteScroll extends FtLitElement {
|
|
|
111
160
|
connectedCallback() {
|
|
112
161
|
super.connectedCallback();
|
|
113
162
|
setTimeout(() => {
|
|
163
|
+
this.triggerFindScrollableParent();
|
|
114
164
|
this.intersectionObserver.disconnect();
|
|
115
|
-
this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange, {
|
|
165
|
+
this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange, {
|
|
166
|
+
rootMargin: "-2px",
|
|
167
|
+
threshold: [0, 0.01, 0.1]
|
|
168
|
+
});
|
|
116
169
|
this.mutationObserver.disconnect();
|
|
117
|
-
this.mutationObserver.observe(this.
|
|
170
|
+
this.mutationObserver.observe(this.itemsContainer, { childList: true });
|
|
118
171
|
}, 0);
|
|
119
172
|
}
|
|
173
|
+
triggerFindScrollableParent() {
|
|
174
|
+
this.itemsContainer.dispatchEvent(new Event("find-scrollable-parent", { composed: true }));
|
|
175
|
+
}
|
|
176
|
+
findScrollableParent(e) {
|
|
177
|
+
e.stopPropagation();
|
|
178
|
+
for (let target of e.composedPath()) {
|
|
179
|
+
const element = target;
|
|
180
|
+
if (element.clientHeight && element.clientHeight < element.scrollHeight && ["auto", "scroll"].includes(getComputedStyle(element).overflowY)) {
|
|
181
|
+
this.firstScrollableParent = element;
|
|
182
|
+
break;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}
|
|
120
186
|
disconnectedCallback() {
|
|
121
187
|
super.disconnectedCallback();
|
|
122
188
|
this.intersectionObserver.disconnect();
|
|
@@ -129,53 +195,56 @@ export class FtInfiniteScroll extends FtLitElement {
|
|
|
129
195
|
}
|
|
130
196
|
update(props) {
|
|
131
197
|
super.update(props);
|
|
198
|
+
if (props.has("items")) {
|
|
199
|
+
this.alreadyRenderedIndexes = new Set();
|
|
200
|
+
}
|
|
132
201
|
if (props.has("scrollToItem") || props.has("scrollToIndex")) {
|
|
133
202
|
this.resetScroll();
|
|
134
203
|
}
|
|
135
204
|
}
|
|
136
205
|
updated(props) {
|
|
137
206
|
super.updated(props);
|
|
138
|
-
if (!this.scrolledToTarget) {
|
|
139
|
-
setTimeout(() => {
|
|
140
|
-
var _a;
|
|
141
|
-
if (this.internalScrollToIndex === 0) {
|
|
142
|
-
this.scrollable.scrollTop = 0;
|
|
143
|
-
}
|
|
144
|
-
else {
|
|
145
|
-
let target = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#item-${this.internalScrollToIndex}`);
|
|
146
|
-
this.scrollable.scrollTop = target.offsetTop;
|
|
147
|
-
}
|
|
148
|
-
this.onMutation();
|
|
149
|
-
setTimeout(() => {
|
|
150
|
-
this.scrolledToTarget = true;
|
|
151
|
-
}, 50);
|
|
152
|
-
}, 50);
|
|
153
|
-
}
|
|
154
207
|
if (props.has("visibleItems") || props.has("items")) {
|
|
155
208
|
this.dispatchEvent(new VisibleItemsChangeEvent(this.visibleItems, this.visibleItems.map(index => this.items[index])));
|
|
156
209
|
}
|
|
210
|
+
if (props.has("scrolledToTarget") && this.scrolledToTarget) {
|
|
211
|
+
this.dispatchEvent(new ScrolledToTargetEvent());
|
|
212
|
+
}
|
|
157
213
|
}
|
|
158
214
|
}
|
|
159
215
|
// language=CSS
|
|
160
216
|
FtInfiniteScroll.styles = css `
|
|
161
|
-
.
|
|
162
|
-
height: 100%;
|
|
163
|
-
overflow-y: auto;
|
|
217
|
+
.items-container {
|
|
164
218
|
position: relative;
|
|
165
219
|
padding: ${FtInfiniteScrollCssVariables.padding};
|
|
166
220
|
outline: none;
|
|
167
221
|
}
|
|
168
222
|
|
|
169
|
-
.
|
|
223
|
+
.scrollable {
|
|
170
224
|
height: 100%;
|
|
225
|
+
overflow-y: auto;
|
|
171
226
|
}
|
|
172
227
|
|
|
173
|
-
.
|
|
174
|
-
|
|
228
|
+
.item-container {
|
|
229
|
+
height: 100vh;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.item-container + .item-container {
|
|
233
|
+
/*
|
|
234
|
+
We add a gap between items to be sure to hide the content above the targeted item
|
|
235
|
+
When a div is visible (even by a fraction of a pixel) if its height changes
|
|
236
|
+
the browser will try to keep the scroll stable in relation to the first visible element
|
|
237
|
+
By adding this gap we ensure that the previous item will be fully hidden and event if its size changes, it will not impact the scroll offset
|
|
238
|
+
*/
|
|
239
|
+
margin-top: 4px;
|
|
175
240
|
}
|
|
176
241
|
|
|
177
|
-
.
|
|
178
|
-
|
|
242
|
+
.scrollable .item-container {
|
|
243
|
+
height: 100%;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.resizable:not(.rendered) {
|
|
247
|
+
width: 0;
|
|
179
248
|
}
|
|
180
249
|
`;
|
|
181
250
|
__decorate([
|
|
@@ -191,11 +260,23 @@ __decorate([
|
|
|
191
260
|
property({ type: Number })
|
|
192
261
|
], FtInfiniteScroll.prototype, "scrollToIndex", void 0);
|
|
193
262
|
__decorate([
|
|
194
|
-
|
|
263
|
+
property({ type: Boolean })
|
|
264
|
+
], FtInfiniteScroll.prototype, "internalScroll", void 0);
|
|
265
|
+
__decorate([
|
|
266
|
+
state({
|
|
267
|
+
hasChanged(value, oldValue) {
|
|
268
|
+
return (value != null && oldValue == null)
|
|
269
|
+
|| value.length !== oldValue.length
|
|
270
|
+
|| value[0] !== oldValue[0];
|
|
271
|
+
}
|
|
272
|
+
})
|
|
195
273
|
], FtInfiniteScroll.prototype, "visibleItems", void 0);
|
|
196
274
|
__decorate([
|
|
197
275
|
query(".scrollable")
|
|
198
|
-
], FtInfiniteScroll.prototype, "
|
|
276
|
+
], FtInfiniteScroll.prototype, "internalScrollable", void 0);
|
|
277
|
+
__decorate([
|
|
278
|
+
query(".items-container")
|
|
279
|
+
], FtInfiniteScroll.prototype, "itemsContainer", void 0);
|
|
199
280
|
__decorate([
|
|
200
281
|
state()
|
|
201
282
|
], FtInfiniteScroll.prototype, "scrolledToTarget", void 0);
|
|
@@ -1,33 +1,48 @@
|
|
|
1
|
-
!function(t,i,s,
|
|
2
|
-
<div class="scrollable"
|
|
3
|
-
|
|
1
|
+
!function(t,e,i,s,l,n){var r=function(t,e,i,s){for(var l,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,o=t.length-1;o>=0;o--)(l=t[o])&&(r=(n<3?l(r):n>3?l(e,i,r):l(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};const o={padding:e.FtCssVariableFactory.create("--ft-infinite-scroll-padding","SIZE","0")};class h extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class a extends Event{constructor(){super("scrolled-to-target")}}class d extends e.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>i.html``,this.internalScroll=!1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e.Debouncer(5),this.onVisibilityChange=t=>{const e=t.filter((t=>t.intersectionRect.height>1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>!this.visibleItems.includes(t))),i=t.filter((t=>t.intersectionRect.height<=1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>this.visibleItems.includes(t))),s=[...this.visibleItems].filter((t=>!i.includes(t)));this.visibleItems=[...e,...s].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{this.triggerFindScrollableParent();let i=0;t=t.sort(((t,e)=>t.contentRect.top-e.contentRect.top));for(const e of t){const t=+e.target.parentElement.getAttribute("data-item-index"),s=e.target.parentElement.clientHeight,l=e.contentRect.height;this.alreadyRenderedIndexes.has(t)&&(e.target.parentElement.style.height=l+"px",i+=this.scrollable&&this.getOffset(e.target.parentElement)<this.scrollable.scrollTop+i?l-s:0)}this.scrollable&&e.isSafari&&(this.scrollable.scrollTop+=i)},this.resizeObserver=new ResizeObserver(this.onResize),this.onMutation=()=>{[...this.itemsContainer.children].forEach((t=>{this.intersectionObserver.observe(t),this.resizeObserver.observe(t.children.item(0))}))},this.mutationObserver=new MutationObserver(this.onMutation)}get scrollable(){return this.internalScroll?this.internalScrollable:this.firstScrollableParent}render(){return i.html`
|
|
2
|
+
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
3
|
+
tabindex="-1"
|
|
4
|
+
@find-scrollable-parent=${this.findScrollableParent}>
|
|
5
|
+
${l.repeat(this.items,((t,e)=>this.renderItemContainer(t,e)))}
|
|
4
6
|
</div>
|
|
5
|
-
`}renderItemContainer(t,
|
|
6
|
-
<div id="item-${
|
|
7
|
+
`}renderItemContainer(t,e){const s=this.scrolledToTarget&&this.visibleItems.includes(e),l=this.alreadyRenderedIndexes.has(e)||this.scrolledToTarget&&e>=this.visibleItems[0]-1&&e<=(null!=(r=this.visibleItems)?r:[])[(null!=r?r:[]).length-1]+1;var r;l&&this.alreadyRenderedIndexes.add(e);return i.html`
|
|
8
|
+
<div id="item-${e}"
|
|
7
9
|
class="item-container"
|
|
8
|
-
data-item-index="${
|
|
9
|
-
<div class="resizable ${
|
|
10
|
-
${
|
|
10
|
+
data-item-index="${e}">
|
|
11
|
+
<div class="resizable ${s?"visible":""} ${l?"rendered":""}">
|
|
12
|
+
${l?(()=>{const s=this.renderItem(t,e);return"string"==typeof s?i.html`${n.unsafeHTML(s)}`:s})():null}
|
|
11
13
|
</div>
|
|
12
14
|
</div>
|
|
13
|
-
`}resetScroll(){
|
|
15
|
+
`}resetScroll(){this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t,e;let i=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;i>=this.items.length&&(i=-1);let s=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${i}`);this.scrollToTarget(s),this.onMutation(),setTimeout((()=>{this.scrolledToTarget=!0}),10)}))}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable?this.scrollable.scrollTop=i>0?this.getOffset(t)+1:0:t.scrollIntoView({block:"start"})}}getOffset(t){var e;let i=0,s=t;for(;s&&s.offsetParent!==this.scrollable.offsetParent;)i+=s.offsetTop,s=s.offsetParent;return i+(null!==(e=null==s?void 0:s.offsetTop)&&void 0!==e?e:0)-this.scrollable.offsetTop}appendItems(...t){this.items=[...this.items,...t]}prependItems(...t){this.items=[...t,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{rootMargin:"-2px",threshold:[0,.01,.1]}),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}triggerFindScrollableParent(){this.itemsContainer.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){t.stopPropagation();for(let e of t.composedPath()){const t=e;if(t.clientHeight&&t.clientHeight<t.scrollHeight&&["auto","scroll"].includes(getComputedStyle(t).overflowY)){this.firstScrollableParent=t;break}}}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.resetScroll()}update(t){super.update(t),t.has("items")&&(this.alreadyRenderedIndexes=new Set),(t.has("scrollToItem")||t.has("scrollToIndex"))&&this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new h(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&this.dispatchEvent(new a)}}d.styles=i.css`
|
|
16
|
+
.items-container {
|
|
17
|
+
position: relative;
|
|
18
|
+
padding: ${o.padding};
|
|
19
|
+
outline: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
14
22
|
.scrollable {
|
|
15
23
|
height: 100%;
|
|
16
24
|
overflow-y: auto;
|
|
17
|
-
position: relative;
|
|
18
|
-
padding: ${r.padding};
|
|
19
|
-
outline: none;
|
|
20
25
|
}
|
|
21
26
|
|
|
22
27
|
.item-container {
|
|
23
|
-
height:
|
|
28
|
+
height: 100vh;
|
|
24
29
|
}
|
|
25
30
|
|
|
26
|
-
.
|
|
27
|
-
|
|
31
|
+
.item-container + .item-container {
|
|
32
|
+
/*
|
|
33
|
+
We add a gap between items to be sure to hide the content above the targeted item
|
|
34
|
+
When a div is visible (even by a fraction of a pixel) if its height changes
|
|
35
|
+
the browser will try to keep the scroll stable in relation to the first visible element
|
|
36
|
+
By adding this gap we ensure that the previous item will be fully hidden and event if its size changes, it will not impact the scroll offset
|
|
37
|
+
*/
|
|
38
|
+
margin-top: 4px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.scrollable .item-container {
|
|
42
|
+
height: 100%;
|
|
28
43
|
}
|
|
29
44
|
|
|
30
|
-
.resizable:not(.
|
|
31
|
-
|
|
45
|
+
.resizable:not(.rendered) {
|
|
46
|
+
width: 0;
|
|
32
47
|
}
|
|
33
|
-
`,
|
|
48
|
+
`,r([s.property({type:Array})],d.prototype,"items",void 0),r([s.property({attribute:!1})],d.prototype,"renderItem",void 0),r([s.property({type:Object})],d.prototype,"scrollToItem",void 0),r([s.property({type:Number})],d.prototype,"scrollToIndex",void 0),r([s.property({type:Boolean})],d.prototype,"internalScroll",void 0),r([s.state({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],d.prototype,"visibleItems",void 0),r([s.query(".scrollable")],d.prototype,"internalScrollable",void 0),r([s.query(".items-container")],d.prototype,"itemsContainer",void 0),r([s.state()],d.prototype,"scrolledToTarget",void 0),e.customElement("ft-infinite-scroll")(d),t.FtInfiniteScroll=d,t.FtInfiniteScrollCssVariables=o,t.ScrolledToTargetEvent=a,t.VisibleItemsChangeEvent=h,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litUnsafeHTML);
|
|
@@ -14,17 +14,17 @@
|
|
|
14
14
|
*
|
|
15
15
|
* @see https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry
|
|
16
16
|
*/
|
|
17
|
-
if(!ShadowRoot.prototype.createElement){const t=window.HTMLElement,
|
|
17
|
+
if(!ShadowRoot.prototype.createElement){const t=window.HTMLElement,e=window.customElements.define,i=window.customElements.get,s=window.customElements,n=new WeakMap,o=new WeakMap,r=new WeakMap,l=new WeakMap;let a;window.CustomElementRegistry=class{constructor(){this._definitionsByTag=new Map,this._definitionsByClass=new Map,this._whenDefinedPromises=new Map,this._awaitingUpgrade=new Map}define(t,n){if(t=t.toLowerCase(),void 0!==this._getDefinition(t))throw new DOMException(`Failed to execute 'define' on 'CustomElementRegistry': the name "${t}" has already been used with this registry`);if(void 0!==this._definitionsByClass.get(n))throw new DOMException("Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry");const l=n.prototype.attributeChangedCallback,a=new Set(n.observedAttributes||[]);u(n,a,l);const h={elementClass:n,connectedCallback:n.prototype.connectedCallback,disconnectedCallback:n.prototype.disconnectedCallback,adoptedCallback:n.prototype.adoptedCallback,attributeChangedCallback:l,formAssociated:n.formAssociated,formAssociatedCallback:n.prototype.formAssociatedCallback,formDisabledCallback:n.prototype.formDisabledCallback,formResetCallback:n.prototype.formResetCallback,formStateRestoreCallback:n.prototype.formStateRestoreCallback,observedAttributes:a};this._definitionsByTag.set(t,h),this._definitionsByClass.set(n,h);let c=i.call(s,t);c||(c=d(t),e.call(s,t,c)),this===window.customElements&&(r.set(n,h),h.standInClass=c);const p=this._awaitingUpgrade.get(t);if(p){this._awaitingUpgrade.delete(t);for(const t of p)o.delete(t),f(t,h,!0)}const v=this._whenDefinedPromises.get(t);return void 0!==v&&(v.resolve(n),this._whenDefinedPromises.delete(t)),n}upgrade(){b.push(this),s.upgrade.apply(s,arguments),b.pop()}get(t){return this._definitionsByTag.get(t)?.elementClass}_getDefinition(t){return this._definitionsByTag.get(t)}whenDefined(t){const e=this._getDefinition(t);if(void 0!==e)return Promise.resolve(e.elementClass);let i=this._whenDefinedPromises.get(t);return void 0===i&&(i={},i.promise=new Promise((t=>i.resolve=t)),this._whenDefinedPromises.set(t,i)),i.promise}_upgradeWhenDefined(t,e,i){let s=this._awaitingUpgrade.get(e);s||this._awaitingUpgrade.set(e,s=new Set),i?s.add(t):s.delete(t)}},window.HTMLElement=function(){let e=a;if(e)return a=void 0,e;const i=r.get(this.constructor);if(!i)throw new TypeError("Illegal constructor (custom element class must be registered with global customElements registry to be newable)");return e=Reflect.construct(t,[],i.standInClass),Object.setPrototypeOf(e,this.constructor.prototype),n.set(e,i),e},window.HTMLElement.prototype=t.prototype;const h=t=>t===document||t instanceof ShadowRoot,c=t=>{let e=t.getRootNode();if(!h(e)){const t=b[b.length-1];if(t instanceof CustomElementRegistry)return t;e=t.getRootNode(),h(e)||(e=l.get(e)?.getRootNode()||document)}return e.customElements},d=e=>class{static get formAssociated(){return!0}constructor(){const i=Reflect.construct(t,[],this.constructor);Object.setPrototypeOf(i,HTMLElement.prototype);const s=c(i)||window.customElements,n=s._getDefinition(e);return n?f(i,n):o.set(i,s),i}connectedCallback(){const t=n.get(this);t?t.connectedCallback&&t.connectedCallback.apply(this,arguments):o.get(this)._upgradeWhenDefined(this,e,!0)}disconnectedCallback(){const t=n.get(this);t?t.disconnectedCallback&&t.disconnectedCallback.apply(this,arguments):o.get(this)._upgradeWhenDefined(this,e,!1)}adoptedCallback(){n.get(this)?.adoptedCallback?.apply(this,arguments)}formAssociatedCallback(){const t=n.get(this);t&&t.formAssociated&&t?.formAssociatedCallback?.apply(this,arguments)}formDisabledCallback(){const t=n.get(this);t?.formAssociated&&t?.formDisabledCallback?.apply(this,arguments)}formResetCallback(){const t=n.get(this);t?.formAssociated&&t?.formResetCallback?.apply(this,arguments)}formStateRestoreCallback(){const t=n.get(this);t?.formAssociated&&t?.formStateRestoreCallback?.apply(this,arguments)}},u=(t,e,i)=>{if(0===e.size||void 0===i)return;const s=t.prototype.setAttribute;s&&(t.prototype.setAttribute=function(t,n){const o=t.toLowerCase();if(e.has(o)){const t=this.getAttribute(o);s.call(this,o,n),i.call(this,o,t,n)}else s.call(this,o,n)});const n=t.prototype.removeAttribute;n&&(t.prototype.removeAttribute=function(t){const s=t.toLowerCase();if(e.has(s)){const t=this.getAttribute(s);n.call(this,s),i.call(this,s,t,null)}else n.call(this,s)})},p=e=>{const i=Object.getPrototypeOf(e);if(i!==window.HTMLElement)return i===t||"HTMLElement"===i?.prototype?.constructor?.name?Object.setPrototypeOf(e,window.HTMLElement):p(i)},f=(t,e,i=!1)=>{Object.setPrototypeOf(t,e.elementClass.prototype),n.set(t,e),a=t;try{new e.elementClass}catch(t){p(e.elementClass),new e.elementClass}e.observedAttributes.forEach((i=>{t.hasAttribute(i)&&e.attributeChangedCallback.call(t,i,null,t.getAttribute(i))})),i&&e.connectedCallback&&t.isConnected&&e.connectedCallback.call(t)},v=Element.prototype.attachShadow;Element.prototype.attachShadow=function(t){const e=v.apply(this,arguments);return t.customElements&&(e.customElements=t.customElements),e};let b=[document];const m=(t,e,i)=>{const s=(i?Object.getPrototypeOf(i):t.prototype)[e];t.prototype[e]=function(){b.push(this);const t=s.apply(i||this,arguments);return void 0!==t&&l.set(t,this),b.pop(),t}};m(ShadowRoot,"createElement",document),m(ShadowRoot,"importNode",document),m(Element,"insertAdjacentHTML");const x=(t,e)=>{const i=Object.getOwnPropertyDescriptor(t.prototype,e);Object.defineProperty(t.prototype,e,{...i,set(t){b.push(this),i.set.call(this,t),b.pop()}})};if(x(Element,"innerHTML"),x(ShadowRoot,"innerHTML"),Object.defineProperty(window,"customElements",{value:new CustomElementRegistry,configurable:!0,writable:!0}),window.ElementInternals&&window.ElementInternals.prototype.setFormValue){const t=new WeakMap,e=HTMLElement.prototype.attachInternals,i=["setFormValue","setValidity","checkValidity","reportValidity"];HTMLElement.prototype.attachInternals=function(...i){const s=e.call(this,...i);return t.set(s,this),s},i.forEach((e=>{const i=window.ElementInternals.prototype,s=i[e];i[e]=function(...e){const i=t.get(this);if(!0!==n.get(i).formAssociated)throw new DOMException(`Failed to execute ${s} on 'ElementInternals': The target element is not a form-associated custom element.`);s?.call(this,...e)}}));class s extends Array{constructor(t){super(...t),this._elements=t}get value(){return this._elements.find((t=>!0===t.checked))?.value||""}}class o{constructor(t){const e=new Map;t.forEach(((t,i)=>{const s=t.getAttribute("name"),n=e.get(s)||[];this[+i]=t,n.push(t),e.set(s,n)})),this.length=t.length,e.forEach(((t,e)=>{t&&(1===t.length?this[e]=t[0]:this[e]=new s(t))}))}namedItem(t){return this[t]}}const r=Object.getOwnPropertyDescriptor(HTMLFormElement.prototype,"elements");Object.defineProperty(HTMLFormElement.prototype,"elements",{get:function(){const t=r.get.call(this,[]),e=[];for(const i of t){const t=n.get(i);t&&!0!==t.formAssociated||e.push(i)}return new o(e)}})}}try{window.customElements.define("custom-element",null)}catch(Rt){const t=window.customElements.define;window.customElements.define=(e,i,s)=>{try{t.bind(window.customElements)(e,i,s)}catch(t){console.warn(e,i,s,t)}}}class e{constructor(t=0){this.timeout=t,this.callbacks=[]}run(t,e){this.callbacks=[t],this.debounce(e)}queue(t,e){this.callbacks.push(t),this.debounce(e)}cancel(){null!=this._debounce&&window.clearTimeout(this._debounce)}debounce(t){this.cancel(),this._debounce=window.setTimeout((()=>this.runCallbacks()),null!=t?t:this.timeout)}runCallbacks(){for(let t of this.callbacks)t();this.callbacks=[]}}
|
|
18
18
|
/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/const i=(t,
|
|
22
|
+
*/const i=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(i){i.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(i){i.createProperty(e.key,t)}};function s(t){return(e,s)=>void 0!==s?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,s):i(t,e)
|
|
23
23
|
/**
|
|
24
24
|
* @license
|
|
25
25
|
* Copyright 2017 Google LLC
|
|
26
26
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
27
|
-
*/}function
|
|
27
|
+
*/}function n(t){return s({...t,state:!0})}
|
|
28
28
|
/**
|
|
29
29
|
* @license
|
|
30
30
|
* Copyright 2017 Google LLC
|
|
@@ -32,44 +32,49 @@ if(!ShadowRoot.prototype.createElement){const t=window.HTMLElement,i=window.cust
|
|
|
32
32
|
*/
|
|
33
33
|
/**
|
|
34
34
|
* @license
|
|
35
|
-
* Copyright
|
|
35
|
+
* Copyright 2017 Google LLC
|
|
36
36
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
37
37
|
*/
|
|
38
|
-
var n;null
|
|
38
|
+
function o(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var n;if(void 0===s){const s=null!==(n=i.originalKey)&&void 0!==n?n:i.key,o=null!=e?{kind:"method",placement:"prototype",key:s,descriptor:e(i.key)}:{...i,key:s};return null!=t&&(o.finisher=function(e){t(e,s)}),o}{const n=i.constructor;void 0!==e&&Object.defineProperty(i,s,e(s)),null==t||t(n,s)}})({descriptor:i=>{const s={get(){var e,i;return null!==(i=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t))&&void 0!==i?i:null},enumerable:!0,configurable:!0};if(e){const e="symbol"==typeof i?Symbol():"__"+i;s.get=function(){var i,s;return void 0===this[e]&&(this[e]=null!==(s=null===(i=this.renderRoot)||void 0===i?void 0:i.querySelector(t))&&void 0!==s?s:null),this[e]}}return s}})}
|
|
39
|
+
/**
|
|
40
|
+
* @license
|
|
41
|
+
* Copyright 2021 Google LLC
|
|
42
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
43
|
+
*/var r;null===(r=window.HTMLSlotElement)||void 0===r||r.prototype.assignedElements;
|
|
39
44
|
/**
|
|
40
45
|
* @license
|
|
41
46
|
* Copyright 2019 Google LLC
|
|
42
47
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
43
48
|
*/
|
|
44
|
-
const
|
|
49
|
+
const l=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,a=Symbol(),h=new WeakMap;class c{constructor(t,e,i){if(this._$cssResult$=!0,i!==a)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(l&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=h.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&h.set(e,t))}return t}toString(){return this.cssText}}const d=t=>new c("string"==typeof t?t:t+"",void 0,a),u=(t,...e)=>{const i=1===t.length?t[0]:e.reduce(((e,i,s)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[s+1]),t[0]);return new c(i,t,a)},p=(t,e)=>{l?t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((e=>{const i=document.createElement("style"),s=window.litNonce;void 0!==s&&i.setAttribute("nonce",s),i.textContent=e.cssText,t.appendChild(i)}))},f=l?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return d(e)})(t):t
|
|
45
50
|
/**
|
|
46
51
|
* @license
|
|
47
52
|
* Copyright 2017 Google LLC
|
|
48
53
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
49
|
-
*/;var
|
|
54
|
+
*/;var v;const b=window.trustedTypes,m=b?b.emptyScript:"",x=window.reactiveElementPolyfillSupport,g={toAttribute(t,e){switch(e){case Boolean:t=t?m:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},w=(t,e)=>e!==t&&(e==e||t==t),y={attribute:!0,type:String,converter:g,reflect:!1,hasChanged:w};class O extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(t){var e;null!==(e=this.h)&&void 0!==e||(this.h=[]),this.h.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,i)=>{const s=this._$Ep(i,e);void 0!==s&&(this._$Ev.set(s,i),t.push(s))})),t}static createProperty(t,e=y){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,s=this.getPropertyDescriptor(t,i,e);void 0!==s&&Object.defineProperty(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(s){const n=this[t];this[e]=s,this.requestUpdate(t,n,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||y}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of e)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(f(t))}else void 0!==t&&e.push(f(t));return e}static _$Ep(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,i;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(i=t.hostConnected)||void 0===i||i.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return p(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$EO(t,e,i=y){var s,n;const o=this.constructor._$Ep(t,i);if(void 0!==o&&!0===i.reflect){const r=(null!==(n=null===(s=i.converter)||void 0===s?void 0:s.toAttribute)&&void 0!==n?n:g.toAttribute)(e,i.type);this._$El=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$El=null}}_$AK(t,e){var i,s;const n=this.constructor,o=n._$Ev.get(t);if(void 0!==o&&this._$El!==o){const t=n.getPropertyOptions(o),r=t.converter,l=null!==(s=null!==(i=null==r?void 0:r.fromAttribute)&&void 0!==i?i:"function"==typeof r?r:null)&&void 0!==s?s:g.fromAttribute;this._$El=o,this[o]=l(e,t.type),this._$El=null}}requestUpdate(t,e,i){let s=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||w)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===i.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,i))):s=!1),!this.isUpdatePending&&s&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,e)=>this[e]=t)),this._$Ei=void 0);let e=!1;const i=this._$AL;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(i)):this._$Ek()}catch(t){throw e=!1,this._$Ek(),t}e&&this._$AE(i)}willUpdate(t){}_$AE(t){var e;null===(e=this._$ES)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$EO(e,this[e],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}
|
|
50
55
|
/**
|
|
51
56
|
* @license
|
|
52
57
|
* Copyright 2017 Google LLC
|
|
53
58
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
54
59
|
*/
|
|
55
|
-
var
|
|
60
|
+
var N;O.finalized=!0,O.elementProperties=new Map,O.elementStyles=[],O.shadowRootOptions={mode:"open"},null==x||x({ReactiveElement:O}),(null!==(v=globalThis.reactiveElementVersions)&&void 0!==v?v:globalThis.reactiveElementVersions=[]).push("1.3.4");const E=globalThis.trustedTypes,$=E?E.createPolicy("lit-html",{createHTML:t=>t}):void 0,C=`lit$${(Math.random()+"").slice(9)}$`,R="?"+C,S=`<${R}>`,M=document,U=(t="")=>M.createComment(t),k=t=>null===t||"object"!=typeof t&&"function"!=typeof t,T=Array.isArray,A=t=>T(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),F=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,L=/-->/g,_=/>/g,j=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),B=/'/g,I=/"/g,W=/^(?:script|style|textarea|title)$/i,K=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),D=Symbol.for("lit-noChange"),H=Symbol.for("lit-nothing"),P=new WeakMap,z=M.createTreeWalker(M,129,null,!1),Z=(t,e)=>{const i=t.length-1,s=[];let n,o=2===e?"<svg>":"",r=F;for(let e=0;e<i;e++){const i=t[e];let l,a,h=-1,c=0;for(;c<i.length&&(r.lastIndex=c,a=r.exec(i),null!==a);)c=r.lastIndex,r===F?"!--"===a[1]?r=L:void 0!==a[1]?r=_:void 0!==a[2]?(W.test(a[2])&&(n=RegExp("</"+a[2],"g")),r=j):void 0!==a[3]&&(r=j):r===j?">"===a[0]?(r=null!=n?n:F,h=-1):void 0===a[1]?h=-2:(h=r.lastIndex-a[2].length,l=a[1],r=void 0===a[3]?j:'"'===a[3]?I:B):r===I||r===B?r=j:r===L||r===_?r=F:(r=j,n=void 0);const d=r===j&&t[e+1].startsWith("/>")?" ":"";o+=r===F?i+S:h>=0?(s.push(l),i.slice(0,h)+"$lit$"+i.slice(h)+C+d):i+C+(-2===h?(s.push(void 0),e):d)}const l=o+(t[i]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==$?$.createHTML(l):l,s]};class J{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let n=0,o=0;const r=t.length-1,l=this.parts,[a,h]=Z(t,e);if(this.el=J.createElement(a,i),z.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(s=z.nextNode())&&l.length<r;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const e of s.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(C)){const i=h[o++];if(t.push(e),void 0!==i){const t=s.getAttribute(i.toLowerCase()+"$lit$").split(C),e=/([.?@])?(.*)/.exec(i);l.push({type:1,index:n,name:e[2],strings:t,ctor:"."===e[1]?Q:"?"===e[1]?tt:"@"===e[1]?et:G})}else l.push({type:6,index:n})}for(const e of t)s.removeAttribute(e)}if(W.test(s.tagName)){const t=s.textContent.split(C),e=t.length-1;if(e>0){s.textContent=E?E.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],U()),z.nextNode(),l.push({type:2,index:++n});s.append(t[e],U())}}}else if(8===s.nodeType)if(s.data===R)l.push({type:2,index:n});else{let t=-1;for(;-1!==(t=s.data.indexOf(C,t+1));)l.push({type:7,index:n}),t+=C.length-1}n++}}static createElement(t,e){const i=M.createElement("template");return i.innerHTML=t,i}}function V(t,e,i=t,s){var n,o,r,l;if(e===D)return e;let a=void 0!==s?null===(n=i._$Cl)||void 0===n?void 0:n[s]:i._$Cu;const h=k(e)?void 0:e._$litDirective$;return(null==a?void 0:a.constructor)!==h&&(null===(o=null==a?void 0:a._$AO)||void 0===o||o.call(a,!1),void 0===h?a=void 0:(a=new h(t),a._$AT(t,i,s)),void 0!==s?(null!==(r=(l=i)._$Cl)&&void 0!==r?r:l._$Cl=[])[s]=a:i._$Cu=a),void 0!==a&&(e=V(t,a._$AS(t,e.values),a,s)),e}class q{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:i},parts:s}=this._$AD,n=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:M).importNode(i,!0);z.currentNode=n;let o=z.nextNode(),r=0,l=0,a=s[0];for(;void 0!==a;){if(r===a.index){let e;2===a.type?e=new X(o,o.nextSibling,this,t):1===a.type?e=new a.ctor(o,a.name,a.strings,this,t):6===a.type&&(e=new it(o,this,t)),this.v.push(e),a=s[++l]}r!==(null==a?void 0:a.index)&&(o=z.nextNode(),r++)}return n}m(t){let e=0;for(const i of this.v)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class X{constructor(t,e,i,s){var n;this.type=2,this._$AH=H,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$C_=null===(n=null==s?void 0:s.isConnected)||void 0===n||n}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$C_}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=V(this,t,e),k(t)?t===H||null==t||""===t?(this._$AH!==H&&this._$AR(),this._$AH=H):t!==this._$AH&&t!==D&&this.T(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.k(t):A(t)?this.S(t):this.T(t)}j(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.j(t))}T(t){this._$AH!==H&&k(this._$AH)?this._$AA.nextSibling.data=t:this.k(M.createTextNode(t)),this._$AH=t}$(t){var e;const{values:i,_$litType$:s}=t,n="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=J.createElement(s.h,this.options)),s);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===n)this._$AH.m(i);else{const t=new q(n,this),e=t.p(this.options);t.m(i),this.k(e),this._$AH=t}}_$AC(t){let e=P.get(t.strings);return void 0===e&&P.set(t.strings,e=new J(t)),e}S(t){T(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const n of t)s===e.length?e.push(i=new X(this.j(U()),this.j(U()),this,this.options)):i=e[s],i._$AI(n),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$C_=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class G{constructor(t,e,i,s,n){this.type=1,this._$AH=H,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=H}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,s){const n=this.strings;let o=!1;if(void 0===n)t=V(this,t,e,0),o=!k(t)||t!==this._$AH&&t!==D,o&&(this._$AH=t);else{const s=t;let r,l;for(t=n[0],r=0;r<n.length-1;r++)l=V(this,s[i+r],e,r),l===D&&(l=this._$AH[r]),o||(o=!k(l)||l!==this._$AH[r]),l===H?t=H:t!==H&&(t+=(null!=l?l:"")+n[r+1]),this._$AH[r]=l}o&&!s&&this.P(t)}P(t){t===H?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class Q extends G{constructor(){super(...arguments),this.type=3}P(t){this.element[this.name]=t===H?void 0:t}}const Y=E?E.emptyScript:"";class tt extends G{constructor(){super(...arguments),this.type=4}P(t){t&&t!==H?this.element.setAttribute(this.name,Y):this.element.removeAttribute(this.name)}}class et extends G{constructor(t,e,i,s,n){super(t,e,i,s,n),this.type=5}_$AI(t,e=this){var i;if((t=null!==(i=V(this,t,e,0))&&void 0!==i?i:H)===D)return;const s=this._$AH,n=t===H&&s!==H||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,o=t!==H&&(s===H||n);n&&this.element.removeEventListener(this.name,this,s),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this._$AH.handleEvent(t)}}class it{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){V(this,t)}}const st={A:"$lit$",C,M:R,L:1,R:Z,V:q,D:A,I:V,H:X,N:G,U:tt,B:et,F:Q,W:it},nt=window.litHtmlPolyfillSupport;
|
|
56
61
|
/**
|
|
57
62
|
* @license
|
|
58
63
|
* Copyright 2017 Google LLC
|
|
59
64
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
60
65
|
*/
|
|
61
|
-
var
|
|
66
|
+
var ot,rt;null==nt||nt(J,X),(null!==(N=globalThis.litHtmlVersions)&&void 0!==N?N:globalThis.litHtmlVersions=[]).push("2.2.7");class lt extends O{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{var s,n;const o=null!==(s=null==i?void 0:i.renderBefore)&&void 0!==s?s:e;let r=o._$litPart$;if(void 0===r){const t=null!==(n=null==i?void 0:i.renderBefore)&&void 0!==n?n:null;o._$litPart$=r=new X(e.insertBefore(U(),t),t,void 0,null!=i?i:{})}return r._$AI(t),r})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return D}}lt.finalized=!0,lt._$litElement$=!0,null===(ot=globalThis.litElementHydrateSupport)||void 0===ot||ot.call(globalThis,{LitElement:lt});const at=globalThis.litElementPolyfillSupport;null==at||at({LitElement:lt}),(null!==(rt=globalThis.litElementVersions)&&void 0!==rt?rt:globalThis.litElementVersions=[]).push("3.2.2");class ht{static create(t,e,i){let s=t=>d(null!=t?t:i),n=u`var(${d(t)}, ${s(i)})`;return n.name=t,n.category=e,n.defaultValue=i,n.defaultCssValue=s,n.get=e=>u`var(${d(t)}, ${s(e)})`,n.breadcrumb=()=>[],n.lastResortDefaultValue=()=>i,n}static extend(t,e,i){let s=t=>e.get(null!=t?t:i),n=u`var(${d(t)}, ${s(i)})`;return n.name=t,n.category=e.category,n.fallbackVariable=e,n.defaultValue=i,n.defaultCssValue=s,n.get=e=>u`var(${d(t)}, ${s(e)})`,n.breadcrumb=()=>[e.name,...e.breadcrumb()],n.lastResortDefaultValue=()=>i,n}static external(t,e){let i=e=>t.fallbackVariable?t.fallbackVariable.get(null!=e?e:t.defaultValue):d(null!=e?e:t.defaultValue),s=u`var(${d(t.name)}, ${i(t.defaultValue)})`;return s.name=t.name,s.category=t.category,s.fallbackVariable=t.fallbackVariable,s.defaultValue=t.defaultValue,s.context=e,s.defaultCssValue=i,s.get=e=>u`var(${d(t.name)}, ${i(e)})`,s.breadcrumb=()=>t.fallbackVariable?[t.fallbackVariable.name,...t.fallbackVariable.breadcrumb()]:[],s.lastResortDefaultValue=()=>{var e,i;return null!==(e=t.defaultValue)&&void 0!==e?e:null===(i=t.fallbackVariable)||void 0===i?void 0:i.lastResortDefaultValue()},s}}ht.create("--ft-color-primary","COLOR","#2196F3"),ht.create("--ft-color-primary-variant","COLOR","#1976D2"),ht.create("--ft-color-secondary","COLOR","#FFCC80"),ht.create("--ft-color-secondary-variant","COLOR","#F57C00"),ht.create("--ft-color-surface","COLOR","#FFFFFF"),ht.create("--ft-color-content","COLOR","rgba(0, 0, 0, 0.87)"),ht.create("--ft-color-error","COLOR","#B00020"),ht.create("--ft-color-outline","COLOR","rgba(0, 0, 0, 0.14)"),ht.create("--ft-color-opacity-high","NUMBER","1"),ht.create("--ft-color-opacity-medium","NUMBER","0.74"),ht.create("--ft-color-opacity-disabled","NUMBER","0.38"),ht.create("--ft-color-on-primary","COLOR","#FFFFFF"),ht.create("--ft-color-on-primary-high","COLOR","#FFFFFF"),ht.create("--ft-color-on-primary-medium","COLOR","rgba(255, 255, 255, 0.74)"),ht.create("--ft-color-on-primary-disabled","COLOR","rgba(255, 255, 255, 0.38)"),ht.create("--ft-color-on-secondary","COLOR","#FFFFFF"),ht.create("--ft-color-on-secondary-high","COLOR","#FFFFFF"),ht.create("--ft-color-on-secondary-medium","COLOR","rgba(255, 255, 255, 0.74)"),ht.create("--ft-color-on-secondary-disabled","COLOR","rgba(255, 255, 255, 0.38)"),ht.create("--ft-color-on-surface","COLOR","rgba(0, 0, 0, 0.87)"),ht.create("--ft-color-on-surface-high","COLOR","rgba(0, 0, 0, 0.87)"),ht.create("--ft-color-on-surface-medium","COLOR","rgba(0, 0, 0, 0.60)"),ht.create("--ft-color-on-surface-disabled","COLOR","rgba(0, 0, 0, 0.38)"),ht.create("--ft-opacity-content-on-surface-disabled","NUMBER","0"),ht.create("--ft-opacity-content-on-surface-enable","NUMBER","0"),ht.create("--ft-opacity-content-on-surface-hover","NUMBER","0.04"),ht.create("--ft-opacity-content-on-surface-focused","NUMBER","0.12"),ht.create("--ft-opacity-content-on-surface-pressed","NUMBER","0.10"),ht.create("--ft-opacity-content-on-surface-selected","NUMBER","0.08"),ht.create("--ft-opacity-content-on-surface-dragged","NUMBER","0.08"),ht.create("--ft-opacity-primary-on-surface-disabled","NUMBER","0"),ht.create("--ft-opacity-primary-on-surface-enable","NUMBER","0"),ht.create("--ft-opacity-primary-on-surface-hover","NUMBER","0.04"),ht.create("--ft-opacity-primary-on-surface-focused","NUMBER","0.12"),ht.create("--ft-opacity-primary-on-surface-pressed","NUMBER","0.10"),ht.create("--ft-opacity-primary-on-surface-selected","NUMBER","0.08"),ht.create("--ft-opacity-primary-on-surface-dragged","NUMBER","0.08"),ht.create("--ft-opacity-surface-on-primary-disabled","NUMBER","0"),ht.create("--ft-opacity-surface-on-primary-enable","NUMBER","0"),ht.create("--ft-opacity-surface-on-primary-hover","NUMBER","0.04"),ht.create("--ft-opacity-surface-on-primary-focused","NUMBER","0.12"),ht.create("--ft-opacity-surface-on-primary-pressed","NUMBER","0.10"),ht.create("--ft-opacity-surface-on-primary-selected","NUMBER","0.08"),ht.create("--ft-opacity-surface-on-primary-dragged","NUMBER","0.08"),ht.create("--ft-elevation-00","UNKNOWN","0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0)"),ht.create("--ft-elevation-01","UNKNOWN","0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),ht.create("--ft-elevation-02","UNKNOWN","0px 4px 10px 0px rgba(0, 0, 0, 0.06), 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),ht.create("--ft-elevation-03","UNKNOWN","0px 6px 13px 0px rgba(0, 0, 0, 0.06), 0px 3px 7px 0px rgba(0, 0, 0, 0.14), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"),ht.create("--ft-elevation-04","UNKNOWN","0px 8px 16px 0px rgba(0, 0, 0, 0.06), 0px 4px 9px 0px rgba(0, 0, 0, 0.14), 0px 2px 3px 0px rgba(0, 0, 0, 0.06)"),ht.create("--ft-elevation-06","UNKNOWN","0px 12px 22px 0px rgba(0, 0, 0, 0.06), 0px 6px 13px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.06)"),ht.create("--ft-elevation-08","UNKNOWN","0px 16px 28px 0px rgba(0, 0, 0, 0.06), 0px 8px 17px 0px rgba(0, 0, 0, 0.14), 0px 6px 7px 0px rgba(0, 0, 0, 0.06)"),ht.create("--ft-elevation-12","UNKNOWN","0px 22px 40px 0px rgba(0, 0, 0, 0.06), 0px 12px 23px 0px rgba(0, 0, 0, 0.14), 0px 10px 11px 0px rgba(0, 0, 0, 0.06)"),ht.create("--ft-elevation-16","UNKNOWN","0px 28px 52px 0px rgba(0, 0, 0, 0.06), 0px 16px 29px 0px rgba(0, 0, 0, 0.14), 0px 14px 15px 0px rgba(0, 0, 0, 0.06)"),ht.create("--ft-elevation-24","UNKNOWN","0px 40px 76px 0px rgba(0, 0, 0, 0.06), 0px 24px 41px 0px rgba(0, 0, 0, 0.14), 0px 22px 23px 0px rgba(0, 0, 0, 0.06)"),ht.create("--ft-border-radius-S","SIZE","4px"),ht.create("--ft-border-radius-M","SIZE","8px"),ht.create("--ft-border-radius-L","SIZE","12px"),ht.create("--ft-border-radius-XL","SIZE","16px"),ht.create("--ft-title-font","UNKNOWN","Ubuntu, system-ui, sans-serif"),ht.create("--ft-content-font","UNKNOWN","'Open Sans', system-ui, sans-serif"),ht.create("--ft-transition-duration","UNKNOWN","250ms"),ht.create("--ft-transition-timing-function","UNKNOWN","ease-in-out");var ct,dt,ut,pt=function(t,e,i,s){for(var n,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(e,i,r):n(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};class ft extends(
|
|
62
67
|
/**
|
|
63
68
|
* @license
|
|
64
69
|
* Copyright 2021 Google LLC
|
|
65
70
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
66
71
|
*/
|
|
67
|
-
function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:
|
|
68
|
-
${t.map((t=>
|
|
72
|
+
function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:e,elementDefinitions:i,shadowRootOptions:s}=t;i&&!e&&(t.registry=new CustomElementRegistry,Object.entries(i).forEach((([e,i])=>t.registry.define(e,i))));const n=this.renderOptions.creationScope=this.attachShadow({...s,customElements:t.registry});return p(n,this.constructor.elementStyles),n}}}(lt)){getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),K`
|
|
73
|
+
${t.map((t=>K`
|
|
69
74
|
<style>${t}</style>
|
|
70
75
|
`))}
|
|
71
76
|
${this.getTemplate()}
|
|
72
|
-
`}updated(t){super.updated(t),setTimeout((()=>{var
|
|
77
|
+
`}updated(t){super.updated(t),setTimeout((()=>{var e;this.contentAvailableCallback(t),(null===(e=this.exportpartsPrefix)||void 0===e?void 0:e.trim())?this.setExportpartsAttribute([this.exportpartsPrefix]):null!=this.exportpartsPrefixes&&this.exportpartsPrefixes.length>0&&this.setExportpartsAttribute(this.exportpartsPrefixes)}),0)}setExportpartsAttribute(t){var e,i,s,n,o,r;const l=t=>null!=t&&t.trim().length>0,a=t.filter(l).map((t=>t.trim()));if(0===a.length)return void this.removeAttribute("exportparts");const h=new Set;for(let t of null!==(i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelectorAll("[part],[exportparts]"))&&void 0!==i?i:[]){const e=null!==(n=null===(s=t.getAttribute("part"))||void 0===s?void 0:s.split(" "))&&void 0!==n?n:[],i=null!==(r=null===(o=t.getAttribute("exportparts"))||void 0===o?void 0:o.split(",").map((t=>t.split(":")[1])))&&void 0!==r?r:[];new Array(...e,...i).filter(l).map((t=>t.trim())).forEach((t=>h.add(t)))}if(0===h.size)return void this.removeAttribute("exportparts");const c=[...h.values()].flatMap((t=>a.map((e=>`${t}:${e}--${t}`))));this.setAttribute("exportparts",[...this.part,...c].join(", "))}contentAvailableCallback(t){}}pt([s()],ft.prototype,"exportpartsPrefix",void 0),pt([function(t,e){const i=()=>JSON.parse(JSON.stringify(t));return s({type:Object,converter:{fromAttribute:t=>{if(null==t)return i();try{return JSON.parse(t)}catch{return i()}},toAttribute:t=>JSON.stringify(t)},...null!=e?e:{}})}([])],ft.prototype,"exportpartsPrefixes",void 0),u`
|
|
73
78
|
.ft-no-text-select {
|
|
74
79
|
-webkit-touch-callout: none;
|
|
75
80
|
-webkit-user-select: none;
|
|
@@ -78,17 +83,17 @@ function(t){return class extends t{createRenderRoot(){const t=this.constructor,{
|
|
|
78
83
|
-ms-user-select: none;
|
|
79
84
|
user-select: none;
|
|
80
85
|
}
|
|
81
|
-
`;const
|
|
86
|
+
`;const vt=navigator.vendor&&!!navigator.vendor.match(/apple/i)||"[object SafariRemoteNotification]"===(null!==(ut=null===(dt=null===(ct=window.safari)||void 0===ct?void 0:ct.pushNotification)||void 0===dt?void 0:dt.toString())&&void 0!==ut?ut:""),bt=2,mt=t=>(...e)=>({_$litDirective$:t,values:e});
|
|
82
87
|
/**
|
|
83
88
|
* @license
|
|
84
89
|
* Copyright 2017 Google LLC
|
|
85
90
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
86
|
-
*/class
|
|
91
|
+
*/class xt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
|
|
87
92
|
/**
|
|
88
93
|
* @license
|
|
89
94
|
* Copyright 2020 Google LLC
|
|
90
95
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
91
|
-
*/const{H:
|
|
96
|
+
*/const{H:gt}=st,wt=()=>document.createComment(""),yt=(t,e,i)=>{var s;const n=t._$AA.parentNode,o=void 0===e?t._$AB:e._$AA;if(void 0===i){const e=n.insertBefore(wt(),o),s=n.insertBefore(wt(),o);i=new gt(e,s,t,t.options)}else{const e=i._$AB.nextSibling,r=i._$AM,l=r!==t;if(l){let e;null===(s=i._$AQ)||void 0===s||s.call(i,t),i._$AM=t,void 0!==i._$AP&&(e=t._$AU)!==r._$AU&&i._$AP(e)}if(e!==o||l){let t=i._$AA;for(;t!==e;){const e=t.nextSibling;n.insertBefore(t,o),t=e}}}return i},Ot=(t,e,i=t)=>(t._$AI(e,i),t),Nt={},Et=t=>{var e;null===(e=t._$AP)||void 0===e||e.call(t,!1,!0);let i=t._$AA;const s=t._$AB.nextSibling;for(;i!==s;){const t=i.nextSibling;i.remove(),i=t}},$t=(t,e,i)=>{const s=new Map;for(let n=e;n<=i;n++)s.set(t[n],n);return s},Ct=mt(class extends xt{constructor(t){if(super(t),t.type!==bt)throw Error("repeat() can only be used in text expressions")}ht(t,e,i){let s;void 0===i?i=e:void 0!==e&&(s=e);const n=[],o=[];let r=0;for(const e of t)n[r]=s?s(e,r):r,o[r]=i(e,r),r++;return{values:o,keys:n}}render(t,e,i){return this.ht(t,e,i).values}update(t,[e,i,s]){var n;const o=(t=>t._$AH)(t),{values:r,keys:l}=this.ht(e,i,s);if(!Array.isArray(o))return this.ut=l,r;const a=null!==(n=this.ut)&&void 0!==n?n:this.ut=[],h=[];let c,d,u=0,p=o.length-1,f=0,v=r.length-1;for(;u<=p&&f<=v;)if(null===o[u])u++;else if(null===o[p])p--;else if(a[u]===l[f])h[f]=Ot(o[u],r[f]),u++,f++;else if(a[p]===l[v])h[v]=Ot(o[p],r[v]),p--,v--;else if(a[u]===l[v])h[v]=Ot(o[u],r[v]),yt(t,h[v+1],o[u]),u++,v--;else if(a[p]===l[f])h[f]=Ot(o[p],r[f]),yt(t,o[u],o[p]),p--,f++;else if(void 0===c&&(c=$t(l,f,v),d=$t(a,u,p)),c.has(a[u]))if(c.has(a[p])){const e=d.get(l[f]),i=void 0!==e?o[e]:null;if(null===i){const e=yt(t,o[u]);Ot(e,r[f]),h[f]=e}else h[f]=Ot(i,r[f]),yt(t,o[u],i),o[e]=null;f++}else Et(o[p]),p--;else Et(o[u]),u++;for(;f<=v;){const e=yt(t,h[v+1]);Ot(e,r[f]),h[f++]=e}for(;u<=p;){const t=o[u++];null!==t&&Et(t)}return this.ut=l,((t,e=Nt)=>{t._$AH=e})(t,h),D}});
|
|
92
97
|
/**
|
|
93
98
|
* @license
|
|
94
99
|
* Copyright 2017 Google LLC
|
|
@@ -99,42 +104,51 @@ function(t){return class extends t{createRenderRoot(){const t=this.constructor,{
|
|
|
99
104
|
* Copyright 2017 Google LLC
|
|
100
105
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
101
106
|
*/
|
|
102
|
-
class Rt extends
|
|
103
|
-
<div class="scrollable"
|
|
104
|
-
|
|
107
|
+
class Rt extends xt{constructor(t){if(super(t),this.it=H,t.type!==bt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===H||null==t)return this._t=void 0,this.it=t;if(t===D)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}Rt.directiveName="unsafeHTML",Rt.resultType=1;const St=mt(Rt);var Mt=function(t,e,i,s){for(var n,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(e,i,r):n(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};const Ut={padding:ht.create("--ft-infinite-scroll-padding","SIZE","0")};class kt extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class Tt extends Event{constructor(){super("scrolled-to-target")}}class At extends ft{constructor(){super(...arguments),this.items=[],this.renderItem=()=>K``,this.internalScroll=!1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e(5),this.onVisibilityChange=t=>{const e=t.filter((t=>t.intersectionRect.height>1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>!this.visibleItems.includes(t))),i=t.filter((t=>t.intersectionRect.height<=1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>this.visibleItems.includes(t))),s=[...this.visibleItems].filter((t=>!i.includes(t)));this.visibleItems=[...e,...s].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{this.triggerFindScrollableParent();let e=0;t=t.sort(((t,e)=>t.contentRect.top-e.contentRect.top));for(const i of t){const t=+i.target.parentElement.getAttribute("data-item-index"),s=i.target.parentElement.clientHeight,n=i.contentRect.height;this.alreadyRenderedIndexes.has(t)&&(i.target.parentElement.style.height=n+"px",e+=this.scrollable&&this.getOffset(i.target.parentElement)<this.scrollable.scrollTop+e?n-s:0)}this.scrollable&&vt&&(this.scrollable.scrollTop+=e)},this.resizeObserver=new ResizeObserver(this.onResize),this.onMutation=()=>{[...this.itemsContainer.children].forEach((t=>{this.intersectionObserver.observe(t),this.resizeObserver.observe(t.children.item(0))}))},this.mutationObserver=new MutationObserver(this.onMutation)}get scrollable(){return this.internalScroll?this.internalScrollable:this.firstScrollableParent}render(){return K`
|
|
108
|
+
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
109
|
+
tabindex="-1"
|
|
110
|
+
@find-scrollable-parent=${this.findScrollableParent}>
|
|
111
|
+
${Ct(this.items,((t,e)=>this.renderItemContainer(t,e)))}
|
|
105
112
|
</div>
|
|
106
|
-
`}renderItemContainer(t,
|
|
107
|
-
<div id="item-${
|
|
113
|
+
`}renderItemContainer(t,e){const i=this.scrolledToTarget&&this.visibleItems.includes(e),s=this.alreadyRenderedIndexes.has(e)||this.scrolledToTarget&&e>=this.visibleItems[0]-1&&e<=(null!=(n=this.visibleItems)?n:[])[(null!=n?n:[]).length-1]+1;var n;s&&this.alreadyRenderedIndexes.add(e);return K`
|
|
114
|
+
<div id="item-${e}"
|
|
108
115
|
class="item-container"
|
|
109
|
-
data-item-index="${
|
|
110
|
-
<div class="resizable ${
|
|
111
|
-
${
|
|
116
|
+
data-item-index="${e}">
|
|
117
|
+
<div class="resizable ${i?"visible":""} ${s?"rendered":""}">
|
|
118
|
+
${s?(()=>{const i=this.renderItem(t,e);return"string"==typeof i?K`${St(i)}`:i})():null}
|
|
112
119
|
</div>
|
|
113
120
|
</div>
|
|
114
|
-
`}resetScroll(){
|
|
121
|
+
`}resetScroll(){this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t,e;let i=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;i>=this.items.length&&(i=-1);let s=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${i}`);this.scrollToTarget(s),this.onMutation(),setTimeout((()=>{this.scrolledToTarget=!0}),10)}))}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable?this.scrollable.scrollTop=i>0?this.getOffset(t)+1:0:t.scrollIntoView({block:"start"})}}getOffset(t){var e;let i=0,s=t;for(;s&&s.offsetParent!==this.scrollable.offsetParent;)i+=s.offsetTop,s=s.offsetParent;return i+(null!==(e=null==s?void 0:s.offsetTop)&&void 0!==e?e:0)-this.scrollable.offsetTop}appendItems(...t){this.items=[...this.items,...t]}prependItems(...t){this.items=[...t,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{rootMargin:"-2px",threshold:[0,.01,.1]}),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}triggerFindScrollableParent(){this.itemsContainer.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){t.stopPropagation();for(let e of t.composedPath()){const t=e;if(t.clientHeight&&t.clientHeight<t.scrollHeight&&["auto","scroll"].includes(getComputedStyle(t).overflowY)){this.firstScrollableParent=t;break}}}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.resetScroll()}update(t){super.update(t),t.has("items")&&(this.alreadyRenderedIndexes=new Set),(t.has("scrollToItem")||t.has("scrollToIndex"))&&this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new kt(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&this.dispatchEvent(new Tt)}}var Ft;At.styles=u`
|
|
122
|
+
.items-container {
|
|
123
|
+
position: relative;
|
|
124
|
+
padding: ${Ut.padding};
|
|
125
|
+
outline: none;
|
|
126
|
+
}
|
|
127
|
+
|
|
115
128
|
.scrollable {
|
|
116
129
|
height: 100%;
|
|
117
130
|
overflow-y: auto;
|
|
118
|
-
position: relative;
|
|
119
|
-
padding: ${St.padding};
|
|
120
|
-
outline: none;
|
|
121
131
|
}
|
|
122
132
|
|
|
123
133
|
.item-container {
|
|
124
|
-
height:
|
|
134
|
+
height: 100vh;
|
|
125
135
|
}
|
|
126
136
|
|
|
127
|
-
.
|
|
128
|
-
|
|
137
|
+
.item-container + .item-container {
|
|
138
|
+
/*
|
|
139
|
+
We add a gap between items to be sure to hide the content above the targeted item
|
|
140
|
+
When a div is visible (even by a fraction of a pixel) if its height changes
|
|
141
|
+
the browser will try to keep the scroll stable in relation to the first visible element
|
|
142
|
+
By adding this gap we ensure that the previous item will be fully hidden and event if its size changes, it will not impact the scroll offset
|
|
143
|
+
*/
|
|
144
|
+
margin-top: 4px;
|
|
129
145
|
}
|
|
130
146
|
|
|
131
|
-
.
|
|
132
|
-
|
|
147
|
+
.scrollable .item-container {
|
|
148
|
+
height: 100%;
|
|
133
149
|
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
*/
|
|
140
|
-
function(t,i){return(({finisher:t,descriptor:i})=>(e,s)=>{var n;if(void 0===s){const s=null!==(n=e.originalKey)&&void 0!==n?n:e.key,o=null!=i?{kind:"method",placement:"prototype",key:s,descriptor:i(e.key)}:{...e,key:s};return null!=t&&(o.finisher=function(i){t(i,s)}),o}{const n=e.constructor;void 0!==i&&Object.defineProperty(e,s,i(s)),null==t||t(n,s)}})({descriptor:e=>{const s={get(){var i,e;return null!==(e=null===(i=this.renderRoot)||void 0===i?void 0:i.querySelector(t))&&void 0!==e?e:null},enumerable:!0,configurable:!0};if(i){const i="symbol"==typeof e?Symbol():"__"+e;s.get=function(){var e,s;return void 0===this[i]&&(this[i]=null!==(s=null===(e=this.renderRoot)||void 0===e?void 0:e.querySelector(t))&&void 0!==s?s:null),this[i]}}return s}})}(".scrollable")],Ut.prototype,"scrollable",void 0),Ct([s()],Ut.prototype,"scrolledToTarget",void 0),(kt="ft-infinite-scroll",t=>{window.customElements.get(kt)||window.customElements.define(kt,t)})(Ut),t.FtInfiniteScroll=Ut,t.FtInfiniteScrollCssVariables=St,t.VisibleItemsChangeEvent=Mt,Object.defineProperty(t,"i",{value:!0})}({});
|
|
150
|
+
|
|
151
|
+
.resizable:not(.rendered) {
|
|
152
|
+
width: 0;
|
|
153
|
+
}
|
|
154
|
+
`,Mt([s({type:Array})],At.prototype,"items",void 0),Mt([s({attribute:!1})],At.prototype,"renderItem",void 0),Mt([s({type:Object})],At.prototype,"scrollToItem",void 0),Mt([s({type:Number})],At.prototype,"scrollToIndex",void 0),Mt([s({type:Boolean})],At.prototype,"internalScroll",void 0),Mt([n({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],At.prototype,"visibleItems",void 0),Mt([o(".scrollable")],At.prototype,"internalScrollable",void 0),Mt([o(".items-container")],At.prototype,"itemsContainer",void 0),Mt([n()],At.prototype,"scrolledToTarget",void 0),(Ft="ft-infinite-scroll",t=>{window.customElements.get(Ft)||window.customElements.define(Ft,t)})(At),t.FtInfiniteScroll=At,t.FtInfiniteScrollCssVariables=Ut,t.ScrolledToTargetEvent=Tt,t.VisibleItemsChangeEvent=kt,Object.defineProperty(t,"i",{value:!0})}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-infinite-scroll",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.8",
|
|
4
4
|
"description": "An infinite scroller.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-wc-utils": "0.3.
|
|
22
|
+
"@fluid-topics/ft-wc-utils": "0.3.8",
|
|
23
23
|
"lit": "2.2.8"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "1f42b53be98492f7b9c614f005535bdacc0229a1"
|
|
26
26
|
}
|